- This topic has 9 replies, 2 voices, and was last updated 1 year, 1 month ago by
David.
-
AuthorPosts
-
March 22, 2020 at 3:23 pm #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
ThomasMarch 23, 2020 at 3:31 am #1207128David
StaffCustomer SupportHi 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/March 23, 2020 at 4:34 am #1207189Thomas
Hi David,
works fine, absolutely what I was searching for.
You guys are amazing! Quick and on the Point Support- keep on π
March 23, 2020 at 6:57 am #1207485David
StaffCustomer SupportAwesome π
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/March 23, 2020 at 7:21 am #1207516Thomas
Nice, that’s pro-active support π
Thank you very much, David!
March 23, 2020 at 7:22 am #1207518David
StaffCustomer SupportYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 23, 2020 at 7:44 am #1207573Thomas
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.
March 23, 2020 at 8:09 am #1207601David
StaffCustomer SupportSomething 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/March 23, 2020 at 8:27 am #1207629Thomas
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…
March 23, 2020 at 8:53 am #1207676David
StaffCustomer SupportGlad to hear that π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.