CSS Styling Tweaks (Help)

  • Resolved kogostudio

    (@kogostudio)


    2 months, 3 weeks ago

    Hi Mark.

    Sorry mate, just neep help two things about css styling

    1. I want to remove the background for the hcaptcha field.
      = https://imgur.com/ioszdR1.png
    2. From the Customizer ▸ WS Form ▸ Primary, how can i edit the color code via css code. (i dont want to manually go on the Customizer to change the color)
      = https://imgur.com/j8HQgVy.png

    Below is my current css for the wsf-forms

    .wsf-form .wsf-field-wrapper .wsf-field {
        background: var(--surface-20);
    	color: var(--surface-90);
	    font-size: var(--fs-body);
    	font-family: var(--body-font);
}
.wsf-form .wsf-field-wrapper .wsf-label {
    	color:  var(--surface-90);
	    font-size: var(--fs-body);
    	font-family: var(--body-font);
}
.wsf-form .wsf-field-wrapper .wsf-help {
	    color: var(--surface-70);
}

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Mark Westguard

    (@westguard)

    2 months, 3 weeks ago

    Hi @kogostudio

    Whilst our support does not help with custom CSS coding, I did take a quick look for you.

    1. You are adding a background color to the fields yourselves, but it is being applied to all the fields. You would therefore need to modify your CSS to exclude the hCaptcha field type. There are, of course, many ways of doing this, but one way would be by using the :not pseudo class. e.g.

    .wsf-form .wsf-field-wrapper:not([data-type="hcaptcha"]) .wsf-field

    2. You can change any color on the form using CSS, you would just need to use the correct CSS selector to do so. We have some pointers here: https://wsform.com/knowledgebase/styling-forms-with-css/

      Many thanks!

      Mark

    Viewing 1 replies (of 1 total)
    • You must be logged in to reply to this topic.