Header-shade effect spans over adjacent image

[mharpen]

Hi J, Please look at this image: http://picturestack.com/702/565/T2sthemesugghUcG.jpg
It shows a thumbnail inserted at the begging of my page text, and an h2 header text next to it. (A nice way to start page text). You can see that the shadow effect overlays the thumbnail image also. To resolve it, I changed the h2 tag to add the style “display:inline-block” which limits the shadow to only the h2 text. Does this seem like something you’d want to style for all h1, h2, h3 tags where you add the shadow effect span tag? Thanks.

Topic

[Jason Bobich]

I’m not totally sure on that. The header shades caused me a problems way back when I originally did them and am often haunted by them here and there when people are making customizations and just usually tell people to hide them.

I feel like I remember there being some small issue from having them displayed as inline-block and they didn’t display right in all scenarios of the theme, but I can’t remember now. But if that works for what you’re doing, it seems fine to do.

[mharpen]

Thanks J! You’re right, changing the header tags to “display:inline-block” effects the branding header, post grid headers, etc. In the post grids, it brings the “Read More” button up alongside the post/page title. I kinda like that. So what I ended up doing is just styling the header tags this way for headers inside grid-protection classes.

/*style headers so header-shade class doesn't overlay adjacent images*/
.grid-protection h1, .grid-protection h2 {display:inline-block}

BTW, I have to THANK YOU A TON for putting together your Developer Docs. I’ve been learning so much about WP from them. It’s really neat how it works! And your explanations are great – and fun actually.

[Author]

Replies