CodeIgniter Forums
CSS won't load - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forumdisplay.php?fid=21)
+--- Thread: CSS won't load (/showthread.php?tid=60006)

CSS won't load - El Forum - 12-26-2013

[eluser]Friedebarth[/eluser]
I just got started again with CodeIgniter and decided to transfer the default CSS from /application/views/welcome_message.php into an external stylesheet at /assets/styles/style.css

So, I removed the style from the header and replaced it with this:

Code:
<link rel="stylesheet" href="<?php echo base_url();?>assets/styles/style.css" type="text/css" media="screen" />

However, that just completely breaks the page. As in, I don't even get any unstyled content, the page just turns up blank. If I try just entering the URL normally (http://localhost/ci/assets/styles/style.css), I do get the content, but the style is ignored. What's going on here?

CSS won't load - El Forum - 12-26-2013

[eluser]Tpojka[/eluser]
Look in your '.htaccess' file.
In 'RewriteCond' add file/folder you want to be able to access:

Code:
RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt|assets)
#assets added
RewriteRule ^(.*)$ /index.php/$1 [L]


CSS won't load - El Forum - 12-26-2013

[eluser]InsiteFX[/eluser]
Your missing the closing php tags.

Second you do not need to add that RewriteCond to the .htaccess file if your application is configured correctly.


CSS won't load - El Forum - 01-06-2014

[eluser]jonez[/eluser]
You don't need to modify your .htaccess, base_url takes a relative path as a parameter, try this:
Code:
<link rel="stylesheet" href="<?=base_url( 'assets/styles/style.css' )?>" type="text/css" media="screen" />


CSS won't load - El Forum - 01-06-2014

[eluser]Rolly1971[/eluser]
it depends on how the server is configured as to weather or not you need to add the rewrite condition. I know on my server i had to add that in order to load my assets such as javascripts, css, and images that are stored outside the application/views folder. Works fine if everything is inside the views folder but for me i have a 'themes' folder at the same level as the application folder and the only way i could load the assets was to add the rewrite condition in the .htaccess file.

CSS won't load - El Forum - 01-06-2014

[eluser]jonez[/eluser]
[quote author="Rolly1971" date="1389027878"]it depends on how the server is configured as to weather or not you need to add the rewrite condition. I know on my server i had to add that in order to load my assets such as javascripts, css, and images that are stored outside the application/views folder. Works fine if everything is inside the views folder but for me i have a 'themes' folder at the same level as the application folder and the only way i could load the assets was to add the rewrite condition in the .htaccess file. [/quote]

This line:
Code:
RewriteCond $1 !^(index\.php|images|robots\.txt|assets)
Is saying do not rewrite anything matching those paths. So yes with that rewrite and without assets CI will attempt to route those paths to a controller and fail.

If you use a rewrite like this:
Code:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
It will rewrite anything that isn't a real file or directory. I'm pretty sure this is the rewrite that's included by default, maybe you have a previous version?

CSS won't load - El Forum - 01-06-2014

[eluser]InsiteFX[/eluser]
Code:
<IfModule mod_rewrite.c>

    # Make sure directory listing is disabled
Options +FollowSymLinks -Indexes
RewriteEngine on

# NOTICE: If you get a 404 play with combinations of the following commented out lines
#AllowOverride All
RewriteBase /

# Restrict your site to only one domain
# !important USE ONLY ONE OPTION

# Option 1: To rewrite "www.domain.com -> domain.com" uncomment the following lines.
#RewriteCond %{HTTPS} !=on
#RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
#RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

# Option 2: To rewrite "domain.com -> www.domain.com" uncomment the following lines.
#RewriteCond %{HTTPS} !=on
#RewriteCond %{HTTP_HOST} !^www\..+$ [NC]
#RewriteCond %{HTTP_HOST} (.+)$ [NC]
#RewriteRule ^(.*)$ http://www.%1/$1 [R=301,L]

# Remove index.php from URL
RewriteCond %{HTTP:X-Requested-With} !^XMLHttpRequest$
RewriteCond %{THE_REQUEST}    ^[^/]*/index\.php [NC]
RewriteRule ^index\.php(.*)$   $1 [R=301,NS,L]

# Send request via index.php (again, not if its a real file or folder)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# deal with php5-cgi first
<IfModule mod_fcgid.c>
  RewriteRule ^(.*)$ index.php?/$1 [QSA,L]
</IfModule>

<IfModule !mod_fcgid.c>

  # for normal Apache installations
  <IfModule mod_php5.c>
   RewriteRule ^(.*)$ index.php/$1 [QSA,L]
  </IfModule>

  # for Apache FGCI installations
  <IfModule !mod_php5.c>
   RewriteRule ^(.*)$ index.php?/$1 [QSA,L]
  </IfModule>

</IfModule>

</IfModule>


CSS won't load - El Forum - 03-06-2014

[eluser]InsiteFX[/eluser]
Here's mine:

Code:
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }

body {
background-color: #fff;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}

a {
color: #003399;
background-color: transparent;
font-weight: normal;
}

h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 19px;
font-weight: normal;
margin: 0 0 14px 0;
padding: 14px 15px 10px 15px;
}

code {
font-family: Consolas, Monaco, Courier New, Courier, monospace;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}

#body{
margin: 0 15px 0 15px;
}

p.footer{
text-align: right;
font-size: 11px;
border-top: 1px solid #D0D0D0;
line-height: 32px;
padding: 0 10px 0 10px;
margin: 20px 0 0 0;
}

#container{
margin: 10px;
border: 1px solid #D0D0D0;
-webkit-box-shadow: 0 0 8px #D0D0D0;
}

assets/css/codeigniter.css

Code:
&lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css/codeigniter.css'); ?&gt;" type="text/css" media="screen" /&gt;