Agency Pro: switching home widget area featured block effects

[exelexys]

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!

[exelexys]

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

[Author]

Posts