how to load css file in codeigniter

Question

Hi Frnds i cannot able to load css file in codeigniter. so please tell me how to load. Codeigniter sample Directory Structure

views
models
controllers
assets a) stylesheets b) javascript c) images
Config

Controller:

    <?php if (!defined('BASEPATH')) exit('No direct script access allowed');
    class Learnersway extends CI_Controller
    {
        function index()
        {
            $this->load->view('home_learnersway');
        }
    }
    ?>

View

    <html>
    <head>

        <link rel="stylesheet" type="text/css" href=“assets/stylesheets/main.css”   />

    </head>
    <body>
    <div class="wrapper">
    <div class="header">
    <div class="title"><img height="136" src="../images/learnersway.jpg" width="272" /></div>

    <div class="main_menu">
    <ul>
        <li>HTML</li>
        <li>XML</li>
        <li>CSS</li>

    </ul>
    </div>
    </div>

    <div class="main_container">
    <div class="sub_menu">
    <ul>
        <li>HTML Introduction</li>
        <li>HTML Editors</li>
        <li>HTML Basic</li>
        <li>HTML Elements</li>
        <li>HTML Attributes</li>
        <li>HTML Headings</li>
        <li>HTML Paragraphs</li>
        <li>HTML Formatting</li>
        <li>HTML Links</li>
        <li>HTML Head</li>

    </ul>
    </div>

    <div class="sub_container">
    <div>Under Construction...</div>
    </div>
    </div>

    <div class="footer">
    <div class="left">All Rights Reserved @ LearnersWay.com</div>

    <div class="right">
    <ul>
        <li>About Us</li>
        <li>Terms &amp; Privacy Policy</li>

    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>

Note:

Please tell me how to load css file in codeigniter. Even if can tell me how load javascripts and images also. I am a beginner in codeigniter MVC Framework.

Madhawa Priyashantha · Accepted Answer · 2016-07-14 03:31:29Z

9

First go to application/config/autoload.php. Then add $autoload['helper'] = array('html','url');

<link rel="stylesheet" href="<?php echo base_url('assets/stylesheets/main.css')?>"/>
//OR
<?php echo link_tag('assets/stylesheets/main.css')?>

//Image
<?php echo img('asset/images/learnersway.jpg')?>
//OR
<img src="<?php echo base_url('asset/images/learnersway.jpg')?>" />

//Javascript
<script src='asset/javascript/yourscript.js'></script>

Please visit userguide http://ellislab.com/codeigniter%20/user-guide/helpers/html_helper.html

edited Jul 14, 2016 at 3:31

Madhawa Priyashantha

9,9057 gold badges38 silver badges65 bronze badges

answered Dec 20, 2013 at 7:12

lyhong

9471 gold badge13 silver badges24 bronze badges

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

8 Comments

user3011896 Over a year ago

Hi Boss, if i use echo base_uri() showing empty page. if i use echo base_url() showing content without CSS format. Please tell me now what i need to do. NOTE: i am running codeigniter in my local system

lyhong Over a year ago

Are you sure you loaded url helper? What is your base_url() in config.php file?

user3011896 Over a year ago

ya sure i was loaded helper and base_url showing empty like this $config['base_url']= '';

lyhong Over a year ago

it is your folder project

dsdsdsdsd Over a year ago

I disagree with telling a new user to First go to application/config/autoload.php. Then add $autoload['helper'] = array('html','url'); ... ... ... ... ... ... during learning phase, doing it manually is more meaningful ...

|

Hugo B. · Accepted Answer · 2015-03-04 09:37:07Z

4

There are many ways to include css-files, e.g.:

Load this helper: $this->load->helper('url'); and then you can use this in your view:

<link rel="stylesheet" type="text/css" href=“<?php echo base_url(); ?>path/to/css-file">

or

<link rel="stylesheet" type="text/css" href=“<?php echo base_url('path/to/css-file'); ?>">

edited Mar 4, 2015 at 9:37

answered Dec 20, 2013 at 6:59

Hugo B.

5031 gold badge10 silver badges26 bronze badges

