Block edit window (and c5 dashboard) markup/css - minimize interference with site styles
Permalink1. Scoping the theme css
Adding .site to the body tag and scoping the theme css doesn't seem to work (for me) because the c5 dashboard loads within the same body tag - so this:
.site .tooltip
Gets applied to the c5 dashboard tooltips as well.
2. Load css to target the c5 dashboard when in edit mode
I also have a bunch of css in the <head> which conditionally loads when in edit mode to target particularly troublesome block edit windows and c5 dashboard components. But this is kind of painful in a small team with limited resources - there's often enough to worry about with out having to fix how the client will interact with c5.
3. Other options
Are there other options you guys use?
4. The long term
Being a fundamental issue with in-context editing, is there a long-term solution on the horizon to become part of the c5 core (and block development guides) - or is it worth discussing?
Sorry if this has been bashed to death previously!
Any pointers on fixing this would be much appreciated.

Can anyone point me in the right direction?
Any help would be much appreciated.
Cheers
Ben
<style>
#unique .tooltip {background-color:#444;}
</style>
<body ID="unique">
.
.
.
</body>
Just something to try.
I used to do something similar prior to 5.5 - I would add a class of .site to the body tag and scope the theme css using .site (wrapping all the css in one big nested rule using less).
But with 5.5:
.site .tooltip
Will still target dashboard tooltips because the dashboard is loading within the same body tag.
Or do I need to use an ID?
The issue I'm describing occurs when you're editing a page and load a block edit window - then your site's theme (in this case, unchanged Bootstrap 2.0 styles) ruins the block edit windows.
You can conditionally load another style sheet if in edit mode to target the various issues but I was wondering if there's a better solution (or one on the horizon)?
I don't know what this solution is but if there was an edit window framework that block developers could used (like <span class="h3">), then there'd be minimal interference with the dashboard when it's loaded over the top of a themed web page.
Anyway, I'm wondering if I'm missing a simple trick as I'm finding lots of things that conflict between Bootstrap 2.0 and c5 and don't relish the thought of going through all the Bootstrap .less files to scope them using a unique class.
http://www.concrete5.org/community/forums/customizing_c5/concrete5-...
I also came across this statement by hostco regarding a bootstrap 2.0 theme they have in the marketplace. (Discussion Link:http://www.concrete5.org/marketplace/themes/bootstrap/reviews... )
"We did not include LESS because its advanced, not for beginners and makes it much harder to customize the CSS."
You can go to 'Developer->Bug Tracker" on the C5 site and report your issues. They are pretty good at following up with suggestions.
Is there a live site we could look at?
I'm playing around with adding #site to the body and html tags - then wrapping the imports in bootstrap.less with #style {bootstrap imports} - but so far:
1. Putting it on the body
Seems to scope the css nicely but causes issues with Bootstrap when there's a body tag in the css - essentially it creates:
#site body
2. Putting it on the html tag
Doesn't seems o fix anything with the dashboard - presumably because the block edit window is loading within the same html tag (not sure why it works better on the body tag).
"Is there a live site we could look at?"
Unfortunately it's at an early stage on a local dev machine.
Thanks again.
1. In header.php:
<?php // automatically load head attributes (title, meta etc) and block css and js dependencies Loader::element('header_required'); ?> <?php // conditionally load css file if in edit mode (to fix theme/bootstrap conflicts with c5 dashboard) if($c->isEditMode()){ ?> <link href="<?php echo $this->getThemePath(); ?>/assets/css/c5-dashboard-editmode.css" rel="stylesheet"> <? } ?>
2. c5-dashboard-editmode.less
Here are some good rules that seem to fix most of the c5 edit window issues with Bootstrap 2.0 (note .less syntax and nesting):
// Fix Bootstrap styles breaking elements in c5 edit windows .ui-dialog { h2 { // tame all the h2's used in c5 dialogues font-size: 10px; } label { // stop labels from breaking forms display: inline; width: auto; } input, textarea { // fix default width on form elements width: auto; } img { // stop images appearing squashesd max-width: none; }
Hope that helps someone else.