Typepad 101: Your About Me Page
Spotlight: Four great blogs that will make you want to get organized!

Typepad 101: Hide Design Elements With CSS

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. If you're at a plan which doesn't include Custom CSS, you can upgrade to put these tricks to use on your blog.

Is there an element of your blog's design that you simply do not want to display? With a bit of CSS, you can hide an element on your blog, like sidebar module headers.

The CSS needed is the class of the element you want to hide followed by the { display: none; } code. At Design > Custom CSS, you can enter the code and click Save Changes to update your blog. Some examples which you may find helpful are below.

For instance, if you want to hide the URL field on the comment form, you can use the CSS:

#comment-url { display: none; }

Additional information can be found in the article on hiding the URL field in the comment form.

To hide the navigational links which go to the next and previous posts on individual post pages, you can use the CSS:

body.post .content-nav { display: none; }

If you want to hide the Search header in the site search sidebar module, you can use the CSS:

.module-search .module-header { display: none; }

Similarly, you can hide the headers on other sidebar modules, like the Categories module:

.module-categories .module-header { display: none; }

And the Archives module:

.module-archives .module-header { display: none; }

Before
Before


After


Maybe you only want to display the Monthly Archives on the Archives Index (i.e. http://example.typepad.com/blog/archives.html), and you can hide the categories list on the archives index using the CSS:

body.archives .archive-categories { display: none; }

Alternatively, you can hide the Monthly Archives using the CSS:

body.archives .archive-date-based { display: none; }

Another related tip on hiding content was the article on creating a page without sidebar.

If there's another element you wish to hide on your site, you can use the same method as the examples above. Let us know if you don't know the class of the element you wish to hide by posting to the forum, and you'll help you with it!

Comments

Porchester Junior School

The { display: none; } code is an essential bit of CSS, and one we've used on our latest Digital Project blog; http://www.porchester.notts.sch.uk/kingdom to hide all sorts of elements we didn't want to show like the default banner, the footer, navigation links, etc

Thanks Typepad for such a customisable product

Kofla Olivieri

Nice blog. Would you mind sharing how you created your blog "flash" banner?

Porchester Junior School

The rotating banner effect was created using WoWSlider - there's an article about how to add one to a Typepad blog on the GetSatisfaction forum; https://getsatisfaction.com/typepad/topics/wowslider_for_blog_front_page

The comments to this entry are closed.