Forums

Wrapping content around an editable area

Permalink
In my design, I have a sidebar element that I'd like

1. To be editable
2. To have the content wrap around this element.

I am new to Concrete5 and am learning that this may not be possible.

Here is the page:
http://www.webdesignct.net/about-us/...

As you can see, the Sidenote is in its own column. I really want the content to wrap around this element.

For example:
http://www.carolinesmiraclefoundation.org/index.php?option=com_cont...

See how the content wraps around the sidenotes and downloads here. This is a Joomla site.

Can what I am trying to accomplish be done? If not, what are my alternatives?

Thanks.
kreative
 
LucasAnderson replied on at Permalink Reply
LucasAnderson
This isn't a concrete5 issue, it's a site design & CSS issue. You can have content wrapping around your sidebar in any CMS system as long as your theme HTML and CSS styles are setup properly.

I did a quick search on the Google for "wrap content around div" and came up with some links that might help you, but you're going to need to be comfortable editing your theme.

http://stackoverflow.com/questions/380184/wrapping-text-around-a-di...

http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bo...

http://www.knowledgesutra.com/forums/topic/27458-word-wrap-text-in-...

http://www.webdeveloper.com/forum/showthread.php?t=144741...
ralanyo replied on at Permalink Reply
LucasAnderson thank you for the reply. Yes it is easy to wrap text around a div in plain xhtml/css, but to make both editable in conrete5 i am not sure.

Concrete5 uses inline editing, so how can you edit a block within a block? When you go to click on it how will it know which block to edit?

If you are aware of a way to make this happen, please let us know. Thanks
leinteractive replied on at Permalink Reply
leinteractive
That's a good point you make...I'm not sure how C5 would behave when placed in Edit Mode and one Area wraps around another.

I would suggest this:

1.) Try it and see what happens.

2.) If it works. then you're done.

3.) If it doesn't work and you're unable to click on something (or if the whole interface breaks) then go back to your template and add this code to your sidebar element that you want to wrap:

<?php
         if ($c->isEditMode()) { ?>
            ***Code here to remove the Floats on your sidebar so you can edit content***
    <?php
      }
      else {
***Code here to apply normal formatting when not in edit mode*** 
      }
   ?>
jordanlev replied on at Permalink Reply
jordanlev
I don't see an example of what you're talking about on the joomla page you linked to, but I think this will be helpful to you:
http://concrete5.org/marketplace/addons/designer-content...

Instead of wrapping one block around the other, you just make one block that has different fields in it. Of course there is a limitation that it can only have one WYSIWYG field, so that might prevent it from being a solution for your particular situation.
kreative replied on at Permalink Reply
kreative
Sorry, it was only there as an example and I took it down at the end of the day. It's back now:

http://www.carolinesmiraclefoundation.org/index.php?option=com_cont...

It's the Sidenotes and Downloads feature.
leinteractive replied on at Permalink Reply
leinteractive
What he's referring to is basically wrapping text around a DIV where both the text and the DIV would be editable regions on a page.

Your Designer Content add-on would work great...assuming he doesn't need more that one WYSIWYG...which doesn't seem likely.

I assume my suggestion of creating an IF statement in your template to check for EDIT MODE would solve the problem if this kind of thing breaks the layout in Edit Mode...I haven't tried it in practice, so I don't know for sure.
ralanyo replied on at Permalink Reply
Ieinteractive I like your idea best. I haven't tried it but I think it would work.

The only concern is because of the repositioning of the divs when in edit mode, Without having extensive CSS styling, the look of the site will be jumbled up for the user when they are editing. However, this might be a sacrifice one is willing to take to get the functionality.

A work around that we have found is to use a two column layout. first column is a content block with text. second column is another content block with a styled box which can be added to scrapbook and re-used.

below the two column layout you add a content block with the rest of the content.

In essence this creates the look and feel of wrapped text and all blocks are editable.

Of course it is another workaround, but it beats compromising the look for the user while in edit mode which can be confusing and doesn't look professional.
barkingtuna replied on at Permalink Reply 2 Attachments
barkingtuna
I know this seems to have been resolved, but I just wanted to give an example of my HTML and CSS that works for this scenario. I just started laying out a project for a client and have 2 small areas that I needed to be editable that are stacked on top of each other in the upper right corner and I have text/content starting in the upper left corner and then wrapping around the last area on the right if that makes sense. It is quite basic, but as an earlier post points out, you DO sacrifice the "text wrap" look while in edit mode. The content just stays on the left the whole way down. However, when you exit edit mode, the content wraps just find.
.MiddleText {
   width: auto;
   float: left;
}
.endless {
   float: right;
   margin-top:10px;
   width: 55%;
   margin-right: 20px;
   -moz-border-radius:1em;
   -webkit-border-radius: 1em;
   border-radius: 1em;
   border: solid 1px #0A365F;
   min-height:220px;
   -moz-box-shadow: 1px 1px 4px #888888;
Viewing 15 lines of 60 lines. View entire code block.


<div class="MiddleText">
<div class="endless">
<?php  
         $as = new Area('endless');
         $as->display($c);
         ?></div>
<div class="map"><?php  
         $as = new Area('MapArea');
         $as->display($c);
         ?></div>
            <?php  
         $as = new Area('MainContent');
         $as->display($c);
         ?>
<div style="clear:both"></div>
Viewing 15 lines of 18 lines. View entire code block.



Hopefully that helps you visualize it.