Skip to content

CakePHP from Scratch: Theming in real life example – Part Two

Long time no CakePHP on Codeforest. Let me correct that and finally finish the theming tutorial.

If you missed the first one, go to CakePHP theming in real life example – part one and read it carefully. Then return for the second part.

Last time I showed you how easy it is to add theme support to CakePHP and how to adjust xHTML/CSS template to make it work through CakePHP engine.

Today, we will adjust the template a bit by removing some unneeded elements and then adjust the CakePHP views so our application will look and work better.


If you didn’t follow the first part, download the files here.

First, we will remove some elements, so open /app/views/themed/default/layouts/default.ctp and change it to this:

[code lang=”php”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title_for_layout; ?></title>
<?php echo $this->Html->css(‘default’); ?>
</head>

<body>
<!–Header Background Part Starts –>
<div id="header-bg">
<!–Header Contant Part Starts –>
<div id="header">
<?php
echo $html->link($html->image("logo.gif"), array(‘controller’=>’jobs’, ‘action’ => ‘index’), array(‘escape’ => false));
?>
<!– –>
<!–Login Background Starts –>
<div id="login-bg">
<!–Login Area Starts –>
<div id="login-area">
<form action="" method="post" name="Login" id="Login">
<label>Members Login:</label>
<input type="text" name="username" id="username" />
<input type="password" name="pass" id="pass" />
<input type="image" src="images/login-btn.gif" class="login-btn" alt="Login" title="Login" />
<br class="spacer" />
</form>
</div>
<!–Login Area Ends –>
</div>
<!–Login Background Ends –>
<br class="spacer" />
</div>
<!–Header Contant Part Ends –>
</div>
<!–Header Background Part Ends –>
<?php echo $this->element(‘menu’, array(‘cache’ => true)); ?>
<!–Our Company Bacground Part Starts –>
<div id="ourCompany-bg">
<!–Our Company Part Starts –>
<div id="ourCompany-part">
<h2 class="ourCompany-hdr"><?php echo $title_for_layout; ?></h2>
<?php echo $content_for_layout; ?>
<br class="spacer" />
</div>
<!–Our Company Part Ends –>
</div>
<!–Our Company Bacground Part Ends –>
<!–Footer Part Starts –>
<div id="footer-bg">
<!–Footer Menu Part Starts –>
<div id="footer-menu">
<ul class="footMenu">
<li class="noDivider"><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Support">Support</a></li>
<li><a href="#" title="Chat">Chat</a></li>
<li><a href="#" title="History">History</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
<br class="spacer" />
<p class="copyright">Copyright?&amp;copy; Package 2007 All Rights Reserved</p>
<p class="copyright topPad">Powered by TemplateKingdom.com</p>
</div>
<!–Footer Menu Part Ends –>
</div>
<!–Footer Part Ends –>
</body>
</html>
[/code]

This way, I removed the Future plans div which we don’t need (at the moment).

Now open your default.css file which is located in /app/views/themed/default/webroot/css/ and find these lines:

[code lang=”css”]
div#ourCompany-bg div#ourCompany-part{
width:922px; margin:0 auto; padding:26px 0 28px 0;
background:url(../img/our-company-bg-pic.jpg) 606px 0 no-repeat;
}
[/code]

and comment the background line like this:

[code lang=”css”]
div#ourCompany-bg div#ourCompany-part{
width:922px; margin:0 auto; padding:26px 0 28px 0;
/*background:url(../img/our-company-bg-pic.jpg) 606px 0 no-repeat;*/
}
[/code]

What we just did? We got rid of the package image on the right of our content div, so we can stretch the content further.

Now, let us adjust the index view for Jobs. Open /app/views/themed/default/jobs/index.ctp, and change it to this:

[code lang=”php”]
<h2 class="ourCompany-hdr">Jobs</h2>
<div class="jobs index">
<?php
if(!empty($jobs)) {
$i = 0;
echo ‘<ul class="jobs_list">’;
foreach ($jobs as $job):
$class = null;
if ($i++ % 2 != 0) {
$class = ‘ class="odd"’;
}
echo ‘<li’.$class.’>’;
echo ‘<h3>’.$this->Html->link($job[‘Job’][‘title’], array(‘action’ => ‘view’, $job[‘Job’][‘id’])).'</h3>’;
echo ‘<div class="details">’;
echo ‘<span class="category">’.$job[‘Job’][‘job_type’].'</span>’;
echo ‘ – ‘ . $job[‘Job’][‘company’];
echo ‘<span class="date">’ . date(‘M d’, strtotime($job[‘Job’][‘created’])) . ‘</span>’;
echo ‘<div>’;
echo ‘</li>’;
endforeach;
echo ‘<ul>’;
} else {
echo ‘No Jobs found …’;
}
?>
[/code]

We are removing links to actions and pagination links (we will style and add these back in next tutorial) and adding some new HTML markup for showing jobs.

Let us add some CSS styles for this markup in /app/views/themed/default/webroot/css/default.css

[code lang=”css”]
ul.jobs_list { width: 565px; }
ul.jobs_list li { margin:10px 0; padding:20px; position:relative; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
ul.jobs_list li:hover, ul.jobs_list li.odd:hover{ background:#ded698; }
ul.jobs_list li.odd{ background:#e4db98; border:1px solid #c7c77c; -moz-box-shadow:0 0 6px rgba(51,51,51,0.1); -webkit-box-shadow:0 0 6px rgba(51,51,51,0.1); box-shadow:0 0 6px rgba(51,51,51,0.1); }
ul.jobs_list li h3 { font-size:21px; margin: 0 0 5px 0; text-shadow:0 0 1px rgba(51, 51, 51, 0.1); }
ul.jobs_list li h3 a { color: #082733; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; }
ul.jobs_list li h3 a:hover { color: #000; text-decoration: underline; }
ul.jobs_list li .details { font-size: 13px; }
ul.jobs_list li .details .category { font-size: 16px; font-weight: normal; color: #70322C; text-transform: uppercase; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; }
ul.jobs_list li .details .date { position:absolute; top:38px; right:20px; }
[/code]

Looking good. Add some jobs by going to http://localhost/jobs/jobs/add (if your cakePHP app is in /wamp/www/jobs) and view the Home page.

Now, we have to change the look of our Job details page. You can see it by clicking on Job’s title. So let’s change the markup. Open /app/views/themed/default/jobs/view.ctp and change it to this:

[code lang=”php”]
<h3 class="jobs_view_h3"><?php echo $job[‘Job’][‘title’]; ?></h3>
<div class="jobs view">
<?php
echo ‘<div class="info">’;
echo ‘<span class="category">’.$job[‘Job’][‘company’].'</span>’;
echo ‘ – ‘ . $job[‘Job’][‘job_type’];
echo ‘<span class="date">’ . date(‘M d’, strtotime($job[‘Job’][‘created’])) . ‘</span>’;
echo ‘</div>’;
echo ‘<div class="job_details">’;
echo ‘<p>’ . nl2br($job[‘Job’][‘body’]) . ‘</p>’;
echo ‘</div>’;

?>
[/code]

And add this to /app/views/themed/webrot/css/default.ctp file:

[code lang=”css”]
.job_details { margin:10px 0; padding:20px; position:relative; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; width: 600px; background:#e4db98; border:1px solid #c7c77c; -moz-box-shadow:0 0 6px rgba(51,51,51,0.1); -webkit-box-shadow:0 0 6px rgba(51,51,51,0.1); box-shadow:0 0 6px rgba(51,51,51,0.1); }
.job_details p { font-size: 15px; line-height: 21px;}

.info { width: 640px; font-size: 13px;}
.info .category { font-size: 16px; font-weight: normal; color: #70322C; text-transform: uppercase; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; }
.info .date { float:right; }

.jobs_view_h3 { font-size:21px; margin: 0 0 5px 0; text-shadow:0 0 1px rgba(51, 51, 51, 0.1); }
[/code]

Now, click on the title of some Job on the front page and you will see the change in your view.

That’s it for now, stay tuned as we continue next time.

Make sure your read our previous tutorials in CakePHP series:

Tags:

6 thoughts on “CakePHP from Scratch: Theming in real life example – Part Two”

  2. GC

    Thanks for putting these great tutorials together. They’ve been a lot of fun to go through! Looking forward to part three!

  3. Zvonko

    Hi Elumar,

    this line should explain how to deal with images:
    echo $html->link($html->image(“logo.gif”), array(‘controller’=>’jobs’, ‘action’ => ‘index’), array(‘escape’ => false));

  6. Peter

    Just wanted t let the author know that this tutorial still rocks!
    Its very helpful and I cant stress enough my appreciation 🙂

Comments are closed.