Introduction:
Having learned that you can use combinators in CSS, I decided to see what elements within Studio I could target and customize further than what the inspector tools allow. A good example is rounding out the corners of the Blog Post page, which doesn’t have a setting within the inspector panel.
How I did it:
I used the code panel within Wix Studio, the global.css file, the element toolset within my browser’s Developer tools to find the selectors, and the MDN web docs to learn more about CSS syntax.
Tools, Documentation and APIs:
Example:
You can check out a video of what is CSS, how to add it within Studio, setting custom classes, the general ruleset, and then how to use combinators to target these elements/selectors/attributes. Youtube Video
This use case came up in one of the communities I help out in and I noticed that some have asked about this but if you want to change the input color for radio buttons and checkboxes inside your new forms, you can target just them with the trick above. Normally, the input color dictates what you type inside of the input fields as well as radio buttons, single checkboxes and multi-checkboxes.
Normally, this works well but if you have dark form background, the text input might be too dark to see but it’s needed otherwise you are unable to see the inputted text.
With the CSS trick above, you can manage this without having to make various changes within the settings.
/*used for single and multichoice*/
.form-section [data-hook="label-wrapper"],
/*used for single checkbox*/
.form-section [data-hook="label-wrapper"] span{
color: darkmagenta;
}
span is needed for the single checkbox as the text is nested inside of the [data-hook] so if you have a single checkbox, make sure you use .form-section [data-hook="label-wrapper"] span
PS. I took a look at the hover and disabled state and these elements aren’t changed by the settings so there should be no need to do it but you could customize the it if you need.
