3rd in a series of uBlogsy articles. This article concentrates
on modifying Umbraco Templates to integrate into your existing
site. It assumes you have already read the previous two
articles:
OK, so we all love Umbraco, but possibly for different reasons.
From a development background, I love that Umbraco gives me a
really powerful CMS, but still feels close to .Net. This
makes it easy for me to bespoke where required.
Although a blessing for many .Net developers, without the basic
understanding of master pages, making the required changes to
uBlogsy Templates (.Net master pages), can be a daunting task.
For those in the .Net development camp, a quick flick though
this article and you will be away, however although it would be
impossible to equip everyone with enough knowledge to go forth and
customise any Umbraco website, this article is targeted to the
second category and I hope you will be equipped with enough
knowledge to integrate uBlogsy into your existing site.
Essential Background
If you arn't already familure with Umbraco Templates or .Net
master pages, I have created an article which doesn't cover
everything, but should be enough to get us set for uBlogsy
customisation.
If you think this may be useful, please follow the below
link:
Understanding Umbraco
Templates
Breaking Down The uBlogsy Templates
Overview
Not only does the uBlogsyBaseSite Template contains a lot of the
glue which results in the content been rendered, as uBlogsy can run
as a stand alone site, it contains all the other bits which make
the page function. In our existing site, we will have a lot
of the plumming already, so we need to break down what is useful
from the duplicate machanics already on your existing site.
Review of the Existing Site
As each site is different, I will take a worked example using
the Business starter kit with the u.Media skin.
Reviewing the layout of the Business starter kit, it has a
header, two colums (main content to the left) and a footer.
This fits braodly with the uBlogsy layout, so thinks are
looking good. A deeper look at the "Starterkit Master"
(alias umbMaster) Template, revleas some further work is
required.
Although the layout of the template contains two columns, all
the content in the right column is hard coded. To allow the
uBlogsy content to sit here and other areas in the existing
template, ContentPlaceHolder tags can be placed as required, then
the uBlogsy template carved up and split into Content tags.
Although working in this way may end in the optimal resault,
changing the uBlogsy templates this much will most likley result in
requiring a major overhaul of the CSS, so may be best left to the
more seasoned Umbraco developers.
In this article, I am going to take a minimalist aproach, giving
a good resault plus a deaper knowledge should you deside to take
the aprach outlined above.
Prepairing Your Website's Template
uBlogsy produces a number of general features which you may want
to keep (e.g. setting meta tags and title tags etc.), requires a
javaskript library and requires a css include (unless totally
re-working). To allow these to be passed into your site, you
will require a ContentPlaceHolder in the <head> section of
your existing master page.
The Business starter kit has the following ContentPlaceHolder
already defined, so we will use this:
<asp:ContentPlaceHolder Id="HeadContent" runat="server">
</asp:ContentPlaceHolder>
If you want to use one of the functions defined in uBlogsy which
is already defined in your site, you may also want to wrap
additional ContentPlaceHolders round the areas you want to
override:
<asp:ContentPlaceHolder Id="OverrideMe" runat="server">
Existing code
</asp:ContentPlaceHolder>
Using the above your existing pages will function as they
are.
As mensioned earlier, you could take this appraoch and continue
to disect the rest of your primary master page, however, to
simplify the process and get a blog section to your site, which
actually looks like your site, we are going to make one more
change. We want to keep our sites header (not refering to the
<head> tag) and footer, but insert the blog inbetween.
In your primary masterpage, locate the section which drives the
cenrtal content and wrap it in a ContentPlaceHolder tag.
In the Business starter kit, the central content is defined as
follows:
"
<div id="content">
<div id="leftcontent">
<form id="RunwayMasterForm" runat="server">
<asp:contentplaceholder id="cp_content" runat="server"></asp:contentplaceholder>
</form>
</div>
<div id="rightcontent">
<div class="hotspot">
<h4>Edit the right column</h4>
<img src="/images/icons/dezinerfolio/info.png" width="52" height="52"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo lectus, iaculis a laoreet in, lobortis in ligula. Proin in diam elit. Nulla facilisi. </p>
<a href="#">Find more packages</a>
</div>
<div class="hotspot">
<h4>Create your own Macros and unleash the power of XSLT </h4>
<img src="/images/icons/dezinerfolio/info.png" width="52" height="52"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo lectus, iaculis a laoreet in, lobortis in ligula. Proin in diam elit. Nulla facilisi. </p>
<a href="#">Using XSLT</a>
</div>
</div>
</div>
"
After placing the new ContentPlaceHolder tags around this
it will look as follows:
"
<asp:contentplaceholder id="cp_main_content" runat="server">
<div id="content">
<div id="leftcontent">
<form id="RunwayMasterForm" runat="server">
...
...
...
</div>
</div>
</div>
</asp:contentplaceholder>
"
Form tag
.Net only allows on <form> tag on your page. In most
sites, this is places just inside the <body> tag, which is
the safest bet, allowing for any requirement within.
In the Business starter kit, I noticed <form
id="RunwayMasterForm" runat="server"> embedded deep inside the
page, so I moved this to just below the <body>, with its
closing tag just above the </body> tag:
"
<body class="t">
<form id="RunwayMasterForm" runat="server">
...
...
...
</form>
</body>
"
The uBlogsy Temlates
What uBlogsy Templates
uBlogsy installes a number of Templates, however, for the
perpuse of integrating, uBlogsyBaseSite is the main template, with
potential minor changes to the uBlogsyLanding, uBlogsyPand and
uBlogsyPost Templates.
Modifying the uBlogsyBaseSite Template
Thier are three things we need to do to the
uBlogsyBaseSite template:
- Set the master template to your primary master page.
- Define a Content tag to populate data into the <head> tag
of the primary master page.
- Define a Content tag to populate center area of the
primary master page.
- Delete all other content
Setting the Master Template
For the Business starter kit, the primary masterpage is
"Starterkit Master".
Defining the Content tags
In the primary master page, the following two content areas have
been defined:
- <asp:ContentPlaceHolder Id="HeadContent" runat="server">
- <asp:contentplaceholder id="cp_main_content"
runat="server">
So in
our uBlogsyBaseSite template,
we need to define two reciprical tags:
- <asp:content contentplaceholderid="HeadContent" runat="server">
- <asp:content contentplaceholderid="cp_main_content"
runat="server">
The first is the trickiest, as it depends on your existing
header, to what you want from uBlogsy, however the Business starter
kit is fairly basic, so in the following example I take most of the
existing header section:
<asp:content contentplaceholderid="HeadContent" runat="server">
<%--get title for browser--%>
<umbraco:Macro ID="Macro1" runat="server" Language="razor" Alias="uBlogsyBrowserTitle" />
<%--get meta title and description--%>
<umbraco:Macro ID="Macro5" runat="server" Alias="uBlogsySeoMeta" />
<script src="/scripts/jquery-1.6.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<link type="text/css" rel="Stylesheet" media="screen" href="/css/uBlogsy.css" />
<asp:ContentPlaceHolder ID="Head" runat="server" />
</asp:content>
Note, it is important to keep the ID="Head"
content place holder tag hear as it is used
in uBlogsyBaseSite's child master pages.
The second section is a little more clear cut and should take
everything from the uBlogsy div down to the end of
the uBlogsy_footer div:
<asp:content contentplaceholderid="cp_main_content" runat="server">
<div id="uBlogsy">
<div id="uBlogsy_header_container">
<div id="uBlogsy_header_inner">
<h1>
...
...
...
Powered by
uBlogsy and Umbraco</div>
</div>
</div>
</asp:content>
Note, it is important to keep the
ID="LeftCol" content place holder tag hear as it is
used in uBlogsyBaseSite's child master pages.
After deleting all that is left (accept the first line), you
should have a uBlogsyBaseSite template
(master page) as follows:
"
<Primary Master Page definition on first line>
<asp:content
contentplaceholderid="HeadContent" runat="server">
...
...
...
<asp:ContentPlaceHolder ID="Head" runat="server" />
</asp:content>
<asp:content contentplaceholderid="cp_main_content" runat="server">
<div id="uBlogsy">
...
...
...
Powered by
uBlogsy and Umbraco</div>
</div>
</div>
</asp:content>
"
Style Sheet Fix
After applying the above changes, my first view of the site was
far from anticipated!
A little digging found an incompatiable setting in the
custom style sheet and the offending line
removed'
The Final Result
Drum roll and taaaadaaar:
If you are hungry for more, remember to checkout the Integrating
uBlogsy into your Umbraco site article for further changes.
Best of luck and let me know how you get on,
Richard