Archived topic
Styling problems / positioning of svg in the hero header
9 replies · Started by Thomas on March 22, 2020
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
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;
}Hi David,
works fine, absolutely what I was searching for.
You guys are amazing! Quick and on the Point Support- keep on :)
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.
Nice, that's pro-active support :D
Thank you very much, David!
You're welcome :)
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.
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.
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...
Glad to hear that ;)
