Theme: Chevron

The Chevron theme is available for all Pro plans.

With all five classic layouts available, Chevron is perfect for a wide variety of blog types. Choose from 10 different color options or customize it with your own color preferences via a few lines of CSS. This theme could be the fresh new start you want for your blog!

Standout Features

• Has a custom font via Google Webfonts for headers and body;
• It's clean and fresh;
• Comes with 10 great colors;
• Optimized for 300px wide ads;
• Looks great on mobile devices; and
• Has default social icons for the Other Accounts (grid format only) module

Available Colors

Aqua, Blue, Buttercup, Gray, Green
Kiwi, Metal, Pink, Tangerine, Teal

Customize this theme

If you are a Pro Unlimited blogger or above then you will be able to customize the theme even further with the Custom CSS feature.

Colors

To get started, let's take a look at the color variation CSS for the default (kiwi) version of Chevron:

/*---- COLOR: Kiwi ------------------------*/
/* Link Color */
a { color: #AABA6B; }

/* Banner Background Color */
#banner-inner { background: #C6D981;  }

    /* Blog Title Color */
    #banner-header a { color: #000; }
   
    /* Description Color */
    #banner-description { color: #222; }

/* Left-Right Border Color */
#container {
    border-left: 20px solid #C6D981;
    border-right: 20px solid #C6D981;
    }

The obvious color to change is the one set for the Banner background and Container borders (read the notes above the CSS lines to find out what each line does). You can also customize the link, blog title, and description colors if you change the main color to something that makes them less visible.

Add a Banner Image

Want to add a custom banner image to the Chevron theme? You can do that pretty easily! Because of the way the Chevron theme is designed, the article we have on replacing a pre-defined banner image won't work the way you need it to. Instead, follow the instructions below...

1. Create a banner image no wider than 960px. The height is left up to you, but you'll need to make a change to the height in the CSS below.
2. Upload your banner image to your File Manager, then copy its URL.
3. Go to your Custom CSS screen, at Design > Custom CSS, and enter:
   
   /* Add Background Image */
#banner-inner {
    background: transparent url(http://example.typepad.com/image.jpg) no-repeat top center;
    height: ###px;
    }

/* Remove Blog Title and Description */
#banner-header, #banner-description { text-indent: -1000em; }


4. Replace http://example.typepad.com/image.jpg with your banner image's URL.
5. Replace the ### with the exact pixel height of your image. If it's 200px tall, then replace ### with 200.
6. Preview and save your changes.

If you want the blog title and description to appear, do not include that line in your Custom CSS screen.