manage to load a second style.css for only specific Subpages?

Permalink
Hi,

my question deals with circumstances to load a second css File for my theme - but only for my subpages (!= home).

I allready build and styled a nice opening page, for all my other sub-pages instead (contact, offers, blog) presently i want to reference a second css file in my custom theme to have some little load/traffic benefit.

As i allready saw my subpages use the same theme files. On the other hand even though if i edit my contact page and set via block>design>css my css id & new classname (style2.css), Concret5 ignors my entries! or if i have two identical ids in both files it loads the default standard css file! Also i try to edit the page properties under "Header Extra Content" like <link rel="stylesheet" href="<?php echo $this->getThemePath()?>/style2.css"> ..

Is there a workarround for loading a second css file and ensure that this file will load&appear only on specific pages? (supossing the standard css file will be still present as cached data) ..perhaps some nested php expression ??

View Replies: View Best Answer
weyboat replied on at Permalink Reply
weyboat
Possibilities:
1. Second theme similar to first one but using different css files
2. create another page type that access's a different header.php file (header2.php for instance)
3. Utilise inline css code

What theme are you using?
itsjustme replied on at Permalink Reply
hmm .. i think that pos.2 would be fine..

..of course i dont know how to setup or reference multiple header.php (..need the new css in the main-part too..) files for the same theme !!

Maybe with one more help ?


I just use the html5 boilerplate 2.0 theme for Concret5 ..seems to be near to the standard and raw themes structure.
Mainio replied on at Permalink Reply
Mainio
I'd take a slightly different approach than the person above. My choices would be to either:
1. Add an attribute and when that is setup, don't display the css
or
2. Hard code the part into your header so that this css is not displayed on home page (if this really applies only to the home page and always will and there's not a possibility for this to change in the future)

Option 1:
<?php if (!$c->getAttribute('do_not_display_my_css')) : ?>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('style.css'); ?>" />
<?php endif; ?>


Option 2:
<?php if ($c->getCollectionID() != HOME_CID) : ?>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('style.css'); ?>" />
<?php endif; ?>
itsjustme replied on at Permalink Reply
the hardcoding version looks great, !!!!

and i tried my best but the code fail and at least both files are qualified and shown up in the final pagesourcecode.

(I now will test the attribute option)
Mainio replied on at Permalink Best Answer Reply
Mainio
You might want to change the "!==" to "!=" and see whether it makes any difference.
weyboat replied on at Permalink Reply
weyboat
There may be a simpler way,
remove the link to the style.css file in the header.php file and for each page go to page properties, custom attributes, add attribute, header extra content, put your link to the style.css file right in there,
For your sub pages do the same but with a link to your new style2.css file...
itsjustme replied on at Permalink Reply
It seems to me that both solutions work very well !!

"Header Extra Content" i tried before ..but now, without php mixup and as plain html, concret5 will load the right css. perfect!

..of course i have the trade of by editing all pages and at this time the hardcode version is brilliant and wins! ;)

<?php if ($c->getCollectionID() != HOME_CID) : ?>
<link rel="stylesheet" href="MY-SECOND.css">
<?php endif; ?>

(the attribute version still resist my attempts)

i now have exact what i want. many thanks
chris123uk replied on at Permalink Reply
chris123uk
This is how i would do it:

<?php 
if($c->getCollectionID() == HOME_CID) { // if its the homepage use this style
   ?>
   <link href="<?php     echo $this->getStyleSheet('stylesheets/HomeStyle.css')?>" rel="stylesheet" type="text/css" />
   <?php
} 
   elseif ($c->getAttribute('contact_page')) { //else is it the contact page? (must set checkbox page attribute of contact_page on the contact page.)
      ?>
      <link href="<?php     echo $this->getStyleSheet('stylesheets/contactPageStyle.css')?>" rel="stylesheet" type="text/css" />
      <?php
   } 
      else { // else just put the sub page style in
         ?>
         <link href="<?php     echo $this->getStyleSheet('stylesheets/subStyle.css')?>" rel="stylesheet" type="text/css" />
         <?php


This way if your client wants another page layout in the future you can use another elseif. and so on...