Polishing the Visual Presentation of a Blogger with the Code Igniter PHP Framework - Improving the blogger's visual presentation (
Page 3 of 4 )
Improving the look of the blogger is only a matter of adding a few simple CSS styles to each of the view files coded in the earlier section, since they’re the elements that actually compose the visual presentation of the application.
Therefore, I’m going to style the first view -- the one responsible for displaying all the blog entries stored on the “blogs” MySQL table. As you’ll see in a moment, this process requires only tying a few CSS styles to the headers and links of the web document, divs and paragraphs, and some additional web page elements as well.
So in short, here’s how this view file now looks, after including the aforementioned CSS styles:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $title;?></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #003399;
margin: 18px 0 18px 0;
text-align: center;
}
h2{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #333;
margin: 0 0 18px 0;
}
p{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
margin: 0 0 18px 0;
}
#container{
width: 500px;
background: #ccf;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 18px;
}
#paginglinks{
width: 500px;
background: #eee;
padding: 5px 15px 5px 15px;
margin-left: auto;
margin-right: auto;
}
a:link,a:visited{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #00f;
text-decoration: none;
}
a:hover{
color: #f90;
}
</style>
</head>
<body>
<h1><?php echo $title;?></h1>
<?php foreach($result->result_array() as $blog):?>
<div id="container">
<h2><?php echo $blog['title'];?></h2>
<p><?php echo $blog['text'];?></p>
<p><?php echo anchor('blogger/comments/'.$blog['id'],'View Blog Comments >>');?></p>
</div>
<?php endforeach;?>
<?php echo $links;?>
</body>
</html>
Now the “blogs_view.php” file includes a few typical CSS styles, which come in useful for polishing the look of the web document that displays the blog entries. In this case, I encapsulated these styles within a couple of <style> tags, but naturally it’s preferable to code them in a separate file.
Finally, to complement the previous explanation, below I included a screen capture that shows clearly the improved visual presentation of the blogger. Here it is:
That looks much better, definitely! Of course, I decided to style the web page that displays the blog entries according to my personal tastes, but you can easily change this to suit your own preferences.
So far, so good. At this stage, you hopefully learned how to polish the visual appearance of the blogger, at least partially. Therefore, the last thing that I’m going to show you in this tutorial will be a list of the complete source code of the blog application, this time including the CSS styles that you just learned.
So, jump forward and read the following section. We’re almost done!
