Augusta theme is designed to help you with your Kentico 10/11 site branding and to kickstart the development of an awesome responsive Kentico theme and to help you discover the tricks and leverage of a simple, modern, intuitive, and powerful mobile first front-end framework.
Download Augusta Theme Package
Download the above free Augusta Theme package and uncompress the zip file.
There are eight files in the package:
- Augusta-Master.txt
- Augusta-Home.txt
- Augusta-LeftSidebar.txt
- Augusta-RightSidebar.txt
- Augusta-NoSidebar.txt
- Augusta-Blog.txt
- Augusta-Tags.txt
- Augusta-Search.txt
- Augusta-CSS.txt
- Augusta-Javascript.txt
Create a New Master Template
For the purpose of this tutorial, I will call all the files Augusta, but you’re free to call your files whatever you like.
In your administration console, go to Page Templates and click on Master Templates. Create a new template and call it Augusta.
On the newly created master template, at the top of the page, click on the Layout Tab and Copy+Paste the code provided in the Augusta-Master.txt and hit Save.
Create a New CSS File
Next, go back to the dashboard and click the CSS stylesheets icon (or search for it) and create a New CSS Stylesheet, call it Augusta and Copy+Paste the code provided in the Augusta-CSS.txt and hit Save.
Create a New Javascript File
Next, go back to the dashboard and click the Javascript files icon (or search for it) and create a New Javascript file, call it Augusta and Copy+Paste the code provided in the Augusta-Javascript.txt and hit Save.
Create New Page Templates
Go back to the Page Templates and let’s start creating out page templates for this theme.
Create a new page template Category by clicking the three dots next to New template button at the top of the page and call it Augusta.
Under the newly created template category, click New template button and create a new template called Augusta-Home. Click the Layout tab at the top and Copy+Paste the code provided in the Augusta-Home.txt and hit Save.
Do the same six time for the other page templates (Augusta-LeftSidebar.txt, Augusta-RightSidebar.txt, Augusta-NoSidebar.txt, Augusta-Tags.txt, Augusta-Search.txt and Augusta-Blog.txt)
Your template category should look like this:
Once all the necessary templates and files are in place let’s create the pages.
Master Page Template
Assuming you already have your Kentico site created, go to the Pages click on your site, and then click on Properties >> Template.
For the template, select “Use own page template” and click Select button to look for the master page template.
On the Select page template pop-up page click on the Master templates and choose Augusta click Select button and the Save.
Now, click the Master page tab and insert the <!DOCTYPE html> at the top.
And, the viewport meta and hit Save:
<meta name="viewport" content="width=device-width, initial-scale=1">
Create the Home Page
Next, now that your master template is applied, go back under your site and create the first page, the Homepage.
Click the + button and pick Page (menu item) for the new page type.
Call your new page Home and look for and choose Augusta-Home template and click Save.
Once the Home page has been created it it time to add the web parts that hold the content.
So, on the Home page, click the Design tab and add Editable Text web parts for each eight Zones (ZoneBannerText, ZoneBannerLinks, ZoneBox1-4, ZoneHomeSidebar and ZoneHomeContent).
After adding Editable Text web parts for each eight Zones, make sure you save the page template and then click the Page tab to enter some text.
On the Page tab, click the banner editable text area and enter your text or use this filler HTML code using the Source option:
<h2>Lorem ipsum dolor sit amet, consectetur</h2> Duis metus mauris, condimentum ac efficitur sit amet, volutpat eu velit
On the right side of the banner, click the editable text area and enter your text or use this filler HTML code using the Source option:
<ul> <li><a class="button icon fa-group" href="#">Feugiat Sit</a></li> <li><a class="button icon fa-cog" href="#">Hendret Lectus</a></li> <li><a class="button icon fa-tag" href="#">Bibendum Triste</a></li> <li><a class="button icon fa-laptop" href="#">Adipiscing Elit</a></li> </ul>
Now, move down to the card zones and click the editable text area of the first box and enter your text or use this filler HTML code using the Source option:
<a class="image featured" href="#"><img alt="" src="https://picsum.photos/700/400/?image=281" /></a> <div class="inner"> <header> <h2>Lorem ipsum dolor sit amet</h2> </header> Phasellus quam turpis, feugiat sit amet in, hendrerit in lectus. Praesent sed semper amet bibendum tristique fringilla. <a class="button icon fa-chevron-right" href="#">Read More</a> </div>
Do the same for the rest of the cards.
Next, add some text to the sidebar. Click the editable text area of the sidebar and enter your text or use this filler HTML code using the Source option:
<h3>Interesting stuff</h3> <div class="grid"> <div class="row 50%"> <div class="6u"><a class="image fit" href="#"><img alt="" src="https://picsum.photos/300/200/?random" /></a></div> <div class="6u"><a class="image fit" href="#"><img alt="" src="https://picsum.photos/300/200/?image=222" /></a></div> <div class="6u"><a class="image fit" href="#"><img alt="" src="https://picsum.photos/300/200/?image=188" /></a></div> <div class="6u"><a class="image fit" href="#"><img alt="" src="https://picsum.photos/300/200/?image=284" /></a></div> </div> </div> <a class="button icon fa-file-text-o" href="#">More</a>
And finally, the last text area. Click the editable text area of the home content and enter your text or use this filler HTML code using the Source option:
<h2>So what's this all about?</h2> Semper <strong>Augusta</strong>, quam turpis, feugiat sit amet in, hendrerit in lectus. Praesent sed semper amet bibendum tristique fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus justo ipsum dolor sit amet, consectetur. Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus. Praesent semper bibendum ipsum, et tristique augue fringilla eu. Vivamus id risus vel dolor auctor euismod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat. Aliquam luctus mattis lectus sit amet phasellus quam turpis. <a class="button icon fa-arrow-circle-right" href="#">Read More</a>
OK, make sure you Save the page after adding all this content and your final home page should look something like this now:
