Jump to content

How to customize CSS to change what is an active link


Captain N' Taneil

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...