Edit Mode problem

Permalink
I'm having an issue with the edit mode styling for this one page.

This is the way the published page looks:http://imgur.com/niTVo.jpg

This is the way the page looks in edit mode:http://imgur.com/1f1GZ.jpg

I want the edit mode page to look like the published page - with each "Painting" item sitting up against the last, not in its own row.

I've tried so many things. Add Layout mode does something odd to the "Painting" items:http://imgur.com/Sgs3K.jpg - and anyway this adds one extra layer of confusion for the client (having to select Add Layout, specify styles, then add to each one)...

I've tried this:

<?php  if ($c->isEditMode()) { ?>
<div style="height: 335px; width: 165px; float: left;">
<?php  } ?>
<?php
$a = new Area('Grid Item 1');
$a->display($c);
?>
<?php  if ($c->isEditMode()) { ?>
</div>
<?php  } ?>


...with many different variations of CSS, positions, spans.

I tried a few other tweaks, such as changing the ccm.ui.css (in /concrete/css/), but it of course affected every editing pane, which isn't what I wanted.

Is there a way to force only the "Paintings" items to sit side by side?

Thanks for any guidance...

stephmars
View Replies:
Shotster replied on at Permalink Reply
Shotster
I'm doing something similar with a one-row three-column layout, and it behaves in edit mode (but I avoid using the "design" features). I initially hard coded 3 areas into the template, and it worked as well, but it wasn't flexible enough.

It's unclear to me if you are using a layout or abandoned it for a different approach. Is this a one-off unique page or something you want to be able to repeat elsewhere on the site?

-Steve
stephmars replied on at Permalink Reply
stephmars
Yep, I abandoned the layout because of how it looked in edit mode, which I can't seem to remedy:http://i.imgur.com/Sgs3K.jpg

...and also because of the extra step that would be necessary on the client's behalf, to add additional rows.

I was hoping that there would be a tidier solution to making the "Painting" items sit float:left (or the equivalent of float:left) in the editing pane.
Shotster replied on at Permalink Reply
Shotster
What kind of blocks are the paintings - just image blocks? And you want the client to be able to add as many such blocks as they want on a given page and have them appear in a "grid" both in and out of edit mode? That's not something I've tried, but it should be possible with styling. I'd try overriding the edit mode styles using a more specific CSS selector or the "!important" property.

Of course, there is always a tables-based solution of some sort.

-Steve
stephmars replied on at Permalink Reply
stephmars
The block for the paintings is:

Field 1: Image from library
Field 2: Description of painting
Field 3: Absolute URL of where whole item area will link

Correct about client being able to add as many such blocks as they want, appearing in a grid both out and in edit mode.

I'm still trying a few variations of tweaking the CSS and CSS for edit mode. Will post back here if I succeed, but sadly I've been tackling this on and off for weeks with no success.
jordanlev replied on at Permalink Reply
jordanlev
Seems like if it's working in preview mode but not edit mode, then it must be the dotted red line div around each block that's causing them to go to a new line.
Do you have Firebug installed (a Firefox plugin)? If so, can you play around with the styles of that dotted red line div when in edit mode? Perhaps it has "display: block" set or something like that? If you identify what the offending CSS rule is, I think you can just override it in your theme's stylesheet. Or you could override it inline in the template itself.
stephmars replied on at Permalink Reply
stephmars
Yes, I tried playing around with the styles via Firebug, but couldn't access those specific styles through the editing pane for some reason.

I used the code I posted in the original post (the isEditMode code) to set the editing style to display:block, float:left, etc., but nothing worked.

Right now I'm trying to do a custom css file for the block itself with !important, but it's not staying exclusive to the block's css, it's affecting all pages.

Does anyone know how to create css that will affect ONLY the block itself?
Shotster replied on at Permalink Reply
Shotster
> Does anyone know how to create css that will
> affect ONLY the block itself?

Sounds like a higher degree of specificity is needed with your CSS selectors.

-Steve
stephmars replied on at Permalink Reply
stephmars
Wouldn't that only be the case if the CSS weren't affecting any change to the editing pane?
Shotster replied on at Permalink Reply
Shotster
If I understand you correctly, the styling is affecting more than you want it to affect. You must therefore be more specific and target only the elements you want to affect. It's hard to provide any more detail without actually seeing the page itself - the HTML and CSS. If the page is publicly accessible, post a link, and someone might be able to suggest a solution.

-Steve
Mnkras replied on at Permalink Reply
Mnkras
have you tried setting the width to a percentage?
stephmars replied on at Permalink Reply
stephmars
The width of which element?
Steevb replied on at Permalink Reply
Steevb
Hi,

Did you sort out your problem?

I can see a couple of ways around the issue.

Don't use tables, use CSS.
Add images in a content block one after another(with a non-breaking space).
Try the builtin slideshow with links.
Place your content within an HTML block.
Try one of the free gallery add-ons.

There are other ways also.......
bagonyi replied on at Permalink Reply
Sorry for replying to a year old topic, but I had the same problem and fixed this way:

header.php:

<head>
...
<?php Loader::element('header_required'); ?>
    <?php if ($c->isEditMode()): ?>
        <style type="text/css">
            div.ccm-block-arrange, div.ccm-block {
                /* border set to 0, use outline instead */
                border: 0;
                margin: 0 0 4px;
                outline: 2px dotted #FF0000;
                overflow: hidden;
                padding: 0;
            }
        </style>
    <?php endif; ?>