Typepad Master Class: Styling the Featured Post

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

There are a variety of ways to style the Featured post, just as there are a variety of ways to make use of the Featured post itself. In today's Master Class, we will be covering a couple of basic steps you can take to make the Featured post pop, as well as a specific example of really making it stand apart from all other posts.

You'll need to have access to the CSS, either via Advanced Templates or the Custom CSS tool, in order to achieve the looks discussed below. We also recommend using a test blog to try out these ideas before applying any changes to your real blog.

Here are a couple of basic changes you can make to the Featured post:

• change the post title color
• add a shadow around the post
• add a background color to the post

Changing the Post Title Color

Changing the color of the title is as simple as calling the entry-header class and a (link) tag for the post title and assigning a hexadecimal value to it:

/* Assign color to linked post title of Featured post */
div.entry-featured .entry-header a { color: #c00000; }

Add a Shadow Around the Post

To add a shadow, you would apply a specific element to the post by calling to the entry-featured class:

/* Add shadow around Featured post */
div.entry-featured { box-shadow: 0 1px 7px hsla(0,0%,0%,.3); }

Add a Background Color to the Post

To add a background color, you would assign a hexadecimal value to the post via the entry-featured class:

/* Add background color to Featured post */
div.entry-featured { backround: #cccccc; }

Those are some of the basic changes you can make, and you can test each of them out by adding them to Design > Custom CSS. Make sure you've set a post to be featured, first, or you won't see it in action.

To really give the Featured post some styles to make it stand out, like our example below, we can combine some of the CSS offered above, along with some advanced CSS.

Give your Featured post a style boost with some advanced CSS

The above example makes use of the following items:

• a custom background color
• a shadow around the post
• changing the link colors of the featured post
• adding a custom image and rotating it to appear in the top right and top left corners

Here's the CSS we used to create that look:

/* Change link color to Featured post */
div.entry-featured a { color: #9B7F51; }

/* Set background color and shadow to Featured post */
/* Note: May need to adjust padding and margins for your blog's theme */
div.entry-featured {
        position: relative;
        background-color: #F4F1EB;
        box-shadow: 0 1px 7px hsla(0,0%,0%,.3);
        padding: 30px;
        margin: 0 auto 80px;
    }
   
    /* Create an element before and after the Featured Post */
    /* Add a custom background and other styles */
    .entry-featured:before, .entry-featured:after {
        background: transparent url(http://everything.typepad.com/images/tape.png)
                    repeat center;
        content: '';
        height: 40px;
        position: absolute;
        top: -10px;
        width: 100px;
        z-index: 10;
        box-shadow: 0 10px 9px -8px hsla(0,0%,0%,.75);
    }

    /* Position and rotate the element before (appears top left) the Featured Post */
    .entry-featured:before {
        left: -40px;
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

    /* Position and rotate the element after (appers top right) the Featured Post */
    .entry-featured:after {
        right: -40px;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
    }

Please read the notes with each of the items to help you understand what each section is meant to do. After that, you can add the above code to your Custom CSS (or stylesheet if you're using Advanced Templates) to see it all in action.

If you want to use your own image, in place of the old masking-tape like image we use and provide, then you would upload it to your File Manager, copy its URL and replace our background URL with the one you copied.

Let us know what you think of this Master class by sharing your thoughts in your community forum! We'd love to see your own take on this as well, so make sure to share what you've tried or improved upon.