Changing link styles in Sapor theme
-
I have two sites using Sapor on a premium package. I’m extremely happy with Sapor except for the link styles, both in the main body of the text on the right and the narrow column on the left. Because they are the same colour as the text you can’t really see that they are links.
Ideally, I would like the links to be in a colour (red) underlined as they are when you hover over the link now, with the hover state changed to just the colour.
I have some yesteryear experience of working with CSS. Back in 2001 I had a personal site and used to be able to edit how the links displayed, what the font was etc. Now it’s all a bit difficult. I think I can find the style sheet through the inspect element function in my browser, but I can’t recognise how to make the changes I want.
Can someone do this for me quickly? At some point, I want to learn CSS but not for at least several months.
(Note I’m doing the site for free for a charity).
The blog I need help with is: (visible only to logged in users)
-
Hi there, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. I grabbed a red color off of your site to use, but you can edit the color code as desired.
a { color: #c51515; }Let me know how this works for you and if you wish to make changes.
-
Hi. Thanks for your help. The link colours now appear in red, but unfortunately once visited defaults to black again. We would like the visited links to continue to be red.
Ideally, we would like the like the links to display with a line under which then disappears once the mouse hovers over the link. We would like these effects to take place in both the main column to the right and the narrow column on the left.
On my Windows 10 browsers phone numbers appear in blue underlined. Is there a way to change this to red?
I think there’s an issue with the heading colours but I haven’t quite got my head around it yet.
Are you OK to give us some more help?
The priority is the visited link colour being red. The links being underlined would be good too.
Thank you.
-
Hello,
I would like to chip in. Hope this is able to help you :)
Do add the following code on top of @thesacredpath to change the visited link back to red
a:visited { color: #c51515; }for the second part where the phone number is highlighted in blue color is actually a feature that has been implemented on phones to let you know that that they phone had detected a phone number or a website. However, there is a workaround to this.
1. Add the following code in your <head> tag on your html document.
<meta name="format-detection" content="telephone=no">2. or you can just manually format them as links like below on your post. This will format it as a link and it will show as red.
<a href="tel:+1-234-456-7890">1-234-456-7890</a>Let me know if this is not working as this will help me improve on my HTML/CSS skills :)
-
Hi @kennyng88
The visited link code works, thank you. Are you able to help with the underlining? I would like the links and visited links to be underlined as they currently appear when the mouse hovers over them (perhaps with the underlining removed when the mouse hovers over).
I’ll check with the boss of the charity about how he’d like the phone numbers styled. Maybe he’ll think it’s a useful feature. I’ll let you know.
-
-
-
To get the links underlined when not hovered, add the first code @kimdebruijn gave above to the “a” rule that I had given earlier.
-
@thesacredpath @kimdebruijn @kennythenerd
Thanks for your help. The links are now showing red before and after visiting. The final step is to get them to show red underlined before and after visiting – preferably not underlined when the mouse hovers over them. I’ve added the code as you suggested, but unfortunately, the underlining hasn’t appeared. I wanted to show the code I now have in the CSS customizer to this form but it won’t let me post – what’s a backtick character? Any further help you can give me to get the underlining would be greatly appreciated. Thank you.
-
Hi, I see an errant line of CSS with no selectors or brackets on the first line of your custom CSS. Let’s do this. Remove everything and replace with this one CSS rule, which get you the red and also the underline.
a, a:visited { color:#c51515; border-bottom: 2px solid; } -
@thesacredpath @kimdebruijn @kennythenerd
Thanks again for your help. We have decided not to go with the underlined links. The code produces a line at the top of the menu box. Also, now that we’ve seen the page with underlined links we think it looks “too busy”. Sorry about this! Also, the underlining doesn’t disappear when the mouse goes over. We are going to stick with the red links that underline when hovered. We very much appreciate your help in achieving this.
I hope to start learning CSS in a few months. The code you have given me looks familiar to that I used in 2001. Problem is, I can’t find anything that looks like this through either using inspect element or the browsers developer tool. Should I be seeing it?
Again thanks.
-
- The topic ‘Changing link styles in Sapor theme’ is closed to new replies.
WordPress.com Forums 