Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • June 26, 2014 at 7:04 pm #284228
    tunomaniobras

    Hi!
    Before purchase enfold theme I made some experiments with the “salient theme”

    I like how looks his Toggles & Accordions, so there would be and option to use custom color and custon icon like this accordion?

    I post the link to see how it is
    http://themenectar.com/demo/salient/features/elements/

    Thanks.

    June 27, 2014 at 5:37 am #284406
    Ismael

    Hey mikel!

    Thank you so much for choosing Enfold!

    Please use this on Quick CSS or custom.css:

    .togglecontainer .single_toggle:first-child .toggler {
margin-bottom: 10px;
}

.main_color .toggler, .main_color .toggler.activeTitle:hover {
color: #fff!important;
background-color: #27CFC3;
}

 .main_color .toggle_content {
background: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

    Cheers!
    Ismael

    June 27, 2014 at 10:32 am #284438
    tunomaniobras

    Hey Ismael

    Thanks for the code it works well but I would like some modifications.

    – I would like to use the same color of the accordion in roll-over and change only when it is open. (so no roll-over color) Only 2 color, active and no active

    -I would like the option of change color of the letter when they are active and not active( black with grey color (no active) and white with blue color (active)

    There is one more thing, can I change the cross icon? make it round with solid color and with the cross in the bacground color (maybe transparent) for example?

    June 27, 2014 at 10:33 am #284439
    tunomaniobras
    This reply has been marked as private.
    June 27, 2014 at 2:24 pm #284571
    Ismael

    Hey!

    Thank you for the update.

    Please post a screenshot of what you want to accomplish with the accordion element. We’ll try to help you with the css code. If you have the time, please play around with the css selectors that we suggested above.

    Cheers!
    Ismael

    June 27, 2014 at 3:41 pm #284595
    tunomaniobras

    Hi!

    Here is what i want!

    http://www.jatur.com/?attachment_id=3318

    Thanks!

    June 27, 2014 at 4:03 pm #284605
    Yigit

    Hi!

    I have created a private test page and added custom CSS code to Quick CSS field. Please review it and adust it if you need further customisation

    Best regards,
    Yigit

    June 27, 2014 at 4:28 pm #284622
    tunomaniobras

    Yes it is correct but can you disable the roll-over effect? it make the box white and i dont want it.

    And I have seen that you have rounded the icon but there is to much ask to use the logo of the picture? (maybe the theme doesnt alloy it but I see it more clean than the default one)

    Another question related with toggles, there is no option to use the avia builder inside the toggles boxes?

    Thanks for your works mates!

    • This reply was modified 10 years, 4 months ago by tunomaniobras.
    June 27, 2014 at 4:33 pm #284630
    Yigit

    Hey!

    I have changed hover states but i did not understand “And I have seen that you have rounded the icon but there is to much ask to use the logo of the picture? (maybe the theme doesnt alloy it but I see it more clean than the default one)”. Can you elaborate?

    Cheers!
    Yigit

    June 27, 2014 at 4:43 pm #284636
    tunomaniobras

    Sorry for my english jeje

    I mean that i like the icons of the toggles that apears in the image I attached before. The colors are correct now. Thanks!

    http://www.jatur.com/?attachment_id=3318

    • This reply was modified 10 years, 4 months ago by tunomaniobras.
    June 30, 2014 at 7:54 am #285083
    Dude

    Hi!

    The theme does not support a custom toggle icon or image. In fact the +/- symbol is not even an icon but just two lines drawn with css.

    Cheers!
    Peter

    June 30, 2014 at 6:22 pm #285323
    tunomaniobras

    Ok. Dude!
    So there is any option where I can play with this css settings to make the +/- symbol smaller?

    Thanks

    July 1, 2014 at 2:44 am #285506
    Ismael

    Hey!

    You can adjust the size with this:

    .toggle_icon .vert_icon {
border-left-style: solid;
border-left-width: 2px;
left: 5px;
top: 1px;
height: 6px;
}

.toggle_icon .hor_icon {
border-top-style: solid;
border-top-width: 2px;
position: absolute;
top: 6px;
left: 3px;
width: 6px;
}

    Best regards,
    Ismael

    July 1, 2014 at 7:55 am #285592
    tunomaniobras

    Thanks Ismael for the code, but I dont know why the arrow has moved. (www.www.jatur.com/descargas)
    And how I can delete the circle stroke? I would like to have a solid color circle.

    Thanks!

    July 1, 2014 at 4:54 pm #285792
    Dude

    Hey!

    You can play around with the values a bit – it’s hard to find the right balance between readability and size. I think this code might work:

    
.toggle_icon .vert_icon {
border-left-style: solid;
border-left-width: 2px;
left: 5px;
top: 3px;
height: 6px;
}

.toggle_icon .hor_icon {
border-top-style: solid;
border-top-width: 2px;
position: absolute;
top: 5px;
left: 3px;
width: 6px;
}

    Regards,
    Peter

    July 3, 2014 at 3:25 pm #286702
    ev0l_

    Hi!

    Can you let us other know how you did this since we can acces his private page?

    I want the same thung, so that if I click on the title the background color of the title “box” changes when its active?

    Like this: http://www.jatur.com/wp-content/uploads/2014/06/accordions.jpg

    July 3, 2014 at 3:29 pm #286704
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    .toggler.activeTitle {
background: red;
}

    Best regards,
    Yigit

    July 3, 2014 at 3:33 pm #286706
    ev0l_

    WOW!

    That was the fastes support I ever seen and it workt like charm :)

    Thanks!

    One more question.

    1. How can I style the title on the accordions?
    Color, size and font.

    July 3, 2014 at 3:44 pm #286708
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .js_active .toggler { font-size: 18px; color: red !important; font-family: arial; }

    Regards,
    Yigit

    March 19, 2016 at 7:06 pm #600729
    craigriches

    Is it possible to change the border style of the toggle icons from square to circular, with a solid colour background and the cross or minus remaining white?

    March 25, 2016 at 7:13 am #603575
    Ismael

    Hey!


    @craigriches    : Please create a new thread with the link to the page and a screenshot of the layout that you want. We’ll check it there.

    Regards,
    Ismael

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Toggles & Accordions appearance’ is closed to new replies.