How can I SCOPE a bootstrap theme so C5 doesn't greedily grab it all?

Permalink 1 user found helpful
Followed this tutorial and doesn't actually work:http://www.concrete5.org/documentation/how-tos/designers/easily-sco...

Yeah, it might protect some elements, but the bootstrap.css has a lot of style that is not going to be scoped properly just by throwing a #themewrapper id around it.

The Concrete5 modals magically lose all their CSS when I have a page in Edit mode, yet everything is scoped within #themewrapper { } in my LESS file and every element in the resulting CSS has #themewrapper in front of it. Concrete5 also grabs my elements and brings them to a higher z-index because it's greedy and ignores the scope. There is no jQuery conflict, so these problems aren't caused by that.

 
zoinks replied on at Permalink Reply 1 Attachment
Check out the attached modal screenshot. This is the "Versions" modal selected from a page in Edit mode. Somehow my scoped CSS turns the modal into a full-screen new page with the URI
http://localhost:8888/c5test/index.php/tools/required/versions.php?cID=1
and I have to hit the back button to get out of it.
zoinks replied on at Permalink Best Answer Reply
holy hell, Batman, I finally figured it out.

1. It's probably not a jQuery problem at all, even if it seems like one

2. DON'T upgrade the jquery as jquery.js and drop it in the root/js folder. This was recommended to overcome jQuery conflicts between Bootstrap's newer jQuery and Concrete5's older jQuery. It wasn't necessary because there wasn't any problem with that. This breaks the C5 modals when one of your theme template pages is in Edit Mode, though.

3. Don't ever do this:
*,
 *:before,
 *:after {
  anything
}


Instead, use a themewrapper ID and prefix with the themewrapper ID like this:
#themewrapper *,
#themewrapper *:before,
#themewrapper *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


4. The only other things I had to prefix with the themewrapper ID were:

#themewrapper .navbar-default - for some reason in Edit Mode, my dropdowns would get sent to the back behind all my content even though .navbar-default had a z-index higher than anything else. This seems like a jQuery conflict of some sort, but it was solved by scoping the navbar with the themewrapper ID.

#themewrapper .container - same sort of thing

#themewrapper .breadcrumb - prefix all the .breadcrumb style rules with #themewrapper. There are several.


And that's it. Not nearly as bad as I thought it was. Dropping the new jquery.js into the root/js folder was the biggest issue because it broke the C5 modals and just confused the hell out of me.