Fluid template in 3.0

[evantro]

Hi there

I am working on a responsive design adapting a demo template with contao 3.0.RC1.

Several blocks are included in a wrapper which could be equivalent to a row.

<div class="grid_24 ">
  <div class="prefix">
    <div class="wrapper FIRST">
      <div class="grid_7 ">… some stuff …</div>
      <div class="grid_15 ">… some stuff …</div>
    </div>
    <div class="wrapper SECOND">
      <div class="grid_22 ">
        <div class="wrapper">
          <div class="grid_10 ">… some stuff …</div>
          <div class="grid_11 ">… some stuff …</div>
        </div>
      </div>
    </div>
  </div>
</div>

I am using 2 articles with a destination to the “main” block to generate the grid_7 and grid_15 blocks in the “wrapper FIRST”.
I wanted to use a custom layout to generate the grid_10 and grid_11 (“wrapper SECOND”), but I can’t as I can only affect the custom layout to one area and I am already using one in the header…

Is there any solution to solve this?
I would like to avoid putting a lot of HTML blocks in the articles, leaving it in the template.

Does anyone would have an example based on grids?

Thanks for your help

[thyon]

My site http://www.thyon.com uses the 960px grids inside articles and you can also look at my client site http://www.willowalks.co.za that uses 1140px, which uses a percentage/px hybrid system. In both cases I don't touch the fe_page template in any way. All the work is done using Articles, ce_wrap, ce_break extensions, which articles are used to create the rows and ce_wrap the column wrappers (if you can't apply the gridxx class directly to the CE.

[evantro]

Hi John

Why do you prefer the use of ce_break instead of a CSS code like:

.xxx:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

The ce_wrap responds perfectly to the problem I submit for an article.

Is there a way (without modifying the original template) to use it in the header?
Let imagine that I have 3 blocs, 2 of them will be fixed over the pages (image, menu for example) and the third will be specific part of the selected page.

<?php echo $this->header; ?> will call the different elements. I thought I could create an article with what I need, include it in an insert tag in a module and place the module in the template of the page, but then I need to embed the article of the actual page and I don't really know how to do it.

Is there a solution, or do you have an other idea ?

Thanks

[thyon]

ce_break creates a visible item to move and manipulate independently of CSS code. Clients love that, instead of fiddling with CSS code.

For the header, I create a special hidden page called "Site Content" on that I create two articles called "Header Article" and "Footer Article". You then add content to each article.

Then you use my other extension called includes to create a module that includes the article. Then you can use these modules in your layout. Te benefit of this round about way, it to give permission to clients to edit these articles, so they may change header and footer content.

[Andreas]

You even can unpublish this page with those articles. Only the articles have to be published.

Without an extension you can build modules type html with this code

{{insert_article::header}}



{{insert_article::footer}}

[thyon]

Yeah, but it's nasty to make a module that's HTML and then type this stuff, when you can rather just use my extension and select the article from a list.

And yes, I always have the Site Content page unpublished and un-navigation as well.