WordPress.org

Forums

Hyperlink - Change One Specific Link's Hover Color (9 posts)

  1. smssolo
    Member
    Posted 1 year ago #

    Hello,

    I am trying to change a link's hover color. Not every link, only one. My website is http://www.deephau.com and I have tried everything from a.hover css coding methods to html and nothing has worked. Essentially, I want the deephau hyperlink between the o.0 and 0.o to stay black (hidden) but when the mouse hovers over it, the color should take #515151. Because the deephau title is assuming the text color set within wordpress, at one point I threw in a <font> html tag to override wordpress and keep the link black. I felt that was overriding a lot of things associated with the link and other feature such as link hoer color.

    My header: http://pastebin.com/a2ncYz5a

    Can someone please point me in the right direction? as far as my knowledge of PHP, HTML, and CSS I know my way around but I am no expert. Part of the issue with the a.hover in the stylesheet was that I have already went in there and crtl+f found the a.hover and manually changed it to #515151.

    Stylesheet: http://pastebin.com/GQdxRR0q

  2. Tara
    Volunteer Moderator
    Posted 1 year ago #

    - Try using, for example, a tool like Firefox with the Firebug add-on for this kind of CSS work. http://getfirebug.com/ . Help info on Firebug https://getfirebug.com/faq/
    - Newer IE and Chrome also have similar tools
    - Also, check this plugin: http://wordpress.org/plugins/custom-css-manager-plugin/

  3. smssolo
    Member
    Posted 1 year ago #

    Tara,

    Thanks, I have now successfully installed the custom-css-manager-plugin. How do I utilize this tool to change the hover color?

  4. Tara
    Volunteer Moderator
    Posted 1 year ago #

  5. smssolo
    Member
    Posted 1 year ago #

    Tara,

    Are you suggesting I purchase support? This is a "free" forum, and if I recall correctly your last response is frowned upon. I posted in this forum to hopefully receive support on a somewhat simple coding confusion, not to get redirected to a third party website that requires money for support.

    Thanks. I'll search elsewhere or wait for someone to respond who is willing to assist in the proper manner.

    -Steve

  6. Undo whatever changes you made before. Right now, you have the color as #515151 on the .site-header h1 a, which is making it that color all the time. If that was #000000 then it would be black and hidden.

    Then, to change its hover:

    .site-title a:hover {
      color: #515151;
    }
  7. smssolo
    Member
    Posted 1 year ago #

    Otto,

    Great, so I've managed to get the deephau title to turn black again which is great. I conduct a crtl+f on stylesheet and I cannot locate .site-title. Is this something I should add to the code?

    Thanks,

    Steve

  8. I just wanted to chime is here and re-assure you and Tara regarding something that was posted earlier.

    Are you suggesting I purchase support? This is a "free" forum, and if I recall correctly your last response is frowned upon.

    While Otto's reply is right on the money and the correct way to go*, Tara's response was 100% correct too and is not frowned upon at all because it's just a misunderstanding on Tara's part.

    That reply was based on the idea that you may try out this plugin to easily add that CSS.

    http://wordpress.org/plugins/custom-css-manager-plugin/

    Which if you have any questions regarding that plugin then those links were right from that plugin page. It's not that Tara's suggesting you purchase support, it was just more advice towards that plugin. Nothing more or anything frowned upon.

    @Tara? You're doing alright support wise. ;)

    *Note: You really want to consider using child theme of Twenty Twelve. If you make more changes to the Twenty Twelve theme and an update comes out then you'll lose your CSS and PHP edits.

    As a starting point create a new directory in wp-content/themes called twentytwelve-child and put this style.css file in there.

    /*
    Theme Name:     Twenty Twelve Child
    Description:    Child theme for the Twenty Twelve theme
    Template:       twentytwelve
    Version:        0.1.0
    */
    
    @import url("../twentytwelve/style.css");
    
    .site-title a:hover {
      color: #515151;
    }

    If you've made changes to the header.php file then copy that entire file to the twentytwelve-child theme directory too.

    In your WordPress dashboard activate the Twenty Twelve Child theme and that may take care of it for you.

  9. Tara
    Volunteer Moderator
    Posted 1 year ago #

    @Tara? You're doing alright support wise. ;)

    Thanks Jan.

    Actually all those links I provided in my previous reply are copied from the plugin's page in WP plugin repository and pasted in my reply!!!

Topic Closed

This topic has been closed to new replies.

About this Topic