Welcome Guest, Not a member yet? Register   Sign In
Attaching a CSS?
#1

[eluser]shreder[/eluser]
Hello.

I am new to CI and I'm building my first application.
I am trying to attach a CSS with no luck.

I have a view which is a template file inside views/templates/template.php
The css is located inside views/templates/style.css

I'm putting the regular css attachment line:
Code:
<link href="style.css" rel="stylesheet" type="text/css" />

It simply not loading the CSS, what am I doing wrong?

Thank you.
#2

[eluser]Lone[/eluser]
Your first problem is that you have only 'relatively' linked to your CSS file. I would suggest to create a 'css' directory in your main directory (where index.php is located) and use that as the storage point for CSS. Then the correct way to link to it is as follows (ensure you have the 'url' helper loaded either manually or auto):

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

This will produce the href to be like http://www.domain.com/css/style.css

But if you want to keep the css file where it is then use the following:

Code:
<link href="<? echo base_url(); ?>system/application/views/templates/style.css" rel="stylesheet" type="text/css" />

This url will be http://www.domain.com/system/application.../style.css - a bit too long for my liking and not what I think you will want.
#3

[eluser]JoostV[/eluser]
Or place your css in a directory in your webroot, e.g. css/style.css and use a relative link preceded by a slash. The slash at the beginning will tell your browser to start searching for the file at the root.

Code:
<link href="/css/style.css" rel="stylesheet" type="text/css" />
#4

[eluser]Lone[/eluser]
Personally I have never like the above approach as it always presumes that the site will be running at a domain level and this becomes a issues for us if demonstrating a hidden site as such (domain.com/example) or running it on our development server.

I have really gotten into the habit the past year or so of making sure that most items are absolute links to save any issues with relative links or even worse - using the 'base href' setting.
#5

[eluser]bgougent[/eluser]
An other easy way to link CSS and also JS is to work with the BASE tag in html
Code:
<head>
<base href="<?php echo base_url(); ?>" />
</head>

Now you have pictures, css, and scripts linked to the base
#6

[eluser]shreder[/eluser]
Shouldn't I put the css inside the views folder?
Especially if i'm using a template?
#7

[eluser]TheFuzzy0ne[/eluser]
Not unless you want to have to specify the path the the views directory, although I don't believe there's anything to stop you doing that if that's what you want to do.
#8

[eluser]Leonard Yulianus[/eluser]
according to your css location, this should work

Code:
<link href="<? echo base_url(); ?>system/application/views/templates/style.css" rel="stylesheet" type="text/css" />
#9

[eluser]Lone[/eluser]
I would personally advise against the method of using the &lt;base&gt; tag as suggested by bgougent (no offense meant!) as I have found it to cause more problems then solving at times such as when you do an anchor link on a page using it (eg. <a href="#section1">) it will actually link back to the href set as base.

Interestingly enough I remember reading the usuage of the &lt;base&gt; tag like this was never its original purpose - it was originally intended for when another site was link to content in your page or something, cant remember exactly what.
#10

[eluser]obobo[/eluser]
Another option would be to use Michael Wales' Asset Helper,
which is part of his Code Igniter Dev Pack

it allows you to specify the path to your style sheets in the helper
and create a link to the style sheet in your views using :
css_asset('style.css'');

very useful if you're linking to style sheets in several documents,
and the path to your style sheets could potentially change down the road.




Theme © iAndrew 2016 - Forum software by © MyBB