Cant edit CSS class “.ui-accordion-header-icon .ui-icon .ui-icon-minus”

Home Forums BP Profile Search Forum Cant edit CSS class “.ui-accordion-header-icon .ui-icon .ui-icon-minus”

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #11041 Reply
    Patrick
    Guest

    Hey,
    I really tried my best to change the color of the “minus” sign which gets displayed when a collapsible form gets opened.. But I just can´t figure out how to do it. The reason I need to do this is because I´ve changed the form header background color to white (because it just looks bad with any other color on my particular site). But the minus sign is white by default as well..
    I tried editing “.ui-accordion .ui-accordion-header .ui-accordion-header-icon” (which should have worked because I´m able to change the icon background color with this css class.. but it doesn´t make the change for the icon text color), i tried “.ui-accordion-header-icon .ui-icon .ui-icon-minus”, hell.. I even tried “.ui-icon-minus” and “.ui-accordion-icons”. I always used !important. Nothing worked to overwrite the text color of this icon.. Any ideas on how I can get this minus icon to be black?

    #11042 Reply
    andrea
    Keymaster

    Hi Patrick,

    Which jQuery UI Theme are you using for your search form?

    #11043 Reply
    Patrick
    Guest

    Hi,
    I´m using the Base Theme

    #11044 Reply
    andrea
    Keymaster

    Hi Patrick,

    The CSS of your jQuery UI Theme is:

    https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

    If you look for the lines:

    .ui-state-active .ui-icon,
    .ui-button:active .ui-icon {
    	background-image: url("images/ui-icons_ffffff_256x240.png");
    }

    you can see that the icon is an image (actually it’s part of a larger image).

    To replace it, try adding to Customize -> Additional CSS the following lines:

    .ui-state-active .ui-icon {
    	background-image: url("https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_444444_256x240.png") !important;
    }
    #11045 Reply
    Patrick
    Guest

    Awesome, it worked! Thank you very much 🙂

    #11046 Reply
    andrea
    Keymaster

    You’re welcome, I’m glad it worked for you!

Viewing 6 posts - 1 through 6 (of 6 total)
Reply To: Cant edit CSS class “.ui-accordion-header-icon .ui-icon .ui-icon-minus”
Your information: