Tagged: separators
-
AuthorPosts
-
February 12, 2016 at 11:54 am #582169
Hi Enfold support team,
I would like to change the size (not the width) of all separators. How to do this?
Best regards,
AnnaFebruary 13, 2016 at 1:20 pm #582705Hey Anna Christina!
After you drag and drop the separator click on Edit and select Custom you have options to change a lot of the settings there.
We need to know how exactly you need the separator to look like in the end please provide us a mockup of the separator so we can help you better.
Best regards,
Vinay KashyapFebruary 13, 2016 at 5:30 pm #582757Hey Vinnie,
thanks for your answer. Unfortunately I can’t realize the separators I want with the customizing options that are available. Please look at this draft:
https://www.dropbox.com/s/slishb3wbhu1mqw/Bildschirmfoto-2016-02-13-um-16.02.00.png?dl=0
I would like to create two custom separator styles I can also use later when I am going to develop the shop.
The separators should
– have the appearance of No. 2 (the standard separator), but
– be fat like separator No. 1
and I would like to have one separator of 100% and the other of 50% width.Is that possible to carry out?
Best regards,
Anna ChristinaFebruary 15, 2016 at 7:20 pm #583704Hi Anna!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.hr-inner { height: 2px; }
Regards,
YigitFebruary 15, 2016 at 11:38 pm #583821Hi Yigit,
thanks for your answer. The recommended code doesn’t have the effect I wanted. But I have now an idea which element I will have to style.
Regards,
AnnaFebruary 16, 2016 at 10:47 am #584035Hi!
Yes you can create custom separators and use it at a later stage.
The result will look like the screenshot below
To do so you need to enable custom class support for the theme as mentioned in this link http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
After you enable it you can add different class names such as separator-1, separator-2, separator-3 and separator-4 to the short separator in Advance Layout builder.
/*Separator Styles*/ .separator-1 .hr-inner-style { border: 1px solid #bab3ba!important; background: #fff!important; } .separator-2 .hr-inner-style { border: 1px solid #bab3ba!important; background: #fff!important; } .separator-2 .hr-inner { width: 50%!important; left: 50%; margin-left: 0!important; transform:translateX(-50%); } .separator-2 .hr-inner-style { border: 1px solid #bab3ba!important; background: #fff!important; } .separator-3 .hr-inner { width: 100%!important; left: 50%; margin-left: 0!important; transform:translateX(-50%); } .separator-4 .hr-inner-style { border: 1px solid #bab3ba!important; background: #fff!important; width:20px; height:20px; top:-5px; }
Cheers!
Vinay Kashyap- This reply was modified 8 years, 9 months ago by Vinay.
February 16, 2016 at 11:07 am #584054Wow Vinnie!
Thanks for your answer, that’s what I was looking for. I will try and keep you informed.
Best regards,
AnnaFebruary 17, 2016 at 7:02 am #584491 -
AuthorPosts
- You must be logged in to reply to this topic.