Typepad 101: Hide Design Elements With CSS

April 10, 2013

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 powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.