How to achieve this layout?


As you can see on the images below I want 3 different look of 3 different pages of the same website. How could I do that? Do I need to use 3 different layouts?

Even with different layouts I have no idea how to achieve this, because as you can see in some places half of the background of $content is full width while the other half of it is fixed width.

Any ideas?

Page 1

Page 2

Page 3

Yes, I’d use three different layout files. The rest is just a matter of using CSS.

Within your $content you’d obviously have to use <div>'s which get styled by CSS rules. This way you can easily achieve full width/fixed width.

A solution would be different main pages and the corresponding contents. (see the default views/layout/main.php, for the different 3 layouts you will have main0.php, main1.php, main2.php) To render full-width or fixed-width layouts will depend on css+layout mixing. Since every layout is rendered via content, it’s absolutely easy to fine-tune your content via controller. Since the controller can have a particular content and layout (even at action level), you can have different layouts (completely different pages) for every controller and action in controller.

In practice…

There is declared in protected/components/Controller.php:

public $layout=’//layouts/default’;

This is the flat, default layout. To discover the things, go to /views/layouts/main.php Here you will see

<?php $this->beginContent(’//layouts/main’); ?> - and the finishing tag, <?php $this->endContent(); ?>. This will lead us to main.php, the skeleton of your web page. These being understood, go to the next step: create files content1.php and main1.php. The content1.php file will link the main1.php via <?php $this->beginContent(’//layouts/main1’); ?>. Then, in your controller:

a. in the init() function use $this->layout=’//layouts/content1’ to use content1 by default in the controller, or

b. in a particular function actionSomething() use $this->layout=’//layouts/content1’ to have content1 as layout when the action is “something

This way you can have as many layouts you want. Just keep track when you change something in the css. (BTW, for all these you can have one single css)