Prevent editable areas changing size in edit mode
Permalink
Hi all,
I'm sure this has been addressed before, but the search terms are so generic I couldn't find it!
I'm currently working on a site that has a large editable area on the home page which will be populated with widgets (custom blocks) linking to various pages through the site.
The blocks are arranged in a grid layout and are all either 50% or 100% width of the editable area, all floating left to create a grid layout.
When the page goes into edit mode though, the blocks stack one on top of another, with the dotted line around them stretching to the full width of the editable area rather than inheriting the width of the block and floating left as per the front-end design.
I've had this before on C5 sites and never solved it - it's not a huge deal but would be one less thing to explain to the client... classic 'why does it look different in edit mode?' question! :-)
I'm sure this has been addressed before, but the search terms are so generic I couldn't find it!
I'm currently working on a site that has a large editable area on the home page which will be populated with widgets (custom blocks) linking to various pages through the site.
The blocks are arranged in a grid layout and are all either 50% or 100% width of the editable area, all floating left to create a grid layout.
When the page goes into edit mode though, the blocks stack one on top of another, with the dotted line around them stretching to the full width of the editable area rather than inheriting the width of the block and floating left as per the front-end design.
I've had this before on C5 sites and never solved it - it's not a huge deal but would be one less thing to explain to the client... classic 'why does it look different in edit mode?' question! :-)
I see what you are saying - but in this particular situation it's the width that is the problem, the client will be free to add as many widgets as they wish, the design will contain and flow them down the page in a grid formation. If they add 2 half width widgets they will float side-by-side, or take 1 row if full width. This all works fine in the theme itself.
So this means I can't use css on the C5 generated highlights to restrict width as it needs to vary. However it would be good if the highlighted areas mirrored the blocks within them.
Possibly I'm getting into C5 feature wishlist territory here rather than something that can be fixed on a theme level.
I've attached a little diagram to illustrate the problem to see if other people have the same thing!
So this means I can't use css on the C5 generated highlights to restrict width as it needs to vary. However it would be good if the highlighted areas mirrored the blocks within them.
Possibly I'm getting into C5 feature wishlist territory here rather than something that can be fixed on a theme level.
I've attached a little diagram to illustrate the problem to see if other people have the same thing!
In all honesty there isn't a whole lot you can do other than go into the core and adjust CSS to suit your needs. We always provide a CMS instruction guide with every site we launch as well as a training period as part of our services. This guide and the training explain how the system works and why it looks the way it does. Then again, we have a very highly modified version of C5 - almost not C5 anymore.
If I were you I'd delve into the core and modify the CSS to reflect your changes based on your needs. The core adds 2px of padding in edit mode and also adds 2px dotted border. That being said, you have 4 extra pixels around every single div, and it's more than .ikely not possible to do what you're trying to do. You can try to modify this in the core CSS (/core/css/ccm.app.css) if you want, but proceed with caution and care, as you might get changes where the benefits do not outweigh the risks to the CMS's layout.
I hope this helps.
If I were you I'd delve into the core and modify the CSS to reflect your changes based on your needs. The core adds 2px of padding in edit mode and also adds 2px dotted border. That being said, you have 4 extra pixels around every single div, and it's more than .ikely not possible to do what you're trying to do. You can try to modify this in the core CSS (/core/css/ccm.app.css) if you want, but proceed with caution and care, as you might get changes where the benefits do not outweigh the risks to the CMS's layout.
I hope this helps.
You're probably right - thanks for your thoughts :-)
Like I say, not a huge problem, just a slight niggle that bugs me in what we find to otherwise be the perfect CMS for most of our work. In fact we actually find that we rarely need to create instruction documents for our clients - they largely pick it up straight away after a quick demo.
Like I say, not a huge problem, just a slight niggle that bugs me in what we find to otherwise be the perfect CMS for most of our work. In fact we actually find that we rarely need to create instruction documents for our clients - they largely pick it up straight away after a quick demo.
While not in edit mode, use something like Firefox's Firebug or Inspect Element to find the total height of the div. Give the area that height in pixels using CSS and then give it the overflow:hidden rule. This keeps the div at a specific height. It also (and this is why I use it) to prevent clients from adding blocks to areas that, if blocks were added, would affect the integrity and design of the site.
I hope this helps.