Changing the linking font colour.

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hello I am creating my site p2weddings.com and I am using a template that is perfect however when I link certain words to either email addresses, different pages etc, the colour it turns is light green and it is hard to read. I am already getting suggestions from my customers asking me to change it. I am new to reading and using HTML coding but I am starting to learn. My question is this: How do I change the linking colour of my font from light green to eggplant purple? Thank you so much for any help you can provide.
Jessica
Photo of Jessica Rowntree

Jessica Rowntree

  • 5 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello jessica,

This is straight forward but depends on a couple of things.

Do you wish to make this a global change where all links are purple instead of green or only selected links?

Do you have Yola Silver, Bronze or Free? (I think it is Silver?)

Do you know the HTML colour code for the eggplant purple? ( #7A6883 ?) Happy to work with you on this if you wish.

Just a little background as you have mentioned that you are learning HTML so you may find this intersting. Taken from the w3schools site:
links can be styled differently depending on what state they are in.

The four links states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

for example
a:link {color:#code;} /* unvisited link */
a:visited {color:#code;} /* visited link */
a:hover {color:#code;} /* mouse over link */
a:active {color:#code;} /* selected link */

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover


For colour selection you can refer to the w3schools HTML Colors
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hi Jessica, the format of your web page is controlled by a css file. To be able to custom edit the css file you need to have a Silver or Gold package. Which type do you have?

A possible way of overriding the CSS style without editing the CSS file is to double click on the word for each link to select the word and then on the text edit bar that comes up, click on the color icon and select the color you would like. You could also Bold the links using the text edit bar to make them standout more to customers.

Or if you have a Silver/Gold, to custom edit the CSS, click the Style tab > click Edit Custom CSS > on the left click Enable Site CSS overrides > click the CSS tab on the right and copy the entire contents under this tab to the blank window on the left > on the left window locate the a{...} link of code. In the "a{ }" section of code, change the color to purple so that the line says a {color: #7A6883;} or if you want to to exactly match the dark purple in the banner on your page change it to a {color: #A88BA1;}. To make the links bold change it to a {color: #A88BA1; font-weight: bold;}.

A word of warning if you want to try editing the CSS - ..here is a quote from one of the Yola tutorials - " Please note that this is an option for advanced users and we will not be able to assist you if your CSS edits break your site. If you unsure of how to proceed, we recommend that you try this on a blank test site first before attempting it on a website which contains your valuable content."
Photo of farragio

farragio

  • 90 Posts
  • 9 Reply Likes
Are there some Style templates that won't allow the "active" or "selected" link in the CSS override?

I am using the SqueakyClean template and am trying to make it so that the active page is bolded on the menu.

I have tried:

a:selected {
text-decoration: bold;
color: #000000;
}

and

a:active {
text-decoration: bold;
color: #000000;
}

I have made sure to add the code after the "hover" code but neither are working.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello farragio

As far as I remember, this should work with the SqueakyClean Style. You'll need to add the attributes to the menu section of your Site CSS, not to the general link section. Please check if you can achieve the desired result, and if you can't, let me know, and I'll be happy to try and find out a solution for you.
Photo of farragio

farragio

  • 90 Posts
  • 9 Reply Likes
Hi Stefan,

I can't get it to work. In playing around with the code that is already there I have found that this is the area that affects the menu:


a:link {
text-decoration: none;
color: #333333;
}

a:visited {
text-decoration: none;
color: #333333;
}

a:hover {
text-decoration: none;
color: #000000;
}


And as I mentioned previously this is the code I've tried adding:


a:active {
text-decoration: bold;
color: #000000;
}


Not having any luck with it :(

ETA: I tried looking at another Style template that does have the bolded feature but when I looked at the CSS I couldn't find the code.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello farragio

For the SqueakyClean Style, the CSS code you need to edit your active page menu link is this:
#menu ul li.selected a {

font-weight: bold;
}

This makes the menu link of an active page display bold. Hope this helps!
Photo of farragio

farragio

  • 90 Posts
  • 9 Reply Likes
Ahh! I had tried that area as well before but had used a colon rather than a period after the li

I tried your code and it works. Thanks for all your help!