Forums (Obsolete)

Member

lida.siroka-gmail - 1/7/2011 5:59:27 PM

Different design and header code for different site sections

Hello,
I have master page with portal design, where i have got logo, navigation etc.

Next I want add first-level page items as sections with custom design.

For example:
Website
- HomePage (first design)
- About (second design)
--- some pages with same design as About
- Products (third design)
--- some pages with same design as Products
...etc.

All page templates are different on this lines:

HomePage (1. template)
<body id="body-body-without-gradient">
<div class="container_12">
<div class="grid_12 header">

About (2. template)
<body id="body-with-gradient">
<div class="container_12">
<div class="grid_12 header" id="header-about">

Products (3. template)
<body id="body-with-gradient">
<div class="container_12">
<div class="grid_12 header" id="header-products">

Because I can't have more master pages and portal design is better for concept of web then aspx templates, i don't know, how can i overwrite upper example parts of code which are in master page (WebPart is not visible on page items).

I found very much examples how do this, but all are very simple (the best one is http://devnet.kentico.com/Knowledge-Base/portalengine/Using-different-graphics-for-different-site-sectio.aspx ) where is only changed logo (by this link I need change classes and id's in master template for different site sections).

I hope I wrote it clearly.
Thanks, Lida

Member

lida.siroka-gmail - 1/8/2011 2:47:14 PM

RE:Different design and header code for different site sections

Solving the problem

If I need to change the header background image for the entire section pages, simply insert into the <body> top div with the same ID on every page (here is used header). Then in each template just in the head section in properties redeclare style, for example:

Common template pages div:
<body id="body-with-gradient">
<div class="container_12">
<div class="grid_12" id="header">

HomePage (1. template)
<style type="text/css">
# header {
background-image: url ('..path../header_homepage.png');
}
</ style>

About (2. template)
<style type="text/css">
# header {
background-image: url ('..path../header_about.png');
}
</ style>


Kentico Support	kentico_jurajo - 1/10/2011 4:37:53 AM RE:Different design and header code for different site sections Hi, Have you considered the visual inheritance? You can change the page template settings or even you can change the inheritance on the document level, so you can have different web site sections. Please see Visual inheritance documentation. Best regards, Juraj Ondrus

Member

lida.siroka-gmail - 1/11/2011 5:04:27 PM

RE:Different design and header code for different site sections

Hello,
yes, I was thinking about visual inheritance, but I can not use it (or I don't found, how modify them). If I links to the article what you post (but as well as other tutorials), all tutorials contains only modify show/hide webparts and a bit of graphic (for example http://devnet.kentico.com/Knowledge-Base/portalengine/Using-different-graphics-for-different-site-sectio.aspx ).

Master page contains common design and webparts (search, navigation etc.). Next site sections contains same controls what master page, but moreover added DIV's to common master page (but master page I don't want modified, so I must have page templates with variables what I post last time).

In Kentico I not found method/option for overwrite existing DIV's in the master page with content from other subordinate page templates by attribute id or class. Therefore I chose last posted solution.

Raw skeleton code why not apply visual inheritance
(in notes are dynamic sections)

<!-- Master page body : begin -->
<body>
	<div class="container_12">		
		<!-- Class header contains different background-image for every section, 
			on MasterPage(=Default) is background-image = none; -->
		<div class="grid_12 header">
			<div class="toputils">
				sitemap link, search
			</div>
			<div class="navigation">
				navigation webpart
			</div>
		</div>
		<div class="clear"></div>
		<!-- Dynamic change this DIV by web section : begin -->
		<div class="topheading">
			<h1>Website name</h1>
			<a href="#"><img src="path/headerLogo.png" /></a>
			<h2>Section name</h2>
		</div>
		<!-- Dynamic change this DIV by web section : end -->
		<!-- Placeholder for page templates : begin -->
		<div class="grid_12">			
			contencts (placeholder) 
		</div>
		<!-- Placeholder for page templates : end -->
		<div class="grid_12">
			<p>Lorem ipsum dolor sit amet consectetuer.</p>
		</div>	
	</div>
</body>
<!-- Master page body : end -->

Best regards, Lida

Kentico Support

kentico_jurajo - 1/19/2011 3:37:07 AM

RE:Different design and header code for different site sections

Hi,

I think I got it. In this case, the only possible way in Kentico CMS is to have separate page templates for each document - they will be almost the same except the things you want to have different.

Or, second option is to use ASPX templates approach and set the layout dynamically as you need to.

Best regards,
Juraj Ondrus