Request for some CSS help...

Hello!

I have a theme that has a CSS styling element that I do not care for...but for some reason, I am having a hard time figuring our how to fix it.

The web site is http://www.suzukalypse.com

If you go to it, you will see that when you hover over a post title, it becomes an orange block. I would like to have this be "normal" where the text just changes color and becomes bold.

Also, the images on the right under "POWERED BY" has an odd orange underline when you hover over it as well.

Can anyone tell me what code to change and what to change it to in my CSS?

Any and all help is appreciated!

  • Vaughan
    • Support/SLS MockingJay

    hi @jdebler

    thanks for posting.

    try in your themes style.css

    .content a:hover {
    background: none !important;
    font-weight: bold !important;
    }
    
    #footer a:link, #footer a:visited, #footer a:active {
        border-bottom: 0 !important;
    }
    #footer a:link, #footer a:visited, #footer a:active {
        border-bottom: 0 !important;
    }
    
    #footer a:hover {
        border-bottom: 0 !important;
        text-decoration: none !important;
    }

    hope this helps

    thanks.

  • jdebler
    • WPMU DEV Initiate

    Thank you so much for your help!

    I gave that a shot. It made the text links completely disappear on hover, leaving only the thin underline.

    As far as the images in the right sidebar, the orange underline on hover was a bit thinner, but not completely gone.

    I wish I had a better grip of CSS!

    Thanks again, any other thoughts?

  • Vaughan
    • Support/SLS MockingJay

    hiya

    try changing background: none to: background: transparent !important;

    also add text-decoration: none !important; to the .content a:hover rule too.

    i'd recommend http://www.w3schools.com for learning CSS. it's free & it's a great site, for all groups amateurs to experts.

    the underlines are usually related to 'a' rules in the css.

    you could try disabling it globally by.(but this could alter other areas you may not want altering)

    a { text-descoration: none !important;}
    a:hover {text-decoration: none !important;}

    hope this helps.

  • jdebler
    • WPMU DEV Initiate

    Okay! First, Happy Easter!

    Second, I started digging into this, and I learned something, and your kickstart helped!

    So here's what I did...I used Firebug and picked apart the code, did some investigating and modified it to suit my needs, and then went in and entered this to override it (in the appropriate place - Appearance -> Edit CSS):

    .content a:hover {
    	border-bottom: 0;
    	background: none;
    	color: #ffc336;
    }
    
    .content a:link {
    	border-bottom: 0;
    	font-weight: bold;
    }
    
    .content img {
    	background: none;
    	border-top: 0;
    	border-bottom: 0;
    }

    Problem solved! Thank you very much, and I am glad I joined this community!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.