Ask the community

This is a community support forum where you can ask
questions and interact with other PremiumPress Customers.

Customize Header and Footer Colours


  • Susan
    Newbie 15 points
    February 28, 2019 at 4:15 am

    I’m setting up my site and have been slowing figuring out Elementor. I did not like the home page it created based on my child theme, as it was quite a bit different. So I added a new template page and have been customizing that which is getting me closer to what I want.

    I’m stuck with my header and footer though, because I can’t figure out how to customize those colours. I tried to select a new template header and footer to create my own, but these are all Pro options so I can’t use them unless I upgrade to Pro, which I’m not ready to do since I’m still figuring Elementor out.

    I’m attaching a screen shot of the header that Premium Press is giving me when I select that widget. Under the advanced settings I changed the background colour from black to green, to make it obvious which part I am able to customize. The parts I cannot change are the black stripe at the very top, the text colour, and the light grey area surrounding the header. Can someone please explain how I can change the colours for these areas?

    Attachments:
    You must be logged in to view attached files.
  • JamesD
    JamesD
    Super Guru 1,345 points
    February 28, 2019 at 5:30 am

    Hello Susan,
    Do you have a URL you can post?
    Which child theme are you using?

  • JamesD
    JamesD
    Super Guru 1,345 points
    February 28, 2019 at 5:48 am

    Try adding this to your custom CSS/stylesheet:

    .headertopwrap, footer.bg-dark { background-color: #A8D97F!important; }

    Note: Replace the #A8D97F with the appropriate hex color value you want.
    [Edited to add the shorthand version]


  • Susan
    Newbie 15 points
    February 28, 2019 at 8:08 pm

    Hi James, I’m using the child theme 10. I’ve got my site in Coming Soon mode so I don’t think you’d be able to see it if I did post the URL. But I tried your code and it did the trick, thank you very much.

    I’m not very experienced with CSS at all, though I’m starting to learn. So just a couple of questions if you don’t mind…

    1 – Can the code you gave me just be added to the style sheet and the rest left alone (this is what I’ve done), or is it better to replace the original CSS specifying the colour with the code you gave me?

    2 – Would you mind pointing me to the code I need to change in order to change the footer and header text colour, link colour and the very light grey area surrounding the header? (I think that’s the page wrapper, but not entirely sure of my terminology there).

    Thank you!

  • JamesD
    JamesD
    Super Guru 1,345 points
    February 28, 2019 at 9:38 pm

    Hello Susan,
    You’re welcome.

    Can the code you gave me just be added to the style sheet and the rest left alone (this is what I’ve done), or is it better to replace the original CSS specifying the colour with the code you gave me?

    The way you’ve done it is ideal. It’s always good to avoid changing original and/or core files whenever possible.

    Would you mind pointing me to the code I need to change in order to change the footer and header text colour, link colour and the very light grey area surrounding the header?

    I’m still kind of guessing without knowing the actual elements being used…. try this:

    .ppt-header .container, footer .row { color: #DDDDDD; }

    Note: Replace the #DDDDDD value to the color value needed.

Viewing 5 posts - 1 through 5 (of 5 total)