Forums

Body background-image change from navigation OnClick

Permalink
Hi guy!

I'm building site where homepage has a different body background-image that rest of the content pages.

How do i build this kind of site with C5 that make's a background-image switch when customer navigates from homepage to content pages?


// Mika
 
vincedelaking replied on at Permalink Reply
vincedelaking
Hi Mika,

Take a look at Page Attributes or make to different page types.

V.
enlil replied on at Permalink Reply
enlil
It's as simple as designing your home page and the rest of your site differently. Could be as easy as a little javascript to render a background image that references a different image on the homepage than the code on the rest of the site...
mhawke replied on at Permalink Reply
mhawke
If you'd like the client to be able to change this background later then 'Page Attributes' is the way to go but here's how I did it without page attributes. Holler if you'd like some instructions on doing it with page attributes.

Edit the file in your theme that contains the BODY tag. That might be in the actual Page Type file in your theme folder that your home page is using, such as 'left_sidebar.php' or it might be in 'your_theme/elements/header.php'. When you find it, replace the <BODY> tag with this code:
<?php
$th = Loader::helper('text');
$class = $th->sanitizeFileSystem($c->getCollectionName(), $leaveSlashes=false);
?>
<body class="<?php echo $class ?>">


This will add a class to the body tag that's the same as your page name, e.g. 'home'. Then it's a simple matter of editing your CSS file to add something like:

body.home {background-image:url('whatever_bg_u_want.jpg');}