This thread is resolved. Here is a description of the problem and solution.
Problem: I would like to style map search filters, but my CSS does not seem to work.
Solution: Add correct or more specific CSS selectors to override your theme or other plugin styles.
Relevant Documentation:
https://css-tricks.com/how-css-selectors-work/
https://css-tricks.com/specifics-on-css-specificity/
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 2 replies, has 2 voices.
Last updated by 6 years, 5 months ago.
Assisted by: Christian Cox.
We have attempted to add CSS to the search bars but it will not take. Could you verify the fidelity of the css below as we believe that we have the correct selectors but can't get the CSS to work.
.form-group > label {
display: block;
}
.form-control .js-toolset-maps-distance-value .js-wpv-filter-trigger-delayed {
display: inline-block;
width: 10% !important;
}
.js-toolset-maps-distance-unit.form-control .js-wpv-filter-trigger {
display: inline-block;
width: 10% !important;
}
.form-control .js-toolset-maps-distance-center .js-wpv-filter-trigger {
display: inline-block;
width: 40% !important;
}
There is a link in that document about specificity, which explains why your style selectors are not effective.
https://css-tricks.com/specifics-on-css-specificity/
Some of your style selectors have lower priority than other selectors. I'll give you an example. Open the browser console and you can inspect all the styles applied to each element. I'm attaching a screenshot here showing how your theme applies a width of 100% to all input fields. You can override that width using more specific CSS. For example:
input[type="number"].form-control {
width: 100px;
}
By adding a classname to the input selector, I made this selector more specific than the selector used by your theme to set the input width. Therefore this code will override your theme's width assignment.
