21

I am developing an custom API for a web solution and I am using the MVC design pattern. I have a modules folder so that I can swap in and out modules and also work on sections without disrupting working tested code. My only issue now is that I want to load CSS anywhere and have my application properly import the css file in the head tag. I know CodeIgniter does this but I'm not sure how.

Using PHP, how do I load in a CSS file anywhere and then have the code properly import the css within the head tags like CodeIgniter does?

Thanks in advance.

Torez
  • 1,902
  • 7
  • 25
  • 39

8 Answers8

31

You can load several views at once, or views inside other views.

So in this case I recomend you to create one header view where you load all css and js files

example:

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="<?php echo base_url();?>css/moorainbow.css" type="text/css" media="screen"/>
    </head>
    <body>

And call it like:

$this->load->view('header');
$this->load->view('view1');
$this->load->view('view2');

This way you can control the files (css+js+etc) you load in just one file.

Regrads,
Pedro
@pcamacho

Pedro
  • 2,907
  • 6
  • 34
  • 46
  • Is there anyway to load view 'header'/'footer' without calling `$this->load->view('header')` or `$this->load->view('footer')` ?
    maybe it's look like an template...     – Praditha Dec 22 '11 at 08:13
  • remarkable! this was the answer to not being able to locate the css while loading php page – sys_debug Sep 18 '12 at 08:28
  • I would use `base_url('css/moorainbow.css');` instead because otherwise you may get duplicated parts of your URL. – Alex W Apr 02 '14 at 20:36
7

Your question is a little unclear to me, but I'll do my best to help. Are you simply wondering how to include a CSS file in your Views? If so, simply use the following:

<style> @import url('/css/styles.css'); </style>

If your CSS folder is at the root of your CodeIgniter project, you could do something like this using CodeIgniter's base_url() function:

<style> @import url('<?=base_url()?>/css/styles.css'); </style>

It will ensure your pages stay portable and have the correct absolute URL. Hope this helps! If not, try being a little more specific in your question

Colin Brock
  • 21,267
  • 9
  • 46
  • 61
  • This worked fine for me as: my links like '/> work when you view the source they are linking to the correct file but they don't apply this CSS I need to see some logs really but my shared hosting wont allow me :( – Someone May 13 '13 at 08:54
3

Use an absolute …

<link rel="stylesheet" type="text/css" href="http://example.com/style/css">

… or root relative URI.

<link rel="stylesheet" type="text/css" href="/style/css">
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
3

also make sure you aren't redirecting the url in the .htaccess file, allow css

.htaccess file

RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|robots\.txt)
RewriteRule ^(.*)$ index.php/$1 [L]

Also here's what i added in my header template

$this->load->helper("url");
echo link_tag(base_url().'css/styles.css');
mc.
  • 539
  • 6
  • 15
2

you can do the same as i do, in your view file do the following

<link rel="stylesheet" href="{pathToApp}/styles/main.css" type="text/css" media="screen" />

(after creating a styles folder in the application directory) then in your controller, pass this:

$path = '../system/application';

into an array and send the array as the second parameter, if you are using load->view to load your view's you need to change {pathToApp} to $array['path'] (change $array to whatever you called it). If you are using CodeIgniter's built in templating system then you are all set. At least with this way you won't need to change the absolute URL when you migrate your site.

Marc Towler
  • 705
  • 11
  • 32
1

One important thing that I realized is that the RewriteCond in the .htaccess refers to FOLDERS not FILE TYPES. In other words, putting |css| in there doesn't do jack unless your stylesheets are in the /css/ folder. List the actual folders, so |styles| or |scripts| or whatever. THEN and only then will using "<?=base_url()?>styles/style.css" (for example) show up. It took me about 2 days to figure this out, so I hope reading this saves someone some hair and high blood pressure.

Dane Calderon
  • 71
  • 5
0

First you create a Controller function and load the HTML helper for call css in Codeigniter.

sample code

<?php 
class Home extends CI_Controller{

    public function helper(){
        $this->load->helper('html');    
        $this->load->helper('url'); 
        $this->load->view('index');

    }
}
?>

Then to call the css file using link_tag key word. Something like this in the index.php file in 

<html>
<head>
    <title></title>
     <?php echo link_tag('css/moorainbow.css');?>
</head>
<body>
<?php 
.....
?>
</body>
</html>

Here the css/ is the folder that contain the moorainbow.css file.

NIMISHAN
  • 1,265
  • 4
  • 20
  • 29
-1

do this

<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">

but first create a css folder in the root directory and put style.css there.

HamZa
  • 14,671
  • 11
  • 54
  • 75
surafel
  • 1