Changing the link colour in Edin theme
-
sorry, sacred path, i was in error in referring to the titles i want to change as widgets — in fact they are “featured pages” on the front page, accessed via Appearances / Customizing / Theme Options. (i.e. the section immediately above the two widget areas).
on my existing page, those titles currently say “spring 2018 shoe arrivals / join our running clinics / running shoes”. they currently display in black with a rollover colour blue — it’s that rollover colour i want to change to maroon.
ideas? thanks in advance for your help.
-
Hi, I just put the first code I gave you directly into your customizer and it turned the titles you mention to the maroon color when I hover over them. I’ve left that in your customizer and published it and it’s commented with my username.
-
-
sacred path: since you solved that little issue for me, can you solve this one as well?
i want to change the colour of the vertical rule in the standard block quote from blue to maroon. like here:
https://therunningworks.ca/clinics/but i want the block quote in the feature image on the home page to remain as is, i.e. white with a white rule.
is that possible?
-
Hooray!
For the borderline on the blockquote, this would do it. What I’ve done is to use the :not() conditional to exclude the home page from the borderline change. It will change everywhere except on your home page.
body:not(.home) blockquote { border-left-color: #921a1d; } -
-
one more, and i know this one is pretty easy:
can i change the colour of the shortcode CTA button from blue to maroon? like the one at the bottom of this page?
-
This should do it for you for the contact page for the hover color.
input[type="submit"] { background: #921a1d; border-color: #921a1d; }If you wish to change the hover color, you can add this as well and then adjust the colors as desired. I just lightened the maroon a bit in this example.
input[type="submit"]:hover { background: #994444; border-color: #994444; } -
great. that works.
one last vestige of the blue: the background colour you get when you click the menu or search buttons — and also the colour you get when you hover over those buttons.
priority is to fix the menu things — the search is less important.
tx.
-
Cool.
For the blue background on the search and menu, this would do it.
.search-wrapper, .navigation-wrapper { background: #921a1d; }For the hover color on the menu and search icon, this.
@media screen and (min-width: 600px) { .search-toggle:hover:before, .menu-toggle:hover:before { border-color: #921a1d !important; color: #921a1d !important; } } -
oh, so close. these fixes both work, but leave little issues:
* when you click into the menu area (maroon background) you lose the little X in a circle if you hover over it — presumably because it’s also maroon — i need the code to control that colour
* much smaller issue: the hover colour of the word “menu” is still blue (the icon is maroon)
tx.
-
Let’s try this instead of what I had given you before.
.search-wrapper, .navigation-wrapper { background: #921a1d; } @media screen and (min-width: 600px) { .search-toggle:not(.open):before, .menu-toggle:not(.open):before { border-color: #921a1d !important; color: #921a1d !important; } .search-toggle:not(.open):hover:before, .menu-toggle:not(.open):hover:before { border-color: #921a1d !important; color: #921a1d !important; } .search-toggle.open:before { border-color: #921a1d !important; color: #921a1d !important; } } -
-
- The topic ‘Changing the link colour in Edin theme’ is closed to new replies.