Completing a Blogging Application with the Code Igniter PHP Framework - Adding CSS styles to the blogs_comments_view.php file (
Page 3 of 4 )
Improving the visual aspect of the view file that lets users to see the comments that have been made on a particular entry, as well as submitting new posts, is a matter of coding a few simple CSS styles. That’s all.
In this case, I’m going to utilize practically the same group of styles that I wrote for the other view, to give them a consistent look. But naturally, this process is completely customizable, so you’re free to provide the whole blog application with the appearance that best suits your needs.
Having clarified that point, here’s the signature of the view file in question, this time including the pertinent 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;
}
a:link,a:visited{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #00f;
text-decoration: none;
}
a:hover{
color: #f90;
}
textarea, input.textbox{
width: 300px;
padding: 3px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}
</style>
</head>
<body>
<h1><?php echo $title;?></h1>
<?php if($result->num_rows()>0):?>
<?php foreach($result->result_array() as $comment):?>
<div id="container">
<p><strong>Author: </strong><?php echo $comment['author'];?></p>
<p><strong>Comment:</strong></p>
<p><?php echo $comment['text'];?></p>
<p><?php echo anchor('blogger/blogs/','<< Back to blog');?></p>
</div>
<?php endforeach;?>
<?php endif;?>
<div id="container">
<?php echo form_open('blogger/insert_comment');?>
<?php echo form_hidden('blog_id',$this->uri->segment(3));?>
<p>Author:</p>
<p><input type="text" name="author" class="textbox" /></p>
<p>Enter your comments below:</p>
<p><textarea name="text" rows="10" cols="20"></textarea></p>
<p><input type="submit" value="Submit Comment" /></p>
</form>
</div>
</body>
</html>
Didn’t I tell you that polishing the visual presentation of the above view file was a straightforward process? As you can see, all I did before was style some of the elements included in the file in question to make it look a bit more professional.
You may get a clearer idea of the final result of this styling process if you look at the following complementary image:
At this point, not only does the blog application work correctly, but it looks pretty appealing, too. Logically, if you’re planning to introduce other modifications to any of the source files, don’t forget to save them to the corresponding folders, so they can be tested locally.
In the last section, I’ll be listing the complete source code of the blogger, including the changes that I made before. So please read the next few lines. We're almost finished!
/ 4 
