Remove sidebar background in the Travel template

This quick-tip is about removing the coloured section that is in the background in Blogger's Travel template.

Recently, I've been using the Travel template a lot:  it just seems to line things up more sharply on the page.

Today I noticed that there is an option for setting the Sidebar background colour under the Template Designer > Customize > Advanced tool.  However it doesn't seem to work.

Investigating the template shows that as well as this sidebar background colour (which is correctly set by the option above), the template also specifies a background image (ie not a colour) to use in the sidebars.    This isn't removed when the overall background image for the template is removed, and cannot be controlled from the template designer.

But it's simple enough to get rid of it, by following these steps:

1   Edit the template in the usual way.

2   Tick the expand widgets checkbox.

3   Find this code:

background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

4   And either replace it with this code, or delete the line entirely.

/*  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;  */

The first option just comment its out, meaning you could re-instate it again by removing the /* and  */. But if you are certain that you never want it back, just delete the whole line instead.

Depending on the sidebar layout chosen, there may be one or more places where the background image is.   Make sure that you do all of them that you want the background removed from.

Also, if you later choose a different layout, you make need to remove the background image again even though you haven't actually changed templates.

Read more > Remove sidebar background in the Travel template

Designing blogs for mobile devices - liquid design and image-width-maximisation

Today I read a very interesting article from the Webmaster Central blog about the challenges of designing websites for mobile devices, and a concept called liquid design.

For bloggers who have enabled a mobile template for their blog, the overall site design is handled by Blogger: you can add gadgets to your mobile template easily enough, and if they're in the sidebard then Blogger decides where to show them instead.

But the design inside posts is our own responsibility. I've been pondering this for one of my blogs that definitiely needs a mobile-template view, but which has a number of side-by-side images.

I'm not certain yet, sure, but the article's suggestion to add this CSS rule to my template

img {
max-width: 100%;
}

might just be a very good one for me to apply.

Read more > Designing blogs for mobile devices - liquid design and image-width-maximisation