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

Home Forums Support Styling problems / positioning of svg in the hero header

This topic contains 9 replies, has 2 voices, and was last updated by  David 2 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1206603

    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

    #1207128

    David Customer Support

    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;
    }
    #1207189

    Thomas

    Hi David,

    works fine, absolutely what I was searching for.

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

    #1207485

    David Customer Support

    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.

    #1207516

    Thomas

    Nice, that’s pro-active support 😀

    Thank you very much, David!

    #1207518

    David Customer Support
    #1207573

    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.

    #1207601

    David Customer Support

    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.

    #1207629

    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…

    #1207676

    David Customer Support

    Glad to hear that 😉

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

You must be logged in to reply to this topic.