Fixing Blueprint CSS 0.7.1

Posted on Monday 23rd March, 2009 by Gareth J M Saunders

Blueprint CSS

Note: Updated Tuesday 24 March 2009 @ 10:00

Blueprint CSS is a CSS framework. The latest version is v.0.8 but a lot of people are still using version 0.7.1, even though there are a number of irregularities in it.

So, this evening I’ve been sifting through the Blueprint CSS version 0.7.1 code and making a few corrections. The bulk of irregularities can be found in the source code (within the /blueprint/src/ folder) and not in the release code (/blueprint/screen.css) but these source files can be very useful so should really be fixed. There is also one error in the ie.css file in both the source and release code.

There may well be other edits, corrections or enhancements that could be made, but these are the obvious ones that I’ve spotted. Note that all line numbers refer to the original, unedited code’s line numbers, i.e. the code in version 0.7.1.

Copy everything

Rather than making changes to the original code, I created a copy of the Blueprint CSS 0.7.1 folder and imaginatively called it Blueprint CSS 0.7.2.

Edit #1: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .pull-6 to .pull-24 are missing from grid.css.

The solution: Replace the following lines of code:

145
146
147
148
149
150
151
152
153
154
155

.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
 
.pull-1, .pull-2, .pull-3,
.pull-4, .pull-5, .pull-5 {
  float:left;
  position:relative;
}

with this code:

145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

.pull-1 {margin-left:-40px;}
.pull-2 {margin-left:-80px;}
.pull-3 {margin-left:-120px;}
.pull-4 {margin-left:-160px;}
.pull-5 {margin-left:-200px;}
.pull-6 {margin-left:-240px;}
.pull-7 {margin-left:-280px;}
.pull-8 {margin-left:-320px;}
.pull-9 {margin-left:-360px;}
.pull-10 {margin-left:-400px;}
.pull-11 {margin-left:-440px;}
.pull-12 {margin-left:-480px;}
.pull-13 {margin-left:-520px;}
.pull-14 {margin-left:-560px;}
.pull-15 {margin-left:-600px;}
.pull-16 {margin-left:-640px;}
.pull-17 {margin-left:-680px;}
.pull-18 {margin-left:-720px;}
.pull-19 {margin-left:-760px;}
.pull-20 {margin-left:-800px;}
.pull-21 {margin-left:-840px;}
.pull-22 {margin-left:-880px;}
.pull-23 {margin-left:-920px;}
.pull-24 {margin-left:-960px;}
 
.pull-1, .pull-2, .pull-3,
.pull-4, .pull-5, .pull-6,
.pull-7, .pull-8, .pull-9,
.pull-10, .pull-11, .pull-12,
.pull-13, .pull-14, .pull-15,
.pull-16, .pull-17, .pull-18,
.pull-19, .pull-20, .pull-21,
.pull-22, .pull-23, .pull-24 {
  float:left;
  position:relative;
 }

Edit #2: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .push-6 to .push-24 are missing from grid.css.

The solution: Replace the following lines of code:

157
158
159
160
161
162
163
164
165
166
167

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
 
.push-0, .push-1, .push-2,
.push-3, .push-4, .push-5 {
  float: right;
	position:relative;
}

with this code:

157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 {margin:0 -240px 1.5em 240px;}
.push-7 {margin:0 -280px 1.5em 280px;}
.push-8 {margin:0 -320px 1.5em 320px;}
.push-9 {margin:0 -360px 1.5em 360px;}
.push-10 {margin:0 -400px 1.5em 400px;}
.push-11 {margin:0 -440px 1.5em 440px;}
.push-12 {margin:0 -480px 1.5em 480px;}
.push-13 {margin:0 -520px 1.5em 520px;}
.push-14 {margin:0 -560px 1.5em 560px;}
.push-15 {margin:0 -600px 1.5em 600px;}
.push-16 {margin:0 -640px 1.5em 640px;}
.push-17 {margin:0 -680px 1.5em 680px;}
.push-18 {margin:0 -720px 1.5em 720px;}
.push-19 {margin:0 -760px 1.5em 760px;}
.push-20 {margin:0 -800px 1.5em 800px;}
.push-21 {margin:0 -840px 1.5em 840px;}
.push-22 {margin:0 -880px 1.5em 880px;}
.push-23 {margin:0 -920px 1.5em 920px;}
.push-24 {margin:0 -960px 1.5em 960px;}
 