1 Comment

elvenbyte Over a year ago

I did echo base_url('path/to/css-file'); instead

user2936213 · Accepted Answer · 2013-12-20 06:59:25Z

1

In your view do use site_url(); to load css,js and images as:

<link rel="stylesheet" type="text/css" href=“<?php echo site_url();?>assets/stylesheets/main.css”  
<script type="text/javascript" language="javascript" src="<?php echo site_url(); ?>assets/javascript/yourjs.js"></script>

Put this both in head tag and wherever you want to show images use this:

<img title="yourimagetitle"src="<?php echo site_url();?>assets/images/yourimage.extension" height="100" width="200">

answered Dec 20, 2013 at 6:59

user2936213

1,0111 gold badge8 silver badges19 bronze badges

Comments

Sandeep Maurya · Accepted Answer · 2013-12-20 06:59:39Z

1

use below lines in your template file

<link rel="stylesheet" href="<?php echo $base?>/application/css/style.css" type="text/css">

and load this helper file $this->load->helper('url')

answered Dec 20, 2013 at 6:59

Sandeep Maurya

514 bronze badges

4 Comments

user3011896 Over a year ago

where should i need to load helper file either view or controller. plz tell me.

user3011896 Over a year ago

If i use the above code u mentioned. i am getting following error: A PHP Error was encountered Severity: Notice Message: Undefined variable: base Filename: views/home_learnersway.php Line Number: 9 /application/assets/stylesheets/main.css" type="text/css">

Sandeep Maurya Over a year ago

so instead of $base use your base_url() path.

user3011896 Over a year ago

can u tell me how to identify my base_url. Because i am running my source codes in my local system

Community · Accepted Answer · 2017-05-23 12:00:39Z

0

you can use my answer on this question how to load css, js dynamically in codeigniter

    public function index() { 
// View "css_js_view" Page.
 //conditional 
if(your condition){
 $this->data = array( 'css' => site_url()."your css file", //this directory you css 'js' => site_url()."your js file" //this directory you js 
);
 }else{
 $this->data = array( 'css' => site_url()."your css file", //this directory you css 'js' => site_url()."your js file" //this directory you js 
);
 } 
$this->load->view('load_view',$this->data);

}

than on your view

<!--Load css and js--> 
    <link rel="stylesheet" type="text/css" href="<?php echo $css; ?>">
     <script src="<?php echo $js; ?>"></script>

also you can ue this tutorial How to load css,javascript conditionally?

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Feb 20, 2016 at 6:33

putranoval

312 bronze badges

Comments

Towsif · Accepted Answer · 2020-01-30 09:58:08Z

The best practice in codeigniter for set up the assets as below flow:

application
assets
system

But you want the flow as below:

application > assets > css > style.css
system

So if you want to keep the assets folder inside the application, then you've to do some extra functionality as below: First, make sure that you've loaded the URL helper in your controller which is:

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

you have to first create a helper named "my_helper.php" at "application/helpers" directory with this code:

if ( ! function_exists('asset_url()'))
{
  function asset_url() {

    return base_url().'application/assets/';

  }
}

Now, you have to load this helper into your controller as below:

$this->load->helper("my_helper");

Now replace your .htaccess code at 'application/'' directory with the below code:

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

After doing all the above functionality, you have to declare your assets in view as below:

<link rel="stylesheet" href="<?php echo asset_url(); ?>css/style.css">

Vivek Mandal · Accepted Answer · 2020-02-01 13:25:16Z

0

First open config.php file and give base_url like

$config['base_url'] = 'http://localhost/your_file_name/';

after this load helper into your controllers file like this:

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

then goto your view folder and give link like this:

<link rel="stylesheet" href="<?php echo base_url(); ?>assets/stylesheet/main.css">

answered Feb 1, 2020 at 13:25

Vivek Mandal

431 silver badge5 bronze badges

Collectives™ on Stack Overflow

how to load css file in codeigniter

7 Answers 7

8 Comments

1 Comment

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

8 Comments

1 Comment

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related