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.
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:
With these limitations, there is a second method, which is easier to customize.
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.
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.
Subscribe to our newsletter for the latest updates and exciting promotions!