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.
Related
I think i've got something wrong, base_url is working fine in file index.php which i put it at directory views, but not working in file login.php where i put that file in same directory with file index.php..
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--
Botany Template
http://www.templatemo.com/preview/templatemo_391_botany
-->
**<link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">**
<link href="http://localhost/blabla/assets/templatemo_style.css" rel="stylesheet" type="text/css">
see that code, 1st link is not worked, but 2nd link is worked.. Thanks for ur response..
My bad is not load file login.php from controller, but directly to file..
Like this (wrong example):
<li>Login</li>
Should be like this (correct example):
<li></li>
But should create function in my controller like this:
public function login() {
$this->load->view("login.php");
}
This is solved my problem..
I'm trying to use bootstrap on a codeigniter web but it looks like the bootstrap files are not found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="<?php echo base_url('application/bootstrap/css/bootstrap.min.css');?>" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo base_url('application/bootstrap/js/bootstrap.min.js');?>"></script>
I've checked the paths generated by base_url() and it are correct.
move bootstrap folder on root location, because CI is understanding application folder as controller although application folder is restricted from client request by /application/.htaccess file
|-
|-application
|-bootstrap
//and use path as
<?php echo base_url('bootstrap/css/bootstrap.min.css');?>
Here's the best guide I've found so far:
How to include bootstrap in CI
In short:
Download bootstrap
Put it in an assets folder on same level as application folder
Also put jquery
Include css in header and jquery in footer of your templates:
<html>
<head>
<title>CodeIgniter Tutorial</title>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>" />
</head>
<body>
<h1>H_E_A_D_E_R</h1>
and :
<hr/>
<em>© 2016</em>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-3.1.1.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
</body>
</html>
Don't forget to include the CodeIgniter URL helper in your controller
$this->load->helper('url');
Just sharing over here so that you no need to combine folders manually. I used this package offered from github regularly to commit new projects. Of course you will have to modify the application/config/config.php to get things work !
https://github.com/sjlu/CodeIgniter-Bootstrap
Cheers !
Create a folder(assets) in Codeigniter root directly (Same level to application folder)
Paste your bootstrap files into that folder
add link code in your view file
<link type="text/css" href="<?= base_url(); ?>assets/bootstrap.min.css" rel="stylesheet">
add this line in your controller file application/cotrollers/test.php
<?php
class Test extends CI_Controller {
public function index()
{
$this->load->helper('url'); // Load url links
$this->load->view('index'); //Load view page
}
}
?>
Now you can use bootstrap classes in your view
Download the Bootstrap file from the internet if you want to work offline
Unzip and rename and copy to root folder. If you put it in application folder, .htaccess will not allow it to be accessed.
Add the link like the following line of code:
<link href="<?php echo base_url('assets/css/bootstrap.min.css');?> rel="stylesheet">
If you use the Ci4 , add the folder 'bootstrap' in the default folder 'public'.
Thanks
I Just downloaded CodeIgniter 2.1.3 and Trying to import css into via header_controller,
I have tried SOF: CodeIgniter - Loading CSS, CI_Help_page and codeigniter CSS problem (SitePoint Form Thread). I'm currunlty utterly confuse and Can't find the simple Answer. Does any one out there has a one step answer on how to Import CSS and JS on CodeIgniter version 2.1.3.
I have : register.php
<?php
class register extends CI_Controller {
public function index()
{
//Get header
$this->load->view('header');
//Any other class
$this->load->view('register');
}
}
than header.php
<?php
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="<?php echo base_url();?>css/bootstrap.css" type="text/css" media="screen"/>
<title>DMP</title>
</head>
<body>
Here is my project folders: Project folders.png (incase you want to guid me on where can I place CSS)
Thanks.
Only guessing, but in order to be able to use base_url() you need to load the url helper in your controller. Also, as #hakre already said in the comments turn on your error reporting.
class register extends CI_Controller {
public function index()
{
$this->load->helper('url');
//Get header
$this->load->view('header');
//Any other class
$this->load->view('register');
}
}
This should work
<link rel="stylesheet" href="<?php echo base_url('css/bootstrap.css')?>" type="text/css" media="screen"/>
Add this on your view page:
<link rel="stylesheet" href="<?php echo base_url();?>css/bootstrap.css" type="text/css" media="screen"/>
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
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