How to load css in codeigniter

Question

I am new to codeigniter, and I am using v.2.12. I am getting an error when I try to load the css from the external file.

I create the css folder inside the application folder. And I create the css file in the name of all.css.

In the view file I use the following code to link the css file.

<link rel="stylesheet" type="text/css" href="<? echo base_url();?>css/all.css">

But the css file is not loading. I'm getting 404 error. Here is my configuration settings:

$config['base_url'] = 'http://webscarlets.com/ci/index.php';
$config['index_page'] = 'index.php';

Website Link: http://webscarlets.com/ci/index.php/welcome.

Christian Davén · Accepted Answer · 2013-06-07 09:16:16Z

34

This is how you include CSS files in CodeIgniter:

<?php echo link_tag('css/mystyles.css'); ?>

That snippet will output this HTML:

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

The function link_tag is in the HTML helper, which must first be loaded.

(Note that you probably shouldn't put your CSS files in /application/css. It's just easier to put them in /css or maybe /assets/css.)

answered Jun 7, 2013 at 9:16

Christian Davén

18.6k13 gold badges71 silver badges79 bronze badges

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

Comments

Alaa Badran · Accepted Answer · 2012-08-06 08:09:44Z

10

The function base_url() should return the base path (without index.php)

You may fix it by adding a backslash like:

<link rel="stylesheet" type="text/css" href="<? echo base_url();?>/css/all.css">

or remove the index.php from your config:

$config['base_url'] = 'http://webscarlets.com/ci/';

answered Aug 6, 2012 at 8:09

Alaa Badran

1,85816 silver badges19 bronze badges

7 Comments

Soundhar Raj Over a year ago

Thanks for the reply let me try this and tell you

Alaa Badran Over a year ago

what is the URL printed out for CSS?

Alaa Badran Over a year ago

The folder CSS was not found on your server. Make sure you uploaded the CSS folder and all.css file

Soundhar Raj Over a year ago

check out the link i have posted an another post

PHP dev Over a year ago

