Block edit window (and c5 dashboard) markup/css - minimize interference with site styles
Permalink
When using Bootstrap in a front-end theme, I often encounter issues with block edit windows and some c5 dashboard components because of shared class names.
1. 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:
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.
1. 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.
Does anyone one else spend more time than they want on this - or does nobody use Bootstrap as the basis for front-end work?
Sorry to keep bumping this but judging by the lack of replies, I can only assume that I'm missing something embarrassingly basic!
Can anyone point me in the right direction?
Any help would be much appreciated.
Cheers
Ben
Can anyone point me in the right direction?
Any help would be much appreciated.
Cheers
Ben
I'm not developing with Bootstrap so I don't have first-hand knowledge but an idea I saw floating around was to put a unique ID on your body tag and then aim your theme css at that ID as in:
<style>
#unique .tooltip {background-color:#444;}
</style>
<body ID="unique">
.
.
.
</body>
Just something to try.
<style>
#unique .tooltip {background-color:#444;}
</style>
<body ID="unique">
.
.
.
</body>
Just something to try.
Thanks mate,
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:
Will still target dashboard tooltips because the dashboard is loading within the same body tag.
Or do I need to use an ID?
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?
I think when the dashboard loads a different theme is applied, so CSS that you have in your active theme are not applied to the site any longer. If you look in /concrete/css there is a style sheet in there that takes over. You can drag that out to the /css directory and do overrides there.
Thanks for that, as you rightly point out, the site's theme doesn't load when fully in the dashboard so all good there.
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.
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.
I found a discussion about bootstrap here:
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?
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?
Thanks for the links - I didn't find any info when I searched so will read what people are saying in the links you supplied thanks.
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:
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.
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 body2. 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.
In the end, we decided on a conditional element that loads a css file after the Loader::element to override any conflicting theme/bootstrap rules like this:
1. In header.php:
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):
Hope that helps someone else.
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; }
Viewing 15 lines of 22 lines. View entire code block.
Hope that helps someone else.
