Changing full color palette in Apostrophe theme

leslierathbun · Member · Oct 28, 2015 at 4:16 pm
Copy link

Add topic to favorites
I’m trying to change the full color palette on my site – in the Customizer, I can update the background, links/buttons and accents, but I can’t update the rest of the color palette without using CSS (which I don’t know how to do). Can anyone help? Thanks!

The blog I need help with is: (visible only to logged in users)
timethief · Member · Oct 28, 2015 at 10:34 pm
Copy link
Have you purchased the required upgrade?

See here for details on purchasing the annually renewable Premium bundle http://store.wordpress.com/plans/premium/ that contains a custom design upgrade required for CSS editing:
Custom design – Frequently Asked Questions
http://en.support.wordpress.com/custom-design/#frequently-asked-questions
http://en.support.wordpress.com/custom-design/
http://en.support.wordpress.com/custom-design/editing-css/
http://en.support.wordpress.com/custom-design/custom-fonts/
leslierathbun · Member · Oct 28, 2015 at 10:47 pm
Copy link
Yep, I’ve got the Premium bundle – just not the CSS skills! :-)
thesacredpath · Member · Oct 29, 2015 at 6:40 am
Copy link
Hi @leslierathbun, I see you have the WordPress.com Business plan, which includes Custom Design and Custom CSS, so we can help you change the colors. If you could let us know what you wish to change the colors on, we can get started on getting you where you want to be.
leslierathbun · Member · Oct 29, 2015 at 4:32 pm
Copy link
Hi @thesacredpath – thank you! I’d like to change the tagline font type and color as well as the hover color (both the text in all links and bar color in dropdown menus).

I have the color values for each – just let me know what you need to get me started. Thank you again!!
thesacredpath · Member · Oct 30, 2015 at 7:22 am
Copy link
For the color on your site description, you can add the following and then adjust the color as you desire.
```
.site-description {
    color: #999;
}
```
For the font family, when using a custom font, the site description picks up the font set for Headings. You can only choose two fonts, one for headings and one for the base font, which is generally links and content. We could set the description to use the same “base” font you have chosen with the following CSS.
```
.wf-active .site-description {
    font-family: "Alegreya Sans",sans-serif;
}
```
Or we could also set it to a font that is installed on all computers. This would be a safe serif choice.
```
.wf-active .site-description {
    font-family: "times new roman", georgia, serif;
}
```
And this would be a safe sans-serif choice.
```
.wf-active .site-description {
    font-family: arial, "helvetica neue", helvetica;
}
```
To change the text hover color on the menu items, both top level and submenu, you can add this and adjust the color as desired.
```
.main-navigation a:hover {
    color: #cc0000 !important;
}
```
For the background color on the submenu, the following two rules allow you to change the hover and non-hover colors. I’ve used named colors so they are easier to identify when adding and editing the CSS.
```
.main-navigation ul ul *:hover > a {
    background-color: blue;
}
.main-navigation ul ul li a {
    background-color: yellow;
}
```
See if this gets you where you want to go, and let us know if you have additional questions.
leslierathbun · Member · Oct 30, 2015 at 4:29 pm
Copy link
This is EXACTLY what I needed – thank you!! The only thing that doesn’t seem to be working is the hover color in the dropdown menu when I use my desired color value (which isn’t a huge deal to me, but thought I’d ask just in case you had a quick answer).

Thank you again – I really appreciate it! :-)
thesacredpath · Member · Oct 30, 2015 at 8:21 pm
Copy link
That’s great. I’m seeing this font color on hover on the top level and submenus: #f48277 . Is that the color you are wanting, or are you talking about the background color on the submenu? Right now I’m not seeing any background-color declaration in last two CSS rules.
thesacredpath · Member · Oct 30, 2015 at 8:23 pm
Copy link
Ah, I just checked your customizer. Add the hash mark before the color values so they look like this
#b2cc6b
and
#e5e5e5
leslierathbun · Member · Oct 30, 2015 at 11:12 pm
Copy link
Those pesky pound signs – that fixed it! Thank you!!
thesacredpath · Member · Oct 31, 2015 at 7:19 am
Copy link
You are welcome, and yes, they are pesky. :)

No items found.