[Support request] Text shadow elements header

Home Forums Support [Support request] Text shadow elements header

Home Forums Support Text shadow elements header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #687638
    Goran

    Hi!

    How could i the most easy way, add shadow and/or a transparent box behind the text at elements -> header, so it doesn’t blend with the featured image?

    Have a look here https://www.skauro.no/2018/ This page use Elements header, a beautiful and easy function in your super nice theme!

    Thanks,
    Goran

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #687670
    David
    Staff
    Customer Support

    Hi there,

    we can use some CSS to target that content. So lets first off add an Elements Class to the hero.
    e.g text-shadow

    then add this CSS:

    .text-shadow .inside-page-hero {
        text-shadow: 1px 2px 5px rgba(0,0,0,0.8);
    }

    Then you could either change the above properties or for different use cases create another class
    e.g content-background

    and add this CSS:

    .content-background .inside-page-hero {
        padding: 2%;
        background-color: rgba(0,0,0,0.3);
    } 

    If of course you want all the heroes to be the same you could just use:

    .inside-page-hero {
        add your styles here
    }
    #688075
    Goran

    Thats f…awesome! You made me love CSS 🙂

    Thanks again David!

    Goran

    #688084
    David
    Staff
    Customer Support

    Haha that’s awesome to hear 🙂 Glad to be of help.

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