I wan to change the header background depending on what page I m on

This topic has 2 replies, 2 voices, and was last updated 10 years by anfe81.

Author

Tagged: Header backgrounds
September 3, 2014 at 23:15 #27485

anfe81
Participant

Hi,

I would like to have different header background for the different pages. How could I do this in the easiest way?

//Andreas
September 4, 2014 at 01:20 #27500

sharmstr
Moderator
I did something similar with blog categories. In category.php I get the category name then add css class to the div with the category name. Example
COPY CODE
```
<div class="post-category-header <?php echo $currentcat->slug; ?>-header">
```
Then in my css I have
COPY CODE
```
.computers-header {
	border-color: #6F63EC;
}
.books-header {
	border-color: #ca0000;
}
.music-header {
	border-color: #00df15;
}
```
Obviously I’m only setting a border-color, but you could use a similar concept for displaying background images. You’d want to do your page check in /kleo/page-parts/general-header-section.php, adding your css class to the kleo-main-header div, then add your css like this
COPY CODE
```
.computers-header {
	background-image: url(computer.jpg);
}
.books-header {
	background-image: url(books.jpg);
}
.music-header {
	background-image: url(music.jpg);
}
```
That’s all code off the top of my head. Its not guaranteed to work 🙂

There might be a plugin that does that.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
September 6, 2014 at 23:20 #27822

anfe81
Participant

Thanks, I wanted to test the plugin, but it seems like that the KLEO theme does not support the custom header per page. Somone that knows how to get around this code wise?
Author

Posts