Domino Blog Template - Creating a new Theme Part 1

Steve Castledine  7 November 2006 21:15:00

This article will go through the process you can use to take an existing design that has been created by a web designer (maybe your corporate look and feel) or is perhaps already available to other blogging software for example WordPress. You will need some knowledge of HTML and CSS.

It also serves as a good tour of the template and how individual sections work, so I would recommend reading it even if you are not planning a theme change.

For an example I am going to create a theme from an existing site I have with WordPress. This site has, like other blog providers, a large range of free Themes. I have picked one for my WordPress site "Regulus".

This article will help you to create your own themes, however I will have a "Themes Browser" available very shortly so you can just change your own theme with a few clicks.



Getting Started
I am starting from a fresh blog database created from the blog template. I will add one entry "Hello World" and some basic categories so we can see our new theme working as we change it. The following is our starting point:



What I usually do to start is to clear my browsers cache so I can see all the files the Theme depends on. So in Internet Explorer that would be "Tools/Internet Options/Delete Files". Then goto "Setting/View Files" in the same area and remove any cookies etc if you wish so we have a clean cache.

Then refresh your browser on the new Themes homepage and do some navigation to pages like comments so we pick up all images in use etc.

In my Temporary Internet Files I now have all the css,js,images that I will need.


Some items you will no need such as cookies etc.

Changing Stylesheet
For our example we have two stylesheets in operation. For the purposes of the article I will combine them both. In order to do this grab the text from both file and paste into the Global.css file found under "Resources/Stylesheets (CSS)". Make sure you override all text already in that file.

One of the tedius things we need to do when converting a theme is the changing of the paths for images within your CSS. For example images are referenced like background: url( images/bg_body.gif ) repeat-x top #eef; for the Regulus theme. We need to have our images referenced: background: url( ../dx/bg_body.gif/$file/bg_body.gif ) repeat-x top #eef;.

So I will have to do a "find and replace" on the "images" part and replace with "../dx" to get us started. Then is the tedius task of finding all the .gif and .jpg (maybe.png) references and changing from "file.jpg" to "file.jpg/$file/file.jpg".

Our site is changing already:



Importing Images
From our temporary Internet Files we can see some of the images we need. Unfortunately this does not show images that are referenced via css so we need to pick them off seperately. We can do this as we change the design and notice they are missing. For the ones we know of, from the temporary files copy these to a usable location. Beware that windows will add a "[1]" to the end of the file as shown below. Remove this.


Import these files via the "Images" view within "Resources" - click "Import Image Files".

Homepage
On to the HTML itself. The HTML design for web sites using the blog template is under the section "HTML Templates". The difference between the templates is discussed elsewhere.

We will start by changing the homepage "Page Template". This is located under "Page Templates" and "Home Page". We will replace all the html within there with the html from the homepage of our new theme. The quickest way to do this is use "view/Source" from internet explorers menu. Copy the text and paste directly over the text we already have in their.

Once we save our home page template we will see that the resulting new site looks identical to the original theme site we were copying. Problem being it is static and will not be updating with our content.

It is also good practice to make use of "Block Templates" within the database to seperate different parts of the HTML out so we can reuse easily across the site.

Removing unrequired HTML
There will be some html that we do not need like references to Javascript, CSS, RSS etc as these are handled automatically by the system. So in our example I have been through and removed lines:



I have also removed javascript that is not needed - such as Google Analytics.

Breaking the design down into Template Blocks
This part is not neccesary, however it is good practice to break your html down into parts so we can reuse with ease around our site.

Looking at our "Regulus" theme its design is typical of most blogs. It has header HTML, a banner/navigator, sidebar, main content area and footer. So we can use the default Template Blocks we already have:

• HTMLTop
• Banner
• LeftSideBar
• HTMLBottom

Okay the side bar is on the right - so we shall rename that as we get to it. The block template we have in our default template "Add Comment" is used later - that contains the HTML for the add comment form.

First off is the "HTMLTop" code. This will be the DOCTYPE stuff etc and the head html:



In order to insert the template blocks into out standard templates we use the following:



So we place that "tag" where our HTML was that we cut out and placed in our Template Block "HTMLTop".

We repeat for the HTML that corresponds to the banner, RightSideBar and HTML Bottom until we have homepage HTML looking like:

       

Notice the Template Blocks being used.

Content Item Template
If you look at the HTML above, you will see we still have the static content section from our pasted in HTML. We need to cut this out and put it into our "Content Item Template". Item templates control how each item of data is displayed within our site whether that is a list of content on our homepage or each item in our search results.

In the default template we can navigate to the view "Item Templates" with the "HTML Templates" section. We can see the template for content is called "Default Item". Edit that document and paste the content html in there. For our example this is the data between the content div html.

Our "Default Item" document now contains:



Main Content Tag
In order to tell the system where to place the main blog content on the homepage, we need to place a tag < $DXContent $> where we just cut our html for the Content Item Template. So we end up with homepage template looking like:



That looks quite neat and because our html is in the seperate blocks it makes it easier to edit and also reuse around the site.

Adding the tags
So far we have just added static html and with the exception of the template blocks and main content tag, we have not linked the html up to the content within the database. In order to do this we use a tag system.

HTMLTop Template Block
First of all we shall deal with the sie title etc. In the HTMLTop "Tempate Block" we have the following html:



