SunBlogNuke - DotNetNuke Blog Module

There are some awesome ways to optimize your post footers, like related articles, subscription options, and social bookmarking icons allow readers to browse and share your content. Today I would like to share another ways you may be also interested in, display the author information at the bottom of each post. The following tutorial will provide you with the ability to show off the avatar, the biography with Ultimate DNN Blog Module - SunBlogNuke on your DNN website.

As you know, the comment is so important to any blog platform that you may have to build an attractive comments form that users will enjoy filling out. Usually forms are pretty classic with standard fields, submit buttons - nothing more, nothing less. But still even little change of field background, border style, layout, rounded corners can make huge difference. Sometimes adding live comment preview, smiles or some simple CSS bold, italic, underline effects to give more options to advanced comment writers, such as Markdown may be a good choice to satisfy these requirements. Today I would like to share you how we redesign our own comment form. If you indeed want to really stand out and create something super in your comment form, please do your own research and considerations, what you like/dislike and why it is so. Ok, let's go ahead.

Today you will learn how to develop a customized theme quickly and easily within Ultimate DNN Blog Module – SunBlogNuke from this tutorial. Hope it helps you a little when you look to design your blog’s theme or critique it to your needs. Let's go ahead.

Recently we tried to optimize our DNN website SunBlogNuke for super speed and had an opportunity to play around with UnloadCSS skinobject from Timo Breumelhof. What a nifty little tool to use for your front-end performance optimization. Thanks Timo!

Also it inspired us and our CompressCSS skinobject was born out. So you may say that CompressCSS is the extended and optimized version of UnloadCSS and I agree with you. Not only does it unload any unnecessary CSS files but also compress any existing CSS files thereby improving more performance and extending more flexibility into your DNN website. Let’s show you the magic of CompressCSS below.

Why should you utilize it?

As the Cuong Dang mentioned in his post, there are many unnecessary CSS files get loaded within the DNN framework (not to mention some not-so-good practices in CSS coding techniques within these files) that a web designer wants to take control of. Some one may ask whether there is a way to improve that? Fortunately, CompressCss allows you to unload any CSS file that the DotNetNuke® framework injects and compresses any existing CSS files in the head of the page; it will reduce the number of HTTP requests from a browser and minify the size of the downloaded file thereby improving load times apparently.

In conclusion, you can improve your front-end performance and make the speed of your DNN page load faster with CompressCSS.

How does it work?

First let’s cover the two below flows (or process) that will be taken place when you utilize our skinobject CompressCSS:

Unload Process - "Unload" all or some of the CSS files DotNetNuke includes in the Head of the page by default, such as Default.css, Module.css or Portal.css. You can pass the path to the file you don't want loaded as a regular expression which means you can unload multiple CSS files with just one statement.

Minify Process - Removing unnecessary characters from style code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab).

You can apply it in your DNN website with the following steps:

1) Download the zip attachment and unzip it in your local machine.

2) Copy the assemble DnnSun.OptimizerToolkit.dll into the bin folder of your DNN webiste.

3) Copy the CompressCss.ascx & CompressCss.ascx.vb into the skin control folder, which should be $yourweb/admin/Skins.

4) Open your web.config file, find out the <httpHandlers> section and insert the line below:

<httpHandlers>
  <add verb="*" path="css.axd" type="DnnSun.OptimizerToolkit.CssHandler, DnnSun.OptimizerToolkit" 
       validate="false" />
  <!-- Other httpHandlers -->
</httpHandlers>

5) Open your skin file (like index.ascx), register the skinobject in the head and insert it in the bottom. Then it may look like as follows:

<%@ Register TagPrefix="dnn" TagName="COMPRESSCSS" Src="~/Admin/Skins/CompressCss.ascx" %>
<!-- Other Tags -->
<dnn:COMPRESSCSS ID="dnnCOMPRESSCSS" runat="server" 
     RemoveFileNames="/Portals/_default/Containers/MinimalExtropy/container.css" />

You can download the install zip & skin sample from the attachment in the bottom of this post.

The only attribute you need to care for:

What is the advantage?

The advantage is that this is not a core hack and the excellent CompressCSS skinobject can be configured per skin, not for the whole installation. The links are removed on the server side, so they never appear in the source. And the designer can build the more flexibility, readable and maintainable style without worrying about the file size.

To be continued…

This solution is a good start and you can extend it with more killer features. For instance, we our blog team tried to combine some specific or unnecessary CSS files into only one style file so that it will eventually minimize HTTP Requests as we expected. But we found out that there is a style path issue like background property and can’t fix it now. Hope you guys provide some clues. We appreciate any helps.

Attachment: CompressCss_v1.zip