Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 7, 2018 at 8:56 pm #923311
    lebenspraxis

    Hi,
    I would like to set a specific color to the toggle icon of a single accordion slider toggle, while all the other toggle icons keep their standard color. I couldn’t find out which element or element-id I should adress. I know only a few about css and just look into the support forum and try what works. I tried this:

    #toggle-id-9 .toggle_icon .hor_icon, .toggle_icon .vert_icon { border-color: #ffffff !important; }

    It changed the color of the vertical lign of the +-cross in all toggles.

    How can I get it work?

    Regards
    lebenspraxis

    March 7, 2018 at 9:09 pm #923318
    Jordan Shannon

    Hey lebenspraxis,

    Can you please provide a link to the site/page in question so we can look into this issue further?

    Best regards,
    Jordan Shannon

    March 8, 2018 at 11:50 am #923788
    lebenspraxis

    Hey Jordan Shannon,
    you can find the link in the private content. It’s about the toggle icon placed in the indigo colored field. As you see, the color is the standard color I defined in my style.css (child theme):

    .toggle_icon .hor_icon, .toggle_icon .vert_icon {
    border-color: #7b1f50 !important;
    }

    Now I want that single toggle icon in white color. Would fit better in the indigo colored field. In the future I would like to cfeate more fields with the indigo background and with white toggle icons. For that I need to know, which element or element-id I have to adress to successfully change the color of the toggle icon.

    Best regards
    lebenspraxis

    March 8, 2018 at 8:30 pm #924041
    Jordan Shannon

    Hi,

    Can you please provide admin info in the private area as well? I need to log in to work out the css.

    Best regards,
    Jordan Shannon

    March 8, 2018 at 11:27 pm #924168
    lebenspraxis

    Hey Jordan Shannon,
    okay, login credentials for you in private content.

    Best regards,
    lebenspraxis

    March 9, 2018 at 6:12 pm #924648
    Jordan Shannon

    Hi,

    Thanks for getting me this info. I attempted to add the following to quick css:

    .avia-builder-el-29 .vert_icon,.avia-builder-el-29 .hor_icon{
border-color:#fff!important;
}

    But it seems you already have !important; defined somewhere for the current color it is overriding my css.

    Best regards,
    Jordan Shannon

    March 9, 2018 at 6:53 pm #924666
    lebenspraxis

    Hi Jordan Shannon,

    it’s fine now, but I don’t know how it happened.
    As I mentioned above, this css is in my style.css of the child theme:

    .toggle_icon .hor_icon, .toggle_icon .vert_icon {
    border-color: #7b1f50 !important;
    }

    First I deleted the !important-rule in the above css, but it didn’t work. The color of all other toggle icons changed (to white? -> became invisible)
    At least I copied your css into my style.css and I deleted all cache of caching plugins (Cache Enabler and Autoptimize).
    After that it worked. Your css and my css both have the !important rule and there’s no conflict.

    Thanks a lot for your support!

    Best regards.
    lebenspraxis

    March 9, 2018 at 7:01 pm #924668
    Jordan Shannon

    Hi,

    No problem at all. I’m glad we were able to work this out. If you need additional help, please use know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Customize toggle icon color for single toggle’ is closed to new replies.