[Resolved] Styling problems / positioning of svg in the hero header

[Thomas]

Hi Tom,

I’m playing around a bit for a new project (Homepage is just for testing).

I want to use a page hero and add some svg-pictures (small stripes) to the top and the bottom border to create a kind of frame and break the strict design a bit.

I already managed to position the bottom stripe by using your code I found in the forum:

add_filter( 'generate_page_hero_output', function( $output, $options ) {
    return sprintf(
        '<div class="%1$s">
            <div class="%2$s">
		<div class="after-header"></div>
                %3$s
		<div class="before-content"></div>
            </div>
        </div>',
        trim( $options['container_classes'] ),
        trim( $options['inner_container_classes'] ),
        $options['content']
    );
}, 10, 2 );

And I changed the padding for the hero.

Could you please help me with the positioning of the top stripe?

Thanks
Thomas

[David]

Hi there,

instead of filtering the content as you have done, you can simply use CSS and some :before / :after pseudo elements. So i would remove that code and your current CSS and just use this CSS instead:

/* Define parent container for positioning elements */
.home-hero {
    position: relative;
}

/* Create psuedo elements and backgroud sizes */
.home-hero:before, .home-hero:after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 16px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;;
}

/* Set background image for top element */
.home-hero:before {
    background-image: url(http://vera.dj-whizzad.de/wp-content/uploads/2020/03/strip-invers.svg);
    top: 0;
} 

/* Set background image for bottom element */
.home-hero:after {
    background-image: url(http://vera.dj-whizzad.de/wp-content/uploads/2020/03/strip-1.svg);
    bottom: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

Hi David,

works fine, absolutely what I was searching for.

You guys are amazing! Quick and on the Point Support- keep on 🙂

[David]

Awesome 🙂
As a note you may need to fine tune your CSS to cope with different browser zoom levels.

e.g

#site-navigation:before {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 18px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top; /* force image to top */
    pointer-events: none;
    top: -2px !important; /* Some negative top */
}

See my two comments – this should stop any gaps from appearing by forcing the image to top ( or bottom ) and some negative top ( or bottom ) positioning to create a little overlap.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

Nice, that’s pro-active support 😀

Thank you very much, David!

[David]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

Still playing around…

Do you have an idea, how to get a similar shape to the bottom of the sub-menu (at BGM)? So that it has no straight bottom border but kind of that wave-shape.

[David]

Something like this:

.main-navigation ul ul li:last-child {
    position: relative;
}
.main-navigation ul ul li:last-child:after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 20px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    pointer-events: none;
    background-image: url(image_url);
}

What this is doing is targeting the last menu item in the sub menu.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

works great. but there is a tiny gap. how do I get rid of it? tried playing width top and padding…

EDIT: Fixed it with border-bottom…

[David]

Glad to hear that 😉

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts