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.

/assets/css/style.css

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}
.fr{float:right}
.ar{text-align:right}
body {color:#828282;font-family:Verdana;font-size:10pt;}
.cohead, .cohead a{color:#828282; font-size:9pt}
.comment{padding:.4em}
.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

classes/controller/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);
    parent::after();
  }

The header_tpl.php file becomes:

views/blocks/header_tpl.php

<div id="header">
<?php
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>';
?>
</div>

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

Kohana::init(array(
    'base_url'   => '/',
    'index_file'   => '',
));

Now the result should look like that:

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

views/pages/news/index_tpl

<?php
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: http://code.google.com/p/kohana-tutorial/