Loading CSS, JS in CodeIgniter

Question

I am kinda newbie to CodeIgniter. Somehow I set up the development environment and ready to go. But loading the CSS, JS into page seems a lot more confusing. Before moving, I googled a lot but the base_url solution is not helping.

Part of View :

<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet">
<link href='css/fullcalendar.css' rel='stylesheet'>
<link href='css/fullcalendar.print.css' rel='stylesheet'  media='print'>
<link href='css/opa-icons.css' rel='stylesheet'>
<link href='css/uploadify.css' rel='stylesheet'>

Controller :

public function dashboard()
    {
        $this->load->helper('url');
        $this->load->view('templates/css_styles');
        $this->load->view('templates/top_bar');
        $this->load->view('templates/left_menu');
        $this->load->view('pages/dashboard');
        $this->load->view('templates/footer');
        $this->load->view('templates/js_end');
    }
public function index()
    {
        $this->load->helper(array('form'));
        $this->load->view('login');
    }

route.php :

$route['default_controller'] = "welcome/dashboard";
$route['404_override'] = '';
$route['dashboard'] = 'welcome/dashboard';

If I put the dashboard method as default controller, the page is loading fine. But when I change it to just welcome, which is a login form and redirect to welcome/dashboard, the page doesn't load any CSS. Just all HTML texts. The dashboard page is just pure HTML, no PHP code written yet.

Please help me what might causing this.

This might be of help, please see this answer: http://stackoverflow.com/a/5450122/1913769 — Martín Peverelli, Dec 20 '12 at 20:25
This is really just a question about a lack of fundamental understanding regarding how any web-page works with relative and absolute URL's. Not much to do with CodeIgniter. — Sparky, Dec 20 '12 at 20:30
#Sparky - I am working with Spring+Hibernate and we simply put css,s files on webapp root and just call them. But when i am doing the same, it is working fine for login page, but once i logged in, i am redirecting to dashboard, which is were the problem is. — Rajkumar, Dec 21 '12 at 04:50
i tried all solution, and i found putting base_url in page much better. The solution i wanted was, when we place css,js inside Web Content in spring, we just simply put "css/filename.css" and it will load and i expect something like that. Anyways thanks for all your help — Rajkumar, Dec 24 '12 at 06:35

score 8 · Accepted Answer · answered Dec 20 '12 at 20:29

What's wrong with base_url()?

<link href="<?php echo base_url('css/bootstrap-responsive.css')?>" rel="stylesheet">

make sure you load URL helper, I recommend autoloading it: go to application/config/autoload.php and add it to the helper array:

$autoload['helper'] = array('url');

score 1 · Answer 2 · answered Dec 20 '12 at 20:35

You can use the link_tag() in html_helper.php to help get the paths correct.

First load the helper (I usually have it autoloaded)

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

Then you can reference css like this:

echo link_tag('css/bootstrap-responsive.css');

The advantages are the function tries to build the correct absolute URL to the css file and it automatically sets the rel attribute to stylesheet and the type attribute to text/css.

Also you should have Chrome, Safari, or Firebug for Firefox so that you can inspect the code and see if the CSS files are being loaded or if they are not found. This will help with debugging.

this will save some time – Charitha Goonewardena Oct 24 '16 at 19:15 — Charitha Goonewardena, Oct 24 '16 at 19:15

score 0 · Answer 3 · answered Dec 20 '12 at 20:23

0

Make sure you have a leading slash before your css folders:

    <link href="/css/bootstrap-responsive.css" rel="stylesheet">

And make sure that the files are indeed located in /css off your web root, not inside the application folder.

answered Dec 20 '12 at 20:23

Kenzo

3,513
4
17
16

score 0 · Answer 4 · answered Mar 14 '16 at 00:02

first you need load helper url

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

and then on controller

$this->data =site_url()."your css file";

then on your view

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

its simple.you can view full article load css/js

Loading CSS, JS in CodeIgniter

4 Answers4