BP Profile Search › Cant edit CSS class ".ui-accordion-header-icon .ui-icon .ui-icon-minus"
-
Post
-
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?Hi Patrick,
Which jQuery UI Theme are you using for your search form?
Hi,
I´m using the Base ThemeHi 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; }Awesome, it worked! Thank you very much 🙂
You’re welcome, I’m glad it worked for you!
