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
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!
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
Posted by: Account Deleted | April 10, 2013 at 02:03 PM
Nice blog. Would you mind sharing how you created your blog "flash" banner?
Posted by: Kofla Olivieri | April 11, 2013 at 08:43 PM
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
Posted by: Account Deleted | April 12, 2013 at 04:18 AM