Welcome Guest, Not a member yet? Register   Sign In
CSS external files.
#1

[eluser]mlakhara[/eluser]
Hello to the codigniter community. I myself am excited about being a new member of codeigniter developers. I have just started with CI and i have done quite a week's worth reading before dirtying my hands into the code.
I did start last night with a litle code like a couple of controller for logging in a user and then redirecting them to the profile page.
Everything works fine till now but there is a little hunch with the styling. I cant get any external css files to work. It is not getting loaded with any style.
I checked the rewrite rules and they are fine.
REWRITE RULES
Code:
RewriteEngine on  
    RewriteCond $1 !^(index\.php|images|css|js|robots\.txt|favicon\.ico)  
    RewriteCond %{REQUEST_FILENAME} !-f  
    RewriteCond %{REQUEST_FILENAME} !-d  
    RewriteRule ^(.*)$ ./index.php/$1 [L,QSA]

I have also tried placing my stylesheets in different directories and accessing them.
This line is the one where I am trying to load the stylesheet.
the stylesheet is in the application/views/includes/styles/ folder.
Code:
<html>
<head>
<title>The MNITLIB APP</title>
<link type="text/css" href="includes/styles/style.css" media="screen"/>
</head>
<body>
<h1>Malviya National Institute Of Technology</h1>
<div id="login_form">
&lt;?php echo form_open('login/validate_credentials');?&gt;
Email id: &lt;?php echo form_input('username');?&gt;
Password:&lt;?php echo form_input('password');?&gt;
&lt;?php echo form_submit('submit','LOGIN');?&gt;
&lt;?php echo form_close();?&gt;
</div>
&lt;/body&gt;
&lt;/html&gt;

please give me suggestions and help me identify the problems.

#2

[eluser]InsiteFX[/eluser]
Code:
&lt;head&gt;
    &lt;base href="&lt;?php echo base_url();?&gt;" /&gt;
    &lt;link type="text/css" href="includes/styles/style.css" media="screen"/&gt;

    &lt;!-- or like this --&gt;
    &lt;link type="text/css" href="&lt;?php echo base_url('includes/styles/style.css');?&gt;" media="screen"/&gt;

    &lt;!-- using assets directory in root.
    &lt;link type="text/css" href="&lt;?php echo base_url('assets/css/style.css');?&gt;" media="screen"/&gt;
&lt;/head&gt;

Structure for resources assets.
Code:
application
assets
-- css
-- images
-- js
-- etc
system
index.php

#3

[eluser]Musaddiq Khan[/eluser]
If you have placed the css file in css directory then you can access it by coding below.
Code:
&lt;link href="&lt;?php echo base_url();?&gt;/style.css" type="text/css"  media="screen"/&gt;
#4

[eluser]InsiteFX[/eluser]
@Musaddiq Khan

That will not work!

1) The base_url ends with a slash, so you would end up with 2 slashes.
2) If his css file is in a directory, you did not specify it.
3) the correct way of using the url helpers is, base_url('') but you can also append it on the end.
Code:
if ( ! function_exists('base_url'))
{
    function base_url($uri = '')
    {
        $CI =& get_instance();
        return $CI->config->base_url($uri); // <-- see $uri
    }
}
#5

[eluser]Musaddiq Khan[/eluser]
Ohh realy!
I thought he/she is mid-level programmer.
And I miss to mention the css directory as the css file is placed in "css directory".
Code:
&lt;?php $this->load->helper('url'); ?&gt;
&lt;link href="&lt;?php echo base_url();?&gt;css/style.css" type="text/css"  media="screen"/&gt;

That will be the code to load an external file.
#6

[eluser]mlakhara[/eluser]
@InsideFX
Thanks for your reply to my problem I tried the assets directory approach, but it did not work for me.
As far as other solutions are concerned, I had already tried them.

The following is the code snippet that I changed(I copied it from ur reply)
Code:
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;The MNITLIB APP&lt;/title&gt;
&lt;link type="text/css" href="&lt;?php echo base_url('assets/css/style.css');?&gt;" media="screen"/&gt;
&lt;/head&gt;
&lt;body&gt;
<h1>Malviya National Institute Of Technology</h1>
<div id="login_form">
&lt;?php echo form_open('login/validate_credentials');?&gt;
Email id: &lt;?php echo form_input('username');?&gt;
Password:&lt;?php echo form_input('password');?&gt;
&lt;?php echo form_submit('submit','LOGIN');?&gt;
&lt;?php echo form_close();?&gt;
</div>
&lt;/body&gt;
&lt;/html&gt;
the url helper is configured to autoload.
I have also restructured the folders in my application according to your suggestion.

EDIT.
the above code produces the following html markup in browser
Code:
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;The MNITLIB APP&lt;/title&gt;
    &lt;link type="text/css" href="http://localhost/codlib/codlib/assets/css/style.css" media="screen"/&gt;
&lt;/head&gt;
&lt;body&gt;
<h1>Malviya National Institute Of Technology</h1
<div id="login_form">
&lt;form action="http://localhost/codlib/codlib/login/validate_credentials" method="post" accept-charset="utf-8"&gt;Email id: &lt;input type="text" name="username" value=""  /&gt;Password:&lt;input type="text" name="password" value=""  /&gt;&lt;input type="submit" name="submit" value="LOGIN"  />&lt;/form&gt;&lt;/div>
&lt;/body&gt;
&lt;/html&gt;
#7

[eluser]Silviu[/eluser]
This means that your "base_url" is set to "http://localhost/codlib/codlib/". And it seems that it is not the right value. I suppose you can access your CSS file by typing this URL in your browser: http://localhost/codlib/assets/css/style.css

If you have configured it by hand, double check it, because I suppose your "real" URL is "http://localhost/codlib/".

If you have trusted CI to autodetect your base path, you may want to try setting it by hand to the URL mentioned above.

#8

[eluser]mlakhara[/eluser]
@Silviu

No, my real root address is "http://localhost/codlib/codlib/"

And I can access the css file is using "http://localhost/codlib/codlib/assets/css/style.css"
#9

[eluser]Silviu[/eluser]
So you can view the CSS file using the link that is generated by your application...

Can you view the actual content of the file using the link? Because a CI application will accept any URL requests, but will output a 404 error. So if you open that link you will see some content. Just make sure it's the real CSS content.

If you can view the actual content of the file, then the issue is not loading the file, but the rules themselves.
#10

[eluser]mlakhara[/eluser]
I don not get any error messages. I can see the original contents.
The stylesheet contains nothing except this single line.
Code:
body {background-color:#b0c4de;}




Theme © iAndrew 2016 - Forum software by © MyBB