Solid block or different photo for page headers (Maisha theme)

onwardhouse · Member · Aug 16, 2017 at 3:54 pm
Copy link

Add topic to favorites
Hi,

I love the way this theme uses the featured images as an icon on the front page, but it blows the featured image up to use as the header background for the page as well, either resulting in an odd pixelated icon, or a badly cropped photo. I am looking for any kind of solution that will do *any* of the following to make the page look better:

1. Give me a solid color block header for the page
2. Allow me to use a different photo as the header for every page
3. Allow me to use the same photo for every page
4. Remove the header all together

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 17, 2017 at 2:43 am
Copy link
Hi there, the following hides the featured image on pages that have, such as Education, and the second rule is to set the color for pages that do not have a featured image.
```
.aboutpage .cd-fixed-bg-one {
  background-image: none !important;
  background-color: #7711ff;
}
.aboutpage .cd-fixed-bg-one.withoutimg {
  background-color: #7711ff;
}
```
The color on the About page is #333, so if that color works for you, you can substitute that color in the above.

#2 would require you to create a unique CSS rule for every page where you wanted a different image that used the page id CSS class from the opening body html tag. This is an example for your Education page where I have grabbed a random image from your media library. You can use the Web Inspector built into your browser to find the unique page id CSS classes.
```
.page-id-303 .aboutpage .cd-fixed-bg-one {
  background-image: url('https://onwardhouse.files.wordpress.com/2017/07/bc-storyboard-021.jpg') !important;
}
```
If you wished to replace all featured images on the actual pages, you could use the following.
```
.cd-fixed-bg-one:not(.withoutimg) {
  background-image: url('https://onwardhouse.files.wordpress.com/2017/07/bc-storyboard-021.jpg') !important;
}
```
To remove the header and the page title from all pages (image or not), you could use the following.
```
.cd-fixed-bg-one {
  display: none;
}
```
onwardhouse · Member · Aug 17, 2017 at 9:16 pm
Copy link
Thank you thesacredpath – you are truly a happiness engineer :)
thesacredpath · Member · Aug 18, 2017 at 12:29 am
Copy link
You are welcome, and thanks.

No items found.