• 0
Sign in to follow this  
Followers 0

Styling conflict with Twitter Bootstrap

Question

Posted · Report post

I am using Twitter's bootstrap (http://twitter.github.com/bootstrap/index.html) for creating modal boxes as well as some of my buttons and form elements on the page. It's a great toolkit and it would be nice to see it work more "out of the box" with PageLines. Regardless, I'd at least like to get it to work by tweaking the CSS appropriately. The main problem that shows up is input boxes that are not tall enough, and radio buttons that are so small they appear as dots. Here's a screenshot that show's a typical modal box: http://www.flickr.com/photos/14261777@N00/7105614521/. From this you can see that the text fields are not as tall as the neighbouring form widgets. There is also some horizontal space that shouldn't be there. More alarming is the radio buttons. You wouldn't be faulted for not seeing them in the screen shot above as they're nearly invisible. Here is a screen shot where I've disabled a number of the PageLines CSS settings: http://www.flickr.com/photos/14261777@N00/7105637605/. This is very close to right even if there is still a little extra horizontal space (the INPUT fields which have an adornment at the end should be flush with the INPUT field as you see here: http://www.flickr.com/photos/14261777@N00/6959573614/ . The reason I've raised this issue is that these are the fields that I've disabled in PageLines CSS: http://www.flickr.com/photos/14261777@N00/7105644417/ and normally I'd just over-ride these settings myself in my child theme but it appears that whatever I put into my own style.css is overwritten by PageLines anyway. How can I get around this?

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Hi Ken, What CSS are you using that is being overwritten by PageLines CSS ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The PageLines CSS that can't be overwritten is: http://www.flickr.com/photos/14261777@N00/7105644417/in/photostream. Padding and and border are the ones causing the most damage. I have tried putting my own CSS to override this in both my child theme (style.css) and a plug-in I'm developing. In neither case does it work.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

[code]input, input[type="password"], input[type="search"], isindex[/code] ^ Did you use these as selectors in your CSS?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Catrina. In the end I found most of what I needed to get things working. If anyone asks, these are the changes I made: [code] input, input[type="text"], input[type="radio"], isindex, .uneditable-input { padding: 4px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCC; border-left-width: 1px; border-left-style: solid; border-left-color: #CCC; border-right-width: 1px; border-right-style: solid; border-right-color: #CCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCC; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .input-append .add-on, .input-append .btn { margin-left: -6px; } input[type=checkbox] { -webkit-appearance: checkbox; } input[type="radio"] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; /* IE7 */ line-height: normal; cursor: pointer; } [/code]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0