Forums (Obsolete)

Member

dcollins-marketwired - 1/23/2014 11:12:37 AM

making a new page template - how much is point & click?

I'm creating a new page with a new template. Looking through the docs and tutorials, while they are pretty clear, it is still difficult to figure out exactly what component one is looking at - and where one selects components versus customizing one's own snippets - so I'm just asking for some guidance.

I'm adding a submeu item 'Events' under my main menu item 'Resources'. So far, I've created a new page / new template with no trouble It even shows up in the menu bar like it should. The page has all the headers and menus and everything around it, so I'm looking at creating just the content template itself. I'm trying to figure out how far I get with using off-the-shelf Kentico functionality and how much HTML snippetry I write.

The Events content always has three large rows, each a few hundred 300px high. Let's just deal with that first row. It always has this background image that fills the area. The content is a smaller gif that floats in the centre of the background. (i.e. only the smaller gif needs to be editable (i.e. switchable)). There's an area next to it that will take some text and links and stuff, so it will have to be free-styled.

See attached wireframe (it even has a legend to tell you what's important).

Do I need to make a new template that has three rows?
Where (in what dialogue) do I specify the uneditable background image? As hard-coded HTML, or just a CSS class?
Do I add a widget inside that template that has an editable image?

User image


Member	dcollins-marketwired - 1/23/2014 11:19:16 AM RE:making a new page template - how much is point & click? Shoot, I forgot to mention: What I've got so far in my content area is the following Kentico components: green box: [v /Resources/Events - page template: ad-hoc ...] orange box: [v zoneMain +] orange box: [v zoneCenter +]

Kentico Legend

Brenden Kehren - 1/23/2014 1:31:10 PM

RE:making a new page template - how much is point & click?

Have you looked in the documentation regarding templates, layouts, webpart zones, etc? If not, here is what you will want to do.

First setup is your layout. I suggest using shared layouts if you plan to have the same structure across your website. Even if you have a few different layouts (full page, 2 columns, 3 columns, etc) I'd use shared layouts, much easier to manage. In your layout you have HTML and webpart zones. So in your case it would be your three sections with three webpart zones.

<div>
  <div class="full-green-bg">
    <cms:CMSWebPartZone ZoneID="zSec1" runat="server" />
  </div>
  <div>
    <cms:CMSWebPartZone ZoneID="zSec2" runat="server" />
  </div>
  <div>
    <cms:CMSWebPartZone ZoneID="zSec3" runat="server" />
  </div>
</div>

From there you create a template and select the layout you just created. In the design tab on the template is where you add your webparts. These are tied to the template. So if your template is used on many pages and you make a change to the template, all those pages will see the same change.

Does this make sense?

Good luck
Brenden

Member

dcollins-marketwired - 1/24/2014 8:37:07 AM

RE:making a new page template - how much is point & click?

Thanks. As I poke through existing sites and try things, it's making more sense.

My corp has added a lot of custom parts, but ideally those will be the exceptions rather than the rule.

I understand now where the content lives for things like repeaters (they're new doctypes that are children of the page, run through a simple transform (i.e. template) that takes the data and formats it in HTML. Doctypes are essentially forms of fields to input content).

I understand that - all else being equal - it's "better" to use a webpart than a widget, in the sense that a webpart only exposes to the author that they need to update content, whereas a widget can give them a little too much freedom.

I will look into templates and zones in regards to making a reusable event page. I may be back...

Kentico Legend

Brenden Kehren - 1/24/2014 10:05:31 AM

RE:making a new page template - how much is point & click?

dcollins-marketwired wrote: I understand that - all else being equal - it's "better" to use a webpart than a widget, in the sense that a webpart only exposes to the author that they need to update content, whereas a widget can give them a little too much freedom.

You have this backwards. Widgets are extensions of webparts that offer LESS options that the webpart has. The widget is more of a personalization item that users can select what content they want to display on a page without needing a lot or any configuration. You predefine the configuration when you set the widget up.

Member

dcollins-marketwired - 1/24/2014 11:16:42 AM

RE:making a new page template - how much is point & click?

FroggEye wrote: You have this backwards. Widgets are extensions of webparts that offer LESS options that the webpart has.

Hm. OK, I'll rethink this. This is as it was explained to me by our Kentico expert. Maybe I misunderstood.

FroggEye wrote: Have you looked in the documentation regarding templates, layouts, webpart zones, etc? If not, here is what you will want to do.

First setup is your layout. I suggest using shared layouts if you plan to have the same structure across your website. Even if you have a few different layouts (full page, 2 columns, 3 columns, etc) I'd use shared layouts, much easier to manage. In your layout you have HTML and webpart zones. So in your case it would be your three sections with three webpart zones.
<div>
  <div class="full-green-bg">
    <cms:CMSWebPartZone ZoneID="zSec1" runat="server" />
  </div>
  <div>
    <cms:CMSWebPartZone ZoneID="zSec2" runat="server" />
  </div>
  <div>
    <cms:CMSWebPartZone ZoneID="zSec3" runat="server" />
  </div>
</div>
From there you create a template and select the layout you just created. In the design tab on the template is where you add your webparts. These are tied to the template. So if your template is used on many pages and you make a change to the template, all those pages will see the same change.

Does this make sense?

Good luck
Brenden

It mostly makes sense. It's the details that elude me.

I've made three zones, and am concentrating on the first one. Easy enough to put an editable image in there, but I want that section to have a background image - and it should have 0 margin, i.e. it should bleed right to left/right and top/bottom edges.
What I cannot seem to do is insert a class name so that I can target it with CSS.

I've tried adding a zone title, a container title, a container CSS class, container content, and an HTML envelope, none of which add a class to the zone. (You can see my 3 zones below, which K has called main-inner.)

So, how can I
a] put a background image in zonesec1, and
b] target CSS to each zone individually?

