How to get custom background (CSS) on index page?
Permalink
Hi,
The index page of my site is different than all other pages, and I would like it to have a slightly different background (all the other pages should have the standard site background). I assume that the best way to do this, is to add some CSS that is specific to that page, which will override the background on main.css.
I cannot find a place to do this.
I think it would be silly to have a separate theme just for this page, only to change the background.
Very grateful for any help. Thanks very much!
Andrey
The index page of my site is different than all other pages, and I would like it to have a slightly different background (all the other pages should have the standard site background). I assume that the best way to do this, is to add some CSS that is specific to that page, which will override the background on main.css.
I cannot find a place to do this.
I think it would be silly to have a separate theme just for this page, only to change the background.
Very grateful for any help. Thanks very much!
Andrey
I will try to figure that out.. is there no simpler way, just to drop in some CSS on the hompeage that will override the linked stylesheet?
Thanks,
Andrey
Thanks,
Andrey
You can drop a little bit of CSS in the right place.
What part of the background do you want to change, the whole page or an element?
Steev
What part of the background do you want to change, the whole page or an element?
Steev
Whole page, just on the homepage (would be curious about the element approach too though!)
Andrey
Andrey
Adding custom css to a block is easy, just see the design option on the block's menu when in the page is in edit mode.
For the whole page, for just 1 page, personally I would just add a bit of jQuery to an HTML block and use that to set the page background. There are no doubt other ways to do it, but that is the way I like to play.
Getting a bit more sophisticated, create a new view for the standard slideshow block so the image being shown (or group of images) are added as page backgrounds rather than just block backgrounds.
For the whole page, for just 1 page, personally I would just add a bit of jQuery to an HTML block and use that to set the page background. There are no doubt other ways to do it, but that is the way I like to play.
Getting a bit more sophisticated, create a new view for the standard slideshow block so the image being shown (or group of images) are added as page backgrounds rather than just block backgrounds.
<?php if ($c->getCollectionID() == HOME_CID): ?> <style type="text/css"> body { background-image: url(<?php echo $this->getThemePath(); ?>/images/whatever.jpg); } </style> <?php endif; ?>
I do it like this:
Then you can style body, body.home or any other page, body.about-us etc.
<body class="<?php echo $c->getCollectionTypeHandle()?>">
Then you can style body, body.home or any other page, body.about-us etc.
Jordan's idea is probably the easiest.
Below is for colour only.
Place after theme styles and before the 'header_required' in the header.php or in the head of your template.
Below is for colour only.
<?php if ($c->getCollectionID() == HOME_CID): ?> <style type="text/css">body {background: #0CC;} </style> <?php endif; ?>
Place after theme styles and before the 'header_required' in the header.php or in the head of your template.
Sorry to be an ignoramus -- but where do I put these codes?
Thanks,
Andrey
Thanks,
Andrey
Theme page should have either its head content within itself or in the elements folder (header.php)
Thats how I got it to work.
<!-- Site Header Content //--> <link rel="stylesheet" media="screen" type="text/css" href="<?=$this->getStyleSheet('main.css')?>" /> <link rel="stylesheet" media="screen" type="text/css" href="<?=$this->getStyleSheet('typography.css')?>" /> <?php if ($c->getCollectionID() == HOME_CID): ?> <style type="text/css">body {background: #0CC;} </style> <?php endif; ?> <? Loader::element('header_required'); ?>
Thats how I got it to work.
Put the code in your themes header.php, my way you replace the body tag with the snippet of code and need to add styles to main.css. Jordan's way you put the snippet in the head section of header.php. Both work, it's just personal preference, I like keeping all the styling in main.css
Ah, I like this -- I actually think this is a little more elegant than my solution for this situation. The reason I'm so used to doing it my way is because often I am outputting a different background based on a user-chosen attribute, so that needs to be done in the php file and not the css. But I really like your technique -- thanks for sharing!
Good if you need to change more than one page.
Your code didn't work for me, I did this.
Your code didn't work for me, I did this.
<body class="<?php echo $c->getCollectionHandle()?>">
You replaced the body tag in header.php with that snippet. It works for me here, just doubled checked with a default theme templet.
it works up to 5.4.2.2, I would think it should work in 5.5 unless they have changed something about the getCollectionHandle Maybe you need a global $c or Page::getCurrentPage()?
One 'Returns the handle of the page's collection type'.
The other 'Returns the page's handle'.
Which, now that I've looked at it, makes sense?
First one, affects all pages in a collection that have 'page' type, so all will have the same setting, for me = three pages.
Second one, affects the page by 'name', so in my case it worked on one page.
I'm still learning......
The other 'Returns the page's handle'.
Which, now that I've looked at it, makes sense?
First one, affects all pages in a collection that have 'page' type, so all will have the same setting, for me = three pages.
Second one, affects the page by 'name', so in my case it worked on one page.
I'm still learning......
I was thinking about the concept of using a modified image gallery for a page background, did a quick search, and there are loads of add-ons for this already in the marketplace:
http://www.concrete5.org/marketplace/addons/backstretch/...
http://www.concrete5.org/marketplace/addons/background/...
http://www.concrete5.org/marketplace/addons/dojo-supersized/...
http://www.concrete5.org/marketplace/addons/backstretch/...
http://www.concrete5.org/marketplace/addons/background/...
http://www.concrete5.org/marketplace/addons/dojo-supersized/...
Hi,
Thanks for all the answers, but I think I actually found a much easier way. I just added an HTML blog to the index page that contained regular background-image{} CSS. It did the trick. I added !important just for good measure.
Andrey
Thanks for all the answers, but I think I actually found a much easier way. I just added an HTML blog to the index page that contained regular background-image{} CSS. It did the trick. I added !important just for good measure.
Andrey
Hi,
Thanks for all the answers, but I think I actually found a much easier way. I just added an HTML blog to the index page that contained regular background-image{} CSS. It did the trick. I added !important just for good measure.
Andrey
Thanks for all the answers, but I think I actually found a much easier way. I just added an HTML blog to the index page that contained regular background-image{} CSS. It did the trick. I added !important just for good measure.
Andrey
This will allow you to make for example a front_page.php copy of default.php (in your theme) and then re-structure the html and css in front_page.php however you need. You can then choose to use that page type for your homepage and you get the layout and css you need.
This link has more information
http://www.concrete5.org/documentation/general-topics/page-types...