Header/Image Background on different pages

Hello

I am looking to have the Header/Image Background on more than one page. I know how to change the header text for multiply pages within the widget area and specifying what page to go on. But am confused how I can have a different background image on each page.

As it in your template.css, which i can change but a dufferent image each page ??????????
.imageBg #gk-head {
background: url("../images/header.jpg") no-repeat fixed center 0 #000000;
border-bottom: medium none;
margin-bottom: 0;
}

Please help
Thanks
James

Hi,

The image background is used always when the widget on the header widget area have the "imageBg" class.

Hello

Will need create my own different classes just say.......
.imageBg2
.imageBg3
Which each one will assign to a different header image.
Then use the custom css, instead of the image background in the widget area

That way I will have 3 different background images to choose from ???

Thanks

It won't be so easy. In this case you will have to change the code in file gavern/helpers/helpers.layout.php for function gk_is_image_class:

Code: Select all

if(isset($styles[$id]) && isset($styles_css[$id]) && (stripos($styles_css[$id], 'imageBg') !== FALSE || stripos($styles[$id], 'imageBg') !== FALSE)) {
   // return TRUE, because at lease one widget exists in the specific sidebar and have class imageBg
   $sidebar_flag = true;
}

to:

Code: Select all

if(isset($styles[$id]) && isset($styles_css[$id]) && (stripos($styles_css[$id], 'imageBg') !== FALSE || stripos($styles[$id], 'imageBg') !== FALSE)) {
   // return TRUE, because at lease one widget exists in the specific sidebar and have class imageBg
   $sidebar_flag = $styles[$id];
}

then in file: gavern/hooks.php you have to change function gavernwp_body_attributes_hook:

Code: Select all

// generate the standard body class
 if(!gk_is_image_class('header')) {
    body_class();
 } else {
    body_class('imageBg');
 }

to:

Code: Select all

// generate the standard body class
 $body_classname = gk_is_image_class('header');
 if($body_classname === FALSE) {
    body_class();
 } else {
    body_class($body_classname);
 }

That will create your base to use multiple images in the header. Now you have to create few text widgets with CSS classes like:

Code: Select all

imageBg imageBg1

the imageBg will be used to detect the CSS classes and avoid additional changes in the scripts, the second class (imageBg1) will be used to specify the image.

The last step is creating the CSS code for the new backgrounds in the header using the following code in the template.css file:

Code: Select all

.imageBg1 #gk-head {
   background: #000 url('../images/header1.jpg') no-repeat center 0;
   background-attachment: fixed;
   border-bottom: none;
   margin-bottom: 0;
}

it will override the code for .imageBg class:

Code: Select all

.imageBg #gk-head {
   background: #000 url('../images/header.jpg') no-repeat center 0;
   background-attachment: fixed;
   border-bottom: none;
   margin-bottom: 0;
}

Please remember that you should create the header image in few sizes and load the smaller images in the tablet.css and mobile.css files as the theme loads images for the imageBg class.