Updating a theme; New Layout

One of the key drivers for changing the theme was to break out of the “boxiness” that was common to many themes available. The old theme, and many that are available consist of a main box for all the content (so the blog is in the middle of the page and not stretched to fit the browser window) and then a few standard boxes within it: a header across the top, a footer across the bottom, and the content and a sidebar filling the space in the middle.

I was looking for something that had a bit of overlap and a background that appeared to flow out of the content. Achieving this was a bit of a challenge. This post describes how I achieved the layout I wanted and the CSS I had to use to get there…

Overall Layout and Design Considerations

My them was still based on Kyoto, my visit there and an overall Japanese theme. I was after the headings, content and footer to appear to float (or be placed over) a background image that was wider than the content. I wanted the background image to be at the top but fade into a solid colour down the side of the content so to not distract from the content.

For the main body, I wanted to keep the header, content, sidebar and footer content, but I wanted the sidebar to appear to overlap the content. I also wanted the content and sidebar to have only the length they needed. I hate having a long sidebar stretching down to the bottom with no content. I also needed to make sure that both the content and the sidebar were wide enough to hold various types of content (text, images, expanding lists) reasonably well.

Finally I wanted to have some images that appear to the left of the main body for dates and page categories. And on the footer to have some linkable images appearing to hover over the backgrounds. Overall this should give me a bit of life around “the box” and a bit of 3d.

Implementation

Here’s how I did it.

Background

I chose to use a background image for the page that would blend into a solid background colour; i.e. image graduating to transparent on all four edges that was done in Photoshop. The image ended up being 1040px wide so that it would appear to fade to the background on a 1024-wide monitor. I played with the background colour so it was not too saturated to distract from the body, but also a reasonable match to the picture.

I also added the little Kyoto photo stack and the “davidedwardsphoto.com” text in Photoshop. The template I’d based this on, and many of the ones available, use a dynamic H1 heading that is a link to the blog home. I didn’t need that, and placing it on the background image gave me a bit more flexibility in font style.

Layout

Implementing the layout I wanted became more complex than I’d planned. This was due to wanting to have the sidebar appear to float over the content and the content floating over the background.

Here’s how the major parts of the page were laid out using div’s.

The high-level structure of the page is as shown below. Within the body, there are two major sections (divs); the footer (at the bottom, id=”footer”) and everything else (id=”notfooter”).

I made a separate footer wider that the reset of the content so I could have the images appear to float outside the box.
 
I had started with the standard width body and tried a number of times to get the images to float outside it, but unless they were background images of elements, it just didn’t work (even using positioning and z-order).
 
I suspect I haven’t quite got that right. So use of nonfooter/footer to break the page up vertically was a workaround.

Within the body (id=”notfooter”) I have five sections (divs) stacked vertically one after the other:

• id=”header” contains the heading notice, and is right aligned to a fixed width. This means that if the blog description is longer than the width can accommodate, it will wrap and not overlay the kyoto pics.
• id=”linksbar” contains a set of page links, also right aligned to a fixed width. As with the header, having a fixed width right-aligned means the links (which are items in an ordered list) can wrap.
• id=”pagebodytop” contains the top background image. The reason I need this is that the background image used in the page body has a drop shadow on the top and left sides. I need a top portion for the top edge shadow (so the page body image can tile vertically).
• id=”pagebody” contains the main background image. It contains the shadow on the left edge and repeats. It is 620px wide but only 100px high. This image is “under” the blog content and sidebar, and “over” the page background.
• id=”pagebodybtm” is not really used. I was toying around with a unique background image for the bottom, but didn’t end up using one. It’s only purpose is to make sure that there’s a bit of vertical space between the end of the content/sidebar and the footer images. Note that the image above is wrong listing this as id=”pagebodyfoot”.

So you can see that the last three sections are all about laying out sections of the page with background images for the content to go on top. If I didn’t bother with the drop shadows on the background images, I could have just used a single div.

The main content of the pages is defined in two columns in the id=”pagebody” section; one (id=”content” is the blog content) and the other is the sidebar; the id=”sidebartop” section is there for the top of the sidebar with a drop shadow on the top and left of the background image, the id=”sidebar” is the body with a repeating background image with a drop shadow on the left side. The two sections sit side-by-side because the content is set to float left with a fixed width:

#content {
   float:left;
   overflow:hidden;
   padding:0 12px 8px 20px;
   width:548px;
}

And the sidebar floats right also with a fixed width:

#sidebar {
   float:right;
   padding:0 8px 0 12px;
   width:180px;
}

This layout allows the content and sidebar to be of different lengths.

Floating Images

I had a lot of problems getting images to float outside their parent element (such as left or above) when the area I wanted to push them to was only defined by the <body> element and it’s background image. If you look at the hierarchy of divs above, the “notfooter”, “pagebody” and “content” divs are all on the same left alignment. When I tried to move an image to the left it disappeared once it passed outside of the notfooter div.

To achieve the icons floating to the left on these pages, I ended up creating CSS definitions with background images. For example the date icon has the following CSS definition:

.post-date {
   background:transparent url(img/kg2_datepic_v1.png) no-repeat scroll 0 0;
   display:inline;
   height:54px;
   margin:0 0 0 -50px;
   position:absolute;
   text-align:right;
   width:54px;
   z-index:2;
}

I use a similar approach to get the heading icons on each page to “float” out to the left.

To achieve the icon beside the heading on the main page, I also use a background setting:

.content-head-home {
   background:transparent url(img/lantern.png) no-repeat scroll 0 0;
}

This is painful as I need to have a different CSS class every time I want a different icon on a page.

I suspect a more elegant solution, which I haven’t tested, would be to have the “nofooter” main section wider (say 100px) than the “pagebody” section and have the “pagebody” section float within it giving a border (say 50px either side) for images to be pushed out into. Perhaps in the next iteration.

Conclusion

In the end I have the layout I wanted but ended up with increased complexity do to some workarounds to achieve what I wanted. There may be simpler ways to achieve the layout I wanted, but it’s working now.