3 column css layout & right editable column

(Adamskee) #1

I have created a 3 column css layout and with the menu in the left, content in the centre and am looking to create an area in the right hand column that the user can add small amounts of content and images (sort of an area for advertising and updates).


Can anyone reccommend a way to do this?



It has been suggested that it could be done through an iframe displaying a page within the CMS that has a design area locked at 150px(or whatever the witdh of the sidebar is). Iframes have never been favoured way of doing this though.



Another way i have thought of is using a bit of AJAX/http request and load the div tag with content from another CMS page…



Any other suggestions?

(Avi Miller) #2

I do it by (ab)using Nested Content, a Thesaurus, Content Tagging and the Related Asset Listing:


Create a Thesaurus and then create a single Thesaurus term called "Right"



Create a Dummy asset (of any type) and Tag it with that Thesaurus term.



Create a Related Asset Listing that has a Static Root Node of your site, a Dynamic Root node of the current asset and a Static Related Node of the Dummy Asset. Set the Related Asset Listing to display the content of the listed assets by using the %asset_contents% keyword in the Format Bodycopy.



In your design, create a nested content design area for your right-hand column. Point this nested content design area at a newly created Related Asset Listing.



Now, to get content to show up in the right hand column, just create it as a child of the page in which you want it to show up and tag it with the "Right" term from the thesaurus. :slight_smile:



You can lather, rince and repeat to create multiple areas on the right-hand side.

(Peter Bui) #3

yes i'm going to be enjoying to see it lather up.

(Eric Blanchi) #4

We are doing it in a very simple way and therefore may not be applicable for these specific needs:


class sidebar - float right, width 160px;

class contentwithsidebar - right-margin 170px;



Apply the above classes to content areas (WYSIWYG, nested content etc…) as needed.



Disadvantage: the sidebar area needs to be before the contentwithsidebar area. For small content it's ok, with nested content it's not a problem at all (as the nested content could contain a lot of content).



Maybe I'm missing something.

(Adamskee) #5

[quote]We are doing it in a very simple way and therefore may not be applicable for these specific needs:


class sidebar - float right, width 160px;

class contentwithsidebar - right-margin 170px;



Apply the above classes to content areas (WYSIWYG, nested content etc…) as needed.



Disadvantage: the sidebar area needs to be before the contentwithsidebar area. For small content it’s ok, with nested content it’s not a problem at all (as the nested content could contain a lot of content).



Maybe I’m missing something.

[right][post=“12069”]<{POST_SNAPBACK}>[/post][/right][/quote]





thanks wombat, i will give that a go, seems a bit easier then Avi’s 5 step system to right column happiness…

(Avi Miller) #6

[quote]thanks wombat, i will give that a go, seems a bit easier then Avi’s 5 step system to right column happiness…
[right][post=“12071”]<{POST_SNAPBACK}>[/post][/right][/quote]



True. :slight_smile: You do have to teach your editors to apply the right style. It also means (because you’re using IDs) that you can only have a single DIV float right. And, if you do make a right floating div, you must remember to make the next content divs narrower.



… much simpler… :stuck_out_tongue:

(Rhulse) #7

[quote]thanks wombat, i will give that a go, seems a bit easier then Avi’s 5 step system to right column happiness…
[right][post=“12071”]<{POST_SNAPBACK}>[/post][/right][/quote]



The advantage of Avi’s system is that you add any asset under any other asset and have it appear on the right hand side of the page. For static content, or content which appears in lots of places but is the same, this is better than having it as the final div in the content for each of those assets.



But if the right content is ONLY used on a single asset then the two div method would be fine.



With Avi’s system, once it is set up, you can always allow you editors access to the asset anyway by using a consistent URL for the right content asset, which is appended to the current asset.



My 0.02c



R.

(Eric Blanchi) #8

We're using classes to allow more flexibility and therefore we could have:

     content area - class: sidebar
    content area - class: contentwithsidebar
    content area - class: sidebar
    content area - class: contentwithsidebar

although most of the time, our users want a single picture to the right of a block of text. The 'contentwithsidebar' class is used only if they don't want the text wrapping around the image.



Different ways, different uses…

(Avi Miller) #9

Very true. :slight_smile:

(Daniel Kolvik) #10

I’m using a similar solution on this site: http://www.mjolkframjandet.se/mjolkspegeln/senaste_numre


the main area are classed as: content

and if the editor want to us the right hand side box he/she only has to create a new div and class it as box1,box2… and so on if they want more boxes under the first one.



if a right hand side box div is to be used on more than one page it only has to be cloned.



the only problem is that the wysiwyg editor is following those divs classes as when editing the boxes; if I’ve styled the <p> tag in the content div, that style will be applied to the box1 div as well.



This question has been discussed quite many times before: http://www.mjolkframjandet.se/mjolkspegeln/senaste_numre and http://www.mjolkframjandet.se/mjolkspegeln/senaste_numre



It seems like there are a few ideas about how to solve this.