Override Class CSS

General
1

Hi all, I’m struggling here.

I’m trying to override the CSS from a contact form plugin. I thought I’d do this with global styling, but creating a global class with the same class name as the element in the contact form isn’t doing the trick.

How would I go about overriding the class’ CSS?

For example, I have this button:

<input type="submit" class="button button-primary wpuf_submit_153" name="submit" value="Submit">

And I can add this CSS to the Chrome inspector and it works like I’d expect:

input.button.button-primary {
    border-radius: 20px;
}

Now how do I get this into Cwicly?

2

I found a way, but I don’t love it.

I found where WP allows for custom CSS that works more like I’m expecting.
Though, I’d prefer to keep as much as I can within Cwicly. The WP custom CSS is in the strangest place and easy to lose/forget about.

3

There are multiple ways to achieve this with Cwicly. Here is a selection:

  1. Copy/paste the code into a Global Stylesheet (ensure you enable it by activating the green dot)
  1. Add it as a relative style to a container block or class applied to a container block:

Which you choose depends whether you prefer working in the Cwicly UI or you are happy dropping in code directly. There are also other ways to do it (e.g. adding code into the Advanced > SCSS).

4

Thanks. I had tried that before but I must have missed something. It does work like I want it to.
Much appreciated!

1 Like