[Resolved] .btn-primary class override bootstrap classes

[Author]

Posts

[carletto0282]

Hi guys,

just wanna warn you that starter theme classes for buttons override bootstrap classes.

I'm trying to add contextual colors for submit buttons on several CRED forms but btn-primary class on style.css of starter them is overriding background-color for btn-success and btn-danger standard bootstrap classes.

Please take a look at this little issue.
Thanks
Carlo

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Carlo,

Thank you for contacting Toolset Support and reporting this issue. I think you are correct about this, style.css should be loading at last after the bootstrap css. I am going to check this with our starter theme developer and let you know soon.

Thank you

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Ok, after discussing with our Starter Theme developer we found out that its expected behavior based on how starter theme works. btn-primary is overwritten by Colors option in Appearance >> Customizer. So you can add CSS in Theme Customizer >> Custom CSS section.

Select this option in Toolset >> Settings >> Bootstrap loading >> The theme or another plugin is already loading Bootstrap 3.0.

I have tested now with the following css code and it works fine:

.btn-primary
{
  background-color: pink;
}
 

And this:

.btn-primary,
.btn-secondary
{
  background-color: pink;
}

And if you would still like to add css in style.css file then you would need to use !important to override these styles.

Thanks

[carletto0282]

Hi @mo-n ,

no problem with the behaviour of btn-primary.
You are right.

Actually the problem is that the rule that manage btn-primary act also on submit type input even when btn-primary class is not set.

This is the button code

<input type="submit" id="cred_form_186_1-submit-1-1498838839" name="form_submit_1" value="Completed" class="btn btn-success btn-lg wpt-form-submit form-submit submit submit">

I expected to be green... as bootstrap css should be for success class... instead it's blue (like primary color is set)

This is the css rule I'm talking about.

.btn-primary, input[type="submit"] {
    color: #fff;
    background-color: #3CBEFE;
    border-color: #23b6fe;
}

I understand the logic you apply... but I think bootstrap color classe shouldn't be overrided this way.
Thanks for your understanding

Best regards
Carlo

PS: I already tweaked the whole thing through custom css but I found this behaviour could be adjusted. Thanks again.

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Have you added the above css in Theme Customizer >> Custom CSS section?

You might also want to disable some theme css loading options in Theme Customizer >> Advanced Settings section.

[carletto0282]

HI @mo-n,

I'm sorry I think I wasn't clear enough: I have no problem at all with .btn-primary behaviour.
I know it can be overwritten by Custom css section in Customizer and yes it works fine... but I really don't need to.

The thing is I'm trying to set the color of my CRED forms using bootstrap classes like btn-success and btn-danger but those classes are overwritten by a rule placed in the style.css file of Starter Theme.

My problem is: my submit button doesn't have btn-primary class. Instead it has btn-success. But its background color is set according to this rule

.btn-primary, input[type="submit"] {
    color: #fff;
    background-color: #3CBEFE;
    border-color: #23b6fe;
}

instead of being green like a btn-success item in bootstrap should be.

It's possible to correct this behaviour?
Thanks again

Carlo

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hello,

Okay, to further debug this issue, I need to request temporary access (WP-Admin and FTP Login info) to your staging site. Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please add the Links to the [CRED form] Edit Screen, [Page link] and let me know where you have placed this CSS so I can check it there. Thank you

[carletto0282]

Hi Norman,

unfortunately I'm on a local environment.
But I can assure you that you have no need to access my environment.
Just make a cred form and add btn-success class to submit button.

You will see the button will be rendered with primary color instead of green.

That's it.

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Okay I am testing on it further, will update you soon on this. Thank you

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I have been checking this and found out that it is being added on purpose so that “Submit” buttons have some style on them else they will look ugly if we don’t add any style on submit buttons in Starter theme. The primary color option is for site and not for bootstrap class. There are 2 easy solutions for that:

1. You can disable this effect, please see attached screenshot.

2. OR go to Appearance >> Customize >> Custom CSS and use this code to style submit button:

input.btn-success{
  color:#fff;
  background-color:#5cb85c;
  border-color:#4cae4c
}

If above solution is not good for you, let me know and I will report to add an option to control this behavior for submit buttons. Thank you

[carletto0282]

Hi Norman,

thanks for your patience and for your support.
I'm gonna mark this as resolved because you are offering some options but I'd like to emphasize that you guys are building a theme on bootstrap and it makes no sense you are using the same class of bootstrap causing an obvious conflict but stating it's not directly related to that class.

Your first suggestion is fine except I'm using that custom value in other places.

From my humble point of view your second option is a total nonsense: those css rules are already loaded in the bootstrap framework. Why should I custom override your rules that are overriding bootstrap ones? It won't be better if you let framework rules to be used freely

I've try to take a look to the styling of submit buttons without btn-primary class applied but actually it looks fine to me either on chrome and firefox.

I really don't want to bother you anymore but please take in consideration the option to change this

.btn-primary, input[type="submit"] {
    color: #fff;
    background-color: #3CBEFE;
    border-color: #23b6fe;
}

into this

.btn-primary {
    color: #fff;
    background-color: #3CBEFE;
    border-color: #23b6fe;
}

I think we can save your custom management of btn-primary class along with bootstrap legit classes.

Maybe rendering the btn-primary class in the CRED submit shortcode by default should be helpful.
By leaving it we can achieve the same result while removing it or change it to another bootstrap class we can change color.

Thanks
Best regards

Carlo

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

At this point I agree with your suggestions and would like to forward it to our development team for further consideration. Can you please change the ticket status and re-open it? And then I will be happy to report it ahead.

Thank you for the suggestions.

[carletto0282]

Hi Norman,

here you go.
Re-opened the ticket as you suggested.

Thank you again for your support

Best regards
Carlo

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I have escalated this issue to our 2nd tier support for further review and we will get back to you with an update.

Thank you for your co-operation and patience as we strive hard to resolve this.

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Sadly, our development team has turned down this request. The current solution to use is to disable "Primary Color setting" from theme Customizer >> Advanced Settings, as shown in this screenshot earlier: hidden link

Disabling Toolset Starter stylesheets: https://toolset.com/documentation/user-guides/toolset-starter-theme/#disabling-styles

The reason is that these styles of starter theme are used on some Reference Sites of Toolset.
https://toolset.com/account/downloads/#application-frameworks

I really wanted to help you here but I am sorry as the decision is in the hands of the higher depart. Please let me know if I can help you with anything else.

Thank you