So you’ve just finished upgrading, everything went smooth and you now have some time to amend the core of WordPress to accommodate for the hacks and workarounds you have implemented over the time. You have styled, laid out and customised your comments, you have changed the default size of Gravatar, Avatar or any other user pictures you display only to find them going back to default (32px × 32px) as soon as you upgrade.

Worry not! In order to change it back to what it was, head to: “wp-includes/comment-template”, locate line #1322 (function wp_list_comments()) and change the defaults array value (“avatar_size”) from 32 to anything you like (we use 50px), so the result will read:

$defaults = array('walker' => null, 'max_depth' => '', 'style' => 'ul', 'callback' => null, 'end-callback' => null, 'type' => 'all',
'page' => '', 'per_page' => '', 'avatar_size' => 50, 'reverse_top_level' => null, 'reverse_children' => '');

And zet is zit. Save and refresh your comments page and enjoy, your user icons and images are exactly big (or small) as intended.

Helpful? Drop me a line here.

Original design

We’re working with a brilliant young designer Jay Murray, who’s contribution to the project is priceless. He came up with the following design:

Three challenges there:

• awesome headings that carry the logo design (shape and colours) throughout the site – turn them into flexible width as DocuView isn’t and won’t be using fixed layout
• the same with subheadings and smaller sections
• apply the background to menu items and turn them into 3Dish tabs (resembling filing folder – we are dealing with a document management system here after all

Sliding doors with transparent background (CSS) – headings + wrapper

We’re using PNGs throughout the system, no hacks and workarounds for IE6 (yet – although not quite sure that in these days we should still care and optimise – probably an article on its own for the future). The issue here is we have a background applied to the “container” div and the heading is on top of the background and we want to keep the transparency.

I had a long thought as to how I’m going to tackle this. Slicing the heading, making it work on resolutions up to full HD (1920×1200) (for the sake of couple of kilobytes of cachable graphics it was actually a no brainer)…

Preparing the images

This is the default image I have extracted from Jay’s Illustrator files. Consists of three layers:

• container (with shadows)
• heading (no shadows)
• subheading (no shadow)

I came accross sliding doors in CSS layouts in the past, I’ve read articles on A List Apart (+part II), which gave me an insight into the technique yet it did not fully covered what I was after since they’re describing a GIF-based method. Useful, but not exactly what I hoped for. Observing their technique I have decided to slice my background like this:

Please note I took the screenshot with white background so it’s more obvious where the guides are and how the shadows work.

A List Apart recommends making the left hand side (LHS) slice as small as possible. That’s exactly what we’re doing here. Using the Eyedropper tool in Photoshop I have separated areas with consistent background (to avoid funny looking transitions) and began slicing.

First: disable the white background. Then chop it into pieces. We only care about slices 1, 2, 5, 7 and 8. Note that slice 5 varies slightly from the others. The reason behind that is when it comes down to actual coding of the page and efficiently laying it out, any subheading will be contained in a either fieldset or form (I haven’t decided yet). There is no need to export the subheading layer with the shadows at all. We’ll get to this.

You end up with 5 slices:

(LHS of heading)

(RHS of heading)

(subheading)

(LHS of wrapper)

(RHS of wrapper)

Converting fixed images to work in flexible layout

I now need to take slices 2, 5, 7 and 8 and extend them a bit to cope with bigger resolutions as I am limited by the size of the image when it comes down to displaying the content.

Go back to Photoshop and open the above mentioned slices that need reediting.

Slice 2 (RHS heading): Firstly we need to extend the canvas (Winows: ALT+CTRL+C, Mac: I need to find out). Except for slice 7 (LHS of wrapper) we will be extending horizontally.

Using the Eyedropper tool (I) select the colour (#00cbe5 in my case) in the far left side of the heading: this is the colour we are going to repeat in the rest of the image in a matching rectangle we’ve created using the Marquee tool (M).

I forgot about the shadow above the heading the very first time I was doing this. In order to help me distinguish and copy the shadows over I have dropped in a new layer with white background and placed it underneath the layer I was working with. So now it’s just down to Marquee tool and some copying. I do not worry about the number of layers it takes to create as I’ll merge them (Win: CTRL+E, Mac: will update soon) in the end anyway…

Final product (again with white background just for demonstrating purposes):

Now I need to do the same to the subheading (slice 5 - don’t forget no shadows there).

Slice 8 (RHS of wrapper): I have resized the canvas to be 1920×1200 from bottom right corner. I have copied both the side and bottom over so many times till it filled the whole screen. I think I dropped in a white layer just for testing purposes to help me distinguish overlaying of the copied layers. In the end (after disabling the white layer) I have painted the rectangle that I created in the top left part of the image (because I do actually want to have the background of the wrapper in white to give a good contrast to containg elements).

Slice 7 (LHS of wrapper): resizing this one to be (whatever-the-width(24px in my case)×1200 (height) and repeated the process from expanding slice 8.

Final images:

Next time

In part two I will be describing the combination of CSS and HTML to achieve sliding doors on flexible layouts using CSS.

Let me know your thoughts