Improving the blogger's visual presentation - PHP

This series of articles is aimed at demonstrating how to build a blog application with the Code Igniter PHP framework, which relies on the functionality offered by the MVC approach to create full-featured PHP programs. Thus, if you’re interested in learning how to build a program like this, then start reading this tutorial now! It is the fifth part of the six-part series.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

January 06, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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">

<head>

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;

}

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>

<?php foreach($result->result_array() as $blog):?>

</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!

Next: Listing the improved version of the blogger >>