I'm completely new to Umbraco and I've been lurking around the OurUmbraco website and forums absorving information on this. I understand the notion of of Document Types and Templates and I'm trying to a simple example to test these funcionalities. I'm trying to create a simple website, with a homepage and two text pages. The structure is as follows:
I want to create a Master Template to have all the things that are common to every single page, in this case the Header and Footer. Also the Master Template has the <html> and <body> tags and all the links to css stylesheets so that the child templates only have the html code that matters to each one. This is where I'm having some conceptual difficulties right now. What structure should I have for achieving this?
Document Types: - Homepage - Textpage
Templates: - Master |- Homepage |- Textpage
I guess this is pretty simple. My problem resides on the Master Template. I want to have something like:
<html> <head> <title></title> </head> <body> <!-- HEADER GOES HERE -->
<!-- CONTENT GOES HERE -->
<!-- FOOTER GOES HERE --> </body> </html>
I could insert the html code for the Header and Footer directly in the Master Template right? But I want to have them in separate templates. Can I do this and then refer to those templates in the Master Template? Do I need to have a Document Type for the Header and Footer?
Sorry for the big post, and thanks in advance for your attention.
Yes, if the code for your Header and Footer are the same on both your homepage and textpage, then you would just put them into your master template. No, you don't need to have document types for the header and footer.
Your structure looks correct for your document types and templates.
Here is what your master template will look like:
<%@ Master Language="C#" MasterPageFile="/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"[]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head" runat="server">
<!-- style sheets and such -->
</head>
<body>
<div id="main">
<div id="header">
<!-- probably a macro for your navigation -->
</div>
<div id="body">
<asp:ContentPlaceHolder ID="MasterContentPlaceHolder" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
</asp:content>
Then this is what your homepage / textpage would look something like:
This important thing to note is that in your master template you have: <asp:ContentPlaceHolder ID="MasterContentPlaceHolder" runat="server"></asp:ContentPlaceHolder>
and in the children of your master template (homepage/textpage) you have <asp:Content ContentPlaceHolderID="MasterContentPlaceHolder" runat="server"> </asp:Content>
wrapping around everything, you are putting a placeholder in the master template and then that placeholder is filled in in the children.
I suggest you try out Warren's Creative Website Starter package. This way you can see how things are connected with comments. You can find the package here: http://umbracocws.codeplex.com/ or download it in the developer -> packages -> starter kits section.
Using Master Templates
Hello,
I'm completely new to Umbraco and I've been lurking around the OurUmbraco website and forums absorving information on this. I understand the notion of of Document Types and Templates and I'm trying to a simple example to test these funcionalities. I'm trying to create a simple website, with a homepage and two text pages. The structure is as follows:
I want to create a Master Template to have all the things that are common to every single page, in this case the Header and Footer. Also the Master Template has the <html> and <body> tags and all the links to css stylesheets so that the child templates only have the html code that matters to each one. This is where I'm having some conceptual difficulties right now. What structure should I have for achieving this?
Document Types:
- Homepage
- Textpage
Templates:
- Master
|- Homepage
|- Textpage
I guess this is pretty simple. My problem resides on the Master Template. I want to have something like:
I could insert the html code for the Header and Footer directly in the Master Template right? But I want to have them in separate templates. Can I do this and then refer to those templates in the Master Template? Do I need to have a Document Type for the Header and Footer?
Sorry for the big post, and thanks in advance for your attention.
Yes, if the code for your Header and Footer are the same on both your homepage and textpage, then you would just put them into your master template. No, you don't need to have document types for the header and footer.
Your structure looks correct for your document types and templates.
Here is what your master template will look like:
<%@ Master Language="C#" MasterPageFile="/umbraco/masterpages/default.master" AutoEventWireup="true" %> <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"[]> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="head" runat="server"> <!-- style sheets and such --> </head> <body> <div id="main"> <div id="header"> <!-- probably a macro for your navigation --> </div> <div id="body"> <asp:ContentPlaceHolder ID="MasterContentPlaceHolder" runat="server"></asp:ContentPlaceHolder> </div> <div id="footer"> </div> </div> </body> </html>
</asp:content>
Then this is what your homepage / textpage would look something like:
<%@ Master Language="C#" MasterPageFile="/masterpages/RunwayMaster.master" AutoEventWireup="true" %> <asp:Content ContentPlaceHolderID="MasterContentPlaceHolder" runat="server">
<div id="contentHeader"> <h2><umbraco:Item runat="server" field="pageName"/></h2>
</div> <umbraco:Item runat="server" field="bodyText" /> </asp:Content>
This important thing to note is that in your master template you have: <asp:ContentPlaceHolder ID="MasterContentPlaceHolder" runat="server"></asp:ContentPlaceHolder>
and in the children of your master template (homepage/textpage) you have <asp:Content ContentPlaceHolderID="MasterContentPlaceHolder" runat="server"> </asp:Content>
wrapping around everything, you are putting a placeholder in the master template and then that placeholder is filled in in the children.
Thanks for your quick reply! Still one question: imagine I have the most simple header and footer, so that the html code for those is:
Header: <h1>HEADER!</h1>
Footer: <h1>AND FOOTER!</h1>
Where is that defined? In the Master template? (Yes, header and footer are exactly the same in every page and appear in every page).
Thanks!
Yeah, in the master template, only that body section is coming from other templates.
Thanks! :)
Hello and welcome to Umbraco prl!
I suggest you try out Warren's Creative Website Starter package. This way you can see how things are connected with comments. You can find the package here: http://umbracocws.codeplex.com/ or download it in the developer -> packages -> starter kits section.
Enjoy the journey,
Fredrik K
Hey Fredrik!
I downloaded it and it looks pretty good and helpful for starters. It already helped me with another doubt I was having :)
Cheers!
is working on a reply...