Avada Forums Community Forum Underline links?!

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • markn26
    Participant
    Post count: 3

    Stupid question…how on earth can I get my Avada-powered site to underline all hyperlinks? I could have sworn this used to be in some kind of Style menu in the old days, which no longer appears to be there.

    I used this code, and it does nothing:

    /* underline all links on all pages and posts*/
    #main a:link, a:visited{
     text-decoration: underline;
    }

    Thanks!

    marklchaves
    Participant
    Post count: 873

    Hi,

    Good question.

    I think you are pretty close. But, try this. Hopefully, this should work better (notice: no hashtag).

    
    main a {
      text-decoration: underline !important;  
    }
    
    

    This will target all hyperlinks (a tags) in the main body of the page (i.e., links that occur in between <main></main>).

    I don’t think you need the pseudo classes :link :visited. Try first without. Add them in if I’m wrong.

    P.S. This won’t affect your links in the header and footer. You probably don’t want that anyway. I have a live demo on CodePen if you want to play around with link styling. https://codepen.io/marklchaves/pen/bXbGye

    markn26
    Participant
    Post count: 3

    Thank you! Strangely enough, it doesn’t appear to be affecting hyperlinks in objects such as Avada’s “content boxes”…does anything special have to be added in for those?

    EDIT: It looks like underlined links within Content Boxes work in Firefox, but not in Chrome

    marklchaves
    Participant
    Post count: 873

    Hi,

    You’re welcome. Ah, the can of worms has been opened. Welcome to the exciting world of web dev.

    Try this.

    
    div.fusion-text a {
      text-decoration: underline !important;
    }
    
    

    You might need to tweak, experiment, read-up on CSS, take a CSS class, or hire a pro if you need to do more.

    Best of luck!

    westlancs
    Participant
    Post count: 5

    Thank you mark!
    We went with Avada for the WCAG claim, however I read that hyperlinks need to ideally underline (on hover or focus at least) for accessibility.

    We tweaked your code to:

    div.fusion-text a:hover, a:focus {
    text-decoration: underline !important;
    } /* To underline hyperlinks on hover/*

    Which I hope is right given we’re not any type of ‘pro’!
    Really appreciate your help.

    ktwitchell001
    Participant
    Post count: 5

    Where do I put this code?

    BubwithTennis
    Participant
    Post count: 1

    It needs to be put in the custom CSS section. Go to the “Avada” option in the left hand side WordPress menu, and select “Options”. In the option navigation, go down to “Custom CSS”.

    Paste in the CSS and then “Save changes”.

    If you want to underline all text links in the pages and posts, then use the code below (the bit between the “/*” and “*/” is optional – it is just a way of marking what the code that follows it does):

    /* underline all links on all pages and posts*/
    #main a:link, a:visited{
    text-decoration: underline;
    }

    tomjay-2021
    Participant
    Post count: 6

    What is the code if I want only decorate the links in boydy text?

    Thanks!

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