Cadbury's Chocolate Goes Fairtrade with TypePad
Add Cool New Functionality to Your Blog

Removing Your Banner's Margin

In our pilot class on building a site with TypePad, I made my own online tea shop as an example of taking your business online with just a few clicks. I created a custom banner and uploaded it to my blog.

How wide should a banner be?

To get my banner width, I added the width of my columns together. You can check your column widths by going to Design > Content > Theme and look under your General Settings.

So I add my columns together (400px + 200px) and tell my designer I need a banner that is 600px wide. Note: 'px' equals 'pixels'.

I upload my banner (Design > Content > Banner) and reload my blog and my banner appears!

But there's this gross indent.

Tea-time-banner
TypePad indents banners 15 pixels down and 15 pixels to the right. This leaves the background color (the green) showing around the banner while chopping off 15 pixels off the right-side. I don't want that for this blog. Let's get rid of it.

Let's tell TypePad to ditch the indent and put the banner flush against the sides of the blog.

Go to Design > Custom CSS and add this statement to your Custom CSS.

#banner {
background-position: 0px 0px; /* move banner flush against top and left edge of blog */
}

Save and reload your blog. I always add comments to the changes I make in my Custom CSS so if a designer or support person needs to wade through it, it makes sense.

Tea-shop-banner-no-top-left-margin

Alright! We got rid of the top and left margin peeking through - but we still have about 30px on the bottom. That annoys me.

If you were to look 'under the hood' at the stylesheet you'd see TypePad tells the browser how tall to make the box the banner is in. The box has the same as the banner image you uploaded, plus 15px on the top and 15px on the bottom. So to get rid of the remaining bottom margin we just set the height to be the height of the banner image.

banner {
background-position: 0px 0px; /* move banner flush against top and left edge of blog */
height: 166px; /* the height of the banner */
}


Save and then reload:

Tea-shop-banner-no-margin-at-all Victory is mine!

Long story short: Add up your columns, make a banner that big, upload it, then use Custom CSS to make it flush against the blog's edges.

comments powered by Disqus