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:
...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...
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...
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.
...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.
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
Of course, there is always a tables-based solution of some sort.
-Steve
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.
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.
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.
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.
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?
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?
> 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
> affect ONLY the block itself?
Sounds like a higher degree of specificity is needed with your CSS selectors.
-Steve
Wouldn't that only be the case if the CSS weren't affecting any change to the editing pane?
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
-Steve
have you tried setting the width to a percentage?
The width of which element?
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.......
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.......
Sorry for replying to a year old topic, but I had the same problem and fixed this way:
header.php:
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; ?>
Viewing 15 lines of 16 lines. View entire code block.
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