Make links blue by default

6 Comments

  • Official comment
    Ryan McGrew
    Zendesk Product Manager

    Hi @...

    The Copenhagen theme that is provided by Zendesk has an ability to quickly and easily change text color of links via a setting in the theme. You can see more about that here.

    I took a quick look at your theme and I think it has been customized to put the blue color on article links. But there's an error in one of your CSS rules at line 1629 where it looks like you're missing a # in the color declaration. Yours looks like this:

    .article-body a:link, .article-body a:visited, .article-body a:hover {
    color: 1F73B7;
    }

    However, the color #1F73B7 is also the default link color.  So you can either

    1. Add a # so it looks like color: #1F73B7; on line 1629
    2. Remove lines 1628 to 1630 as they shouldn't be necessary

    Doing either of these should address the issue you've posted about. 

  • Jessica Karabko

    Hi @...!

    Thanks for stepping in!

    I spent an hour yesterday editing the CSS file. 

    color: 1F73B7;

    This is not a mistake. This is how it must look in order to work. Initially, I initially wrote #1F73B7 too, but it did not do anything - the links remained black. Only when I removed the # sign, they turned into the correct color. I don't why or how it works. I'm not a programmer, I'm a simple support agent so don't ask me :)

    My point though is the following: links should be blue by default.

    0
  • Ryan McGrew
    Zendesk Product Manager

    Thanks for looking more into it Valentina. I guess what I'm trying to say is that, the default link color is blue, but someone customized your theme to add this particular CSS rule to the styles.css file in your theme, which I think is what's causing you issues. If you look at lines 228 to 235, you'll see these default definition for links

    a {
    color: #1F73B7;
    text-decoration: none;
    }

    a:hover, a:active, a:focus {
    text-decoration: underline;
    }

    The color definition needs to have the # to be properly read as a HEX color, not having that is an error that I think the browser you're using is struggling with. I would just remove this CSS rule at line 1628 from your styles.css

    .article-body a:link, .article-body a:visited, .article-body a:hover {
    color: 1F73B7;
    }

    I will say that when viewing your Help Center in Google Chrome, it ignores this problematic rule and renders as blue. What browser are you using when looking at this article?

    I think I found the article on your Help Center that you referenced. If you can confirm that, it'll help me troubleshoot the issues further, if necessary.

    0
  • Jessica Karabko

    Without this line:

    .article-body a:link, .article-body a:visited, .article-body a:hover {
    color: 1F73B7;
    }

    The links were black. I added this line with #1F73B7, the links remained black.

    I changed the color to 1F73B7 (without the hash), and the links because blue. Again, I have no idea why it works like that. Maybe the line is wrong altogether, but somehow it makes the code work.

    No one edited the theme file before. This was my first time digging into the code.

    0
  • Jessica Baldacchino

    I have the same problem and am working from the default Copenhagen template.  Has the Copenhagen template been reviewed by Zendesk?

    The links appear blue in the editor, but not after they are published. 

    0
  • Dave Dyson
    Hi Jessica, and welcome to the community!
     
    Be default, unvisited links in articles should appear blue, and visited links should appear purple -- I added a new Copenhagen theme to my test account to ensure there weren't any modifications to the color selections or the CSS or HTML, and was able to verify this by creating a new article with a link to a site I hadn't yet visited. Here's what the defaults look like:
     
     
    0

Please sign in to leave a comment.

Powered by Zendesk