We have static information within the < title > tags. We can replace this with < $DXTitle$ >. This will then insert the title of our database automatically. If our database title changes in the future then the html will update automatically because of this tag. After using the tag the html will look like:



Banner Template Block
Next we will adjust the banner html which currently looks like:



Here we have the title in use again together with the site description and links to the homepage and an about page. So we can replace the text between the < H1 > tags with the title tag as before. We can also use < $DXDescription$ > for the description text and < $DXURL$ > for the homepage link and adjust the url for the link to an about page. This is what we will now have:



Creating an "about page"
Before we move on, you will have noticed in the last section we created a link to an "about" page. The url was simply "about.htm".

We therefore need to create this about page within our database. We do this within the "Web Pages" view of the "Resources" section. This view contains all the static web pages that you may use.

Click the "Create Web Page" button. The web page document will appear, completing it is identical to creating new content in the database. The important thing to do is set the field "Page Name" to "about.htm" so the system will use this as the URL reference instead of a system generated one. Remember to set the status as "Published".



Default Content Item
The next step is to insert the tags into the content "Item Template" and clean the html up (removing any parts we do not need). Remembering that this is within the "Item Templates" view and the "Default Item" document.

For the example we are creating I will need to use the following tags (in use order):

• <$DXSubjectLink$> - Inserts the subject with a link to the document
• <$DXMonthName$> - Inserts the month name of the post creation date
• <$DXDay$> - Inserts the day number name of the post creation date
• <$DXYear$> - Inserts the month name of the post creation date
• <$DXAuthor$> - Inserts the posts authors name
• <$DXCategory$>.- Inserts the category of the post together with a link to other posts in this category
• <$DXInlineCommentLink$> - Inserts a link to the comments for this post
• <$DXCommentCount$> - Inserts the number of comments this post has received so far
• <$DXItemContent$> - Inserts the content of the post

The template html then looks like:



We are now making progress and our site is a little less static:



Side Bar Template Block
I renamed my side bar template to "RightSideBar".This block contains the html that displays the search, category and month archives together with the "blog roll" and RSS links.

I will pick through the html for each of these items seperately:

Search
Within the side bar html I need to build the search HTML for the blog template. Normally I would just place the tag < $DXSearchForm$ > where I want the search functionality to go. However with this theme the search html/css is slightly more complex than the defaults can handle so instead I will replace the "Regulus" search html of:



with:



We also have to go into the stylesheet and replace all uses of the name "search" with "searchForm" so the style matches up with the new html. The form html is the part that needs to be coded exactly like this. The rest of the html can be tailored to suit.

Blog Roll
The blog roll automatically generates from links you create in the section "Configuration/Links". They are then positioned within your html using the tag "<$ DXLinks $>".



The HTML we inherit from the theme looks like:



So if we edit our side bar template block we can insert this tag like so:



By default the system inserts < li> and html around each link to create a list. You can edit this html within the configuration document - tabs "Formatting/Lists/Links".

There are fields "Link Prefix HTML" and "Post Text/HTML". Changing these you can customise the way the system outputs the link list.


It should be noted that sometimes your site might not reflect this change immediately due to how the caching works. To make sure the blog roll etc are updated immediately with your formating changes, from the default view "Recent Content" select "Wizards/Administration/Rebuild Site Indexes".


Category Archive
The category archives work in a similar way to the blog roll in that we insert a tag "<$ DXCategories $>". So we have the following html:



The html used around each list item can also be changed within "Formatting/Categories/Basic" - fields "Prefix Text/HTML" and "Post Text/HTML".


We can also control whether to show a document count within each category using the setting "Show Number of (Comment Count)". The field "Show Categories with no entries" determines whether categories are listed if they contain zero documents.

Month Archive
The month archive is again similar to the Category archive. We use the tag "<$ DXMonths $>". Resulting html is:



The html used around each list item can also be changed within "Formatting/Lists/Content/Months" - fields "Prefix Text/HTML" and "Post Text/HTML". We can also determine whether to display the document count using "Show Number of".



RSS Content and Comment Feeds
RSS works out of the box as default and browsers such as Firefox will pick up on this. We can also add links to our homepage so people can grab the url and add to their favourite feed readers.

We do this by placing the tags "<$ DXRSS $>" and "<$ DXRSSComments $>". Our html looks like:



By default the system places a link with the text "Content Feed" and "Comment Feed", however we can adjust this within the configuration document within "Syndication etc/RSS Feeds". So for the "Regulus" theme I have placed "FULL" in the "Content RSS Link Text" and "COMMENTS" within "Comments RSS Link Text".



Abstract or Full RSS Feed
A common question is how do I change the default where RSS feeds contain an abstract of the content and not the full content. Well, there is a setting within the configuration document tab "Syndication etc/RSS Feeds" called "Show Full Entry in RSS?" - set this to "Yes" for full content in RSS.


We have now completed our sidebar changes and on our web site it should look like:



HTMLBottom Template Block
The html within the HTMLBottom template block just needs a few html edits - removing the reference to workpress etc.

We have now completed the homepage changes, however we have other areas of our website to configure such as how documents are displayed when the permanent links are clicked, comments and search etc. These will be covered in Part 2.

A demonstration of the template in use can be found here: http://www.stevecastledine.com/regulus.nsf

Part two of this article can be found here

• Comments [18]