Change Color of Line Under Links

Home Forums Automattic Forefront Change Color of Line Under Links

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #107868 Resolve

    Sarah Jane Holden
    Member

    Hi,

    I was able to customize the color of the text of my links, but they have a gray line underneath them that turns bright green when I hover over the text that is linked to another page. (You can see an example of this on my home page under the “learn more”, “who we are”, and “what we do” text links.)

    I would like to change the color of the line, the hover color of the text, and the hover color of the line so that they coordinate.

    Help on how to do this would be greatly appreciated!

    As a bonus-I would like to completely DELETE the line that appears behind my customized social media icons in my sidebar widget. (You can see a very light gray line running behind the social media icons that turns to bright green when I hover over the social media icon).

    If you can help me solve these latest dilemmas, that would be AMAZING!

    Thanks so much.

    The blog I need help with is buildingblockssll.com
    #138254

    Michelle

    I was able to customize the color of the text of my links, but they have a gray line underneath them that turns bright green when I hover over the text that is linked to another page. (You can see an example of this on my home page under the “learn more”, “who we are”, and “what we do” text links.)

    I would like to change the color of the line, the hover color of the text, and the hover color of the line so that they coordinate.

    You can change the color of the line with this CSS:

    .widget_text a {
    border-bottom: 1px solid #d7d7d7;
    }

    Change “d7d7d7” to the color of your choice.

    To change the hover color of the line and text:

    .widget_text a:hover {
    color: #e57446;
    border-bottom: 1px solid #00cc00;
    }

    Again, change the green (“00cc00”) and orange (“e57446”) to the colors of your choice.

    As a bonus-I would like to completely DELETE the line that appears behind my customized social media icons in my sidebar widget. (You can see a very light gray line running behind the social media icons that turns to bright green when I hover over the social media icon).

    This will remove the bottom border only on the text widget containing the social icons:

    #text-10.widget_text a {
    border-bottom: none;
    }

    #138761

    Sarah Jane Holden
    Member

    Thanks so much for your help. I was able to fix most of the issues. Unfortunately, the hover color is still bright green on my content pages though since these aren’t widgets.

    If you go to http://buildingblockssll.com/about-sarah/, you’ll see an example of this at the bottom for the line and hover color of “how we do things differently”.

    I need to change the color of the link line and hover color on all my content pages as well-suggestions on how to do this?

    Thanks again for your help!

    #138762

    Sarah Jane Holden
    Member

    Also, one more thing-I was able to get the code adjusted to center my text in the side and footer widget areas but the links “sign up now” are not centered. For some reason my info under “connect with us” in the footer widget didn’t center either (even though all other text in widgets did!).

    Ugh. Suggestions? Thanks again.

    #138784

    Caroline Moore

    Howdy @sjholden!

    You can change the border hover color with the following CSS, again, changing the “#d7d7d7” to the color of your choice:

    .entry-content a:hover, .comment-content a:hover {
    border-bottom: 1px solid #d7d7d7;
    }

    And this should center the Submit button for the signup widget:

    #subscribe-blog input[type="submit"],
    #subscribe-blog-2 input[type="submit"] {
    margin: 0 auto;
    display: block;
    }

    I hope this helps!

    #138793

    Sarah Jane Holden
    Member

    The link change worked great but I’m not having luck centering my buttons OR the text on my contact info text. Any additional tips?

    Thank you! :)

    #138845

    Caroline Moore

    Hmm, I don’t see the code I shared above in your Custom CSS module to center the buttons. Can you try putting it in again?

    The contact info can be centered with this:

    #text-11 {
    text-align: center;
    }

    #138910

    Sarah Jane Holden
    Member

    Yes! Got it. Thanks so much.

    #138916

    Sarah Jane Holden
    Member

    I am baffled. I entered this code earlier today, and now my submit buttons in the sidebar & footer areas are not centered again. Additional suggestions?

    #139445

    Kathryn P.
    Happiness Engineer

    Hi there, I don’t see this code in your custom CSS:

    #subscribe-blog input[type="submit"],
    #subscribe-blog-2 input[type="submit"] {
    margin: 0 auto;
    display: block;
    }

    Would you mind adding it again and saving the changes?

    Would you mind confirming that this the same issue as the one you’re asking about in this other thread:

    http://premium-themes.forums.wordpress.com/topic/center-follow-blog-submit-button

    #139701

    Sarah Jane Holden
    Member

    Yes-same issue. Will work on updating Safari & make sure that is the problem. Sounds like it is though. :) Thanks.

    #139704

    Kathryn P.
    Happiness Engineer

    OK, thanks for confirming. I’m going to close this thread and we can continue in the other.

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

The topic ‘Change Color of Line Under Links’ is closed to new replies.