Saturday, October 16, 2010

Lessn 3: Making it pretty

In this lesson we'll add some style to the page and also make the home page look more complete.

First let's add the CSS. I'm using the CSS reset from YUI which is rather short and gets the job done.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
#wrapper{margin:0 10%; background-color:#f6f6ef}
#header{background-color:#fcaf3e;padding:.2em;color:#000;margin:1em 0 0}
#header a{color:#000}
#content{background-color:#f6f6ef; padding:1em}
body {color:#828282;font-family:Verdana;font-size:10pt;}
.cohead, .cohead a{color:#828282; font-size:9pt}
.comment, .comment a{color:#000; font-size:9pt}
textarea {color:#000000;font-family:Courier;font-size:10pt;}
#cform{padding:1em 0}
table td{padding:.1em}
.vote a{color:#828282; text-decoration:none}
.title span{font-size:8pt}
.nbody{padding:1em 0}

Looks like the views loaded from views doesn't share the variables. That's why for now I'll define the $site_title as global variable in defaulttemplate.php

public function after() {
     * Set the page title to $site_title if title is not set,
     * otherwise create title 'path'
    if ($this->template->title){
      $this->template->title = $this->template->title.' » '.$this->site_title;
    } else {
      $this->template->title = $this->site_title;
    View::bind_global('site_title', $this->site_title);

The header_tpl.php file becomes:

<div id="header">
echo '<b>'.html::anchor('/', $site_title).'</b> | ';
echo html::anchor('submit', __('submit')).' | ';
echo html::anchor('latest', __('latest'));
echo '<span class="fr">';
echo html::anchor('#', 'user');
echo '</span>';

To make the links work without index.php, change the bootstrap.php file (add empty index_file element):

    'base_url'   => '/',
    'index_file'   => '',

Now the result should look like that:

Let's also change the look and functionality of the news:

if ($news) {
  foreach ($news as $row) {
    echo '<table>';
    echo '<tr>';
    echo '<td class="vote">'.html::anchor('#', '&#9652;').'</td>';
    echo '<td class="title">';
    echo html::anchor('news/'.$row['id'], html::entities($row['title']));
    echo '</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td></td>';
    echo '<td class="cohead">';
    echo $row['points'].' by '.html::anchor('user/'.$row['user_id'], html::entities($row['user_name'])).' '.date('m.d.Y H.y', $row['created']).' | '.html::anchor('news/'.$row['id'], $row['comments'].__(' comments'));
    echo '</td>';
    echo '</tr>';
    echo '</table>';

And the result is:

Don't forget that the code for this project can be downloaded from:


  1. It is very nice post.It is good post. It is simple and best. It helpful for future use.You can test your knowledge in html by attending HTML Quiz .

  2. Aquilax, could you tell me how to finish this blog with working links, user and submit?

  3. Certainly, this article might be gainful for many of the developers either newbies or experienced ones. I genuinely admire you for sharing this information here. Continue sharing and keep us updated with your knowledge.
    Website Design Agency | Website design company