Home arrow PHP arrow Page 3 - Adding CSS to Handling Views with CodeIgniter

Enhancing the look and feel of view files with CSS styles - PHP

Welcome to the second installment of a series that shows you how to handle views with CodeIgniter. Made up of seven parts, this series explains different methods that you may use for loading view files within your CI-based web applications, ranging from working with a simple sequential approach, to including views within other views. This part will show you how to improve your web page's appearance with CSS.

TABLE OF CONTENTS:
  1. Adding CSS to Handling Views with CodeIgniter
  2. Review: loading view files sequentially with CodeIgniter
  3. Enhancing the look and feel of view files with CSS styles
  4. Rendering the improved version of a web page
By: Alejandro Gervasio
Rating: starstarstarstarstar / 9
March 26, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

In reality, enhancing the visual aspect of the web page created in the previous segment is only a matter of adding to the “header_view.php” file some basic CSS styles. It’s that simple, really. Nonetheless, it's useful to keep these styles, along with images, JavaScript, Flash files, etc residing in a separate folder, as you usually do when building your own web applications, right?

To accomplish this in a simple manner, I’m going to create an “assets” folder under the “codeigniter” directory (assuming that this is the root directory in your CI installation) and add a new subfolder called “css.” Once there, I’m going to define a “default.css” CSS file that will be attached to the header view, which will look like this:


body{

padding: 0;

margin: 0;

background: #999;

}

#container{

width: 600px;

margin: 0 auto;

}

#header{

padding: 10px;

background: #eee;

}

#content{

padding: 10px;

background: #9cf;

}

#footer{

padding: 10px;

background: #eee;

}

h1{

font: bold 2em Arial, Helvetica, sans-serif;

margin: 0 0 18px 0;

color: #039;

}

h2{

font: bold 1.5em Arial, Helvetica, sans-serif;

margin: 0 0 18px 0;

}

p{

font: normal .8em Arial, Helvetica, sans-serif;

margin: 0 0 18px 0;

}


That’s not rocket science, right? All that I did above was create a simple CSS file that hopefully will make the whole web page look a bit more appealing. Apart from building your skills in CSS, the educational aspect of creating this file is that it should give you a clear idea of how to define the structure of your web application when using CodeIgniter. In a case like this, the “assets” folder would include CSS, JavaScript and Flash files, along with images and so forth.

Well, now that I've defined the CSS file that will improve the visual presentation of the previous web page, it’s time to modify the “header_view.php” file that you learned before, so it can load the file.

This will be done in the next section. Thus, click on the link that appears below and keep reading. We’re almost finished!



 
 
>>> More PHP Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: