Forums (Obsolete)

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?

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>

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

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.

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.

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

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

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.


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

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.

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.

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.