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.

Answer 1

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');

Answer 2

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.