02. Making a Blog with qEngine: Part 2

On the previous tutorial, I have explained how to create a simple blog using qEngine. Pretty simple, right? But don't you think the output is rather dull? So, on this tutorial, I will explain on customizing the output to make it prettier. There are several method to customize the output, I will explain them all here.

Method 1: Pure CSS

If you see the resulting source code, you will see the HTML structure as follow (may a little bit different from actual code):

<div class="page_gallery">
  <h1><a href="someurl">Title</a></h1>
  <div><a href="someurl"><img src="image.jpg" alt="Title"></a></div>
  <div><p>Content</p></div>
  <p>Posted on: Some Date</p>
</div>

By using this information, we can customize the output by using proper CSS styling, to do that, simply edit /skins/default/style.css, for example:

.page_gallery{background:#f4efea; border:solid 1px #cab39b; padding:20px; border-radius: 20px; margin-bottom:20px;}
.page_gallery h1{font:italic 32px Georgia,Serif;margin-top:0;}
.page_gallery h1 a{color:#836445;}
.page_gallery img {box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);}
.page_gallery div:nth-child(2){float:left; margin:0 20px 20px 0;width:250px;}
.page_gallery {clear:both;}

And let's see what it looks like.

By default qEngine will assign 'page_gallery' as css class, but you can overwrite it by using 'cssclass' parameter, e.g.:

<!-- BEGINMODULE page_gallery -->
  group_id = blog
  title = 1
  img = 1
  link = 1
  body = 1
  date = 1
  cssclass = myclass
<!-- ENDMODULE --> 

Pretty neat. But as you can see this method has some limitations:

1. You have to be CSS & JavaScript savvy. Sure, web designer should have deep knowledge on CSS, but, hey, everyone has to start somewhere.
2. You are still limited with the HTML structure, which is not easy to modify. E.g., it's very difficult to move title to the bottom.

With these limitations, there is a second method, which is easier to customize.

Method 2: TPLSECTION

Please try these codes. For /skins/default/welcome.tpl, we use these lines:

<div id="welcome" class="container">
  <!-- BEGINMODULE page_gallery -->
    group_id = blog
    sectiontpl = mypage
  <!-- ENDMODULE -->
</div>

<!-- BEGINSECTION mypage -->
<div class="row myclass">
  <div class="col-sm-9">
    <h2><a href="{$url}">{$page_title}</a></h2>
    {$page_body}
  </div>
  <div class="col-sm-3">
    <a href="{$url}">{$page_image}</a>
    <p style="text-align: right"><span class="glyphicon glyphicon-time"></span> {$page_date}<br />
    <span class="glyphicon glyphicon-user"></span> {$page_author}</p>
  </div>
</div>
<!-- ENDSECTION -->

For /skins/default/style.css, we modify previous lines:

.myclass{background:#f4efea; border:solid 1px #cab39b; padding:20px; border-radius: 20px; margin-bottom:20px;}
.myclass h2{font:italic 32px Georgia,Serif;margin-top:0;}
.myclass h2 a{color:#836445;}
.myclass img {box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75); margin-bottom:10px;}

Now, let's see the result.

Really cool right? And much simpler CSS lines. I will explain some of the important codes:

group_id = blog
sectiontpl = mypage

You should already be familiar with those lines, but as you can see, we use less codes. That's because we don't need to tell qEngine which element to display, as we will customize the output instead.

The 'sectiontpl' line, tells qEngine to use 'mypage' section as output template instead of default built in template.  A section is a small template codes that can be inserted in any template files.

The template section is as follow:

<!-- BEGINSECTION mypage -->
<div class="row myclass">
 <div class="col-sm-3">
 <a href="{$url}">{$page_image}</a>
 <p style="text-align: right"><span class="glyphicon glyphicon-time"></span> {$page_date}<br />
 <span class="glyphicon glyphicon-user"></span> {$page_author}</p>
 </div>
 .. Snip ..
</div>
<!-- ENDSECTION mypage -->

You can modify the template as freely as you want. The {$page_image}, {$page_date}, {$page_author}, etc. will be replace with corresponding values. You can see the usable variable by checking the 'qe_page' table.

Summary

In this tutorial, you have learnt that qEngine is pretty flexible. You can build a simple blog and customizing the output, without touching a single PHP code. But that's just a beginning, in the next tutorial I will explain how to customize the blog page itself. Psst… it's very easy! I will give you a hint: it's in /skins/_common/page_default.tpl and /skins/_common/body_default.tpl.