RaWak
RaWak

Reputation: 23

External css file not loading in Codeigniter view

I have used css w/ codeigniter plenty of times in the past but I am just not able to configure it on a new server setup. I have looked at almost all the answers on Stack overflow but none of them seem to be working for me. I have created a very basic set of files for testing -

Controller (codeigniter/application/controllers/Pages.php)

<?php
class Pages extends CI_Controller{

        public function testthis(){

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

        }
}
?>

View (codeigniter/application/views/testcss2.php)

<html>
<head>
  <title>CSS styled page</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url();?
>testcss.css">
</head>

<body>

<!-- Main content -->
<h1>Testing CSS styled page for codeigniter</h1>

<p>Welcome to my styled page!

<p>CSS Styled page

<address>7th July 2017
</address>

</body>
</html>

Config.php

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

autoload.php

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

The testcss.css file was placed in the root html folder on Ubuntu but I ended up copying it in almost every directory out of frustration of it not getting picked up.

The result - The page gets displayed successfully but without any styling. If I copy the contents of the css file and paste it in the view file inline using the style tag, the css works ! But not while using external css.

Why is using css with codeigniter so frustrating !!!

Upvotes: 1

Views: 3037

Answers (2)

akbansa
akbansa

Reputation: 393

Controllers/pages.php

<?php
class Pages extends CI_Controller{
function __construct() {
parent::__construct();

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

public function index() {    
$this->load->view('testcss');
}
}
?>

views/testcss.php

<html>
<head>
<title>Load css and javascript file in codeigniter</title>

<!--Load style.css file, which store in css folder.-->
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
</head>
</html>

Sometimes, you need to give permissions to use css and js from root. Putting them into folder gives you way to manage and include all from same path.

Upvotes: 0

Kamran Jabbar
Kamran Jabbar

Reputation: 878

For example your project name is "ProjectName", Add folder assets and place css file inside of it.

Here in config change base_url

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

After that in view use this way

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

I hope it will work for you.

If feel any issue please let me know. Thank you

Upvotes: 2

Related Questions