link text has underline and color change

  • 1
  • Question
  • Updated 5 years ago
  • Answered
I looked but couldn't find the answer I was looking for. Here goes.....In text the box..click here to edit text. then I type a "word" and highlight it. then in the upper box I click on the "link" and it links the word to another page. How can I stop the "word" that I linked from having the underline? and also it changes the color of the word from the color I had. Is this fixable? Not html.
Photo of donnie

donnie

  • 89 Posts
  • 0 Reply Likes
  • sad

Posted 6 years ago

  • 1
Photo of Ben

Ben

  • 71 Posts
  • 20 Reply Likes
You will not get rid of underlining of linked text. No way.

Sometimes it also stubbornly won't change colour. Try to clean delete your linked text, or even remove entire text widget. Save the site. Then drag over a new text widget, type in your text (do not copy-paste it from old one!) and link it again, try to change colour now. If unsuccess, try to copy-paste a healthy behaved linked text portion from where it is so.
Photo of donnie

donnie

  • 89 Posts
  • 0 Reply Likes
Awesome. Thanks so much Ben. I thought that was the case but just wanted to be sure of it. By coping and pasting I saw the line vanish and it made me wonder, so I had to ask. You guys are the bomb. Hey by the way is Lee still with you guys? He used to help me with my furniture site. Just wanted to say hi if he is. all you guys rock though. I have never seen customer service so wonderful before. Keep up the good work and i'll keep bringing people to you guys @ yola. Best website building site ever!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Donnie,

The addition of:
text-decoration: none;.

in the appropriate CSS will remove all underlining of the link text. It depends on which state the text is showing the underlining. Hover, Active, Visited, Link

happy to work with you if you tell me the page and describe where on the page it may be happening.
Photo of Ben

Ben

  • 71 Posts
  • 20 Reply Likes
Glad to help!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Donnie

As Gop has mentioned, there is a doable way to change the link behaviour. He has provided the right code above, and it can either be added to your website CSS which will change it for your whole website, or for individual links.

For individual links, all you need to do is to click into the Text Widget and open the HTML editor of the Text Widget by clicking on the HTML icon in the Text Editing Toolbar. Coded, your link will look like this:
<a href="yourlinkdestination">Your link text</a>
Now add the snippet Gop has given above as follows:
<a href="yourlinkdestination" style="text-decoration: none;">Your link text</a>
Now this specific link will not get underlined.
Photo of donnie

donnie

  • 89 Posts
  • 0 Reply Likes
http://prayupcybercafe.yolasite.com is my site that i am working on. As you will see all the words that I use to link to other pages, some have underlines and some don't but all are blue no matter what. Being these are text all I can do is edit the margin. not the widget. take a look and see what you think. i would like the words to be red but they maybe better as blue. :>)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Donnie,

I don't know if you have Yola Silver subscription or not?

If you are subscribed to Free or Bronze then paste this internal style sheet into an HTML widget on each page:


<style type ="text/css">
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: red;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{color: red;}
h1, h2, h3, h4, h5, h6{
padding: 10px 0;
margin: 5px 0;
color: red;
text-decoration: none;
}
</style>


If you are on Silver then you can add this to your CSS over-rides:
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: red;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{color: red;}
h1, h2, h3, h4, h5, h6{
padding: 10px 0;
margin: 5px 0;
color: red;
text-decoration: none;
}


This should remove all underlines and change all links to colour red.

If you want any other changes or tweaking of this, please call out.
Photo of donnie

donnie

  • 89 Posts
  • 0 Reply Likes
lol. This was awesome,but didn't work on what I was after. I do like what it did change so i will keep this. Thanks Gop. :>)
http://prayupcybercafe.yolasite.com/m...
On this page all the words that are red where black. I was wanting to change the words in blue. prayer request,prayer groups,devotional,praise reports, so on and so forth.
This is a lot of fun trying to figure it out though. so kool!
I am a free/bronze user if that helps any, but have high hopes of becoming a silver user. :>)
What else can we try next? lol
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You can replace the previous code with this one:

<style type ="text/css">
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: #333333;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{color: #333333;}
h1, h2, h3, h4, h5, h6{
padding: 10px 0;
margin: 5px 0;
color: red;
text-decoration: none;
}
</style>


This will keep the blue colour and remove the underline. You said that you would like the words in red so that's what I understood. " i would like the words to be red but they maybe better as blue."

I you need to customise the colours of any words then you can use a custom code as Stephan pointed out or you can highlight specific words and I will give you the code for the exceptions.

The current recommendation for typography is not to have many colours of text. Stay with one or two colours only and two font styles only preferably one.
Photo of donnie

donnie

  • 89 Posts
  • 0 Reply Likes
I am very sorry for the confusion, please forgive me. I think the confusion came from me wanting to change the words that I used when I added the text to the page using the basic "text widget" that is shown under basic on the right of the page next to picture and picture gallery. I was wanting to change the words in blue such as, prayer request,prayer groups,devotional,praise reports, so on and so forth, these words I added they did not come with the preset page layout. On my blog page, the page was preset and the words that came with the preset layout did change from black to red. to which i thought to be pretty cool and I am very thankful for the code to change it. :>) I am going to leave the words that I add to the pages the way they are, blue and with underline. Once again I am sorry for the confusion and you guys did a great job answering my question and did give me a great code to use that I didn't have before. Have a great day and SMILE for it really looks good on you. :>)
Photo of Mike & Lynne Borer

Mike & Lynne Borer

  • 7 Posts
  • 0 Reply Likes
I too am having problems with the blue underlined linked words. I have tried adding the fix that GOP suggested, without any change. Still getting the links after republishing the site. Need Help!

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: red;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{color: red;}
h1, h2, h3, h4, h5, h6{
padding: 10px 0;
margin: 5px 0;
color: red;
text-decoration: none;
}
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Mike

Editing the link design can be done by using the Site CSS which is a Yola Silver or Yola Gold feature. If you'd like to change things about your Style, such as the link design, I can provide you with the necessary CSS code once you've purchased to Yola Silver. Are you ready for an upgrade?