Shift Theme, CSS & URL Links

Continuing the discussion from Links in text in a paragraph:

I am trying to change URL links to standard colors with the Shift Theme by WeaverThemes but it seems to only change the URL colors for links in the top navigation and sub navigation. The colors for the links in stacks text body’s don’t show any contrast. If I change the Contrast under Global Colors it will change the hover color but also changes a bunch of other things I don’t want changed like the entire background of the site.

Is there a global way with CSS to do this or do I have to use custom tags for each link in combination with CSS to accomplish this? I just see myself forgetting to add the custom tag as I go along.

http://eportfoliosu.studioprime.com/Service/Service_Self-Assessment

I am really just trying to get the default blue link and on hover get an underlined blue link and red when clicked and purple when visited like people are use to.

This of course changes everything on hover. There seems to be no way to use CSS to just change the color of links without a unique class for the link if I am not mistaken. I have spent almost four hours reading through and experimenting with everything I could here CSS Styling Links so I apologize for bothering.

primary-content.content:link {color:#ff0000;text-decoration:none;}

section.content:visited {color:#0000ff;}

section.content:hover {font-size:115%; color:blue; text-decoration:underline;}

The following CSS will change all anchor tags:

a:link {
    color: blue;
}

a:visited {
     color: blue;
}

a:hover {
    color: blue;
    text-decoration: underline;
}

a:active {
    color: red;
}

You can set the colors and any other CSS as you like,
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

Thanks for the help, good to know I was doing at least something close to right one of the times I tried it. I guess this theme just has something in the theme code that is overriding the colors. I guess I can settle with the text just being underlined but hopefully there is another solution from the developer.

a:link {
    color: blue; text-decoration: underline;
}

a:visited {
     color: purple;
}

a:hover {
    color: grey;
    text-decoration: underline;
}

a:active {
    color: red;
}

Hi Adam,

Have you tried to change the colors for the Text Stacks under Page Inspector > Content Colors > Contrast?

Q1) Thanks, I thought I tried that, is there any reason why it doesn’t say “links” instead of contrast? Is there something else that will also be changed when this color is changed that I might not be aware of?

Q2) So to complete this out how would I with CSS at this point override the theme to make it so links show underlined when hovered over and remain the same shade of blue? [quote=“skillet, post:1, topic:9564”]
If I change the Contrast under Global Colors it will change the hover color but also changes a bunch of other things I don’t want changed like the entire background of the site.
[/quote]

I really don’t want all the other colors to change but I want to target the hover. Links that have been clicked on do not change purple and putting this in sitewide code doesn’t seem to be able to change anything.

Though text-decoration: underline; seems to work just fine.

a:link {
    color: blue; text-decoration: underline;
}

a:visited {
     color: purple;
}

a:hover {
    color: grey; text-decoration: underline;
        }

a:active {
    color: red;
}

Q3) Is there a way when I inspect an element in Safari or view source in Google Chrome to see what code is causing the color to be that color for that particular element? Seems like some CSS or something built into the link is causing this issue and I am not sure the quickest way to find the code that is causing the problem since moving up the list doesn’t seem to reveal anything. Seems a separate CSS file or something is causing the change.

Yes, but you have to turn on developer options before it will show up.

Right, I have it on I am just not able to find the code that is changing the color. Maybe if someone was able to take a screenshot and show me how to find this I could troubleshoot a lot of other stuff hopefully.

If you think it is getting overridden try adding !important -

a:active {
color: red !important;
}

see if that does it.
If it is still being overridden then you will need to target the div

1 Like

Thank you that is so helpful! I had no idea that side tab was there to show all your CSS and to change code so easily with the Syles options it gives. Where has this been all my life?!

I might just have to create a partial for all my pages with the HTML 5 Elements Stack I just recently learned about and then have all of my text in that so I can target the same Div on every page in the website. Hopefully I’ll find a better solution before I do that though. Thank you again for the help!

there is also a stack called CSS Box I think it’s one of Joe Workman’s. That stack allows you to place any other stack inside and give it a class or ID.

Good call, I had downloaded that but had never used it thanks.

I also just downloaded CSS on the Fly by Delfligra along with
http://www.defligra.com/free-stacks/css-column-stack/
&
CustomCSS which is probably what I am going to use as a partial for this in the end.

Thanks for telling me about Joe’s because I didn’t even think to look for CSS in my stacks, duh me!

2 Likes