CSS Cookbook

Change the banner title strip

Here we will edit the way the banner title strip displays.

Change the color of the transparent bar

The first three numbers are the RGB code for the color, and the last number is the amount of transparency. "1" is completely solid, while "0.1" is completely transparent and it can be set anywhere in between.

/* Title strip color */ #banner-inner { background: rgba(176, 196, 222, 0.6); }

---

Fill in the title strip with a solid color

In the code, this is done by setting the background color on banner-inner:

/* Title strip color */ #banner-inner { background: #F5F5DC; }

---

Fill the entire banner area with the transparent layer

This can make a cool effect with a pattern behind it, without having to edit the image: /* Title strip color */ #banner-inner { border: 0; top: 0; height: 180px; background: rgba(12, 140, 89, 0.6); } #banner-header { margin-top: 110px; }

In this example we also did some tweaking with the fonts in the banner to make them bigger and bolder. Here is the code we used to achieve the look shown:

/* Banner Fonts */ #banner a { font-size: 180%; font-weight: 700; } #banner-description { font-size:100%; }

Change the banner size

The banner height is set to 180 pixels tall by default, but you can set it to be smaller or taller. Here we will change it from 180 pixels to 95 pixels tall.

Before:

After:

In the code this is done with the height property on the banner:

/* Banner Height */ #banner { height:95px; }

Change the banner background

Solid color fill

In the code, set the background property on the banner:

/* Banner Color */ #banner { background: #b06873; }

---

Banner image

Upload your image to your TypePad account in the File Manager. Replace the url in the code with the link for your image:

/* Banner Image */ #banner { background:url(http://themes.typepad.com/images/aloha2.jpg) repeat; }

See also: Change the banner title strip

Add a text-only banner (no image)

Here we remove the image and fixed height on the banner area and replace it with a text only version:

The CSS to add is:

#banner { height: auto; } #banner-inner { position: relative; top: 0; padding: 15px 5px; background: #fff; border: 0; }

That's it! You can also play with the padding around #banner-inner if you'd like to change the spacing there. Here the background color of the banner area is set to white (#fff) but you can, of course, set this to anything you choose.

Add an image-only banner (no text)

The code below hides the banner text so you can replace it with an image. The banner itself will then become a link back to the homepage of the blog.

The default height is 180 pixels but that can be customized to anything you wish.

#banner-inner { overflow: visible; padding: 0; border: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 180px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }

Add a banner border

Here we'll add a border around the banner image.

In the #banner code we set the border and rounded corners (border and border-radius). You can use one or the other, or both.

We also give the banner some space above it (15 pixels margin-top, in this example).

The width adjustment on the banner-inner sets it so the title strip with the transparent background doesn't overlap onto the border when the border is set.

/* Rounded Banner */ #banner { border: 2px solid #888; border-radius: 15px; margin-top: 15px; } #banner-inner { width: 996px; }

To achieve the look shown in the screenshot above with the navigation bar, we changed the color on the nav bar. The nav bar code that we used for this example is:

/* Nav Bar Color */ #nav, #nav-inner, .nav-list, .nav-list-item a { background-color:#fff; border: 0; } /* Nav Bar Link Hover Color */ .nav-list-item a:hover { background:#fff; color:#888; }

Create a banner that stretches the full width of the screen

#container { width: 100%; } #banner-inner, #pagebody-inner, #nav-inner, #footer-inner { width: 1000px; margin-left: auto; margin-right: auto; } body, #banner, #footer, #footer a, #footer a:hover { background: #FAFAD2; } #banner { height: auto;} #banner-inner { position: relative; top: 0; padding: 10px 0px; background: transparent; border: 0; } /* Nav Bar Color */ #nav, #nav-inner, .nav-list, .nav-list-item a, .nav-list-item a:hover { background-color: #fff; color: #333; } /* Nav Bar Color */ #nav, #footer { border-top: 4px double #ddd; border-bottom: 4px double #ddd; } #banner-header, #banner-description { margin-left: 10px; }

Create a banner with an inset text effect

This is a cool effect with the look of the text being sunk into the background:

Code via and adapted to drop into the TypePad template.

First, we use the code to use a text-only banner:

#container { background: #eee; } #banner { height: auto; } #banner-inner { position: relative; top: 0; padding: 18px 0px; border: 0; }

Then we add the inset shadow code to the blog title:

#banner a, #banner a:hover { text-shadow: 0px -2px 0px #333, 0px 2px 3px #666; color: #353535; text-transform: uppercase; font-size: 60px; font-weight: 800; } body, #banner-inner { background: #535353; }

Create a banner with an overlapped text effect

This is a fun display made with overlapping and offsetting the text:

Code via and adapted to fit in the TypePad template structure.

First, we use the code to have a text-only banner:

#banner { height: auto; } #banner-inner { position: relative; top: 0; background: #fff; padding: 0 0 15px; border: 0; }

Then we add the overlapping effect:

#banner a { display: inline; position: relative; font-size: 100px; letter-spacing: -5px; color: rgba(0,0,255,0.5); } #banner a:after { content: "Blog Title"; position: absolute; left: 10px; top: 5px; color: rgba(255,0,0,0.5); width: 100%; }

NOTE: In the CSS code for the :after section, you add the actual name of your blog where it says "Blog Title" - this is because the blog title is displayed a second time with the offset.