Portal Engine Questions on portal engine and web parts.
Version 7.x > Portal Engine > layouts, webparts and zones View modes: 
User avatar
Member
Member
dcollins-marketwired - 1/31/2014 4:20:32 PM
   
layouts, webparts and zones
I've inherited a site that has some primitive templates. This one has a large webpart filled with a giant block of HTML that uses tables to define structure. It really should be separate webparts, so that each section can be edited independently.

Before/after diagram:
User image

I trip over this a lot. I'm not positive how to combine zones and divs and parts so that I have the editable sections as I need them to be.

Here is what my layout looks like, but it does not produce what I want:
<!-- Container -->
<div class="productMulticolLeftMenu">
<!-- Left zone -->
<div class="zoneLeft" style="float: left;">
<cc1:CMSWebPartZone ID="zoneLeft" runat="server" />
</div>

<!-- Mainzone -->
<div class="zoneContent" style="float: left;">
<!-- Centrezone -->
<div class="zoneContent" style="float: left;">
<cc1:CMSWebPartZone ID="zoneCentre" runat="server" />
</div>
<!-- Right zone -->
<div class="zoneContent" style="float: right;">
<cc1:CMSWebPartZone ID="zoneRight" runat="server" />
</div>
<div class="zoneContent">
<cc1:CMSWebPartZone ID="zoneBottom" runat="server" />
</div>
</div>
<div style="clear: both;"></div>
</div>


This is what I end up with:
1] zoneBottom (the long one) ends up on top. (I tried an additional <div style="clear: both;"></div> before the close of mainZone, but to no avail.)
2] zoneLeft and zoneRight have red outlines a [+] add webparts but zoneBottom and zoneCentre do not.
User image

Can someone point me in the right direction?

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 1/31/2014 11:24:18 PM
   
RE:layouts, webparts and zones
Here is a pretty simple layout:
<div style="float: left; background-color: green; width: 30%;">
left column
</div>
<div style="float: right; background-color: red; width: 70%;">
<div>
top right column
</div>
<div style="float: left; background-color: blue; width: 60%;">
top left
</div>
<div style="float: right;background-color: yellow; width: 40%;">
top right
</div>
<div style="clear: both;"></div>
<div>
left bottom
</div>
</div>
<div style="clear: both;"></div>

User avatar
Member
Member
kentico_davidb2 - 2/3/2014 1:49:39 AM
   
RE:layouts, webparts and zones
There are multiple solutions to this, one would be the one described by FroggEye, another:
<div style="overflow: hidden; width: 100%;">

<div style="float: left; background-color: green; width: 30%;">
<cms:CMSWebPartZone ZoneID="zoneLeft" runat="server" />
</div>

<div style="float: right; background-color: red; width: 70%;">

<div style="overflow: hidden; width: 100%;">

<div style="float: left; background-color: blue; width: 60%;">
<cms:CMSWebPartZone ZoneID="zoneCenter" runat="server" />
</div>

<div style="float: right; background-color: yellow; width: 40%;">
<cms:CMSWebPartZone ZoneID="zoneRight" runat="server" />
</div>

</div>

<div>
<cms:CMSWebPartZone ZoneID="zoneBottom" runat="server" />
</div>

</div>

</div>

Please have a look at: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

User avatar
Member
Member
dcollins-marketwired - 2/3/2014 8:15:31 AM
   
RE:layouts, webparts and zones
Thanks guys. Clearly, I'm was making this more complicated than it needed to be.

What I'm seeing from your suggestions is that my problem was entirely HTML-related, and had nothing to do with web parts and zones.

