SpeedBlog.Plugins.FBLike Minimize
Now Reading ...
Posted By SB Support on Tuesday, November 23, 2010

Customizing SpeedBlog Themes

This guide explains customization techniques to tailor the appearance of SpeedBlog modules for your site. SpeedBlog ships with a default theme that can be customized in many ways. We’ll break down the guide into three main sections:

  1. A word about SpeedBlog Modules and plugins
  2. Basic layout, customizations and making CSS changes.
  3. Advanced customization and Theme Management

SpeedBlog Modules and Plugins

If you’ve been using SpeedBlog for a while, you’re already familiar with the SpeedBlog Presentation logic. Instead of one module hogging all the real estate, SpeedBlog provides different types of “View Plugins,” that can dramatically alter the appearance of your Blog and can be moved around, customized or even removed; Independently of where your Blog actually resides. There are two exceptions to this rule. The SpeedBlog.Admin and SpeedBlog. ViewPost modules are the main modules that tie everything together so you must have at least one instance of them somewhere (which is where your main Blog is).

As a pre-cursor to customization, we must elaborate that different plugins may have different minimum requirements in terms of height and width while some others may be quite flexible. For example, the Archive Plugin can be easily sized smaller or bigger just by selecting its Options. However, other plugins like the Summary View, Category View etc. have a wide-width style that must be changed in the module.css style-sheet because the content they show consists of an image that is sized to a certain dimension. We’ll show you how to change that (and many other things ) below.

Basic Layout

Before we proceed any further, we must remind our users, always make a copy of the Default Theme and make your changes to the new theme. Let’s begin with the organization of controls:

  1. Every plugin/module/control in SpeedBlog can be classified as “Wide,” “Narrow” or “Normal.”
  2. For controls that are Ajax heavy or dependent on server side rendering, (for example the Archive control)  there’s usually an option in place to change height/width settings. For others, all styles should be driven by module.css stylesheet inside SpeedBlog/UI/ThemeName/ directory.
  3. Inside a control, there’s usually at least two main Panels. The Admin Panel is not customizable (as yet) and should usually be left alone. The Content Panel is what the world sees and is fully customizable.
  4. Certain controls can load other controls (whether SpeedBlog or DNN); Usually they’re named Main and Child for convenience.
  5. Every Plugin and all controls in use by that plugin reside in their own directory but the css is common to all.
  6. The images used by plugins are not picked from the absolute root but from the relative images directory for each theme.


Basic Customization & CSS changes


Lets walk through an example of basic customization. The figure below shows an Archive control that is too narrow for the Pane it is in and the Summary view that is too wide (and thus stretching the skin).

An Archive that is too short

To change the width of the calendar, you just have to Choose Archive Options. If you have a flexible width skin (changeable on the client side), set the calendar width for the minimum size pane and the Archive controls will fill the rest of the space by margin alignment.


Setting the Calendar Width

To change the width of the Summary view control, let’s look at a portion of the Control Code.

SummaryView Code


Almost everything is classed with a CSS style and in this case, all we need to do is change the .standardwidth declaration in module.css For example: as below:




Also remember to modify .widewidth attribute. This is used by SpeedBlog instead of .standardwidth when a post is shown in wide-format view.

Most of the basic style customizations can be done from just this one file (module.css) whether it is for changing colors to pretty pink or for layout changes.


Advanced Customizations

Let’s pick the Summary control again and customize its looks. If you’ve seen the demo site, you already know the summary view is already customized with basic styles. (Screenshot below)

Advanced customizations


Lets say we need to decrease the size of image shown in this control. The solution is a little more involved than just changing styles (as in it involves changing a little bit of code). Open up ThemeName/UI/Plugins/View/Summary/Main.ascx in your favorite editor and change the following section


Customizing, reducing image size

Let’s say we change the image size to height:120px and width:200px. SpeedBlog will automatically resize and generate thumbnails that are a best fit for the size you’ve provided. As you would have already guessed, most controls here can be easily moved or customized because almost every format/layout stuff is done via CSS.

To expand further on our customization, lets pick a case where we just don’t like what a control is doing; we just need something different!

HiddenPanel and UserControl explained

Towards the end of the ContentPane, you’d find two Panes. Any controls you do not want shown should be moved under the hidden controls (don’t delete the controls, just move them under).  The pane right next, the “UserContent” pane is a little special. If you turn the Visible attribute to True, anything contained inside that control will be evaluated for token substitution. For example, if we wanted to add a read more link at the end of summary, we could make code changes as follows:


Code to insert a hyperlink

SpeedBlog would complete the rest.

customized plugin with the Read More link

Let’s take another case where things are a little bit more complicated.  Let’s say we wish to show a picture of the Author right next to the summary and also hyperlink it to the author profile.  The code changes required to make would be as follows:


And the result!

customized plugin with the author picture



Theme Management

All themes must install in the SpeedBlog/Themes directory. The mechanism to do that can be via a standard DNN module package or just a zip file. If a theme does not implement a control, the default theme would be applied to that particular plugin or control.


Comments and Discussions Minimize