How to style the blog?

If you have planned to have a proper template it is necessary to have the right style for pages content. One of the most important and easiest one is blog pages.

Blog has two views:

Here is the listing html structure which is generated at run-time.

<div class="clz-package-module  clzM-blog">
  <h1>Blog</h1>
  <!--loop -->
   <div class="clz-post">
     <h2>title</h2>
     <div class="clz-summary">summary …</div>
     <div class="clz-extrainfo">
       <div class="clz-date"><span>Mon. 01 Jan 2000</span></div>
       <div class="clz-more"><a>read more</a></div>
    </div>
   </div>
  <!--loop -->
</div>

Use these classes to style the listing:

.clzM-blog{ }
.clzM-blog .clz-post{ }
.clzM-blog .clz-summary{ }
.clzM-blog .clz-extrainfo{ }
.clzM-blog .clz-date{ }
.clzM-blog .clz-more{ }

Remember .clz-more has an A tag inside and if you want it to have different color from other A tags you should target it like this:

.clzM-blog .clz-more a{ }
.clzM-blog .clz-more a:hover { }

Post

Here is the post page html structure which is generated at run-time.

.clzM-blog .clz-back{ }

.clzM-blog .clz-post .clz-date{ }

.clzM-blog .clz-post .clz-content{ }

.clz-back has an A tag inside and if you want it to have different color from other A tags you should target it like this:

.clzM-blog .clz-back a{ }
.clzM-blog .clz-back a:hover { }

To check a sample you can refer to Cliiz blog page and check its stylesheet.