Multiple CSS files

[angelazou]

I'm looking to create a new template file specifically for my index page. It will have a very different design structure, so I may need to create a new CSS file for it. However, in the current template I'm using, Innovation, I don't see a link to the style.css. So how can I create a template file that will link to another CSS file other than the default style.css?

Thanks,
Angela

[n00dles101]

Innovation theme includes the file "header.php"

CSS files are specified in here.

m

[angelazou]

So if I need to create two set of layouts (looks), I need two header.php to specify different CSS, and then I specify different template files with different headers? Thanks.

[Connie]

So if I need to create two set of layouts (looks), I need two header.php to specify different CSS, and then I specify different template files with different headers? Thanks.

yes, if the template is "cut into pieces" and you want to continue this policy, you will need 2 different header-templates and 2 different templates

otherwise you will need some ifs and elses ...

[ccagle8]

or you can use the ID attribute on the body to specify different attributes for different page slugs : http://code.google.com/p/get-simple-cms/...der.php#40

[angelazou]

Well, I do think using div and span maybe an option, since I'm really just changing its content flow with a few boxes and a slideshow. The color set, the style, the header, those won't change. So, thanks a lot. I'll try this out today and see how it goes.

Regards,
Angela

[angelazou]

Actually, what I want to do is to make the sidebar disappear at the index page, which kind of requires me to write a new header + CSS. However, I think I might have found the answer. I came across the breadcrumbs CSS, it is designed to not display when at index page. I think I can apply this to my sidebar, just modifying it to the index page. But I'm not familiar with this code, can someone please elaborate this?

Code:

#index header .breadcrumbs { display:none; }

Thanks,
Angela

[polyfragmented]

But I'm not familiar with this code, can someone please elaborate this?

Code:

#index header .breadcrumbs { display:none; }

The CSS rule lists the "conditions" which must be met in order to not display an element with the class of "breadcrumbs": It must be a child of the header element which in turn must be a child of an element with the id of "index" (the page's body element in this case). Only that element with class "breadcrumb" would be targeted by this rule, no other element with a class of ".breadcrumb" which might additionally exist on the page outside the header element.

For the Innovation theme, try

Code:

#index aside#sidebar {display: none;}

This translates to: don't display the element "aside" with the id of "sidebar" (the sidebar) on the page with an id of "index" (the start page in GS)

Worked here without flaw.

PS: A few resources you might want to check out: IDs and CLASSes, CSS selectors (decendant, child, sibling,...). The knowledge will help you read CSS rules like the one you posted.

[angelazou]

Thanks for the tip! Now my site looks just the way I want it to.

Regards,
Angela