Monitor Reply

Support

Style not working in edit mode

Permalink Browser Info Environment May 06, 2013 at 6:48 AM

First of all, Thanks for a great add-on (Designer Content).

I got a little problem, at least I hope its little.

I created a new block and it works just fine. But when I go in to edit mode the text losses all its styling.

I have a class that is set to a surrounding <p> but when I look at the code with Firebug I see that the containing text is surrounded with two <div>-taggs. So the class style isn't working anymore.

Original code:

<p class="flow-text flow-small">
<a href="http://www.site.com/index.php/page/" target="_self">Page name</a>
</p>

Editor mode code:

<p class="flow-text flow-small"/>
<div id="a249" cid="179" handle="1" class="ccm-area ccm-area-move-enabled">
<script type="text/javascript">
1
$(function() {
var ccm_menuObj83249 = {};
ccm_menuObj83249.type = "BLOCK";
ccm_menuObj83249.arHandle = '1';
ccm_menuObj83249.aID = 249;
ccm_menuObj83249.bID = 83;
ccm_menuObj83249.cID = 179;
ccm_menuObj83249.canWrite =true;
   ccm_menuObj83249.hasEditDialog = true;
ccm_menuObj83249.btName = "Text";
ccm_menuObj83249.width = 700;

Viewing 15 lines of 31 lines. View entire code block.

 
<p class="flow-text flow-small"/>
<div id="a249" cid="179" handle="1" class="ccm-area ccm-area-move-enabled">
<script type="text/javascript">
1
$(function() {
 
var ccm_menuObj83249 = {};
ccm_menuObj83249.type = "BLOCK";
ccm_menuObj83249.arHandle = '1';
ccm_menuObj83249.aID = 249;
ccm_menuObj83249.bID = 83;
ccm_menuObj83249.cID = 179;
ccm_menuObj83249.canWrite =true;
   ccm_menuObj83249.hasEditDialog = true;
ccm_menuObj83249.btName = "Text";
ccm_menuObj83249.width = 700;
ccm_menuObj83249.height = 470;
ccm_menuObj83249.canCopyToScrapbook = true;
   ccm_menuObj83249.canDesign = true;
   ccm_menuObj83249.canEditBlockCustomTemplate = true;
ccm_menuObj83249.canAdmin = true;
ccm_menuObj83249.canDelete = true;
ccm_menuObj83249.deleteMessage = "Do you want to delete this block?";
   ccm_menuObj83249.canArrange = true;
ccm_menuInit(ccm_menuObj83249);
});
</script>
<div id="b83-249" custom-style="" class="ccm-block">Page name</div>
</div>
<script type="text/javascript">
<div id="a249controls" class="ccm-add-block">Add To 1</div>
<p/>

Any ideas how I can get around this?

Thanks
Mr Lindau

Type:	Discussion
Status:	New

jordanlev replied on May 6, 2013 at 10:43 am Permalink Reply

The <div> that gets put around everything in edit mode is the red dotted line that Concrete5 surrounds each block with (the one you can click on to get the popup menu of edit options). If your blocks are getting improperly styled due to this surrounding div, it probably means your CSS is being too general and has styles for those divs. You're going to need to inspect the styles that are applied to the block via your browsers Web Developer tools, and see which CSS selectors are being applied, then alter your CSS to be more specific to just the block's markup (not C5's red dotted line div).

Best of luck!

-Jordan

Designer Content

Support

Style not working in edit mode

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post