Community Forums › Forums › Archived Forums › General Discussion › How to add another div to featured images
- This topic has 16 replies, 4 voices, and was last updated 9 years, 8 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
August 15, 2014 at 3:28 pm #119120mpet29Member
I can pretty easily target my featured image with (on my site, at least)
#featured-post-4 img
If I just wanted to do a color border or whatever, no problem. But what I'm trying to do is overlay a transparent PNG on it to make for a nice custom image border, and that means i need to target a separate div over the image, rather than the image itself. Does anyone know how that can be done?
August 15, 2014 at 6:13 pm #119151DTHkellyMemberAugust 17, 2014 at 9:30 am #119362mpet29MemberThanks! That's helpful. My only confusion is that according to this: http://my.studiopress.com/snippets/structural-wraps/
the wraps can be applied to these areas:
'header',
'nav',
'subnav',
'site-inner',
'footer-widgets',
'footer'How would i make it attach only to the featured image and not all of the 'site-inner'?
August 17, 2014 at 7:00 pm #119430Sridhar KatakamParticipantAssuming that you are talking about the output generated by Genesis Featured Posts widget, see if this helps: http://sridharkatakam.com/customize-output-genesis-featured-posts-widget/
August 18, 2014 at 3:51 pm #119613mpet29MemberThanks Sridhar, but while that might work on my home page, I am also trying to achieve the same effect on the single post pages, which also have the featured images appearing. I just can't quite figure out how to add a wrapper div that sits right on top of the featured image.
August 18, 2014 at 5:25 pm #119626Sridhar KatakamParticipantWhich child theme are you using?
Can you show us a screenshot of Genesis > Theme Settings > Content Archives?
August 18, 2014 at 5:42 pm #119631mpet29MemberI'm using stock base Genesis. I made a child theme to make sure that my changes would survive updates, but I'm not using any third party theme.
Screenshot of archives: http://imgur.com/RiFeTvZ
link:
http://www.fangraphs.com/techgraphs
password: fangraphsWhat I'm attempting to do is put an image overlaid on top of the baseball image that is the featured image of the first post. On the home page, it will be only the first post, but on single pages, they all show their featured image and should have the overlay.
thank you!
August 18, 2014 at 6:15 pm #119634Tony @ AlphaBlossomMemberHi,
I don't mean to confuse things with another option, but if the option by Sridhar doesn't work, you may be able to do this using css :before, added to your theme's style.css file (if I understand what you're trying to do):
article.entry > a.aligncenter:before { background: url("http://www.fangraphs.com/techgraphs/wp-content/uploads/2014/07/Dodger-Stadium-Sunset-1-230x155.jpg") repeat scroll 0 0 rgba(0, 0, 0, 1); bottom: 0; content: " "; display: block; left: 0; opacity: 0.5; position: absolute; right: 0; top: 0; z-index: 99; } article.entry > a.aligncenter { position: relative; }
That will overlay the "background" image over the baseball image. You can adjust the opacity setting, etc. You'll also have to add a z-index setting for your h4.widgettitle to bring it back to the front.
You might have to tweak the css classes to make sure you target the right images, but this should get you started.
If this solution works for you, don't forget to take a look at browser support to make sure it covers you:
http://css-tricks.com/browser-support-pseudo-elements/
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
August 18, 2014 at 7:39 pm #119651mpet29Membertony!
You are a life saver. That worked perfect. Psuedo classes are exactly what I had been trying to go with -- I've used them several times elsewhere -- but the issue I was having was that I had been trying to focus on the picture with img, and you of course can't attach a ::before to image. I hadn't thought of targeting it in this way.
Thanks so much.
August 18, 2014 at 7:47 pm #119652Tony @ AlphaBlossomMemberAwesome, glad I could help! I was afraid I might confuse things by jumping in, but glad you got it sorted out!
Have a great night...
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
August 18, 2014 at 7:51 pm #119654mpet29MemberActually if you don't mind: do you know how I can make it do that for the featured posts on the single post pages too? Markup seems similar but clearly it's not..
August 18, 2014 at 7:59 pm #119655Sridhar KatakamParticipant//* Add new image size // add_image_size( 'single-thumbnail', 680, 200, true ); //* Display featured image above Post title on single Posts add_action ( 'genesis_entry_header', 'sk_show_featured_image_single', 9 ); function sk_show_featured_image_single() { if ( is_singular('post') && has_post_thumbnail() ) { echo '<div class="single-thumbnail">'; // genesis_image( array( 'size' => 'single-thumbnail' ) ); genesis_image(); echo '<div class="single-thumbnail-overlay"></div></div>'; } }
August 18, 2014 at 8:01 pm #119656Tony @ AlphaBlossomMemberSure, there's no class on the so you can use this instead:
article.entry > header.entry-header > a:before
and then set
article.entry > header.entry-header > a
to "position: relative;"
You can also add .single before it you want to make sure this only targets single pages
.single article.entry > header.entry-header > a:before
That should do it for you, but if not let me know and I'll take another look.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
August 18, 2014 at 8:37 pm #119671mpet29Memberthanks so much. It's close, but not quite in the right spot. I outlined it in red here: http://www.fangraphs.com/techgraphs/baseball-post/
August 18, 2014 at 9:38 pm #119688Tony @ AlphaBlossomMemberGot it...these changes should take care of it for you:
article.entry > header.entry-header > a { display: block; overflow: hidden; position: relative; }
Let me know if it's still an issue.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
August 19, 2014 at 8:05 am #119758mpet29Memberperfect!
I can't thank you (both!) enough for your help. Really so appreciated.
August 19, 2014 at 11:39 am #119803Tony @ AlphaBlossomMemberAwesome! Glad we could help!
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.