Weekend Project: Customize Module Headers

We showed you some basics on styling module headers before, but this weekend we've decided to show off how you can use Custom CSS to customize the headers even further. Look at the cuteness!

From our example below you can see we've decided to customize three specific modules: the Search; the Categories List; and the Post Feed. There are more sidebar items with their own CSS class, but the three in our example are the most often asked about.

For the three modules we will be working on today, you will need to add them to your blog on the Organize Content screen, at Design > Content, then save your changes. When you reload your blog, and the modules appear, use your browser's View menu to select the "Source" option. That will display the HTML for your blog so that you can locate the HTML of the modules you added. Learning how to do this, and what to look for, will help you if you want to setup custom headers for other modules.

Search Module

If you view the source of your blog, you'll see a section of code in the HTML for the Search module code, which looks like this:

<div class="module-search module">
   <h2 class="module-header">Search</h2>
   <div class="module-content">
     <form id="search-blog" method="get" action="http://example.typepad.com/.services/blog/6a00e5521e0e2e88340133ec942a9a970b/search">
      <input type="search" name="filter.q" results="5" value="" />
      <input type="submit" value="Search" />
     </form>
   </div>
</div>

Categories List Module

The Categories List module code looks like this:

<div class="module-categories module">
   <h2 class="module-header"><a href="http://example.typepad.com/test/archives.html">Categories</a></h2>
   <div class="module-content">
     <ul class="module-list">
      <li class="module-list-item"><a href="http://example.typepad.com/test/film/">Film</a></li>
      <li class="module-list-item"><a href="http://example.typepad.com/test/webtech/">Web/Tech</a></li>
      <li class="module-list-item"><a href="http://example.typepad.com/test/weblogs/">Weblogs</a></li>
     </ul>
   </div>
</div>

Post Feed module

Looking again at the source of your blog, you'll see a section of code in the HTML for the Post Feed module. That code looks like this:

<div class="module-syndicate module">
   <div class="module-content">
     <a href="http://example.typepad.com/test/atom.xml">Subscribe to this blog's feed</a>
   </div>
</div>

Looks a little different, right? For starters, it's a shorter snippet of code. Specifically, it's missing HTML referencing the module-header, which is what will be used for customizing the other two modules. We'll get a bit more into this further below.

What You Need to Look for

In each of the above module's code, you will be looking for the first DIV tag that includes the module class reference. Before module is that module's specific class that makes it unique, like module-search,  module-categories, and module-syndicate.

Those three unique classes are what is needed to first pinpoint the individual modules before being able to customize them.

Let's Get Started!

You'll need to have created images for the modules you're customizing and uploaded them to your File Manager. Make a note of the URL for each image you uploaded, then go to the Custom CSS screen at Design > Custom CSS.

Search

For the first module, Search, you'll need to reference it with its unique CSS class—module-search. In our example we have it setup so that the custom image replaces the header of the module, and we style the content section so that appears to be part of the header.

The CSS we used is:

.module-search .module-header {
    background: #ffffff url(http://example.typepad.com/assets/search.png) no-repeat top left;
    height: 80px;
    text-indent: -1000em;
    margin: 0px;
    padding: 0px;
    }

    .module-search .module-content {
        background-color: #eee;
        margin: 0 0 20px 6px;
        padding: 10px 10px 0px 10px;
        }

    .module-search .module-content input[type="search"] { width: 65%; }

There are three sections for the Search module...

The first section is to change the header so that it displays the image we uploaded. It also sets a height and tells the blog that the default text should be hidden by negatively indenting the text.

Reminder: you will need to replace http://example.typepad.com/assets/search.png with the URL for your own uploaded image.

The second section sets the background color of the module content (what contains the search form and button), as well as makes sure there is adequate spacing and padding around the content. That is all so that the content meets the edges of the header.

The third section simply tells the search field to only take up 65% of the content section so that it and the search button can sit side by side.

Categories List

For the Categories List module we used the following CSS:

.module-categories .module-header {
    background: #ffffff url(http://mustbetuesday.typepad.com/assets/categories.png) no-repeat top left;
    height: 80px;
    text-indent: -1000em;
    margin: 0px;
    padding: 0px;
    }

    .module-categories .module-content {
        background-color: #eee;
        margin: -6px 0 20px 4px;
        padding: 10px;
        }

There are two sections for the Categories List...

The first section works exactly like the first section of the Search module. A custom image is setup, a height is given to make sure the full height of the image appears, and the default text is negatively indented to make sure it's hidden.

Reminder: you will need to replace http://example.typepad.com/assets/categories.png with the URL for your own uploaded image.

The second section sets the background color, margins, and padding, so that the content appears to meet the edges of the new header and gives the content some nice spacing.

Post Feed

The Post Feed module is slightly different than the above two modules. It doesn't contain a module-header section since the entire module consists of only a link to subscribe to the blog's RSS feed. Because of this, we've decided to replace the entire module with a custom image, but do so in a way that keeps the link around so it remains clickable.

Here's the CSS we used to do that:

.module-syndicate {
    background: #ffffff url(http://mustbetuesday.typepad.com/assets/subscribe.png) no-repeat top left;
    height: 80px;
    margin: 0px;
    padding: 0px;
    }

    .module-syndicate .module-content a {
        display: block;
        height: 80px;
        text-indent: -1000em;
        }

Even though there isn't a module-header section for the Post Feed module, there are still two sections of code to add.

The first section calls to the entire module by using the module-syndicate class. It applies the custom image and sets the height, like the two other modules.

Reminder: you will need to replace http://example.typepad.com/assets/subscribe.png with the URL for your own uploaded image.

The second section calls to the link within the Post Feed module, telling it to match the height of the image and negatively indent the text so that it hides itself.

Is that it?

For your own module headers and content you may need to tweak the height, margins and padding. Outside of that, your last steps are to preview and save your changes before sitting back and admiring your work.

Hey, did you know? If you aren't sure about something, why not ask your TypePad Community? You'll find a mix of fellow TypePad members and the Support team who are willing to discuss or help with all things TypePad!

Comments

[Eric Alvarez]

Thanks! It will be useful : ))