• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Essence Pro Theme gradient issue

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Essence Pro Theme gradient issue

This topic is: not resolved

Tagged: Essence Pro, gradient, header image, hero header, hero image, linear-gradient

  • This topic has 7 replies, 3 voices, and was last updated 3 years, 4 months ago by Shantamo.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 26, 2019 at 11:34 am #493193
    hhelmbold
    Participant

    Referring to the thread https://studiopress.community/topic/essence-pro-featured-image-not-appearing-as-post-header/

    I have the same question. The thread was answered with "start a new thread" and use the .front-page class - but I cannot seem to find where this new thread was started or how to use the .front-page class?

    Is there not a way to lighten the gradient on all pages without having to specify the image url in the Additional CSS? I would like to have a different header image for each page.

    August 27, 2019 at 4:26 am #493211
    Brad Dalton
    Participant

    1. I think you can use a different header image for each page simply by adding a different featured image for each page.

    Try that otherwise you may need a coded solution.

    2. This free tutorial will show you where the CSS is for the gradient which you can then modify.


    Get Help – Book Consultation.

    August 27, 2019 at 4:33 am #493213
    hhelmbold
    Participant

    Thank you - Adding a different featured image is indeed the correct way, but if you use the Additional CSS option to remove or lighten the gradient then you have to specify a image URL

    By specifying the url it overrides the featured image - that is why I was curious if there was a way to specify the gradient paramaters without the "url" tag.

    But the tutorials will put me on a temporary solution in the mean time. Thank you

    August 27, 2019 at 4:41 am #493215
    Brad Dalton
    Participant

    I would modify the CSS in the PHP code and not use the Additional CSS feature.


    Get Help – Book Consultation.

    August 27, 2019 at 4:45 am #493216
    hhelmbold
    Participant

    That's what I am planning - just scared that with theme updates it gets overwritten... And I need to hack my way to find it in the PHP LOL!

    Thanks

    September 17, 2019 at 4:15 pm #493602
    Shantamo
    Participant

    I started working on changing the gradient today. In case you did not hack yet, I found the CSS in line 212 of the header-functions php file. Path looks like this: .../wp-content/themes/essence-pro/lib

    Brad Dalton's tutorial would remove the gradient completely. I want to make it lighter. What is best to change: the percentage or the rgba values - or both?
    { background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%)
    Guess it's time for some experimenting.

    Whether future updates would overwrite this I do not know.

    Thanks to you both.

    September 18, 2019 at 2:05 am #493605
    Brad Dalton
    Participant

    Try this generator https://cssgradient.io/

    Any changes you make to your child theme will only be lost if you update your child theme when a new version is released. Updating child themes is not compulsory.


    Get Help – Book Consultation.

    September 18, 2019 at 2:32 pm #493625
    Shantamo
    Participant

    Thanks Brad, that's a good gradient generator.

    I'll make a note of the changed code, so I can employ it again when the child theme is updated.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble