22

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.

Improve this question

8 Answers 8

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Is there anyway to load view 'header'/'footer' without calling $this->load->view('header') or $this->load->view('footer') ?<br> maybe it's look like an template...
remarkable! this was the answer to not being able to locate the css while loading php page
I would use base_url('css/moorainbow.css'); instead because otherwise you may get duplicated parts of your URL.
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

Improve this answer

1 Comment

This worked fine for me as: <style> @import url(<?=base_url('public/css/style.css') ?>); </style> my links like <link rel="stylesheet" type="text/css" media="screen" src='<?=base_url('public/css/style.css') ?>'/> 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 :(
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">
Improve this answer

Comments

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');
Improve this answer

Comments

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.

Improve this answer

Comments

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.

Improve this answer

Comments

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.

Improve this answer

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.