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

[anfe81]

Hi,

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

//Andreas

[sharmstr]

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

[anfe81]

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