My Account

Forums

Home Forums General Remove wsf- classes

Viewing 4 reply threads
  • Author
    Posts
    • #59232
      Daniel Fawcett
      Participant

      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.

      button with wsf-button class – https://snipboard.io/kd4VDR.jpg
      button without wsf-button class – https://snipboard.io/yFIuNO.jpg

    • #61603
      Mark Westguard
      Keymaster

      Hi Daniel

      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.

      Many thanks

      Mark

    • #67955
      Daniel Fawcett
      Participant

      it seems like my replies are being quarantined again

    • #75147
      Steven Polak
      Participant

      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).

      • #75560
        Mark Westguard
        Keymaster

        Hi Steven

        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.

        Many thanks!

        Mark

    • #76881
      Steven Polak
      Participant

      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.

Viewing 4 reply threads
  • You must be logged in to reply to this topic.

Login