[Resuelto] Can’t seem to edit the submit button on form with CSS

[Autor]

Mensajes

[FelipeP5703]

I am trying to: Trying to style my submit form button in one form and show it on View. Here is a video about it: enlace oculto

[Christian Cox]

It looks like the CSS is not written into the page here. If you place this Form somewhere on the site outside of a View, is the CSS included correctly?

[FelipeP5703]

I placed the form inside the view to create a button. I tried both, in the form and in the view, but can't seem to be working.

What CSS takes priority? In the form or in the view?

[Christian Cox]

What CSS takes priority? In the form or in the view?
It's not easy to predict. It's best to include more specific selectors to override other styles in your theme and plugins. CSS specificity is a complex topic: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
Regardless of whether the CSS is placed in the Form or in the View, it should be written into the page source automatically. If you place the CSS in the View and it is still not included in the page source, there is a problem we need to investigate.

[FelipeP5703]

1) When I add class to the shortcode [cred_form form='draft-anuncio'] it does not work. For example, [cred_form form='draft-anuncio' class="my-css"], why doesn't it work?

2) I read about specificity and I tried the following:

#cred_form_1406 input[type="submit"] {
  text-align: center;
  background-color: #c7c70d;
  color: white;
  font-size: 15px;
  padding: 0 5px;
  margin:0px;
}

But it did nothing. I thought using #cred_form_1406 input[type="submit"] would affect all the supposed buttons in all the forms.

It only works if I'm even more specific like this:

#cred_form_1406_1 input[type="submit"] {
  text-align: center;
  background-color: #c7c70d;
  color: white;
  font-size: 15px;
  padding: 0 5px;
  margin:0px;
}

But I can't keep adding _2, _3, _4 manually because I don't know how many custom post a user will have. So what is the correct code to incorporate ALL the css style for that form?

[Christian Cox]

1) When I add class to the shortcode [cred_form form='draft-anuncio'] it does not work. For example, [cred_form form='draft-anuncio' class="my-css"], why doesn't it work?
The "class" attribute is not supported in the cred_form shortcode. The supported attributes are defined here: https://toolset.com/documentation/user-guides/cred-shortcodes/#cred_form
If you want to add a class somewhere, wrap the cred_form shortcode in a div and add your class there.

<div class="my-class">
  [cred_form ...]
</div>

Then in your CSS you can target that form or its submit buttons:

.my-class {
  background-color: #fc0;
}

.my-class form input[type="submit"].suspender {
  background-color: blue;
}

But it did nothing. I thought using #cred_form_1406 input[type="submit"] would affect all the supposed buttons in all the forms.
Based on what I can see in the screenshot, there is no form with ID cred_form_1406, there are multiple forms that all have different IDs beginning with cred_form_1406, like cred_form_1406_1.

So what is the correct code to incorporate ALL the css style for that form?
Sorry I don't understand this question.

[FelipeP5703]

My issue is resolved now. Thank you!