.push-1, .push-2, .push-3,
.push-4, .push-5, .push-6,
.push-7, .push-8, .push-9,
.push-10, .push-11, .push-12,
.push-13, .push-14, .push-15,
.push-16, .push-17, .push-18,
.push-19, .push-20, .push-21,
.push-22, .push-23, .push-24 {
  float:right;
  position:relative;
}

Edit #3: /blueprint/src/typography.css

The problem: the .left class has been omitted, which can cause unexpected results.

The solution: Replace the following lines of code:

40

p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

with this code:

40

p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

Edit #4: /blueprint/screen.css

The problem: As above, the .left class has been omitted, which can cause unexpected results. Do exactly the same in the release code, i.e.

The solution: Replace the following lines of code:

34

p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

with this code:

34

p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

Edit #5: /blueprint/src/typography.css

The problem: the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line. (Thanks to Steve Yorkstone for spotting this one.)

The solution: Replace the following lines of code:

26

h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; }

with this code:

26

h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em;}

Edit #6: /blueprint/screen.css

The problem: As above, the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line.

The solution: Replace the following lines of code:

29

h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}

with this code:

29

h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}

Edit #7: /blueprint/src/ie.css

The problem: Legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column.

The solution: Replace the following lines of code:

15

* html .column { overflow-x: hidden; }

with this code:

15
16
17
18
19
20
21
22
23
24
25
26
27
28

* html div.span-1, * html div.span-2,
* html div.span-3, * html div.span-4,
* html div.span-5, * html div.span-6,
* html div.span-7, * html div.span-8,
* html div.span-9, * html div.span-10,
* html div.span-11, * html div.span-12,
* html div.span-13, * html div.span-14,
* html div.span-15, * html div.span-16,
* html div.span-17, * html div.span-18,
* html div.span-19, * html div.span-20,
* html div.span-21, * html div.span-22,
* html div.span-23, * html div.span-24 {
  overflow-x:hidden;
}

Edit #8: /blueprint/ie.css

The problem: As above, legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column. Do exactly the same with the release code, i.e.:

The solution: Replace the following lines of code:

16

* html .column { overflow-x: hidden; }

with this code:

16
17
18
19
20
21
22
23
24
25
26
27
28
29

* html div.span-1, * html div.span-2,
* html div.span-3, * html div.span-4,
* html div.span-5, * html div.span-6,
* html div.span-7, * html div.span-8,
* html div.span-9, * html div.span-10,
* html div.span-11, * html div.span-12,
* html div.span-13, * html div.span-14,
* html div.span-15, * html div.span-16,
* html div.span-17, * html div.span-18,
* html div.span-19, * html div.span-20,
* html div.span-21, * html div.span-22,
* html div.span-23, * html div.span-24 {
  overflow-x:hidden;
}

Changelog

The last thing I do is update the changelog file to record the edits made, and change the version number in screen.css to 0.7.2 so that I know that this is my updated version.

I hope that helps someone.

Updates to version 0.8

I’ll blog later about things I’ve spotted need fixing in version 0.8.

Posted in Web | Tagged , , | Leave a comment

Custom labels for removable drives

Posted on Friday 20th March, 2009 by Gareth J M Saunders

Registry Editor

I found a great tip in PC Plus this month (April 2009 edition) in an article about Registry hacks that allows you to give meaningful names to your removable drives in Windows; (UPDATED 10 January 2010) I’ve tried it with both Windows XP and Windows 7, so on those grounds I would imagine that it should also work with Windows Vista.

The issue

I’ve got a SanDisk multi-card reader attached to my PC via USB, and by default it displays four Removable Disk icons in My Computer with the generic label “Removable Disk (X:)” where X is the letter assigned to the drive.

Devices with Removable Storage

The problem is that I can never remember which drive is which. Is Q: for SD cards? Which drive is assigned to Compact Flash cards?

This Registry hack allows you to customize the label.

