Part of the EllisLab Network
   
1 of 2
1
CSS and Images with CodeIgniter
Posted: 10 October 2007 07:36 PM   [ Ignore ]  
Summer Student
Total Posts:  5
Joined  10-10-2007

On my controller home.php, i have this simple line:

<?php
class Home extends Controller {

    
function Home()
    
{
        parent
::Controller();    
    
}
    
    
function index()
    
{
        $data[
'message'] = 'Hello World';
        
$this->load->view('home_view', $data);
    
}
}
?>

On my view file home_view.php, i have this:

<html>
<
head>
<
title>myApp</title>
<
link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</
head>
<
body>
<?=$message?>
</body>
</
html>

When i loaded the page, i noticed that the style.css was not getting loaded properly, then i changed the stylesheet href to :

<link rel=“stylesheet” type=“text/css” href=“system/application/views/styles.css” media=“screen” />

and this worked. Does this means, from now on, i have keep entering “system/application/views/” front of all my css and images? Is there not a easier way of doing this?

Profile
 
 
Posted: 10 October 2007 07:46 PM   [ Ignore ]   [ # 1 ]  
Grad Student
Rank
Total Posts:  31
Joined  08-27-2007

The easiest way is to move things like css, javascript, images and flash onto the webroot so you can access them like href=‘images/something.gif’ and ‘css/style.css’.  Files are relative to the index.php on the webroot.

Having your public web files somewhere on the root, outside of the views folder means that if you decide to move the application and system folders off the webroot, you won’t need to change any references.

Profile
 
 
Posted: 10 October 2007 11:21 PM   [ Ignore ]   [ # 2 ]  
Grad Student
Avatar
Rank
Total Posts:  94
Joined  09-20-2007

Yeah, i know hehehe, the best way to solve this USE FULL ROUTES example

check the code of this page,

link rel=“stylesheet” href=“http://codeigniter.com/themes/forum_themes/support/support.css” type=“text/css” media=“screen, projection” charset=“utf-8” >
<link rel=“stylesheet” href=“http://codeigniter.com/themes/forum_themes/support/theme.css” type=“text/css” media=“screen, projection” charset=“utf-8” />

Rick always use full paths http://codeigniter.com/themes/forum_themes/support/theme.css

with this you prevent it.

the other way its use routes relative to the INDEX FILE, the index file load ALL into HIM

 Signature 

PHP Rocks!

Profile
 
 
Posted: 10 October 2007 11:28 PM   [ Ignore ]   [ # 3 ]  
Lab Assistant
RankRank
Total Posts:  268
Joined  03-12-2007

you should check out the assets helper.  it is an easy way to set up your paths in your config file and then make a call in your view to display full paths.

Profile
 
 
Posted: 11 October 2007 01:14 AM   [ Ignore ]   [ # 4 ]  
Research Assistant
RankRankRank
Total Posts:  423
Joined  10-02-2006

Look up site_url() in the user guide.

 Signature 

CI version?
From SVN.

Profile
 
 
Posted: 11 October 2007 11:02 AM   [ Ignore ]   [ # 5 ]  
Grad Student
Rank
Total Posts:  31
Joined  01-15-2007

personally,I have a separate folder called CSS on the same level ascodeigniters “system folder” - that is root. then access the csss with:

<link rel=“stylesheet” media=“screen” type=“text/css” href=”/css/file.css” />

I am not fond of full routes since it requires additional work ifyou want to reuse this code on website etc smile

So if you have css in root then just tryx adding / to your example:

<link rel=“stylesheet” type=“text/css” href=”/styles.css” media=“screen” />

Profile
 
 
Posted: 22 October 2007 05:00 AM   [ Ignore ]   [ # 6 ]  
Summer Student
Total Posts:  1
Joined  10-22-2007

I was having a similar problem and then I remembered something I read about the file:

.htaccess

If you’ve edited yours to do a rewrite of your URI i.e. to eliminate the extra ‘/index.php/’ part, you may need to add |css| to your rewrite condition so it looks something like this:

RewriteCond $1 !^(index\.php|images|css|robots\.txt)

Profile
 
 
Posted: 22 October 2007 05:21 PM   [ Ignore ]   [ # 7 ]  
Grad Student
Avatar
Rank
Total Posts:  55
Joined  10-16-2007
kodafox - 22 October 2007 05:00 AM

I was having a similar problem and then I remembered something I read about the file:

.htaccess

If you’ve edited yours to do a rewrite of your URI i.e. to eliminate the extra ‘/index.php/’ part, you may need to add |css| to your rewrite condition so it looks something like this:

RewriteCond $1 !^(index\.php|images|css|robots\.txt)

This is what I use and it works good.

Profile
 
 
Posted: 13 November 2007 03:30 AM   [ Ignore ]   [ # 8 ]  
Summer Student
Total Posts:  1
Joined  11-13-2007

Hello,

I was having a similar problem and then I remembered something I read about the file:

.htaccess

If you’ve edited yours to do a rewrite of your URI i.e. to eliminate the extra ‘/index.php/’ part, you may need to add |css| to your rewrite condition so it looks something like this:

RewriteCond $1 !^(index\.php|images|css|robots\.txt)

i have this too and it works, IF i access my site without the third segment, i.e:

http://localhost/myweb/blog

BUT if i put the third segment, the css doesn’t work properly, i.e:

http://localhost/myweb/blog/index


what did i do wrong ?? Thanks for helping.

Profile
 
 
Posted: 17 November 2007 04:38 AM   [ Ignore ]   [ # 9 ]  
Summer Student
Total Posts:  24
Joined  11-16-2007

1. Did you add “css” to your .htaccess ?

Like this ;
RewriteCond $1 !^(index\.php|images|robots\.txt|css)

2. Did you load the URL Helper on your controller ?
$this->load->helper(‘url’);

3. Then you can call your style file with base_url
<link rel=“stylesheet” href=’<?=base_url()?>css/yourstyle.css’ type=“text/css”/>

Profile
 
 
Posted: 17 November 2007 06:03 AM   [ Ignore ]   [ # 10 ]  
Grad Student
Rank
Total Posts:  38
Joined  11-09-2007

you can try using the asset helper.

Profile
 
 
Posted: 17 November 2007 07:36 AM   [ Ignore ]   [ # 11 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  629
Joined  12-26-2006

Just to throw a spanner into the works…

I reckon that because the CSS file is part of the application code and it changes along with the views then it should be an integral part of the application. I create a css directory at the same level as the application and use this statement in my header.

<link type="text/css" href="<?= base_url() .APPPATH ?>css/ss_bets.css" rel="stylesheet" />

Just my two cents.

Cheers,

John_Betong
 

 Signature 

Joke of the day     (ongoing development site)

My Hippy Trail    Source code   

Latest Project

Profile
 
 
Posted: 29 March 2008 06:21 AM   [ Ignore ]   [ # 12 ]  
Summer Student
Total Posts:  1
Joined  03-29-2008
strogg - 17 November 2007 04:38 AM

1. Did you add “css” to your .htaccess ?

Like this ;
RewriteCond $1 !^(index\.php|images|robots\.txt|css)

2. Did you load the URL Helper on your controller ?
$this->load->helper(‘url’);

3. Then you can call your style file with base_url
<link rel=“stylesheet” href=’<?=base_url()?>css/yourstyle.css’ type=“text/css”/>

Thanks, I don’t know why it didn’t occur to me… smile Finally it’s working.

Profile
 
 
Posted: 10 October 2008 09:39 AM   [ Ignore ]   [ # 13 ]  
Summer Student
Avatar
Total Posts:  26
Joined  10-25-2007

you can use base_url()

 Signature 

Affairs that are done by due degrees are soon ended.

Profile
 
 
Posted: 25 October 2009 12:14 AM   [ Ignore ]   [ # 14 ]  
Summer Student
Total Posts:  2
Joined  10-24-2009

Just for those who are new in .htaccess and/or PHP/CI - than set css, js, images avalible:
1) set in .htaccess something like this
RewriteCond $1 !^(index\.php|images|css|scripts|robots\.txt)

2) for my dir structure - ./sys/app/views/layouts/scripts || ./sys/app/views/layouts/css if we suppose that I have Header.phtml in layouts write:

<link rel="stylesheet" type="text/css" [b]href="/css/style.css or /scripts/jquery.js(with script tags of course)"/>[/b]

etc.

Profile
 
 
Posted: 25 October 2009 12:32 AM   [ Ignore ]   [ # 15 ]  
Summer Student
Total Posts:  2
Joined  10-24-2009

sorry, all this works if U add scripts and css folders into root and if U want to place it in views/layouts/scripts - than U should write full path like this - sys/app/views/scripts/jquery.js f.e.

Profile
 
 
   
1 of 2
1
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 819, on March 11, 2010 10:15 AM
Total Registered Members: 119706 Total Logged-in Users: 33
Total Topics: 125901 Total Anonymous Users: 1
Total Replies: 662431 Total Guests: 366
Total Posts: 788332    
Members ( View Memberlist )