-
AuthorPosts
-
September 7, 2017 at 7:19 pm #849198
Hi Friends,
I would like to customize the toogles as shown in the screenshot. For this I would like the Borders strength and icons + -. Can you please help?Merci
JürgenSeptember 7, 2017 at 11:49 pm #849337Hey winnerl,
What is the exact change you need to make? Apologies if I’m misunderstanding.
Best regards,
Jordan ShannonSeptember 8, 2017 at 11:32 am #849536Hi Jordan,
I need the code as I change Border strength and color, or set Borders to not visible.
The icons I would also like to build as shown in the screenshot. e.g. in the Theme Enfold border make invisible, the icons black and larger.
All toggle backgrounds should be transparent.Merci
JürgenSeptember 8, 2017 at 11:37 pm #849762Hi,
Please provide a link to your the site/page that you need help with.
Best regards,
Jordan ShannonSeptember 8, 2017 at 11:38 pm #849763This way I can compare it to the screenshot and work out the css.
Best regards,
Jordan ShannonSeptember 9, 2017 at 3:23 pm #849949hi Jordan,
here is a link, here you can see how toggles look now.Best regards
JürgenSeptember 10, 2017 at 6:21 am #850041Hi,
Thanks for the link. So you are looking to make them darker, correct? If so then try this in Quick CSS:
.toggle_icon { border-color: #000 !important; }
Best regards,
RikardSeptember 11, 2017 at 10:10 am #850399Hi Rikard,
exactly, and a few more adjustments. Borders Black, border strength adjustable, Border left and right invisible, background transparent. I need in principle the CSS code to the toggles, so I can adjust the as shown in the screenshot. That would be great.Best regards,
JürgenSeptember 11, 2017 at 6:17 pm #850618Hi Jürgen,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.single_toggle .toggler { border-top: #000 1px solid; text-transform: uppercase; border-bottom: #000 1px solid; } .toggle_content.invers-color { border-bottom: #000 1px solid; } .main_color span.hor_icon, .main_color span.vert_icon { border-color: #000; }
If you need further assistance please let us know.
Best regards,
VictoriaSeptember 11, 2017 at 7:01 pm #850631Hi Victoria,
Excellent! That’s great!
Can the background be tranzparent?
In addition, you can see a fine line around the icon and left and right a fine line, Is it possible to make them invisible?Best regards
JürgenSeptember 12, 2017 at 7:13 am #850784Hi,
Add the following to quick css:
.main_color .toggle_content{ background:transparent!important; } span.toggle_icon{ border:none!important; }
Best regards,
Jordan ShannonSeptember 12, 2017 at 1:14 pm #850980Hi Jordan,
thanks and great!
it is possible to make the fine borders left and right invisible – see red markings in the screenhots.Best regards
JürgenSeptember 12, 2017 at 1:26 pm #850984one more little thing:
the horizontal borders should look the same in the closed state. Is it possible to adjust the borders thickness the same.
See red markings in the screenhots.
If we have that, everything fits ;-)Best regards
JürgenSeptember 13, 2017 at 11:10 am #851524Hi Jürgen,
Here are some additions to the code give above, you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.single_toggle .toggler { border-top: #000 2px solid; text-transform: uppercase; border-bottom: #000 2px solid; background: transparent!important; border-left: none; border-right: none; } .single_toggle p[data-fake-id="#toggle-id-2"] { border-top: none; } .main_color .toggle_content { background: transparent!important; border-left: none; border-right: none; } .toggle_content.invers-color { border-bottom: #000 2px solid; }
If you need further assistance please let us know.
Best regards,
Victoria.September 13, 2017 at 12:35 pm #851551Hi Viktoria,
very nice, everything fits.
Another question:
When you close a toggle, it closes with a slide (accordion style). If you open a toggle, it will appear without this slide effect. Can I have this effect for both: So for opening and closing?Many Thanks
JürgenSeptember 13, 2017 at 10:12 pm #851739Hi,
This would require deeper modification of the theme file which goes beyond the scope of what can be done here in the forums. If you would like to complete this task we offer freelance services:
Best regards,
Jordan ShannonSeptember 14, 2017 at 10:01 am #851952Hi,
ok, no problem, you helped me so very well. I have summarized the code for the toggles here, so that other users can use it. The toggles look very smart if you want to build a puristic website:
Many Thanks,
Jürgen.single_toggle .toggler {
border-top: #000 2px solid;
text-transform: uppercase;
border-bottom: #000 2px solid;
background: transparent!important;
border-left: none;
border-right: none;
}
.single_toggle p[data-fake-id=”#toggle-id-2″] {
border-top: none;
}
.main_color .toggle_content {
background: transparent!important;
border-left: none;
border-right: none;
}
.toggle_content.invers-color {
border-bottom: #000 2px solid;
}
.main_color span.hor_icon, .main_color span.vert_icon {
border-color: #000;
}
span.toggle_icon{
border:none!important;
}September 14, 2017 at 2:19 pm #852044Hi,
I noticed, since I have the code in the Quick CSS built, changes in the Theme Enfold (For example, General Layout / Maximum Container width) no longer work!
I think in the modified code to the toggles is still some error, which does not tolerate the theme. At least if I remove the code from the Quick-CSS, everything works again.Can someone help?
Best regards
JürgenSeptember 14, 2017 at 3:51 pm #852113Hi Jürgen,
You can validate the code here
https://codebeautify.org/cssvalidateto make sure there are no mistakes.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.