The hack

  1. Make sure you create a System Restore point before you start, just in case!
  2. Start RegEdit (Start > Run…, type regedit, click OK)
  3. Navigate to HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ Windows \ CurrentVersion \ Explorer
  4. Within the Explorer key create a new key called DriveIcons
  5. Within that create a new key with the drive letter you want to customize, e.g. Q
  6. Within that create a new key called DefaultLabel
  7. Double-click this key’s (Default) value entry and give it the name you want, e.g. Compact Flash, and click OK
  8. Refresh your Explorer window to see the change.
  9. Repeat for as many removable drives as you need to customize.

Devices with Removable Storage, and customized labels

Now that’s much easier.

.reg file

Of course, if you don’t fancy poking around in the Windows Registry you can create a plain text file in Notepad (or another plain text editor) and create the settings there. An example file is below.

Simply change the letters of the DriveIcons and the @ values.

Then save the file as driveicons.reg, and double-click it to merge the values into the Registry.

Then remember to press F5 to refresh your Explorer window to see the changes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Windows Registry Editor Version 5.00
 
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons]
 
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons\Q]
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons\Q\DefaultLabel]
@="Compact Flash"
 
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons\R]
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons\R\DefaultLabel]
@="xD Picture Card"
 
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons\S]
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons\S\DefaultLabel]
@="Secure Digital"
 
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons\T]
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons\T\DefaultLabel]
@="Sony Memory Stick"
Posted in Computer | Tagged , , | Leave a comment

PsiWin 2.3.3 under Windows 7 Ultimate

Posted on Tuesday 10th March, 2009 by Gareth J M Saunders

Windows 7 Ultimate running PsiWin 2.3.3

Let’s hear it for Psion. Not only did they make first class PDAs, which still have a massive community of user going nuts over, but their PC connectivity software PsiWin — which they stopped developing at version 2.3.3 (copyright 1997-2001) — still works perfectly even under the beta version of Windows 7 Ultimate edition.

Posted in Psion | Tagged , , , | 10 Comments

Wikipedia names your band

Posted on Thursday 5th March, 2009 by Gareth J M Saunders

What a great meme, spotted on Ricky Carvel’s blog: Wikipedia names your band.

Here are the rules:

  1. Band name
    Go to a random Wikipedia article. The name of the article becomes your band name.

  2. Album title
    Next go to Random Quotations. The last 4-5 words of the last quotation on the page are your the title of your first album.

  3. Album cover
    Now go to Flickr’s Explore the last 7 days and choose the third picture. This will be your album cover.

  4. Final article
    Finally put them all together and you have an album cover.

I’ve just done it three times. I think I’ve found my new hobby!

Earl of Sefton Stakes – “Can’t hear what they say?”

Earl of Sefton Stakes
Photo credit: liao,che-yi

This is the first one I created. It was a bit too disturbing, so I signed to another record label, changed the name of the band and ended up with our new album …

Vydra – “Men just need a place”

Vydra
Photo credit: *ailicec*

Vydra did really well, reaching number 51 in the alternative rock charts. The NME said that we were quite literally “a peg above the rest” but disaster struck when the drummer left to start his own laundry business.

But not one to stay down I found another bass player, changed our name once again, and released …

Akreavenek Island – “Affirmatively says nothing”

Akreavenek Island
Photo credit: Rock the pixel

Akreavenek Island are your typical rock/metal crossover act, somewhere between Sigur Rós and Rammstein meets Extreme Noise Terror and Celine Dion. We cover mostly ballads. But with more shouting and white noise than the originals. Available now in no good record stores.

Posted in Music | Tagged , , | 3 Comments

Blueprint CSS framework v.0.8 cheatsheet

Posted on Friday 27th February, 2009 by Gareth J M Saunders

Blueprint CSS cheatsheet

I’ve updated my cheatsheet for the Blueprint CSS framework (version 0.7.1) as well as create a new one for the latest version of the Blueprint CSS framework (version 0.8). They can both be downloaded from Scribd.com:

Posted in Web | Tagged , , | 2 Comments

You have to put oil in the hot, noisy bit!

Posted on Wednesday 25th February, 2009 by Gareth J M Saunders

Engine part

