Bold and Underline Hyperlinks

SOLVE
Highlighted
Top Contributor

Hello wonderful community. I added some styling to our hyperlinks to BOLD and UNDERLINE  all hyperlinks on our website, however, i dont want the menu to be bolded and underlined. Can anyone help with this? https://www.dowcoinc.com

 

I would also like to change the color of the "work with us" link in the footer. See about us page for footer: https://www.dowcoinc.com/about-us its not as easy as going into the editor to update......

 

footer image.png

 

Can anyone help?

 

Much appreciated!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Esteemed Contributor

Hi @ErinKas

 

tried it in the chrome inspector.

 

It should be enough to simply delete the !important from

a:link, a:visited, a:active{
text-decoration: underline !important;}

(you'll find it in line 833)

the !important "rule" is the sledgehammer method which should be used only in "emergency" cases because it will overwrite every other (in your case)

text-decoration: SOME-STYLE;

which you apply to a link-element(a:link...)

 

 

If you don't want to delete the "!important"(not really recommended):

 

To get the navigation links to "normal"-state find

.custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a

(It's in line 914) and add

text-decoration: none !important;
font-weight:normal !important;

(the !important is nessary to overwrite the existing !important rule from the a:link..)

 

 

 

---

I've taken a look to the New_Symphony-style.css and have some questions:

- do you really need all of the fonts which are imported in the first 33 lines of it?

 

Because: There more fonts you import, the slower/worse the page speed can get. 

 

So, if you don't use them - delete the. But don't delete the first one(.../font-awesome.css), this is the font which is used for all of the icons. It's a little bit outdated, but if it came with the theme then you shouldn't replace it Smiley Wink

 

 

 

 

regards,

Anton

 

4 Replies
Community Manager

Hi @ErinKas,

 

I want to tag a few subject matter experts into the conversation: @Anton@mgrubbs@Simon_Goldie do you have any tips for Erin? 

 

Thanks,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Esteemed Contributor

Hi @ErinKas

 

tried it in the chrome inspector.

 

It should be enough to simply delete the !important from

a:link, a:visited, a:active{
text-decoration: underline !important;}

(you'll find it in line 833)

the !important "rule" is the sledgehammer method which should be used only in "emergency" cases because it will overwrite every other (in your case)

text-decoration: SOME-STYLE;

which you apply to a link-element(a:link...)

 

 

If you don't want to delete the "!important"(not really recommended):

 

To get the navigation links to "normal"-state find

.custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a

(It's in line 914) and add

text-decoration: none !important;
font-weight:normal !important;

(the !important is nessary to overwrite the existing !important rule from the a:link..)

 

 

 

---

I've taken a look to the New_Symphony-style.css and have some questions:

- do you really need all of the fonts which are imported in the first 33 lines of it?

 

Because: There more fonts you import, the slower/worse the page speed can get. 

 

So, if you don't use them - delete the. But don't delete the first one(.../font-awesome.css), this is the font which is used for all of the icons. It's a little bit outdated, but if it came with the theme then you shouldn't replace it Smiley Wink

 

 

 

 

regards,

Anton

 

Top Contributor

@Anton!!!!!!! Thank you Thank You Thank You. This is perfect and worked fantastically! 

 

I did notice the massive amounts of font at the top of the css. Whats the best way to make sure they are not in use before I remove them? Any suggestions? Thank you again for that fix!!!!

 

 

Reply
0 Upvotes
Esteemed Contributor

@ErinKas, glad to help you. 

 

I think the best way would be to

- open the New_Symphony-style.css in the design manager

- press STRG+F (or CMD+F on a mac) to open the search function

- search for every "font-family" inside the css

- write down which one is used and in which font-weight(normal, bold, 300,400 ...)

- after you have found every "font-family" inside the css, scroll back to the "massive amount of fonts"

- delete every font which you haven't written down

 

Also you could go to fonts.google.com, search for every font you use, select them with the font-weight you (want to) use and grab only one 

@import

link.

 

Note: FontAwesome isn't availible on google. Like I've mentioned in the previous post, just leave it as it is.

If you want you can load a new version by google for "FontAwesome 4 CDN", grab a link and replace the current FontAwesome link with it.

 

 

regards,

Anton

Reply
0 Upvotes