Determine block size while editing
Permalink Browser Info Environment
Hello, and thanks for a great add-on.
Sometimes i use designer content for creating small blocks that float left beside each other. (See attachment). The reason I use designer content is, that it's super easy for clients to remove or add blocks if they need to. However when you go into edit mode (see the other attachment) the blocks automatically gets 100% width or something like that, and instead of lining up nicely beside each other they form a long list. Sometimes really long.
Is there anyway that I can control the behavior of the blocks in edit mode? Perhaps with the use of the code below somehow (taken from C5 cheat sheet)?
<?php
if ($c->isEditMode()) { ?>
<div style="min-height: 20px;"> </div>
<?php } ?>
It's important for me to create the most simple and enjoyable user experience for my clients while they update their websites.
Thanks. :)
Sometimes i use designer content for creating small blocks that float left beside each other. (See attachment). The reason I use designer content is, that it's super easy for clients to remove or add blocks if they need to. However when you go into edit mode (see the other attachment) the blocks automatically gets 100% width or something like that, and instead of lining up nicely beside each other they form a long list. Sometimes really long.
Is there anyway that I can control the behavior of the blocks in edit mode? Perhaps with the use of the code below somehow (taken from C5 cheat sheet)?
<?php
if ($c->isEditMode()) { ?>
<div style="min-height: 20px;"> </div>
<?php } ?>
It's important for me to create the most simple and enjoyable user experience for my clients while they update their websites.
Thanks. :)
| Type: | Discussion |
|---|---|
| Status: | New |
Thanks for your response. :)
Actually I've come up with a simple solution for controlling the edit mode styling. The same solution you already know. And as you said, the styling will break when moving around or doing other specific changes to the blocks. But anyway I just wan't to tell others how to add simple styling to fix at least some of the problem.
So here we go. A solution for everybody to understand:
In the header element add this:
if($c->isEditMode()) { ?>
<link rel="stylesheet" href="<?=$this->getThemePath()?>/css/editmode.css" type="text/css" />
<?php } ?>
This will load a stylesheet when in edit mode. And only in edit mode, so visitors won't have to load an additional stylesheet.
In this stylesheet you apply styling to the elements you wan't to style. Check your page with Firebug or Chrome and take note of the classes or id's you need to style. Concrete5 will output an id and a class for every block as well as an id and a class for the controller for each area.
And that's it. Now everything looks perfect and will not make any confusion for my client. Except if he decides to move blocks, but i'm rarely teaching my clients that anyway. :)
Actually I've come up with a simple solution for controlling the edit mode styling. The same solution you already know. And as you said, the styling will break when moving around or doing other specific changes to the blocks. But anyway I just wan't to tell others how to add simple styling to fix at least some of the problem.
So here we go. A solution for everybody to understand:
In the header element add this:
if($c->isEditMode()) { ?>
<link rel="stylesheet" href="<?=$this->getThemePath()?>/css/editmode.css" type="text/css" />
<?php } ?>
This will load a stylesheet when in edit mode. And only in edit mode, so visitors won't have to load an additional stylesheet.
In this stylesheet you apply styling to the elements you wan't to style. Check your page with Firebug or Chrome and take note of the classes or id's you need to style. Concrete5 will output an id and a class for every block as well as an id and a class for the controller for each area.
And that's it. Now everything looks perfect and will not make any confusion for my client. Except if he decides to move blocks, but i'm rarely teaching my clients that anyway. :)
I understand what you want to do, and I agree that it is important to make the editing process as simple as possible. Unfortunately, I don't know a good way to do this. I've tried it myself before, but due to the way Concrete5 edit mode works, it is not easy. This has nothing to do with Designer Content specifically -- it's just the way C5 edit mode works.
You can easily set some styles while in edit mode (like the sample code you showed me), but the problem is with the "Add to Main" (or whatever the area is called) button, as well as when you try to "move" the blocks -- these functions don't look right when you change the way the blocks are displayed.
You might want to try experimenting with different style rules, and if you find a solution please let me know -- but it might not be possible at all.
-Jordan