Agency Pro: switching home widget area featured block effects

Community Forums Forums Design Tips and Tricks Agency Pro: switching home widget area featured block effects

This topic is: not resolved

This topic contains 1 reply, has 1 voice, and was last updated by  exelexys 8 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #89487

    exelexys
    Member
    Post count: 51

    Would like to switch the Featured Posts mouseover/hover effects on the Agency Pro theme home page so the image mouseover effect appears in Home Bottom widget area and the inverse text mouseover effect appears in Home Middle widget area, but this doesn’t seem possible simply by changing the configuration settings of the Genesis Featured Posts widget.

    Does anyone know how to switch these effects so the default Home Middle widget area Featured Posts mouseover effect appears in the Home Bottom widget area and the Home Bottom widget area Featured Posts mouseover effect appears in the Home Middle widget area?

    Many thanks!

    • This topic was modified 8 months, 2 weeks ago by  exelexys.
    • This topic was modified 8 months, 2 weeks ago by  exelexys.
    #89855

    exelexys
    Member
    Post count: 51

    Poked around the Agency Pro theme CSS, and switching the mouseover effects for the Home Middle and Home Bottom widget areas involves switching the CSS selectors .home-middle and .home-bottom in the styles.css shown below:

    /* Content Area */
    /* Home Page */
    .home-middle {
    	...
    }
    
    .home-middle .featuredpost img.entry-image {
    	...
    }
    
    .home-middle .featuredpost img:hover {
    	...
    }
    
    .home-middle .featuredpost .entry {
    	...
    }
    
    .home-middle .featuredpost .entry {
    	...
    }
    
    .home-middle .featuredpost .entry-title a {
    	...
    }
    
    .home-bottom {
    	...
    }
    
    .home-bottom .featuredpost .entry {
    	...
    }
    
    .home-bottom .featuredpost .post:nth-of-type(3n+1),
    .home-middle .featuredpost .post:nth-of-type(3n+1) {
    	...
    }
    
    .home-bottom .featuredpost .entry:hover {
    	...
    }
    
    .home-bottom .featuredpost .entry:hover .entry-title a {
    	...
    }

    Keep in mind the home-middle and home-bottom aren’t the same pixel height (which may cause issues after switching the selectors) and the Show Featured Image checkbox in the Home Bottom widget area needs to be checked for the images to be displayed as a default state.

    Hope this helps someone looking to achieve this effect.

    Thanks

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.