How can i change the link color on the whole site?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
The links on the clean theme are brown how do i change that to a different color?
http://www.diamorejewelers.net/pictur...
Photo of Sigal D. @ DiamoreJewelers

Sigal D. @ DiamoreJewelers

  • 19 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
The color of your links is set by the style, but you can change the color of each link individually using the Text Editing Toolbar; here is how:

1. Create the link in a Text Widget using the Link button on your Text Editing Toolbar.
2. Highlight your link and change the color using the "Font Color" option on your Text Editing Toolbar to choose a different color.

You will need to repeat these steps for each link you add to your site.

Please note that you may not see the changed color in your Sitebuilder. You will need to use the preview page to see if the color of your links have successfully changed.

If you are a Yola Silver user familiar with CSS, you can make this change sitewide by utilizing the custom CSS editor.
Photo of info

info

  • 1 Post
  • 0 Reply Likes
You can also change the links for the whole page (if you want to).

See here: http://forum.yola.com/yola/topics/und...
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello all,

I would just like to add that if you have Yola Silver, you can add the following code to the CSS Editor:

a {
color: #CCC; <!--- change this bit to change the colour --->
text-decoration: underline; <!---Change this to have the link underlined, bold or none--->
}

Colour codes can be found at: http://html-color-codes.com/

Hope this helps.

Andi
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Another good color code site is www.colorpicker.com. It's actually a color picker which makes it easier to find the exact color you need.

Nathan
Photo of Sigal D. @ DiamoreJewelers

Sigal D. @ DiamoreJewelers

  • 19 Posts
  • 0 Reply Likes
Thank you!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
No problem Diamore!

Have a good time building your website!

Andi
Photo of Sigal D. @ DiamoreJewelers

Sigal D. @ DiamoreJewelers

  • 19 Posts
  • 0 Reply Likes
Sorry to bother again, after i copy the CSS code to the left side
does it matter where i insert the code you gave me?
Photo of Sigal D. @ DiamoreJewelers

Sigal D. @ DiamoreJewelers

  • 19 Posts
  • 0 Reply Likes
i got the underline to work but the color is still the same
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Sorry for the late reply, no it does not matter where you add the code - as long as it is not already there.

Did you change the colour code? It should have worked. Unless you have applied a different colour to the text in the editor. If you could direct me to where the link is I may be able to diagnose the issue.

Andi
Photo of Sigal D. @ DiamoreJewelers

Sigal D. @ DiamoreJewelers

  • 19 Posts
  • 0 Reply Likes
http://www.diamorejewelers.net/collec...

every category is a link and should be color # 660066 no underline
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Diamore Jewelers,

When I look at your page, I do not see any underlining? As for the color, can you please check to see if it looks right? I am not sure what color is #660066! :)

Photo of Sigal D. @ DiamoreJewelers

Sigal D. @ DiamoreJewelers

  • 19 Posts
  • 0 Reply Likes
Sanja, I dont see any change, the color should be kindda dark purple.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
you can also specify what type of link and attributes of each one.

a - any link
a:hover - when mouse hovers over
a:link - link visitor hasn't visited yet
a:visited - link visitor already visited
a:active - link of the active page

<!--

a:hover { color: #ffffff; }
a:visited { color: #dddddd; font-size: 14px; }
a:link { color: #eeeeee; font-size: 12px; font-weight: bold }
a:active { color: #cccccc; font-size: 14px; font-weight: bold; font-decoration: underline; }

-->

This is just an example
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Donald!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Sigal,

Does Donald's suggestion help? If not, I'll take a look in your site and see if I can determine why this is not working.
Photo of Sigal D. @ DiamoreJewelers

Sigal D. @ DiamoreJewelers

  • 19 Posts
  • 0 Reply Likes
Sanja,

Can you please check why my code is not working according to the parameters i specified on both these pages? Thank you for your help.

http://www.diamorejewelers.net/collec...
http://www.diamorejewelers.net/about-...

Here is my code:

}
a:hover { color: #000000; font-size: 14px; font-weight: none; font-decoration: underline; }
a:visited { color: #330033; font-size: 14px; font-weight: none; font-decoration: none; }
a:link { color: #660066; font-size: 14px; font-weight: none; font-decoration: none; }
a:active { color: #000000; font-size: 14px; font-weight: none; font-decoration: none; }
}
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Sigal,
Sanja is not currently online however I am forwarding this to her to take a look at when she returns. Thanks for your patience in the meantime.

Kind Regards,
Emmy
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Sigal,

I have fixed up the issues on your 2 pages. Please take a look in your Sitebuilder. If you are pleased with the changes, please be sure to click on the "Publish to the web" button.

If you need any further assistance, please let me know.