- This topic has 4 replies, 2 voices, and was last updated 3 years, 4 months ago by David.
-
AuthorPosts
-
October 30, 2020 at 12:19 am #1510504David
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, DaveOctober 30, 2020 at 12:25 am #1510517DavidActually 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
October 30, 2020 at 4:19 am #1510710DavidStaffCustomer SupportGlad 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 🙂November 1, 2020 at 8:05 pm #1513966DavidHi 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, DaveSimple 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; }
November 2, 2020 at 8:17 am #1514781DavidStaffCustomer SupportHi 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.
-
AuthorPosts
- You must be logged in to reply to this topic.