[Support request] Links issue

Home Forums Support Links issue

  • This topic has 4 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1510504
    David

    Hi all,

    I have set two different sets of CSS for links.
    One for a footer that has a dark background.
    They are styled with:
    .footer-links a:link:not(.gb-button) {
    etc. and the hover
    And I have this for other links on pages:
    .page a:link:not(.site-footer) {
    Also tried:
    .page a:link:not(.footer-links) {

    The footer ones work perfectly when I turn off the .page one, but when I have it active the .page CSS is affecting the footer.
    Any suggestions – probably something obvious I am missing!
    Link in private information to see it in action – the hover effect over the footer links should not be happening
    TIA, Dave

    #1510517
    David

    Actually I think I just fixed it.
    I realise now that using .page was not a good idea.
    I changed it to .site-content and that seems to have done the trick!

    Dave

    #1510710
    David
    Staff
    Customer Support

    Glad to hear you found the solution !

    Just for your info page is the elements ID.
    So instead of .page you would use #page
    But using the .site-content is the right thing to do 🙂

    #1513966
    David

    Hi David,
    I’m making some progress with this, but still not quite getting it right!

    When I turn on this CSS for the page, it affects the footer! (My :not logic does not seem to work!)
    Also the link color seems to be defaulting to the link in the customizer!
    And once this is working on this page, I need to apply it globally to all pages.
    Page I am testing it on below
    TIA, Dave

    Simple CSS on the page not globally (for testing) (also tried adding .site-content to the css on the page – no change)

    /* text links on pages  */
    a:link:not(.footer-links) {
      color: #546E7A;
      text-decoration: underline;
    }
    a:hover:not(.footer-links) { 
      color: #37474F;
      text-decoration: none;
    }
    
    

    Simple CSS for the footer (class .footer-links in the container)

    
    /* text link underline effect for footer */
    .footer-links a:link a:visited { 
        text-decoration: none; 
        color: #a9b0b1;
    }
    .footer-links a:hover:not(.gb-button) { 
        color: #ECEFF1;
        transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
        transition-property: all;
        transition-duration: 500ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: 0s;
        border-bottom: 1px solid #d9e0ca;
    }
    
    #1514781
    David
    Staff
    Customer Support

    Hi there,

    the :not psuedo property only applies to classes that exist on that element.
    eg.

    <a class="exclude-me" href="url">Link text</a>

    Then this CSS would apply:

    a:not(.exclude-me) { /* Styles */ }

    If you want to style the footer-links different to the text then you should simply do this:

    .footer-links a { 
        text-decoration: none; 
        color: #a9b0b1;
    }
    .footer-links a:hover { 
        color: #ECEFF1;
        transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
        transition-property: all;
        transition-duration: 500ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: 0s;
        border-bottom: 1px solid #d9e0ca;
    }

    This CSS is more specific then your standard link styling so it will override that.

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