Forums

Bootstrap Button Codes

Permalink
Good Morning,

I am currently using the Palette theme, and adding a button to a Feature block via source code:

<p><span class="btn btn-primary btn-lg">Contact Us Today</span></p>

It looks fine in the editor, but when I click save, it doesn't take the properties of the button, large or small (Lg, sm). Is there something I need to look for that is overiding my button codes?

I have attached screenshots of the buttons, the one I don't want, and the one I want (Clearly Labeled in screenshot)

2 Attachments

 
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Could be an error in your code.
Take a look at the page_theme.php file to see the options listed at the end of the file thus..
array('title' => t('Standard Button'), 'menuClass' => '', 'spanClass' => 'btn btn-default', 'forceBlock' => '-1'),
array('title' => t('Success Button'), 'menuClass' => '', 'spanClass' => 'btn btn-success', 'forceBlock' => '-1'),
array('title' => t('Primary Button'), 'menuClass' => '', 'spanClass' => 'btn btn-primary', 'forceBlock' => '-1'),
array('title' => t('Large Button'), 'menuClass' => '', 'spanClass' => 'btn btn-large', 'forceBlock' => '-1'),
ebourbon72 replied on at Permalink Reply
Thank you for the reply.

Those lines of code are within my page_theme.php files. What do I need to do with them?
JohntheFish replied on at Permalink Reply
JohntheFish
See https://getbootstrap.com/docs/3.4/css/#buttons...
ebourbon72 replied on at Permalink Reply
Thank you for the reply.

I tried some of those buttons, I am still getting the same style of buttons that seems to override whatever button I put in, large or small.
JohntheFish replied on at Permalink Reply
JohntheFish
With all caches disabled, have a look at the button styles in your browser dev console. In Chrome, right click on one of your problem buttons and select 'Inspect'.
That will tell you what styles are applied, where they come from and the precedence over other styles.
ebourbon72 replied on at Permalink Reply
Thank you, I was able to find the main.css file and eliminate the code that was causing the button override.

The only side effect is, if I make any changes to the Design under Page Settings, the button override comes back.
JohntheFish replied on at Permalink Reply
JohntheFish
It sounds like you may be editing a cached css or compiled less rather than the original.

An alternative to changing the existing css is to create stronger rules for the situations where you want your own button designs.