Change the color of buttons on my homepage

berenicemichel · Member · May 14, 2015 at 5:29 pm
Copy link

Add topic to favorites
How to change the color of the buttons on my homepage ?
(Goran theme)

Thank you.

The blog I need help with is: (visible only to logged in users)
staff-totoro · Staff · May 15, 2015 at 5:45 am
Copy link
Hi there,

To change the color of those, the most direct way does not even require CSS. Instead you can click on the “Background and Colors” tab of your site customizer here: https://wordpress.com/customize

Just look for the color swatch highlighted here: https://cloudup.com/cFDf6VslwxI

That is the accent color for your site, which will primarily affect the button colors, but will also affect other elements of the site that are currently yellow
berenicemichel · Member · May 15, 2015 at 8:32 am
Copy link
Ok, but I don’t want to change the general color of the buttons, just the highlighting color.
So I think, I have to acceed to the css code…
staff-totoro · Staff · May 15, 2015 at 5:16 pm
Copy link
Gotcha. You can try the following block of code, entered into the CSS tab of your site customizer here: https://wordpress.com/customize

Here is the code to paste in:
```
a.more-link {  
background-color: #ADADAD !important; 
}
```
You did not mention what color you wanted the button, so I chose the same color grey as is found in the site background.

If you like you can tweak that CSS color value (#ADADAD) to find what works for you, using the following free online tool: http://www.colorpicker.com/
berenicemichel · Member · May 15, 2015 at 7:33 pm
Copy link
The buttons are yellow and when we pass the mouse on it they become black.
I would like that they are grey and not black. That’s what I would like to say by “highlighting color”.

Thank you.
staff-totoro · Staff · May 16, 2015 at 12:43 am
Copy link
In that case, the following declaration will work:
```
a.more-link:hover {  
background-color: #ADADAD; 
}
```
berenicemichel · Member · May 16, 2015 at 11:47 am
Copy link
Sorry, but I paste this code and it seems to doesn’t work…
I don’t know why…

a.more-link:hover {
background-color: #ADADAD;
}
staff-totoro · Staff · May 16, 2015 at 5:35 pm
Copy link
Gotcha. This will work, as it has more specificity:
```
.featured-page .more-link:hover {
	background-color: #ADADAD;
}
```
berenicemichel · Member · May 16, 2015 at 6:44 pm
Copy link
Yes ! So nice ! ;)
Thank you ! :)
staff-totoro · Staff · May 16, 2015 at 11:54 pm
Copy link
Great, glad I could help!

Happy Blogging :)

No items found.