Support » Theme: Colinear » Hover help

  • Resolved webs101

    (@webs101)


    I have almost got everything working the way I want it but I need some guidance in getting the link hover the way I want it on the post page.

    I have the following CSS to get the colours on a:hover (and some other stuff) the way I want it on the main page:

    body {
      color: #A20202;
    }
    
    #page {
      background-color: #aab386;
    }
    
    h1 {
    	color: #5B6048;
    }
    
    .entry-title a:hover {
      text-decoration: underline;
      color: #A20202;
    }
    
    .site-title a:hover {
      text-decoration: underline;
      color: #A20202;
    }
    
    .entry-footer a:hover {
      text-decoration: underline;
      color: #A20202;
    }
    
    .site-footer a:hover {
      text-decoration: underline;
      color: #A20202;
    }
    
    a {
      text-decoration: none;
      color: #5B6048;
    }
    
    a:visited {
      color: #5B6048;
    }
    
    a:hover {
      text-decoration: underline;
      color: #A20202;
    }
    
    blockquote {
        border-left: 3px solid #0074d9;
      color: #a20202;
    	font-size: 85%;
    	line-height: 1.5;
      font-style: italic;
    	border-left:1px dotted #D4D7CA;
     	 margin: 10px 10px 10px 50px;
      padding: 5px 5px 5px 28px;
    }

    But I cannot figure out how to get those same effects on the past pages for links applied to the Previous and Next posts and the hover colour of the Post Comment button at the bottom.

    Here’s the div that contains one of the post titles. The other is similar:

    <div class="nav-next">
    <a href="https://101squadron.com/blog/2015/05/genius-steals.html" rel="next">
    <span class="meta-nav" aria-hidden="true">Next</span> 
    <span class="screen-reader-text">Next post:</span> 
    <span class="post-title">Genius steals</span></a>
    </div>

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Via Additional CSS in your Customizer, add:

    .post-navigation .post-title:hover {
      text-decoration: underline;
      color: #A20202;
    }

    That did not work.

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Hm, try this:

    .post-navigation .post-title:hover {
      text-decoration: underline !important;
      color: #A20202 !important;
    }

    That sort of works. I get the proper hover colour when I mouseover the post title, but if I hover over the “Previous” or “Next” links, the post title will change to use the default hover colour.

    It’s three spans inside one link. I just can’t figure it out.

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Hm, you’re right, that’s a bit too deep to target effectively. These older themes aren’t as easy to customize this way.

    Hi there,

    Please try adding the CSS below to the Customizer.

    It seems to work on my end.

    .nav-next a:hover *,
    .nav-previous a:hover * {
        color: #A20202 !important;
    }

    Animated Screenshot of how it should work:
    Nav links

    • This reply was modified 3 months, 2 weeks ago by Gary Barrett. Reason: fixed image embed

    Thanks so much, Gary!

    You’re welcome, glad I could help 🙂

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Thanks, Gary!

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.