CSS Not Working With CodeIgniter - php

Here is a part of my CI code:
class page extends CI_Controller {
var $Page;
public function __construct() {
parent::__construct();
$this->Page = 1;
$this->load->model('posts_model');
$this->load->helper('url');
}
public function index() {
$data['posts'] = $this->posts_model->get_posts($this->Page);
$this->load->view('header');
$this->load->view('main', $data);
$this->load->view('footer');
}
function page_num($page) {
$this->Page = $page;
$data['posts'] = $this->posts_model->get_posts($this->Page);
echo $this->Page;
$this->load->view('header');
$this->load->view('main', $data);
$this->load->view('footer');
}
}
And this is link tag of my View File:
<link rel="stylesheet" type="text/css" href="css/indexpage.css" media="all"/>
When I open the index file (/My-Site/), CSS works fine, but when I open for
example the url :
" /My-Site/page/page_num/3 ",
the page opens but with no CSS styles!
Can any body help me please?

use base_url() function to get the url of the site
base_url() gives the url of the website where the index file is located.
eg: /My-Site/
or you can give the file location as the parameter: base_url('/css/indexpage.css') then use it as <link rel="stylesheet" type="text/css" href="<?php echo base_url('/css/indexpage.css');?>" media="all"/>

Try it.
you can use base_url() in your css. see below code.
<link rel="stylesheet" href="<?php echo base_url(); ?>css/style.css" type="text/css" media="all" />

1 -
change it to :
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/indexpage.css');?>" media="all"/>
and you sould already know this , in
application/config/config.php
set
$config['base_url'] = 'www.yorsite.com';
2 -
you have to include the css only in one of your views
i.e
if you have include it in the header.php file
do not add it to the main.php or footer.php

It is usually a good practice to use
<base href="<?php echo base_url(); ?>" />
in your head section of the view page.
That way you don't have to worry about adding base_url to all your href and src attributes.
So if your css file is in codeigniter/assets/css folder, just use
<link type="text/css" rel="stylesheet" href="assets/css/style.css" />
Similarly for subsequent scripts and css you can just use "assets/js/filename" or "assets/css/filename".

Change URL here:
<link rel="stylesheet" type="text/css" href="css/indexpage.css" media="all"/>
to:
<link rel="stylesheet" type="text/css" href="/css/indexpage.css" media="all"/>
Slash at the beginning will point to domain without any sub categories.

When working with codeigniter remember that the only page that outputs HTML is the index.php file so your css should be relative to this file or you use absolute url. You can create a folder anywhere some developers create an asset folder at the webroot here they place their javascript folder image folder and css folder. But the safest way to go is to use absolute links for your assets-Javascript, css, and images.
The easiest way to use absolute link is to use base_url("assets/css/indexpage.css");
This is how to use it:
Load url helper in any of your controllers. $this->load->helper('url);
In your view the area where you want to do the linking use the base url function.

It depends on where you have placed the css file. Try ../css/indexpage.css

Related

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 !!!
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
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.

External CSS link is not working in codeIgniter

I have tried base_url() function, But I didn't understand where am I wrong?
I have also mentioned - $this->load->helper ('URL'); in function abc() in controller.
Here is my code,
<link href="<?PHP echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet" type="text/CSS"/>
Use below code to link your css :
<link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet" type="text/css">
make sure you have configure the CI configuration properly :
CONFIG.PHP
$config['base_url'] = 'http://localhost/your_project/';
$config['index_page'] = '';
AUTOLOAD.PHP
$autoload['helper'] = array('url');
It is because of the way you are referencing the css file. You can use this:
<link href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet">
Or you can use this:
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
Notice the / at the start of the link, this means the browser will look from the base of your website url (your domain). If you miss it out it will use the relative part of the url, so if you are referencing a controller it will assume this is a sub folder for the location of the css file too.
You are better off with the base_url format given first, if you are using a local host for development then you will not have any problems with the url base. If you app is moved to a sub folder on another site or with a sub domain etc you will not have any problems either.
So base_url is the way to go here. More info in the docs.
http://www.codeigniter.com/user_guide/helpers/url_helper.html#base_url
I am thinking you have not set tour base_url if your base url shows Ip address in links your css will not work
You need to set this value
$config['base_url'] = 'http://localhost/yourproject/';
Head
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet">
Make sure your assets folder out side of application
application
assets
A good thing is to also autoload url helper lower case.
$autoload['helper'] = array('url');

CodeIgniter: Add css link

I am trying to use the PHP Framework CodeIgniter for a PHP project. I never used it before. According to its documentation I activated the helper URL and included the css link as shown below:
$autoload['helper'] = array('url');
<link rel="stylesheet" type="text/css"
href="<?php echo base_url();?>public/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css"
href="<?php echo base_url();?>public/css/style.css"/>
Unfortunately the page is not able to load the css. Obviously if I put the compiled CSS link the page is able to load it.
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Base_url() does not add a trailing slash. You need a forward slash in between the PHP code and public in the link href.
Say your base url is /htdocs/website/, the way you currently have it set up would print out /htdocs/websitepublic/css/style.css.
Here is the fixed code:
<link rel="stylesheet" type="text/css" href="<?php echo base_url();>/public/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();>/public/css/style.css"/>

Loading CSS, JS in CodeIgniter

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

CSS doesn't link properly from the header file using base_url helper

My header.php doesn't link to default.css properly. Page loads without CSS applied.
If I view the source of the page and click on the link to .css file - 403 Forbidden shows up in Source View.
config.php
$config['base_url'] = 'http://localhost/dev/';
routes.php
$route['default_controller'] = "page/view";
$route['404_override'] = '';
pages is the controller
view is the method
application/view/templates/header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="<?php echo base_url(); ?>application/css/default.css" rel="stylesheet" type="text/css" />
<title><?php echo $title; ?></title>
</head>
<body>
application/css/default.css
* {margin:0;padding:0;}
body {
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
...
}
application/images/
-- bg.gif GIF Image 1KB
Is a good practice to put css files in "assets" directory instead of "application". Move the file to a directory called assets/css in your DOCUMENT_ROOT and change this line:
<link href="<?php echo base_url(); ?>application/css/default.css" rel="stylesheet" type="text/css" />
to:
<link href="<?php echo base_url(); ?>assets/css/default.css" rel="stylesheet" type="text/css" />
This is the default state of Codeigniter. You need to create a .htaccess file in your css and image directory and put this code (it should work, I am using it):
allow from All
Or you can create a public folder in the root folder and not have this problems.
Leave base_url in config blank.Like this:
$config['base_url'] = '';

Categories