Forums

Block next to block, but only in edit mode

Permalink
Hi,

I'm building a block-based website (with that I mean based on the concept of Windows 8).

I want to be able to have the blocks -in edit mode- sit next to each other, without using the Layout feature (because I'm styling the blocks myself in the CSS).

On the first picture in the attachments you see the situation now. On the second one you see how I want it to be.

So basically I want all the blocks have a width of 200px and a float: left; in the CSS. However, I do not want this for all pages, only 1 page-type. Is this possible?

Thanks!

2 Attachments

 
Mainio replied on at Permalink Reply
Mainio
Absolutely, actually you already answered yourself:
"So basically I want all the blocks have a width of 200px and a float: left; in the CSS. However, I do not want this for all pages, only 1 page-type. Is this possible?"

I picked up the answer from that: PAGE TYPE


So, create a new PAGE TYPE (Dashboard => Pages and Themes => Page Types) and add the template file to your theme folder. So, e.g. in your situation I would create a page type "3_col" (handle name) and then I would browse to the theme folder and copy the default.php to 3_col.php and write there what you want. Then you could use this PAGE TYPE on the PAGE where you want to achieve this and the default page type (named Page) on other pages (as you probably wanted).

Or is there something I'm not getting here?


Antti / Mainio
keeskluskens replied on at Permalink Reply
Thanks for your fast answer, but that is not exactly what I meant. I forgot to mention the pictures in the attachment. If you look at that, you will see what I mean. Image 000.png is the situation now, Image 001.png the situation as how I want it to be. So, I only want to modify the style in the Edit mode, not on the front-end layout.
Mainio replied on at Permalink Best Answer Reply
Mainio
Oh, ok sorry for not understanding. So just edit-mode specific customization.

You can do this in the template:
if ($c->isEditMode()) {
   // The page is in edit mode
}
keeskluskens replied on at Permalink Reply
Thanks, that worked! Below the code I used to make it as I wanted:
<?php if ($c->isEditMode()) { ?>
    <style>
        div.ccm-block, div.ccm-add-block {
            width: 200px;
            height: 200px;
            float: left;
            margin-right: 10px;
        }
    </style>
<?php } ?>


Place it somewhere between <head> and </head>
</head>