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:
- A word about SpeedBlog Modules and plugins
- Basic layout, customizations and making CSS changes.
- 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.
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:
- Every plugin/module/control in SpeedBlog can be classified as “Wide,” “Narrow” or “Normal.”
- 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.
- 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.
- Certain controls can load other controls (whether SpeedBlog or DNN); Usually they’re named Main and Child for convenience.
- Every Plugin and all controls in use by that plugin reside in their own directory but the css is common to all.
- 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).
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.
To change the width of the Summary view control, let’s look at a portion of the Control 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.
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)
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
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!
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:
SpeedBlog would complete the rest.
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!
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.