[Resolved] Color Blog Posts and Widget

Home Forums Support Color Blog Posts and Widget

  • This topic has 8 replies, 3 voices, and was last updated 5 years ago by bdbrown.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #134271
    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

    #134273
    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

    #134331
    Tom
    Lead Developer
    Lead Developer

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

    Let me know 🙂

    #134439
    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! 🙂

    #134442
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #146443
    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 🙂

    #146590
    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.

    #146592
    Alexander

    Thanks! I’ll give that a try.

    Alexander

    #146596
    bdbrown

    Glad to help 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.