[Plugin: WordPress Twitter Bootstrap CSS] how to override theme CSS with Bootstrap CSS?

Resolved petersalazar
(@petersalazar)

13 years, 11 months ago

Dear Paul and Dave,

Thanks for an amazing plugin. So awesome. Makes WordPress so much better.

In answer to “Why does my site not look any different?” you say “most likely it is that you or your WordPress Theme has defined all the styles already in such a manner that the CSS applied with this plugin is overwritten.”

1. I wish there were some way to make it so that any content that appeared inside <div class=”container”> would automatically take on Twitter Bootstrap CSS rather than being overridden by my WordPress theme’s CSS.

2. What custom CSS from Twitter Bootstrap do I use to re-overwrite my theme CSS?

Right now, for instance, the text labels on my buttons are appearing in transparent color and with a serif font.

<a href="#" class="btn btn-primary">Save changes</a>

I can’t just remove the stuff from my theme because my skin.css file gets rewritten every time I make a change to my theme settings. There is a place, however, where I can paste Custom CSS…

Would it help to paste the entire bootstrap.css file into the Custom CSS area? As you can probably tell, I don’t really have any idea what I’m talking about.

Thanks,
Peter

http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter petersalazar
(@petersalazar)

13 years, 11 months ago
Or this button:
```
<A data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch Modal Demo</a>
```
Plugin Author Paul
(@paultgoodchild)

13 years, 11 months ago
Okay, if you have a place to paste custom CSS, this is the place to post your fixes.

I have a similar problem with my themes, but I can directly edit my themes so I put some inline “CSS fixes” and this is what you’re going to have to do.

Don’t paste your whole Bootstrap CSS in there… no point, and it’ll probably properly screw up the look of your site.

I’d need to see your site to know what exactly you can do for your styling, but we have provided the ability to adds styles directly into your Twitter bootstrap buttons using the shortcodes.

So, if you’re using shortcodes, simply do the following:
```
[TBS_BUTTON class="primary" style="color:white"]My Button Text[/TBS_BUTTON]
```
The important part to notice is the style=”color:white” section. This is where you can change the styling on a per-button basis.

Now, if you’re not using the shortcode, and you want to change the styles for all your buttons, in your custom CSS area, write something like:
```
a.btn {
    color: white;
}
```
Now I chose white without seeing your theme, so you can play with it. This will also change ALL button links on your page.

Does any of that help? Let me know, or pop a link to a particular page and I’ll be able to help out better.

Thanks for the great feedback on the plugin – we’re delighted so many people are getting great use from it!

Cheers,
Paul.
Thread Starter petersalazar
(@petersalazar)

13 years, 11 months ago
Hi Paul,

Thanks. Here’s the link:
http://www.martinekalaw.com/twitter-bootstrap-modals/#

I added this Custom CSS
```
a.btn {
    color: white;
}
```
…but it had no effect.

Here’s my HTML:
```
<h2>Static example</h2>
          <p>Below is a statically rendered modal.</p>
          <div class="well modal-example" style="background-color: #888; border: none;">
            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
              <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h3>Modal header</h3>
              </div>
              <div class="modal-body">
                <p>One fine body…</p>
              </div>
              <div class="modal-footer">
                <a href="#" class="btn">Close</a>
                <a href="#" class="btn btn-primary">Save changes</a>
              </div>
            </div>
          </div> 

          <h2>Live demo</h2>
          <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
          
          <div id="myModal" class="modal hide fade">
            <div class="modal-header">
              <button class="close" data-dismiss="modal">&times;</button>
              <h3>Modal Heading</h3>
            </div>
            <div class="modal-body">
              <h4>Text in a modal</h4>
              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

            </div>
            <div class="modal-footer">
              <a href="#" class="btn" data-dismiss="modal" >Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
          <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
```
Also, some of the buttons are white buttons, so making all the buttons white – even if it worked – probably wouldn’t solve the problem.

Thanks again!

Peter
Plugin Author Paul
(@paultgoodchild)

13 years, 11 months ago

Hey Peter,

I think your best bet is to use the shortcode style parameter and specify the styles inline.

This way the styles you want will take precedence on each button you specify.

Does that make sense?

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘[Plugin: WordPress Twitter Bootstrap CSS] how to override theme CSS with Bootstrap CSS?’ is closed to new replies.