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.

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.

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:

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

[Editor]

or....

subtract the border px for the banner size... (i take mine as 200+500+200-30=870) and then choose the same color as your banner background for the border color... so if my background is black, then my border color is black... (as long as you don't have a complicated banner, like a photo, etc...)

http://www.talkturkey.us

[Andy]

Yup, you got it - thanks!

[Jennifer Jeffrey]

This issue has flummoxed me for a while.

GREAT tip - thanks, Andy!

[Denise]

Thanks for the tip, Andy - this has driven me nuts!

Why is it set that way to begin with?

[Angelia Miller]

How can you use the background from a Typepad template with a custom banner?

[Account Deleted]

Any chance we're going to see some slicker templates anytime soon? The current ones are feeling a little dated, IMHO.

[maya]

i've always wanted my banner to go all the way across ... have never figured that one out - but this is a definitely a start.

[Andy]

I'm guessing it is legacy code from early TypePad templates. Not sure. I'll see if any of the veterans around here know.

[Andy]

I think you mean using backgrounds from the 'one-click' templates? Currently you can't 'cross the streams' between the one-click templates and the theme builder templates.

[Andy]

This method should allow you to do just that. If you are using a fluid width - where the blog stretches to the width of the browser it is viewed in - you want to use a banner that will still look good if it chopped off from the right.

[Angelia Miller]

I like the background of a one click template. Where would I find the html code for the background color code on the one click template?

[SnoozLooz]

The pilot class was very very valuable, and a good webinar format. thanks. -- Dave Freedman (www.web2basics4pr.com)

[Ginevra]

thanks for attending! please come to the next one too.

[Michelle Peele]

I would like to test uploading a banner, however I m a bit lost. I was able to upload and image for a banner but I could not edit from there..

[Andy]

Do you mean editing the banner or changing the positioning?

You can't edit the banner directly inside TypePad - you can use an
online service like www.photoshop.com or www.picnik.com for that - or
a downloadable graphics editor.

To add the positioning described above go to Design > Content > Custom
CSS. Custom CSS is available to TypePad users at the Pro and Business
Class account levels. To upgrade your account go to Control Panel >
Account.

[daisy barringer]

Awesome advice. You just saved me a huge headache and my new banner looks amazing. Thanks Andy!

[Cybersolidaires]

Great advice! But I'd like to know why TypePad indents banners 15 pixels down and 15 pixels to the right. Are there people who find this useful? If there ain't much use for this, TypePad should correct this.

[Andy]

I don't the exact Why and I'll wrangle the designers to see if they
can reveal. I'm guessing it is to match the rest of the padding of
content in the actual blog content. And since there may be existing
blogs that depend on this margin, we can't just strip it out
wholesale. So for now we have the custom CSS hack. Thanks!

[Karin Schmollgruber]

Thanks so much, but I still continue having too many spare pixels below my banner (which is 113px). Please help me...