Captain N' Taneil Posted July 1, 2017 Share Posted July 1, 2017 I am using the following theme. Theme Name: Education Zone Pro Theme URI: http://raratheme.com/wordpress-themes/education-zone-pro/ Author: Rara Theme Author URI: http://raratheme.com/ The web address to the site I am working on it learning.drdanscience.com When you go to the front page, you will see four "info boxes" just under the slider. They are three different colors. The Title text inside the boxes is active. However, I desire for the entire box to be active instead of just the Title text. I believe the following CSS determines what is active (linked) in the info boxes. Quote .thumb-text { position: relative; top: 0; padding: 0; margin: -90px 0 0; text-align: center; width: 100%; z-index: 1; } .thumb-text li { vertical-align: top; display: inline-block; list-style: none; color: #f9f9f9; font-size: 16px; line-height: 24px; width: 24.9%; } .thumb-text li .box-1 { background: #737495; padding: 28px 28px 26px; } .thumb-text li .box-2 { background: #68a8ad; padding: 28px 28px 26px; } .thumb-text li .box-3 { background: #6c8672; padding: 28px 28px 26px; } .thumb-text li .box-4 { background: #f17d80; padding: 28px 28px 26px; } .thumb-text li h3 { margin-bottom: 15px; } .thumb-text li h3 a { color: #f9f9f9; font-size: 22px; line-height: 25px; font-weight: 700; } .thumb-text li h3 a:hover, .thumb-text li h3 a:focus { text-decoration: none; opacity: 0.6; } .thumb-text li span { display: block; margin-bottom: 22px; } .thumb-text li img { width: auto; } I have tried multiple things trying to make .box-1 .box-2 .box-3 .box-4 active instead of just .thumb-item li h3 a { I tried: Quote .thumb-text li h3 .box-1, .box-2, .box-3, .box-4 a { color: #f9f9f9; font-size: 22px; line-height: 25px; font-weight: 700; } Which did not work. If someone is willing to look at this and help me learn what I need to do I would greatly appreciate it. I don't know if I am just missing something or misunderstand the concept. Any help would be much appreciated. Thanks, Taneil Link to comment Share on other sites More sharing options...
john_jack Posted July 7, 2017 Share Posted July 7, 2017 you can use this .box-1:hover{ background: #390142; } i am using :hover the CSS will take effect when hovering the class box-1 . and do the same for the other boxes . good luck Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now