Last Thursday — almost a week ago now — I’d booked the day off work so that we could drive across to Perth to meet up with our dear friends from our Inverness days, Andrew and Lindsay Howie, to catch up with them and meet their twins (a boy and girl … and no, not identical!) as they were heading north again.

The plan

What could have been more simple? The plan was to feed Reuben and Joshua at 11:00, load them into the car and drive to Perth via Dundee. They sleep well in the car, so it was a failsafe plan. Until we got into the car that is.

Jane has a Renault Mégane Sport Tourer (an estate car by any other name). It’s a nice car. It’s comfortable. And as we’ve discovered now three times within a month it has dodgy windows!

When I climbed into the drivers seat I noticed that the window was down. So I pressed the button.

Nothing.

Hmm…

I started the engine and pressed the button again.

Again nothing.

Plan B

Fifteen minutes later I was following Jane, who was driving my car (Vauxhall Astra, with fully working windows), to Dundee for an appointment with the Renault Minute garage. While they couldn’t fix it that day they said that we could leave the car with them, they’d secure it and replace the faulty window part in the morning. At a cost of £281.

They didn’t say that. We already knew. The front passenger’s window had done exactly the same thing two weeks previously.

Spoken too soon

About twenty five minutes after depositing the car in Dundee Jane and I were discussing cars, pondering about whether we should sell both cars and buy a new one, returning to being a one-car family.

“We should get a Vauxhall,” said Jane.

“Yeah,” I agreed. “This has done, what, 92,000 miles and it’s great.”

“We’ve not had a single problem with this car,” Jane pondered.

Not less than a minute later not one but two warning lights lit up on the dashboard: the engine electronics/immobilizer warning light and the low oil warning light.

To cut a long story short

It turns out that every now and then you have to put something called ‘oil’ into the hot, noisy bit at the front of a car. Ahem!

Having arrived at our rendezvous (Dobbies Garden Centre just outside Perth) I checked the oil level with the dipstick.

There was no level! Maybe I was the dipstick!

And to think that just the other week I’d thought to myself: I wonder if I need to check the oil level.

Another irony was that in order to get the boys’ pram into the car we had to remove my Big Boy’s Box of Interesting Car Maintenance Bits and Pieces, which included a two litre bottle of Castrol oil.

“We don’t need this box do we?” asked Jane, removing it from the boot of the car.

“Nah! We’ll be fine,” I foolishly reassured her.

So, having purchased a new two litre bottle of oil (10W-40 or something) I emptied half of it into the engine. Result! The dipstick was now showing that I’d reached just below the minimum line. Pouring the rest of the oil brought the oil level on the dipstick up to just above midway between the minimum and maximum. Phew!

And do you know what? The engine hasn’t sounded or felt better for months. Funny that!

Windows 3

The following day Jane got a lift up to Dundee to collect the car and hand over another £281 for a repaired window.

And this morning Jane returned from coffee with a friend to discover that it had done it again! The driver’s door window again.

The trial continues …

Posted in Family | Tagged , | 1 Comment

Getting the WP-Syntax plug-in to work in WordPress 2.0.x

Posted on Saturday 21st February, 2009 by Gareth J M Saunders

Plugin
Vintage socket photo by porah

I was looking for a WordPress plugin for code syntax highlighting that would work in the legacy WordPress 2.0 branch and discovered WP-Syntax which promised to do the trick.

The system requirements say

  • Requires WordPress Version: 2.0 or higher
  • Compatible up to: 2.7

Except that when installed on a WordPress 2.0.11 installation it threw up an error:

Fatal error: Call to undefined function do_action_ref_array() in \blog\wp-content\plugins\wp-syntax\wp-syntax.php on line 106

Tweaking required

It looks like that plugin doesn’t work in WordPress 2.0.x without a little tweaking. The exceptional WordPress Codex came to the rescue — if only all content management system documentation was that good.

This function is identical to do_action

So I tweaked the code and removed:

106

do_action_ref_array('wp_syntax_init_geshi', array(&$geshi));

and replaced it with

106

do_action('wp_syntax_init_geshi', array(&$geshi));

and lo and behold it worked!

Posted in Web | Tagged , , | 2 Comments