Different navigation color to normal links

  • 1
  • Question
  • Updated 7 years ago
  • Answered
  • (Edited)
Hi there! I'm having a bit of a problem, and wanted to ask if anyone can help:
I am using the clean template for my website, and have designed a custom background. I have designed it so that design elements align with elements of the webpage. For example, in my design, there is a dark grey horizontal strip that lines up with the navigation, giving the navigation a nice background. The content area of my design is white.

Now here's the problem! I changed the navigation links to white using the custom CSS option. However, the only way I seemed to be able to do this was by changing the link attributes. The problem comes in when I have links in my content area of my site. They appear white too, rendering them invisible. Now I'm not HTML or CSS guru, so I may have done something wrong. But I need the navigation links to be white, and every other link a color that's visible on white; In short, anything BUT white! I hope you can understand what I'm asking, as I'd really like to sort this out.

Also, I don't really want to change my design (eg change my content area to another color)

The URL of my site is http://www.bsdesignonline.com/

It's password protected, so you'll need:

Username: simmer
Password: 451995

Thanks!
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
  • unsure

Posted 7 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello,
I do see what you are saying. Unfortunately this is not my area of expertise and the problem you have requires assistance from our HTML Team. I have referred you to them and they will be glad to help.

Please allow them 48 hours for them to respond to your query.

Kind Regards,
Emmy
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Brandon
This code works on my site
<!--
<a style="text-decoration: none; color: rgb(0, 0, 0); font-weight: bold;" href="your-link.php">
-->

Position the cursor in the relevant text widget and click on HTML in the toolbar, position this code without the <!-- and--> in the correct place and change what you like, text decoration can be underline, rgb is the colour, font weight can be normal etc
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
I'm a little confused. Must there already be an active link somewhere in the text widget? And what if there are multiple links?
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Yes there does need to be active links present in your content, reading your post above I thought there was?
If not create the links as you would normally, locate them in the HTML, they will start like this <!-- <a href --> and insert the code. So in reality because the href is already there you just need to delete <!-- <a --> at the start and insert the code above.
You will need to add this to every link on your page
Photo of Francois

Francois, Employee

  • 282 Posts
  • 19 Reply Likes
Hi Brandon,

Can you please let us know if this is still a problem for you or if David's suggestion helped?
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Apologies for the late feedback. Thanks, I've got it working now! However, I think I may still need help from the HTML team, because links in blog posts don't change. Yes, the links in my actual post I can change, but default links like post title, category etc which are added automatically are still using the link style in the custom CSS.
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Hi there. Apologies if I sound impatient, but I'm still having the problem I mentioned in my previous reply. Is this something that can be fixed?
Thanks!
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Brandon

Apologies for the delay in getting back to you. I will ask the HTML team to take a look at this problem. Someone will get back to you within 48 hours.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Brandon,

Thanks for your patience. I suggest trying this code:

div.sys_blog div.post a:link{
color: #5dc4d3;
}

You can change the Hex value for your color.

I hope this does the trick!
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
That is perfect! Works 100%! Many thanks to everyone who helped :)
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Oh great! Happy to hear that it worked for you! :)