That clarifies things tremendously. (In retrospect, it is obvious - but until you see it, you don't see it.) I had been thinking that the nature of the zones themselves played some part in how they were placed on the page.

User avatar
Member
Member
dcollins-marketwired - 2/3/2014 9:46:59 AM
   
RE:layouts, webparts and zones
OK, just as clearly, I am still lost about a couple of major things.

The changes I am making to my page template are not being reflected on my site. Almost certianly it is because my CMSManager is not pointing at the correct template.

I do not understand how page template layouts in the Site Manager and Page layouts in CMSManager or shared versus custom layouts are created, copied or implemented.

In CMS Manager > Products > Powered by... > Design there is a ...er... green box entitled /Products/Powered by Sysomos - Newer - page template: MW Three Column, like this:

User image

Its properties show a Template name of MW Three Column and a code name of MW_ThreeColumn:

User image

Under Page Layout, it has this:

User image

In Site Manager > Page Templates > Marketwire there is a Page Template called MW Three Column whose layout is pointed to Use Shared layout : MW Three Column. (So, it's pointed at itself???):

User image

And finally, Product > multi-column view 3 columns is where I was trying to make my changes:

User image

I don't get which of these is the referencer and which is the referencee, and if there is a place where the finally buck stops, and I see actual layout code.

User avatar
Member
Member
dcollins-marketwired - 2/3/2014 10:37:41 AM
   
RE:layouts, webparts and zones
As far as I can determine, I am not actually using any Templates. I am, in fact, using the plain ol page layout itself (screen grab 3, above):

User image

So, I can got my page working (yay!), but I haven't much much progress toward the next goal, which is to make this same 3-column template usable by multiple pages.

Maybe that'll be for another day... :P

User avatar
Member
Member
kentico_davidb2 - 2/4/2014 1:26:59 AM
   
RE:layouts, webparts and zones
I would strongly recommend having a look at this section (http://devnet.kentico.com/docs/5_5R2/devguide/portal_engine_overview.htm) of our devguide for version 5.5R2 and read all pages within this section. There is a clear and complete explanation of page templates and layouts as in Kentico CMS, they might represent something else than you are used to.

Dave

User avatar
Member
Member
dcollins-marketwired - 2/4/2014 11:40:17 AM
   
RE:layouts, webparts and zones
kentico_davidb2 wrote: I would strongly recommend having a look at this section (http://devnet.kentico.com/docs/5_5R2/devguide/portal_engine_overview.htm) of our devguide for version 5.5R2 and read all pages within this section. There is a clear and complete explanation of page templates and layouts as in Kentico CMS, they might represent something else than you are used to.

Dave

Thanks. I am using v7, so I'll look for an equivalent page in the v7 docs. But failing that, I'll assume the v5.5 docs are the next best source.

User avatar
Member
Member
kentico_davidb2 - 2/5/2014 1:28:27 AM
   
RE:layouts, webparts and zones
Well, I was confused because all your screenshots posted here were from version 5.5R2..

Please find the v7 link below:
http://devnet.kentico.com/docs/devguide/portal_engine_overview.htm

User avatar
Member
Member
dcollins-marketwired - 2/5/2014 8:33:41 AM
   
RE:layouts, webparts and zones
kentico_davidb2 wrote: Well, I was confused because all your screenshots posted here were from version 5.5R2..

Please find the v7 link below:
http://devnet.kentico.com/docs/devguide/portal_engine_overview.htm

Oh! :sheepish grin: It appears that, though I installed v7.0 locally and am using v7.0 on my new project, this particular project is in v5.5 and I didn't even realize it.

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 2/4/2014 1:37:45 PM
   
RE:layouts, webparts and zones
Based on your screenshots it appears that all your templates aren't using shared layouts. So what this means is every template has its own layout, which it a maintenance and management nightmare.

Typically what you do is setup your layouts (2 col 30/70, 3 col 30/30/30, full page, 2 col 60/40, etc.) Then in your page template you simply select that layout. Then you add webparts to the zones. Webparts stick with your template and not the layout.

User avatar
Member
Member
dcollins-marketwired - 2/5/2014 8:39:18 AM
   
RE:layouts, webparts and zones
FroggEye wrote: Based on your screenshots it appears that all your templates aren't using shared layouts. So what this means is every template has its own layout, which it a maintenance and management nightmare.

Typically what you do is setup your layouts (2 col 30/70, 3 col 30/30/30, full page, 2 col 60/40, etc.) Then in your page template you simply select that layout. Then you add webparts to the zones. Webparts stick with your template and not the layout.

Yes, I see there's a bunch of 2 and 3 column templates made up, and it appears they're not being consistently used. But now I see the plan.

This helps, describing to me what typically is done. I can get a better idea of what's best practice, what is being done, and what is legacy. Thanks .This is the kind of knowledge that documentation and examples don't really cover well.