Hi, What is the process for trying to style an element that has a default value already applied via the Bootstrap .CSS file. I do not seem to be able to change the values in the styles panel & I do not see these values available in the Application panel. As one example, I’d like to change the default link transition styling, its a bit on the slow side & want to speed it up a bit or remove it all together. How would I access those values & change them without disturbing the bootstrap CSS file? Thanks.
I think that you are referring to anchor buttons because links do not have a transition applied.
For the button, go to Theme Manager -> Advanced. There you can choose Buttons and Transition.
Alternatively, you can write your own CSS to override the default Bootstrap style as in
.btn {
transition: none !important;
}
Instead of none you could use your own values.
The styles of the bootstrap button you are referring to are overriden by more specific rules in the bootstrap CSS for the .btn class.
You can enter two classes - .btn followed by a custom class like .my-custom-btn in the CSS of the Design panel so that it has higher priority and overrides the bootstrap .btn class rules:
Then the CSS rule generated by the design panel will be:
.btn.my-custom-btn { }
and it will override the default bootstrap .btn class styles.
Hi, Thank you for your responses. I will keep those guidelines in mind. These components I am referencing for this example are Nav Link elements inside a Nav component. In general, will changing any of these values change the Bootstrap css file? What is the significance of the different colors associated with the Bootstrap override classes, why are some properties Dark Brown & others light brown. It seems I am able to change values for some properties & not others. (I was not able to find anything in regards to that in the Help materials, thus I am asking)
