Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #780376

    Hi everyone

    We’re building our Enfold WordPresss site right now and do have a slight problem with link-colors.

    Our page uses the Enfold 2017 Demo as template, we do like the feeling and the colors… downside of this template is that links are just black and if you hover over them, they get underlined.

    For some reasons we had to change our font color to black and now you can not see any difference if a link is a link… you have to get your mouse over nearly every word to see if it’s a link or not.

    Standard blue looks crappy and we’ve also tried other colors for links.. didn’t look well, as our site is white/black/grey.

    Additionally, if we use elements with white black background, we have to change the color of the text to custom => white text. Now the links don’t even change if you hover over them…. how to perserve the hover/change color if you’re using custom colors in certain areas?

    Any ideas which colors to use, that work?

    PS: Sadly I can’t provide an example or link right now to the page

    br
    TOM

    #780404

    Hey TOM,

    It would really be helpful if we can get a link to your page. If it’s really impossible, then perhaps a screenshot might help.

    To set the hover/change color for custom colors in certain areas, you can add code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file. If, for example, you’ve set the class black-background for your areas with a dark or black background, you can use something like this:

    .black-background a {#white; }
    .black-background a:hover {text-decoration:underline; color: yellow;}

    and then you can edit the color as you see fit.

    Speaking of color options, you can check this article for tips: https://www.viget.com/articles/color-contrast. The article also mentions good tools you can use. You can also try this Stack Exchange thread: https://graphicdesign.stackexchange.com/questions/20258/colors-to-use-with-black-background

    I hope that helps! Let me know if you need anything else.

    Best regards,
    Sarah

    #796481

    Hi Sarah,
    I have a similar issue to this on my site.

    I have tried entering the CSS but it doesnt seem to change the content. I have also tried customising the links in the Theme Options however this changes a lot of dropcaps and the like. I would just like to be able to make links across the site stand out.

    Many Thanks
    Tom

    #796555

    Hi Tom,

    What links exactly are you looking to change?

    Best regards,
    Rikard

    #796636

    Within the next on pages there are links but since the theme colour and the link colours are the same they do not stand out from the text.

    Thanks
    Tom

    #796917

    Hi Tom,

    I think you will have to add a class manually to the links since it’s difficult to target those specific links. Please try adding this to Quick CSS:

    .tom-link-class {
      color:yellow !important;
    }

    Then add the class to the links you want to stand out in your content:

    <a href="http://yoursite.com/link" class="tom-link-class">Link text</a>

    Best regards,
    Rikard

    #797466

    Hi Rikard,

    Ok thanks, the site is 370 pages, many of which have these links so changing them manually is not on the agenda for now, I will have to leave it and have a think about it another time.

    Tom

    #797588

    Hi Tom,

    Ok, thanks for the feedback. If you should need any further help then please post a screenshot highlighting the exact links you want to style differently as there might be a more efficient way.

    Best regards,
    Rikard

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