Summary
Use custom blog themes to render the blog header in a different way. Users will have the opportunity to choose between these themes when they create or modify their blog.
Choosing the theme type
There are two different techniques to make a blog theme.
- Custom CSS styling only
- Custom User Control with or without custom CSS styling
If you only want to change the apperance of the blog you are better of using the first technique as this approach is less complex. If you need to add custom functionality then the second alternative should be used.
Creating a theme (CSS styling only)
Create a CSS file with your custom CSS-rules for the blog and save it to the folder web\public\blogtemplates\.
In the example below we create a simple CSS stylesheet that displays the heading, h1, in a blue color.
[BlueTheme.css]
/* Heading color. */
#head h1 {
color: #fff;
}
Save the file as web\public\blogtemplates\BlueTheme.css
The next step is to register the theme. See the "Registering the blog theme" section below.
Creating a theme (user control)
Use this technique if you need to add or change functionality for the blogs.
The blog header is rendered by a standard ASP.NET User Control that inherits from Mindroute.Incentive.Web.Site.UI.Controls.UserControlBase.
Below is a simple example of a blog template, that displays the blog title in a different way and also renders a quick link to search Google for items that match the title.
[searchtemplate.ascx]
<%@ Control Language="vb" AutoEventWireup="false" CodeFile="searchtemplate.ascx.vb" Inherits="Mindroute.Incentive.Web.Site.UI.Controls.Public.Blogtemplates.SearchTemplate" %>
<%@ Register TagPrefix="incentive" TagName="BreadCrumb" Src="~\controls\breadcrumb.ascx" %>
<incentive:BreadCrumb ID="ctlBreadcrum" runat="server" EnableViewState="false" />
<h1 runat="server" id="heading" />
<p id="description">
<strong id="description" runat="server" />
<br />
<a id="googlelink" runat="server" target="_blank">Search Google</a>
</p>
[searchtemplate.ascx.vb]
Namespace Mindroute.Incentive.Web.Site.UI.Controls.Public.Blogtemplates
Partial Class SearchTemplate
Inherits UserControlBase
Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
MyBase.OnInit(e)
' Set the h1
heading.InnerHtml = Me.CurrentContent.Title
' Set the description always blog description.
If Me.CurrentContent.Type = Model.ContentType.blog Then
description.InnerHtml = Me.CurrentContent.Summary
Else
description.InnerHtml = Me.CurrentContent.Parent.Summary
End If
' Render the link to Google
googlelink.Href = String.Format("http://www.google.se/search?hl=sv&q={0}", Me.CurrentContent.Title)
End Sub
End Class
End Namespace
Save the files in the web\public\blogtemplates\ directory. If you are using Visual Studio make sure the build action is set to "Content".
Optionally you can also add a custom CSS file. See "Creating a theme (CSS styling only)".
Registering the blog theme
Register the theme by modifying the file \web\app_data\settings\blogtemplates.xml. Below is an example showing the file after we have registered the "BlueTheme".
[blogtemplates.xml]
<?xml version="1.0" encoding="utf-8" ?>
<templates>
<item id="default" enabled="1" default="1">
<name lang="en" description="The default blog theme">Default theme</name>
<name lang="sv" description="Standardtema för bloggar">Standardtema</name>
</item>
<item id="blue" enabled="1">
<name lang="en" description="A Blue theme">Blue theme</name>
<name lang="sv" description="Ett blått tema">Blå tema</name>
</item>
</templates>
The attribute "id" for the item element must be unique.
IMPORTANT: Make sure the "id" attribute match the CSS file name or the name of the user control you have created. In order to register our searchtemplate user control, the "id" attribute should be set to "searchtemplate". If we where to add a custom CSS it too must be named "searchtemplate.css".
Selecting a theme
When creating or modifying blog pages the user can now select the custom theme you created.