0

I downloaded a html theme from a website and i'm trying to put it in my codeigniter project. I copy and pasted the .html file from the downloaded theme folder into my view "index_v.php". I also copied the css folder directly into the views folder. The index_v.php file calls the .css file like this

<link rel="stylesheet" href="style.css"> 

Yet when I load the page it doesn't load the .css file.

2
  • 1
    What happens if you call the style sheet directly? Commented Jul 1, 2011 at 15:00
  • Can you go directly to the style sheet link? Also, is the css not being loaded or is the style sheet not being loaded? Can you see the <link> tag in your html when you load the page? Commented Jul 1, 2011 at 15:05

6 Answers 6

3

You're probably running into an issue with relative paths. If your URL is /users/welcome/, it's looking for the file /users/welcome/style.css

Solutions:

  • Use a full URL: <link rel="stylesheet" href="http://example.com/style.css">

  • Use CI's link_tag() which will prepend your base url to the path

  • Use an absolute path: <link rel="stylesheet" href="/style.css">

If you are unable to access the file directly, check your .htaccess file if you are using it. Most CI installations use something like this:

RewriteCond $1 !^(index\.php|public|robots\.txt)
RewriteRule ^(.*)$ /index.php?/$1 [L] 

With this rule, there are two files and one directory that are allowed direct access (index.php, a directory named public, robots.txt). The rest is routed through index.php.

It's best to create a directory for all your static files (images, css etc.) and add this directory name to the exclusion list. Keeping those files in the directory root is just going to cause tons of clutter.

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

Comments

1

Instead of this

<link rel="stylesheet" href="style.css">

Try this:

<link rel="stylesheet" href="<?php echo base_url();?>"> 

Or if you have your css in a directory called css:

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

Your Javascript will work the same way

Comments

0

You have to put that CSS file to the folder which you use to serve static content (I haven't used CI for a while.. probably static/ ? check your (apache) rewriterule... ). Then change the href so it's points to the file in that dir.

Comments

0

Use firebug and see what the URL is that the browser is trying to resolve the CSS at. I bet you will find that it is getting a 404.

Try appending /Application before the CSS file in your include i.e

<link rel="stylesheet" href="application/style.css"> 

The problem is the context in which your view is running.

Hope that helps

2 Comments

That doesn't work. I even put the entire path infront of it and it wdidn't work
OH! If you use firebug you might find that you are receiving a 403 error from the server. Make sure you have READ access on that folder for CSS files. The same for images. I have had this issue myself.
0

In codeigniter, the paths for content like css is relative to your webroot index.php file.

I advise you to place the css in an assets/css or /css folder in the webroot then your view's link will be

<link rel="stylesheet" href="assets/css/style.css">

for example.

Comments

0

Combining some of the answers above, this is what I did to get Blueprint.css to load in my CodeIgniter installation:

  1. Create a folder called "static" in the root of your installation (a peer to "application", "system", and "index.php").
  2. Create a subfolder called "css" (/static/css)
  3. Copy the blueprint folder in there (/static/css/blueprint/)
  4. Open .htaccess. Change this...

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

    ... to this:

    RewriteCond $1 !^(index\.php|images|static|robots\.txt)
    
  5. In your header file (e.g. /application/views/template/header.php), make your links site-relative:

    <!-- Framework CSS -->
    <link rel="stylesheet" href="/static/css/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="/static/css/blueprint/print.css" type="text/css" media="print">
    <!--[if lt IE 8]><link rel="stylesheet" href="/static/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    

Note that this method works for any static content (e.g. Prototype.js, jQuery, common images, etc.). Just make your href links site-relative and it should work.

And there's nothing special about "static" as a folder name. It's just the name I chose arbitrarily.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.