Fancy Divider

Calliy · April 2016

Hi,

can anybody explain me how to use the Fancy Divider? Doesn´t matter wich style i use, i always end up with a something like box. Screenshot below.

Calliy · April 2016

here the screenshot

http://imagizer.imageshack.us/v2/800x600q90/923/EkJRcF.png

Albert · April 2016

Hi,

please send us link to page where you used this Divider so we can check what you did exactly.

Thanks!

Calliy · April 2016

http://callity-communications.com/ueber-uns/#start

Albert · April 2016

Divider does not work as should because you set same color for both options (Color Top and Color Bottom). You need to set 2 different colors to display divider properly. You can see those options on http://pasteboard.co/ncJ4gr2.png

Calliy · April 2016

ok thank you. and how can make it full width and larger?

Calliy · April 2016

ok i got it. it works with background color, right?

Calliy · April 2016

ok sorry. I thought i figured it out. but i did not

Albert · April 2016

What is exactly still wrong? Please explain because we do not see anything wrong on your site.

gmatevcarrum · April 2016

Related to this topic I guess so posting here ...

I have not been able to find any specifics documentation on the fancy divider. Can you point me to something more detailed if it exists? I'm looking to be able to emulate some of the things you see on http://themes.muffingroup.com/betheme/shortcodes/fancy-divider/. Are these just a regular section with text and background plus different versions of the divider?

Also, is there a way to control the height of the divider? I don't see an option for it in the editor and have not been able to find a shortcode I can use another way. The default version also does not seem to scale the heign on smaller screens causing that section to look too tall.

gmatevcarrum · April 2016

So it looks like I was able to find a way to deal with the second part of my question above using custom CSS and media queries. Not ideal this could be somethign to consider as an enhancement (have the option to enable scaling) with the option to specify height in a future release.

Can use something like and adjust as needed

@media only screen and (max-width : 480px) {

.custom-css-class-for-fancy-divider-to-modify .fancy-divider svg {

height:50px;;

}

Also discovered that there is an issue when a color is specified for the fancy-divider. In that case the SVG code generate sets both the stroke and fill to that color. The problem is that for dividers like triangle down the very bottom of the triangle will not be outside of the viewbox. The easiest fix is to avoid setting the stroke color in your generating code.

People who may need to fix this in the meantime can do custom CSS

.ch-divider-scale .fancy-divider path{

stroke: initial !important;

}

Still would love the see if there is additional documentation on this component and possibly shortcode to include in a different container with more options.

Albert · April 2016

@gmatevcarrum For this page http://themes.muffingroup.com/betheme/shortcodes/fancy-divider/ we used Fancy Divider items. If you would like to get the same page, you can import Default demo onto your extra wp installation for example to check how this page was made exactly.

In reference to 2nd question, we do not have an option to control divider height unfortunately. However, we are glad to see that you found your own way to change it's height with custom css.

We are sorry but do not have any additional documentation of Fancy Divider item unfortunately because this item does not have anything except 4 options: Style (you can choose the style of fancy divider), top (the color above divider) and bottom (the color under the divider) colors and the Custom | Classes field for advanced users.

Fancy Divider

Comments