- This topic has 13 replies, 2 voices, and was last updated 3 years, 11 months ago by David.
-
AuthorPosts
-
April 6, 2020 at 10:31 pm #1229357Tim
Hello
I see almost 1 year ago there was a query about a custom shape divider
I would like to add gentle curve (wave) shapes to divide sections on a Front Page.
I’m guessing SVG is the best way to go, which I could generate and point to in CSS as described here:
https://css-tricks.com/creating-non-rectangular-headers/header::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 100px; background: url(divider.svg); }
But I’m wondering if there are any improved techniques, suggestions found on this and the previous support query a year ago ?
Thanks
April 7, 2020 at 4:51 am #1229682DavidStaffCustomer SupportHi there,
that method is still perfectly valid – its key benefit is you can add them to HTML elements that you do not have the ability to edit.
If you can edit the page you can of course just add the SVG as an Image or Inline.
We’re also looking at including Dividers in our GenerateBlocks plugin at a later time.
April 8, 2020 at 4:18 am #1231036TimHmmm
So I’m wondering what would be the optimum method of adding SVG backgrounds/dividers to sections of content running down a Front Page?
I’m expecting to use a combination of the wpsp lists, cc child page lists, blog list, text and buttons.
I also found an example of SVG animation in this codepen that might work nicely: https://codepen.io/cmdw/pen/vQqzyB
April 8, 2020 at 6:28 am #1231151DavidStaffCustomer SupportIf you’re using the Block editor with full width containers then simply add the SVG markup to a HTML block.
April 8, 2020 at 7:31 pm #1232002TimThanks David
When employing the full width the list elements jump up in size, as expected of their CSS. Is there a neat way to pull them back to their previous containers ?
Or in other words is there a way to alternate the block container widths, eg full width for the dividers only ?
Additionally, I decided to add the last SVG, which sits above the footer, to the entire site using a Hook, but none of the available Locations gives me full width immediately above the footer. What should I use in this case ?
April 9, 2020 at 4:25 am #1232335DavidStaffCustomer SupportWith the container set to full width – use a Group Block to wrap your content. And for the fullwidth dividers just add them outside of a group block.
The
before_footer
hook is fullwidth:April 9, 2020 at 8:53 pm #1233446TimGreat, grouping puts the content in a container I needed.
As for the Hook, I had set it to
before_footer
previously, and have set it there now again.If you now look on any page/post beside the Front Page, you will see the divider is not fixed to the top of the footer, it may appear above or below to the top of the footer.
On a related note I had to disable the Hook I created for the footer divider, to be able to see the Custom Post Navigation, perhaps because they are competing for that same location.
I’m not sure how it will look yet, but I would like to attempt placing the SVG in front of the Custom Post Navigation with both aligned to bottom.
Does this mean I need to add the SVG to the Custom Post Navigation hook and apply a 2nd Hook with the SVG applied only to Pages ?
Perhaps there is a cleaner way.
April 10, 2020 at 1:14 am #1233573DavidStaffCustomer SupportYour
.waves
CSS has afloat: left;
property which is causing the footer to float up behind the SVG.You can adjust the Priority of the Hook – a lower number (0) executes before a higher number
April 10, 2020 at 6:25 pm #1234652TimOK removing
float: left;
answers the floating issue.The Hook for the SVG had a lower Priority (10), making it appear above the Custom Past Navigation (100). Setting the SVG’s Priority to (101) now places it where required, immediately before the footer.
My intension is to place the Custom Post Navigation behind the SVG. I did that by adding
position: relative;
andbottom: -40px;
like this:#post-nav a { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; box-sizing: border-box; position: relative; bottom: -40px; }
This looks good to me. Is that the optimum way to deal with this situation ?
On a separate note I notice that the waves begin to exhibit higher peaks and troughs relative to the viewport width. So on smaller widths the effect no longer looks like gently undulating waves, but just some arbitrary cycling curves. I see that the SVG has
viewBox="0 24 150 28 "
andpreserveAspectRatio="none"
I guess I need to change something here, but nothing I’ve done with thepreserveAspectRatio
seems to help.Any ideas ?
April 11, 2020 at 5:11 am #1234988DavidStaffCustomer SupportThat method is perfectly valid.
Your.waves
CSS is defining the height of the waves – simplest method would be to adjust the height for smaller screens in a media queryApril 13, 2020 at 10:58 pm #1238123TimI just thought that with a property like
preserveAspectRatio
it was some indication of being able to do this perfectly without break points.I seemed to get something closer to that intention by setting
viewBox="0 0 100 100"
April 14, 2020 at 3:11 am #1238345DavidStaffCustomer SupportThats out of our scope – you might find this of use:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
April 14, 2020 at 6:59 pm #1239384TimThanks.
Yep I read that already.
But anyway I got close to what I was after by changing the
viewBox
values.April 15, 2020 at 2:18 am #1239637DavidStaffCustomer SupportGlad to hear that
-
AuthorPosts
- You must be logged in to reply to this topic.