how to do the same thing, except this time we don’t use conditional tags. However this approach is limited only to page types that are represented by the
Here we go,
Find this:
and replace it with this:
In older and most third party templates you will find
If this is your case, replace it with:
Normally, this rule applies the styling on ALL pages i.e.. hides the post timestamp across the entire blog. How then we specify a page type and make the code apply only on that particular page type? The answer is by adding the page type class name (and a space) in front of the selector. Refer to the table below.
Let say you want to hide the post timestamp only on static pages, then the code becomes:
To make sure the new rule “stick”, you need to add it at the end of the stylesheet. This can be done either by putting it before before
With this method any more individual page type styling will be done entirely in CSS stylesheet. The result would be a cleaner, lighter and W3C compliant code. (If we use the conditional tag method, styling four individual page types, would require the addition of four conditional tags in HTML!).
pageType data tag, namely index, post, archive and static pages. Here we go,
1. Assign class to body element
First we need to assign a class to thebody element so that we can reference it from the stylesheet. And the class has to be somehow linked to the page type. We can achieve this by using pageType data as the class name. We only need to do this once. Here’s what to do:Find this:
<body expr:class='"loading" + data:blog.mobileClass'>
<body expr:class='"loading" + data:blog.mobileClass + " " + data:blog.pageType'>
body tag without any attribute, like so:<body>
<body expr:class='data:blog.pageType'>
2. Adding CSS rules
You can style a HTML element by adding a CSS rule in the stylesheet. For example, this is the rule for hiding post timestamp:.post-timestamp {display: none;}| Page type | Class name |
| Index pages | .index |
| Post pages | .item |
| Archive pages | .archive |
| Static pages | .static_page |
Let say you want to hide the post timestamp only on static pages, then the code becomes:
.static_page .post-timestamp {display: none;}]]></b:skin> line in the template Design > Edit HTML or by adding it via Template Designer > Advanced > Add CSS. With this method any more individual page type styling will be done entirely in CSS stylesheet. The result would be a cleaner, lighter and W3C compliant code. (If we use the conditional tag method, styling four individual page types, would require the addition of four conditional tags in HTML!).
0 comments:
Post a Comment