Login

03-10-2008, 08:53 AM

[eluser]zimco[/eluser]
Using CI 1.6.1

I'm not getting how to use a css file and any style related images in an images folder.

I put the following lines in the /system/application/config/config.php

Code:
/*

|--------------------------------------------------------------------------

| CSS - stylesheets

|--------------------------------------------------------------------------

|

| Set some stylesheet

|

*/

$config['css'] = "default.css";

Then created a controller Home like:

Code:
class Home extends Controller { 

   var    $base; 

   var    $css;

   function Home()

   { 

       parent::Controller(); 

       $this->base = $this->config->item('base_url'); 

       $this->css = $this->config->item('css');

       $this->load->helper('url');

       $this->load->helper('form');

   }

/*======================================================================*\

    Function:    index()

    Purpose:    Provide the website entry home page

    Input:        

    Output:        Display home page view

\*======================================================================*/

     function index()

   {

   $data['css'] = $this->css; 

   $data['base'] = $this->base;

   // load the header view

   $data['header'] = $this->load->view('header', '', true);

   // load the menu view

   $data['menu'] = $this->load->view('menu', '', true);

   // Load the page content

   $data['content'] = $this->load->view('content','', true);

   // load the header view

   $data['footer'] = $this->load->view('footer', '', true);

   $this->load->view('layout', $data);

   }

My /views/layout.php page looks like:

Code:
&lt;?php echo $header; ?&gt;

&lt;?php echo $menu; ?&gt;

&lt;?php echo $content; ?&gt;

&lt;?php echo $footer;  ?&gt;

The page loads but is not styled and no images appear. All i see is my page text and links. The CSS and images folder are currently located at the top level of my web-application folder: in the same folder as the system folder, user_guide folder, license file, index file.

It is probably a simple concept i am not understanding so could somebody with more CI experience and patience tell me what i am doing wrong?

03-10-2008, 10:38 AM

[eluser]Michael Wales[/eluser]
You would use them the exact same way as always... assuming your $data['css'] variable is correct, do the following in the view:

Code:
&lt;link rel="stylesheet" href="&lt;?= $css; ?&gt;" type="text/css" media="screen, projection" charset="utf-8" /&gt;

Personally, I make a helper that takes care of it all:

Code:
&lt;?= css_asset('/assets/css/style.css', 'screen, projection'); ?&gt;

03-10-2008, 11:56 AM

[eluser]ontguy[/eluser]
I think you may just be missing the folder name:

Code:
$config['css'] = "/css/default.css";

03-10-2008, 12:27 PM

[eluser]zimco[/eluser]
Thanks for the replys to help. However, i seem to have more than that messed-up because in my original header.php file i tried using the variables i set for $css and $base in my header.php file like you suggested:

Code:
&lt;base href="&lt;?php echo $base; ?&gt;"/&gt;

&lt;link href="&lt;?php echo $css; ?&gt;" rel="stylesheet" type="text/css" />

but it would always throw a undefined variable errors on both the $css and $base variables, but when i changed the code to the following segment $this->base and $this->css then it would find my stylesheet and images and work as expected:

header.php

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;

&lt;title&gt;Website Home Page&lt;/title&gt;

&lt;meta name="keywords" content="" /&gt;

&lt;meta name="description" content="" /&gt;

&lt;base href="&lt;?php echo $this-&gt;base; ?&gt;"/> 

&lt;link href="&lt;?php echo $this-&gt;css; ?&gt;" rel="stylesheet" type="text/css" />

&lt;/head&gt;

&lt;body&gt;

<div id="header">

    <h1>Welcome</h1>

    <h2>to the Scoring System</h2>

</div>

Doing it like $this->css in the header view file does not seem quite right to me, but it works. The $css and $base variable i set in the controller are not available to me in the view but everything else is. It's probably my mis-understanding of how things get passed between controllers and views, but i don't get it?