Jump to content


Photo
- - - - -

Styling conflict with Twitter Bootstrap


  • Please log in to reply
4 replies to this topic

#1 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 23 April 2012 - 10:53 AM

I am using Twitter's bootstrap (

Please Login or Register to see this Hidden Content

) 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:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

. The reason I've raised this issue is that these are the fields that I've disabled in PageLines CSS:

Please Login or Register to see this Hidden Content

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?

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17945 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2012 - 12:57 PM

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

#3 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

Posted 23 April 2012 - 04:08 PM

The PageLines CSS that can't be overwritten is:

Please Login or Register to see this Hidden Content

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.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 April 2012 - 02:20 AM

Please Login or Register to see this Hidden Content


^ Did you use these as selectors in your CSS?

#5 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts
  • Framework Version:2.3

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:

Please Login or Register to see this Hidden Content