Custom block (layout?) containing other blocks in Concrete5

Question

I make a number of websites for clients who are... less than tech savvy... and need an easy means of editing their website after I've made it for them. For this purpose I have been coding a lot of my sites in Concrete5.

Recently I received a project to translate http://www.windowfashionsonwheels.com to Concrete5. A quick glance at the source-code reveals that it's nothing but tables inside of tables... It's pretty hideous. I've been steadily working to rebuild the exact appearance and structure using minimal HTML and CSS, but I ran into one small bump.

On the main page if you scroll down just slightly there is a light-grey box along the left side of the main body containing four different blocks of content. This section has a different background color, rounded corners, and even gradient borders just to make my job a little bit harder.

I can mostly emulate the appearance of this box by creating a single Content block in Concrete5 and applying a custom Design to it (background color, CSS3 rounded corners, and CSS3 image borders). However since this relies heavily on CSS3 it doesn't display properly in older browsers or Internet Explorer, plus it only allows me a single Content block to work with (not ideal if I wanted to have text AND a slideshow or some other block within the same light-grey square)

I could easily add this light-grey square to the theme itself, however it doesn't appear on all pages. It also seems like too much work to create two different Page Types, one for pages with this grey box and another for pages without.

I could also create a custom template for the Content block which generates these <div> objects, allowing me to place them in arbitrary locations on any page which I desire - however this would only allow the light-grey box to contain a single Content block. It would not allow me to have, say, a Content block and a Slideshow block in the same box.

I could also add an HTML block, but I wish to assume that my client has no knowledge of HTML and I want her to be able to edit her own page.

The ideal solution would be to create a block which generates this new background and borders (using multiple <div> objects to create rounded corners and such the old fashioned way) then allow placement of blocks within this block so I could have any sort of content I want. However as far as I am aware, Concrete5 doesn't allow blocks inside of blocks. It does, however, allow blocks inside of layouts - but as far as I know layouts are intended for multi-column pages, not specialized borders.

If anyone has experience with Concrete5 and has a solution to my problem, please help.

Answer 1

For you specific situation here, it really sounds like creating a new page type is the ideal solution. You say "seems like too much work" but creating a page type is the easiest of all options (way easier than creating your own block in most cases, although see below for more details on that). All you have to do is copy your current template file, rename it, add a your new HTML for that grey box, and put this "Area" code inside your new grey box HTML (where the content currently is):

<?php
$a = new Area('Grey Sidebar');
$a->display($c);
?>

Then go to Dashboard -> Pages and Themes, click the "Inspect" button next to your current theme, and you'll see a checkbox next to that new page type -- click the "Install" button (or whatever it's called, I can't remember, but it's obvious when you see it).

Now, looking at the site you linked to it also seems that the content inside that grey box is fairly "designed" and sticks to a consistent format (title, thumbnail, paragraph). If you want to ensure that this format is maintained while still making it really easy for non-technical users to edit the content, I've created a block generator addon for this exact situation: http://concrete5.org/marketplace/addons/designer-content

If I were building this site, I would combine both of those techniques (a page type for the surrounding grey box HTML, and a custom block made with Designer Content for each interior block). But perhaps in your situation you actually don't want the contents of the grey box to always look the same (like they do now on the site you linked to) -- in that case just make the page type with the grey box and do your best to "isolate" the interior contents from that style so whatever blocks the user adds won't accidentally interfere with the grey box surroundings (basically make sure there's a big <div> surrounding the "Area" code and that you set explicit widths or whatever you need to in the surrounding HTML/CSS).