August 15, 2021 at 9:15 pm #59232Daniel FawcettParticipant
Is it possible to remove wsf- classes?
I am trying to style a button to fit with the rest of my site but I cannot remove wsf-button which is effecting the styling of my button.
August 15, 2021 at 9:15 pm #61603Mark WestguardKeymaster
Sorry for the delay in responding, our forum plugin had quarantined your message.
You cannot remove our CSS classes but you can override any of our classes with your own CSS.
September 19, 2021 at 11:50 pm #67955Daniel FawcettParticipant
it seems like my replies are being quarantined again
October 27, 2021 at 8:51 am #75147Steven PolakParticipant
Hey Daniel, I understand your styling struggles. I like the comfort of the WS Form CSS skin (see advanced settings), but I HATE its limitations to customizing the form beyond that skin. For example, we can only customize colors in HEX. And to override styles with custom CSS, we rely on !important 9/10 times.
Therefore I’ve decided to disable the WS Form CSS skin and style my forms from scratch. It takes a while to figure out all the classes used by the WS Form framework, but once you’ve got it, you can freely style it with your own css (woohoo!) css variables (woohoo!!) and inherit styles from outside of the form (woohoo!!!).
Once I’ve finished the stylesheet for customizing forms exactly to your liking, I’ll post it here (reply here to notify me through email in case I forget).
October 29, 2021 at 9:57 am #75560Mark WestguardKeymaster
You should not need to use !important that often provided your CSS selectors are specific enough. We very rarely use !important in our own CSS and it is usually only applied if we are overriding a third party class that absolutely requires it.
Provided your CSS is enqueued after ours, your CSS should naturally ‘cascade’ over ours. In fact we do this ourselves on our own website 🙂
The WordPress customize tool is quite restricted, I agree. We tried to be as integrated with WordPress core as possible hence we chose to use the WordPress customize feature to enable basic CSS control on the form. Given our development focus, customers can then override our CSS classes with their own or, as you correctly state, you can switch off the skin CSS entirely so that you can develop your own. We’d definitely like to expand our styling options in future though.
November 5, 2021 at 3:18 am #76881Steven PolakParticipant
You are 100% correct Mark. We can always get more specific with our selectors to target every element we want. However, I personally like to start with (near-)blank styling and target the native selectors directly, as such not having to specify tons of selectors and properties only to override the default.
The WP Customizer offers too little freedom, but at the same time, styling completely from scratch (turning off WSF skin) may be a bit too tedious for a lot of people as well. An in-between is probably what most people are looking for, so I’m excited to see what the future of WSF holds in terms of styling options. For now, I think it would make a huge difference to simply publicate the list (+ description) of native selectors (from .wsf-sections all the way down to .wsf-label, .wsf-invalid-feedback, etc.). Unless you get super fancy with your input field styles, it’s not much more effort to style the most common form properties writing custom css, compared to using a tool such as the WP Customizer.
- You must be logged in to reply to this topic.