@Alaa Badran hi,when i use this i don't get my styles and also in my inspection on firebug,it shows that access forbidden,please help me...!!i'm trying it for 3 days:(

|

Jorge Luis Jiménez Prada · Accepted Answer · 2013-08-29 15:25:30Z

4

I just find the solution to avoid index.php file and load ours CSS files. Just copy the code below in a .htaccess file:

Options +FollowSymLinks
Options -Indexes
DirectoryIndex index.php
RewriteEngine on
RewriteCond $1 !^(index\.php|images|styles|scripts|robots\.txt|favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L,QSA]

Greeting!

answered Aug 29, 2013 at 15:25

Jorge Luis Jiménez Prada

492 bronze badges

1 Comment

b_dubb Over a year ago

The OP asked for a PHP / CodeIgniter way to load css. Your response is unrelated.

SMHasnain · Accepted Answer · 2015-01-13 10:46:36Z

3

To attach a CSS, JS, Images .etc you just have to do is go to your config folder and write at the end of the constant.php file.

define('URL','ADD YOUR LOCAL/REMOTE PATH');

define('CSS',URL.'public/css/');
define('IMAGES',URL.'public/images/');
define('JS',URL.'public/images/');

After that goto your view and in the link just add

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

this will solve your problem.

Hope it helps.

answered Jan 13, 2015 at 10:46

SMHasnain

7065 silver badges13 bronze badges

Comments

Gampesh · Accepted Answer · 2015-10-07 15:58:02Z

3

Add below line in your controller action /application/controllers/yourController.php

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

Then add below line to your view file's head tag.

<link rel="stylesheet" type="text/css" href="<? echo base_url('assets/css/yourcssfile.css');?>" />

Assuming that you have assets/css/ folder is created in your app directory.

<path to your app folder>/assets/css

answered Oct 7, 2015 at 15:58

Gampesh

4,4042 gold badges14 silver badges9 bronze badges

Comments

jogesh_pi · Accepted Answer · 2012-08-06 08:15:17Z

2

before using the base_url() you should have to load the URL helper class.

something like $this->load->helper('url'); in your controller

base_url() return you the path something like
'http://webscarlets.com/'
if you have set it directly in the root or 'http://webscarlets.com/dir/'

and also make sure about the location of your CSS file.

follow the link to know more about URL Helper

answered Aug 6, 2012 at 8:15

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

1 Comment

Soundhar Raj Over a year ago

Thanks for the reply. I loaded the base url helper $autoload['helper'] = array('url','form','html');

WatsMyName · Accepted Answer · 2012-08-06 08:32:35Z

2

another way would be

define a constant in constants.php (in config directory)

define("LAYOUT_URL","http://localhost/yoursite/css/");

"css" folder here i m assuming is inside application folder. NOw you can attach css in page like

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

answered Aug 6, 2012 at 8:32

WatsMyName

4,5025 gold badges49 silver badges83 bronze badges

8 Comments

Soundhar Raj Over a year ago

but can you tell me why this is not working <link rel="stylesheet" type="text/css" href="<? echo base_url();?>/css/all.css">

Soundhar Raj Over a year ago

define("LAYOUT_URL","localhost/yoursite/css/"); <link rel="stylesheet" type="text/css" href="<?php echo LAYOUT_URL;?>all.css"> I dont know this is proper way to access the css files?

WatsMyName Over a year ago

I m not sure, but your base_url() is not loading your css file because of index.php in the config. It would likely search for the controller. My way is a clean way, there is nothing wrong with my way, it only matters if you're comfortable using it.

Soundhar Raj Over a year ago

ok now check the link css is not loading. After adding the htaccess file to remove index.php from url css is not loading webscarlets.com/ci now if i remove the .htaccess file css is working

Soundhar Raj Over a year ago

Can you tell me how to fix it? here is my .htaccess code RewriteEngine on RewriteCond $1 !^(index\.php|images|robots\.txt|css) RewriteRule ^(.*)$ /ci/index.php/$1 [L] I added this htaccess script in the ci folder

|

tinhphaistc · Accepted Answer · 2012-08-06 18:16:58Z

2

As Jogesh_p.

you use base_url as follow put in controller (your controller)

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

in controller . if you want to use

as follow put in where you want use base_url.

echo base_url()

NOTE: better you create new folder at root

(Example: theme) same: application, system, user_guide, theme)

i hope can you do

edited Aug 6, 2012 at 18:16

answered Aug 6, 2012 at 18:10

tinhphaistc

452 silver badges11 bronze badges

Comments

Qirel · Accepted Answer · 2016-07-03 16:56:42Z

2

Edit autoload.php as follows

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

Then load css , js,image like that

img src="<?php echo base_url(); ?>assets/images/master.jpg"</img>

edited Jul 3, 2016 at 16:56

Qirel

26.6k7 gold badges54 silver badges71 bronze badges

answered Jul 3, 2016 at 14:44

Saptarshi Chaudhuri

212 bronze badges

Comments

2 revs · Accepted Answer · 2012-08-06 10:12:50Z

1

//config.php
    $config['base_url'] = 'http://webscarlets.com/ci/';
    $config['index_page'] = 'index.php';

and try to load css by adding application folder

<link rel="stylesheet" type="text/css" href="<? echo base_url();?>application /css/all.css">

EDIT

Here base_url() echos 'http://webscarlets.com/ci/' then adding the file with path application /css/all.css

edited Aug 6, 2012 at 10:12

community wiki

2 revs
MR Srinivas

1 Comment

Soundhar Raj Over a year ago

Thanks for reply. I tried as you said but it not working. What should i do next?

NIMISHAN · Accepted Answer · 2016-07-21 05:50:36Z

1

Include $this->load->helper('html'); in a controller function.

And use linktag key word in view file something like this:

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

Here the resources is the folder that contain the style.css file.

answered Jul 21, 2016 at 5:50

NIMISHAN

1,2654 gold badges21 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to load css in codeigniter

11 Answers 11

Comments

7 Comments

1 Comment

Comments

Comments

1 Comment

8 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Comments

7 Comments

1 Comment

Comments

Comments

1 Comment

8 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related