[Resolved] Color Blog Posts and Widget

[Alexander]

Hi Tom,

Just starting up to create my own website using wordpress and your premium package of GeneratePress. So far I am really pleased although I am hitting a bit of a learning curve. I have been trying to figure out if it is possible to change the background color of things like blog posts and widgets.

I can use the background images for the widgets and information/post area which technically means I can get them any color I like, but if I do this I still have the white of the blog post itself or for example very white search bar.

As my website will have a very dark theme, I was wondering if there is anything I can do to get such bright spots of white out of it?

Hoping you can help me.

Alexander

[Alexander]

Ah! I found the generate color video’s and see the content color settings allow the change for the blog posts. I will dive a little deeper, please let me know if you have any suggestions for the widgets. 🙂

Alexander

[Tom]

For the widgets, are you just trying to change the color of the search bar?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

Hi Tom,

Indeed the color of the search bar and things like the color of the dropdown menu that you can choose under categories.

Thanks for the advice! 🙂

[Tom]

This CSS should help for the search field:

.widget-area input[type="search"] {
    background-color: #222;
    color: #FFF;
    border: 1px solid #000;
}

For the dropdown selects, you can do this:

.widget-area select {
    background-color: #222;
    color: #FFF;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

Hi Tom,

This has been working great so far. I was wondering how I can discover which part to call out in the CSS when I want to customize color.

For example if I did not know it was called “.widget-area input[type=”search”]” how would I discover that. Do I do see page source and is it mentioned there? Or is there another way to discover it?

I only ask so I do not have to ask every time I would like to adjust a color. Google search helps me out with the specific widget names, so I have been able to change the contact form 7 colors and mail poet fields etc. But I was just wondering if there was a general way to discover that component name to mention in the CSS.

For example I would now like to adjust the colors of the comment section when you look at one of the blog posts. How would I discover what the real name is of ‘.comment-area [type=”text”]’ or something? 🙂

If I do ‘inspect element’ on the comment fields chrome jumps to that part and I see multiple levels of ids and class assigned. But I can not figure out which to call upon 🙂

[bdbrown]

In Developer Tools, If you move your cursor up and down the elements “tree” the related section on the page should be highlighted. You can then see the IDs and Classes assigned to the element. The other way to find a particular page element is to click the “search” magnifying glass in the upper-left corer of Developer Tools, then go to the page and click the area you’re interested in. The Developer Tools element window will scroll to that element in the tree.

[Alexander]

Thanks! I’ll give that a try.

Alexander

[bdbrown]

Glad to help 🙂

[Author]

Posts