-
AuthorPosts
-
October 21, 2016 at 9:00 am #702216
is it possible to change the angle of the color section divider? its too steep for my site forcing me to use very wide padding between color sections
October 21, 2016 at 3:34 pm #702467Hey kilimats,
Yes, I think it’s possible, can you give us a link to that page? so we can check. Kindly post it in the Private Content section when you reply.
Best regards,
NikkoOctober 21, 2016 at 3:36 pm #702468we removed it from our site, can you try on your end and advise how i can customize it? or does it require custom code for each site?
October 21, 2016 at 7:02 pm #702593Hi,
It will definitely vary from site to site if it is specific on a section or page. And also it’s easier for us to identify what css to use since extra classes are added depending on how you set it. Try adding this code to your Quick CSS (located in Enfold > General Styling):
.avia_transform .av-extra-border-element.border-extra-diagonal .av-extra-border-inner { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
if it doesn’t work try this one instead:
.avia_transform .av-extra-border-element.border-extra-diagonal .av-extra-border-inner { -webkit-transform: rotate(2deg) !important; transform: rotate(2deg) !important; }
Hope this helps.
Best regards,
NikkoNovember 1, 2016 at 4:56 am #706533Great
November 2, 2016 at 12:11 am #706904Hi,
Glad we could help :)
Best regards,
NikkoSeptember 11, 2019 at 1:24 pm #1137027Hi! Is it possible to not only change the angle, but make it round in stead of diagonal? Something like this:
Hope you can help me!
September 12, 2019 at 11:04 am #1137473Hi jannnnnneke,
Try adding this css code, you’ll need to tweak it a bit:
.avia_transform .av-extra-border-element.border-extra-diagonal .av-extra-border-inner { border-radius: 50% !important; transform-origin: center top; transform: rotate(0) translate(160px, -75px) scale(1.5); }
Best regards,
NikkoSeptember 13, 2019 at 12:02 pm #1137965Hi thanks! Something happend, the radius is only not in the middel. Maybe thats because it is still rotated? See link! And I want the circle on the other side, so downstairs in stead of upstairs.
Now we’re working on it.. I would like to try two options. The half circle as described above and 2nd option: in stead of a circle a sort of rounded arrow. Something like this:
Is this screenshot visible? This is photoshopped… The arrow is a little bit the same as one angle of the logo. Hope you understand me!
Thanks a lot!!!
September 13, 2019 at 12:04 pm #1137967When it’s better to create this another way than with the diagonal border, thats ok! Please help me out!
For example with SVG? Not familiar with that, but maybe you can help! Really really thanks a lot for all your help!
September 13, 2019 at 2:29 pm #1138027Hi! I’ve tried something with css and chevron but I want the angle in the middle a little bit more rounded, just like the logo. How can I do that? This is the code i’ve used right now:
#chevron-creme { position: relative; text-align: center; padding: 0px; margin-bottom: -40px; margin-top: -40px; height: 0px; width: 100%; z-index: 1 !important; background-color: transparent; } #chevron-creme:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background: #f5f3ed; transform: skew(0deg, 6deg); } #chevron-creme:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: #f5f3ed; transform: skew(0deg, -6deg); }
Thanks!!
September 13, 2019 at 2:44 pm #1138033Hi jannnnnneke,
I’m no good with svg. With css, it seems to be more complicated or I might have a limited idea atm, since I’m just thinking of border-radius as the solution.
Try to seek help in https://stackoverflow.com there might be some people who are experts of css or svg that can help better.Best regards,
NikkoSeptember 13, 2019 at 4:12 pm #1138048if themes use this feature ( and i think it might be time that enfold will get this option too ) make it via svg – and to be precise with inline svg. Because you had to influence the colors in it to adjust it to your section before or after it. These “fill” attribute can be done via css.
The best place on Enfold in Color-Section would be just before, and after the color-sections container – so you will have :<div class="avia-section … <svg ( inline for the top ) </svg> <div class="container">… </div> <svg ( inline for the bottom ) </svg> </div>
this could be done via child-theme functions.php
f.e.
$(‘.avia-section.divider.top1’).prepend(‘<svg class=”top” ……… preserveAspectRatio=”none”></svg>’);
$(‘.avia-section.divider.bottom1’).append(‘<svg class=”bottom” ……… preserveAspectRatio=”none”></svg>’);it will be best for that on having svgs with no concrete AspectRatio – then you can style it the way you like.
the …….. is your rest of the svg code.you can see here some examples on using this method: https://webers-testseite.de/guenni/
f.e. see footer areaIf you look how elementor f.e. does the trick – it is very similar to that. (and maybe you find some interesting svgs there ;)
to use the code for a nice style svg – you can use transform (rotate 180deg) to use it for the bottom – so one svg for bottom and top.
you can transformY 180deg for a mirror form of that.The classes above are now nice to have – because if you give to a color-section these classes – it will automatically add the inline svg to your DOM. The rest is Quick CSS to positionen and colorize parts of the svg.
September 13, 2019 at 4:26 pm #1138054One last tip : open your created svg files to see the classes in there too.
Illustrator allways uses st ( st0, st1, st2 etc. ) this is not so nice if you have more than one svg on your page. because if you like to colorize a part of that svg to adjust it to your next section the other svgs might be influenced too. So give a unique ID to the svg, to have a chance to better select.
See again the footer sectiion of the example page above. one part of the inserted svg had to be set to the background-color of the footer (#222)- This reply was modified 5 years, 2 months ago by Guenni007.
September 13, 2019 at 7:08 pm #1138144Example Code: put this to your child-theme functions.php
function insert_dividers(){ ?> <script> (function($){ $('.avia-section.divider.top1').prepend('<svg width="100%" class="top" version="1.1" id="faecher" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1500 300" preserveAspectRatio="none"><g fill="#990000"><path class="st0" d="M250,296" fill-opacity=".5"/><polygon class="st1" points="1500,250 750,84.9 0,250 0,0 1500,0 " fill-opacity=".2"/><polygon class="st2" points="1500,191.6 750,81.5 0,191.6 0,0 1500,0 " fill-opacity=".4"/><polygon class="st3" points="1500,133.1 750,78.1 0,133.1 0,0 1500,0 " fill-opacity=".6"/><rect y="0" class="st4" width="1500" height="74.4" fill-opacity="1"/></g></svg>'); $('.avia-section.divider.bottom1').append('<svg width="100%" class="bottom" version="1.1" id="faecher" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1500 300" preserveAspectRatio="none"><g fill="#990000"><path class="st0" d="M250,296" fill-opacity=".5"/><polygon class="st1" points="1500,250 750,84.9 0,250 0,0 1500,0 " fill-opacity=".2"/><polygon class="st2" points="1500,191.6 750,81.5 0,191.6 0,0 1500,0 " fill-opacity=".4"/><polygon class="st3" points="1500,133.1 750,78.1 0,133.1 0,0 1500,0 " fill-opacity=".6"/><rect y="0" class="st4" width="1500" height="74.4" fill-opacity="1"/></g></svg>'); })(jQuery); </script> <?php } add_action('wp_footer', 'insert_dividers');
now go to your ALB and open a color-section:
give a custom-class to this color-section: divider top1 bottom1put this to quick css:
.divider svg { position: relative; z-index: 5 } .divider svg.top { top: -2px !important; } .divider svg.bottom { bottom: -11px !important; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }
look now what happens to your front-end.
you see on this svg that there is only one class with a lot oft opacity set. there is a group around all ( normal nomenklatur will be g for group) with a fill color of #990000 ( a red )
this svg has an ID of : faecher
so if you want to change the fill color of that svg ( one side is open and transparent )#av_section_1 #faecher svg.top g { fill: #222 } #av_section_1 #faecher svg.bottom g { fill: #fff }
but that depends on your svg –
elementor and divi got mostly simple svgs – with one fill-color and different opacities ( sometimes overlaying layers ) – but only one fill-color.September 13, 2019 at 7:10 pm #1138146by the way – to insert an svg this way over prepend / append the svg code must not have line breaks in it – thats why the code above is only in one line.
you see the element above on : https://webers-testseite.de/guenni/impressum/#av_section_2
the rest is quick css styling to make it lower in height just give to the svg a height value
to have fullwidth : give to the svg a width of 100vw. etc. pp
by the way: i would always do it this way – even the simple slanting line – because with this method you can have on the side where the svg is transparent have even diagonal gradients or patterns etc.October 2, 2019 at 8:03 am #1144084by the way – this here seems to be in preparation as described : Kriesi Documentation
October 3, 2019 at 5:41 am #1144341 -
AuthorPosts
- You must be logged in to reply to this topic.