Community Forums › Forums › Archived Forums › Design Tips and Tricks › How do i change Featured Page widget html output for a specific hover effect?
Tagged: featured page, widget
- This topic has 3 replies, 2 voices, and was last updated 9 years, 10 months ago by Seb.
-
AuthorPosts
-
May 13, 2014 at 9:54 am #104920SebMember
I had a post before: http://www.studiopress.community/topic/change-featured-page-widget-on-enterprise-pro-homepage-to-a-hover-effect/
This is perfectly possible, but i want to create something more responsive specific with only html5 and css:http://jsfiddle.net/Ajucreazy/UR43Y/3/
As you can see, all the content in this example is wrapped inside the image link:
<a><img>...content...</a>
.
The reason for this is that the absolute layered divs (the content):div.hovertitle' and 'div.hovercontent
need to be clickable. If you take these 2 divs out of the link, they block the 'function of the link' when you hover over the image-block.Now the standard featured page output is:
<section> <div> <h4> <article> <a> <img> <div> <p> <a>
I would like to put the
<div> <p> <a>
inside the<a>
after the<img>
like this:<section> <div> <h4> <article> <a> <img> <div> <p> <a>
Now i took a look at the genesis-featured-page.php file and i understand a little, but far from adjusting it create this output :S.
How do i change this? Is there an easy way? Do i need to copy and paste some rules inside the genesis-featured-page.php file?Thanks for reading my post,
Greetz
May 13, 2014 at 9:09 pm #105038nutsandboltsMemberI'm not sure I understand what you're hoping to do vs. what is already happening, but you should never, ever edit the Genesis framework files. You could create a file with the same name in your child theme's folder to house changes, but nothing in the /genesis/ folder should be touched.
It may be worth your time to consult with a developer on this one - there are a number of devs that are recommended by StudioPress listed here: http://www.studiopress.com/genesis-developers
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 14, 2014 at 1:29 am #105050SebMemberThanks for the info Andrea, i always keep a copy if i change something, but there is a better place for that, you make me see ;).
I want to make the custom content, i layer upon the image, clickable as a link. As 1 block. To behave as 1 link. I think the only way to accomplish that with HTML5 and CSS3 is to move the div-p-a output inside the link.
May 14, 2014 at 3:08 am #105056SebMemberI found a solution for this, it was obvious in my example code already: pointer-events:none; for the absolute positioned elements that you want the pointer functionality to shine through.
The only problem is: it's not that browser version friendly: http://caniuse.com/pointer-events
So i'm still looking for the right way to adjust the featured-page-widget.php file inside the child theme :S.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.