Archived topic
Links issue
4 replies · Started by David on October 30, 2020
Hi all,
I have set two different sets of CSS for links.
One for a footer that has a dark background.
They are styled with:
.footer-links a:link:not(.gb-button) {
etc. and the hover
And I have this for other links on pages:
.page a:link:not(.site-footer) {
Also tried:
.page a:link:not(.footer-links) {
The footer ones work perfectly when I turn off the .page one, but when I have it active the .page CSS is affecting the footer.
Any suggestions - probably something obvious I am missing!
Link in private information to see it in action - the hover effect over the footer links should not be happening
TIA, Dave
Actually I think I just fixed it.
I realise now that using .page was not a good idea.
I changed it to .site-content and that seems to have done the trick!
Dave
Glad to hear you found the solution !
Just for your info page is the elements ID.
So instead of .page you would use #page
But using the .site-content is the right thing to do :)
Hi David,
I'm making some progress with this, but still not quite getting it right!
When I turn on this CSS for the page, it affects the footer! (My :not logic does not seem to work!)
Also the link color seems to be defaulting to the link in the customizer!
And once this is working on this page, I need to apply it globally to all pages.
Page I am testing it on below
TIA, Dave
Simple CSS on the page not globally (for testing) (also tried adding .site-content to the css on the page - no change)
/* text links on pages */
a:link:not(.footer-links) {
color: #546E7A;
text-decoration: underline;
}
a:hover:not(.footer-links) {
color: #37474F;
text-decoration: none;
}
Simple CSS for the footer (class .footer-links in the container)
/* text link underline effect for footer */
.footer-links a:link a:visited {
text-decoration: none;
color: #a9b0b1;
}
.footer-links a:hover:not(.gb-button) {
color: #ECEFF1;
transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
transition-property: all;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0s;
border-bottom: 1px solid #d9e0ca;
}
Hi there,
the :not psuedo property only applies to classes that exist on that element.
eg.
<a class="exclude-me" href="url">Link text</a>
Then this CSS would apply:
a:not(.exclude-me) { /* Styles */ }
If you want to style the footer-links different to the text then you should simply do this:
.footer-links a {
text-decoration: none;
color: #a9b0b1;
}
.footer-links a:hover {
color: #ECEFF1;
transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
transition-property: all;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0s;
border-bottom: 1px solid #d9e0ca;
}This CSS is more specific then your standard link styling so it will override that.
