I am using Twitter's bootstrap (
Styling conflict with Twitter Bootstrap
4 replies to this topic
Posted 23 April 2012 - 10:53 AM
I am using Twitter's bootstrap () 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: 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: 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: . The reason I've raised this issue is that these are the fields that I've disabled in PageLines CSS: 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?
Posted 23 April 2012 - 12:57 PM
Hi Ken, What CSS are you using that is being overwritten by PageLines CSS ?
Posted 23 April 2012 - 04:08 PM
The PageLines CSS that can't be overwritten is: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.
Posted 28 April 2012 - 06:27 PM
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: