Creating More Pages Using the Master - Part 2

    Creating a Contact Us Page

    We're now going to make a simple page where we'll just put our contact details. For added functionality, you might want to look at replacing this with a fully fledged contact us form.

    Some potential solutions:

    Creating a Simple Content Only Contact Us Page

    For now, let's create a simple content-only contact us page - a page where the user can provide a title and some rich text. This is very similar to our homepage document type at the moment but we're assuming that you'll go and develop this into something very specific (e.g. adding the featured article and other article content blocks).

    Go to Settings > Document Types (hover) > ... > + Create > Document Type . Let's create one called "Simple Content Page".

    Firstly let's select an Icon - type the word "Content" into the filter and select the document icon. In description type "A simple content page". Click Save.

    Now click on the Settings > Templates (hover) > ... and then Reload to show your new Simple Content Page template that was created automatically with the Document Type. Click on your Simple Content Page template and then change the Master template and select the value "Master" - this will mean that we'll get the header and footer from the master just as we do in the Homepage template.

    Click Save then load the Template tab you should see the portion of Razor code has updated to say Layout ="Master.cshtml" if it hasn't updated itself click on a different node and then back again to reload it. Now add the following HTML to the template and click Save.

    <!-- Main -->
    <section id="main" class="wrapper">
        <div class="container">
    
            <header class="major special">
                <h2>Generic</h2>
                <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
            </header>
    
            <a href="#" class="image fit"><img src="images/pic11.jpg" alt="" /></a>
            <p>Vis accumsan feugiat adipiscing nisl amet adipiscing accumsan blandit accumsan sapien blandit ac amet faucibus aliquet placerat commodo. Interdum ante aliquet commodo accumsan vis phasellus adipiscing. Ornare a in lacinia. Vestibulum accumsan ac metus massa tempor. Accumsan in lacinia ornare massa amet. Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan.</p>
            <p>Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan commodo odio cubilia ac eu interdum placerat placerat arcu commodo lobortis adipiscing semper ornare pellentesque.</p>
            <p>Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet blandit adipiscing arcu ante.</p>
    
        </div>
    </section>
    

    Now let's create a page using our new Document Type and Template - go to Content > Homepage (hover) > ... > Create. Oh but we can't! We'll see an error like that below:

    Umbraco Content Error - No Document Types Available

    This is by design - Umbraco limits the editors to only being able to create content in the places that you, the developer, allow. This will stop a user from breaking a site design (or an entire site) when they create a new homepage under the news container node later! Unfortunately, this functionality also confuses a lot of new Umbracians - hence why we show you this error here.

    Go to Settings > Document Types > Homepage on the Permissions screen you'll see a list of Allowed child node types (be careful not to confuse this with the Permissions screen's Allowed templates - we'll cover that later). We need to allow users to be able to create child nodes below our Homepage of type "Simple Content Page". Click Add child and select the Simple Content Page and hit Save.

    Homepage - Allowed Child Nodetypes

    So there is the confusing bit - first we create the Simple Content Page Document Type but after we then have to allow it to be created under the homepage document type - e.g. we create our new Document Type but then have to update the Homepage settings to be able to use it.

    Now go back Content > Homepage (hover) > ... > Create now we have the Simple Content Page! Select this and enter a name (text field at the top) - enter the name "Contact Us". You can see that we only have a Properties tab here - no data properties yet. This is different to the document type for the homepage as we've not yet added any tabs nor data properties (e.g. no bodyText or pageTitle fields to enter content!). Click Save and Publish.

    Creating Our Contact Us Page

    Our Content tree will now reload and there will be a Contact Us page under the homepage. This is the recommended structure for most sites - your primary level 1 pages will sit under the Homepage. Go look at this page - if you look at the Info tab you can see a Links section, click the /contact-us/ link there.

    Contact Us Page info tab

    You might find an unstyled page again. This is because the template designers have assumed that your site will be a flat structure - e.g. all pages sitting at the same level so the browser can't find the CSS or JavaScript at the page level below the homepage. You need to update the Master template to add a leading slash on the JavaScript and CSS source lines.

    e.g. change the lines in the Master Template:

    CSS

    From: <link rel="stylesheet" href="assets/css/main.css" />

    To: <link rel="stylesheet" href="/assets/css/main.css" />

    JavaScript

    From:

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/skel.min.js"></script>
    <script src="assets/js/util.js"></script>
    <script src="assets/js/main.js"></script>
    

    To:

    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/skel.min.js"></script>
    <script src="/assets/js/util.js"></script>
    <script src="/assets/js/main.js"></script>
    

    Save the template changes and reload your Contact Us page. We now have a generic text page.

    Let's add two simple fields - pageTitle (type = TextBox) and bodyText (type Rich Text Editor). Follow the instructions in creating the Homepage document type if you're not sure how to do this.

    Simple Content Page Generic Properties

    Then wire these fields up - by editing the Template, again follow the Homepage section if this isn't yet second nature to you yet! You'll see in the screenshot we've removed the <p> tags - the rich text editor will add these for us (the textbox field needs the <h2> tags though).

    Simple Content Page Template with Data Fields

    Now add some content under the Content > Homepage node > Contact Us node. Click Save and Publish and you should have a slightly more interesting page when you reload it! - We will be using content from Taco Ipsum

    Contact Us with Some Data

    Using Document Type Properties from the Homepage

    What you may notice is that the footer is now empty - we don't have our content from our Homepage node. We need to tell Umbraco to get the content from the parent Homepage tab. To do this we edit the template (the Master).

    Highlight @Model.Value("footerText") in the footer and then click the _Insert > Value.. _ button again. This is where all of the options we ignored earlier come into play - choose footerText again from the Choose field dropdown, but this time we'll check the Recursive checkbox.

    This tells Umbraco that if the field doesn't exist at the node level for the page we're requesting (e.g. Contact Us) it will look up the content tree (so in our example go to the Homepage for this content) - this means you could also create a footerText element at the Contact Us page if you wanted the editor to override the site-wide default but for fields like this it's not normally used. Click Insert and you'll see a different bit of Razor is added: @Model.Value("footerText", fallback: Fallback.ToAncestors)

    Click Save and reload our Contact Us page.


    Next - Master Template The Navigation Menu

    A simple solution for the template in the menu.