Jump to content
Sign in to follow this  
ksnyde

Styling conflict with Twitter Bootstrap

Recommended Posts

ksnyde    0
ksnyde

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
Danny    1,327
Danny
Hi Ken, What CSS are you using that is being overwritten by PageLines CSS ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ksnyde    0
ksnyde
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
catrina    103
catrina
[code]input, input[type="password"], input[type="search"], isindex[/code] ^ Did you use these as selectors in your CSS?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ksnyde    0
ksnyde
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  

×