Featured Blog: Kitchen Encounters
Featured Blog: Social Embers

CSS Tips: Hide Post Footer Elements

We talk about CSS (cascading style sheets) a lot on Everything Typepad because there are so many ways you can change your blog's design with a snippet of CSS code. We love it when Typepad bloggers reach out to us with design queries and enjoy finding the code for you!

In this quick tip, we are answering a question about how to make small changes to the look of the Post Footer in responsive designs.

If you are using the Design Lab to create a custom, responsive design, you will notice the Permalink and Comments links in the Post Footer have an icon. Maybe you prefer to not include the icon, only text, which can be done with a little CSS.

Here is a look at the Post Footer with all elements:

Post Footer Default

First, let's hide the icons with some CSS:

.permalink::before { content: none !important; }

.entry-comments::before { content: none !important; }

The result:

Post-Footer-2

If you like the look without the icons, go to Design > Custom CSS, enter one or both lines of code above in the text field, and click Save Changes.

Since you can click the Post Title to go to the individual post page, you may think the Permalink in the Post Footer is unnecessary. With a little more CSS, you can hide the Permalink entirely!

.permalink { display: none !important; }

Most other changes to the Post Footer style can be made at Design > Styles. To change what is displayed in the footer, you can do so at Design > Content for your blog.

Are you looking to make any other design tweaks with CSS? Let us know in the comments, and we can write up another tutorial with the code.

comments powered by Disqus