<div class="main" role="main">
	<div class="wrap main-inner">
    		<div class="box box_shadow"><div class="jaz">
			<img id="plc_lt_zoneMaster_pageplaceholder_pageplaceholder_lt_zoneSec1_EditableImage1_imgImage" src="/MarketWire/media/4.0_Resources/test_event_fg.png" alt="" style="border-width:0px;">
		</div>
	</div>
	<div class="wrap main-inner">
	</div>
	<div class="wrap main-inner">
	</div>
</div>

Member

Jerreck - 1/24/2014 12:04:33 PM

RE:making a new page template - how much is point & click?

I'm pretty sure that Kentico's Web Part Zones are very similar to an ASP.NET webpartzone server control. You add a CSS class to those just like any other ASP.NET server control, with the CssClass="" property like so:

<asp:WebPartZone ZoneID="ZoneID" CssClass="className" runat="server" />

As a personal preference, I usually wrap my controls inside div tags and assign classes to the divs, rather than mess with the server controls. I do this because it simplifies troubleshooting for me. If something is wrong with the styles/markup of my page, I know I ONLY have to worry about the markup and styles that I've coded in the layout of a page template and don't have to go hunting through Web Part Zone properties to see where I've gone wrong.

Member

dcollins-marketwired - 1/24/2014 12:51:42 PM

RE:making a new page template - how much is point & click?

Jerreck wrote:
<asp:WebPartZone ZoneID="ZoneID" CssClass="className" runat="server" />
As a personal preference, I usually wrap my controls inside div tags and assign classes to the divs, rather than mess with the server controls.

You mean like this?

<div class="className">
   <asp:WebPartZone ZoneID="ZoneID" runat="server" />
</div>

Member

Jerreck - 1/24/2014 1:07:24 PM

RE:making a new page template - how much is point & click?

Sort of. The code I posted was how you would do it if it were just an ASPX page. Since you're using the portal engine, go ahead and use the cms:CMSWebPartZone and not the asp:WebPartZone control like this:


<cms:CMSWebPartZone ZoneID="ZoneID" CssClass="className" runat="server" />

That is one way to apply a class to a web part zone.

However, you did wrap the server control in a div correctly like I was talking about. Keep in mind that's just a personal preference and you don't have to do it that way.


Member	dcollins-marketwired - 1/24/2014 1:20:56 PM RE:making a new page template - how much is point & click? OK, I'm gettin' it now. The layout is where all the div and CSS magic happens. Now I'm on more familiar territory. Thanks.