Don’t just limit yourself to the typical blog style format. 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. Actually you can modify the blog theme in the following steps:
1) Navigate to the $yourwebsite/DesktopModules/SunBlog directory. Locate the themes directory. This is the folder that contains all the themes for SunBlogNuke.
2) Inside this directory you should only see three folders. Default, RoyalYellow and Simplicity. (From v4.0 the Default had been renamed as “_default'” which should not modified anytime and anywhere. Please refer to the last update note in the end of this post)
3) Right click on one folder of the core themes which you would like to modify the design and style basing, for example, you like the [Simplicity] theme more, and select "Copy". Right click in the blank space and select "Paste". Rename the new folder with any desired name, in the sample I renamed it with "Customized". You have just created a new theme. It will look exactly like the copied theme if you were to apply it, but we will add to it.
4) Double click on the new-theme [Customized] directory. Open the "style.css" file in your favorite html or CSS editor. I am using Visual Studio 2008 in this example. Now you may modify some designs or styles to fix small issues in layout and make it compatible with your dnn skin.
5) Next we will walk through some more advanced tips and teach you how to develop real customized views or templates. The example I am going to use is the basic view which is for the default view of landing page in your blog. Firstly please have a look at the initial screenshot when applying for the [Simplicity] theme:
Then I would like to make a few changes below:
a) Move post meta in the top but not at the bottom and remove comment link
b) Apply the customized format for post time with DayNumber Suffix
Okey, let’s go ahead. Open the "BasicView.ascx" file in your favorite html editor. I am using Visual Studio 2008 in this example.
Replace it with the following code and adjust some styles in the "style.css" file described in the step 4)
6) Save your changes and close the file. At this point the custom view is complete and we need to apply it to the module. Login your dnn website and navigate to your blog landing page with SunBlogNuke module. Click on the "Admin Panel" link from the Meta widget module, enter the Edit Blog Panel and switch theme to the new built theme.
7) Click "Update" button and apply your theme to action at once.
8) That’s all. We have now successfully created and applied a custom theme for SunBlogNuke! If you need to perform further modifications, repeat some steps again.
Conclusion
The benefits of developing customized theme is that you will not overwrite the modified design in the upgrade process. There may be some compatible issues with the latest version but it should not occur in common. Please note that if there exists some errors you may have to compare it with the core theme and try to fix it. And if you have any questions simply leave a comment and I’ll jump in and help you out.
ps: Maybe you should be interested in our Extreme Theme Directory where you will find more awesome SunBlogNuke themes and they are free to you if you are our clients of Ultimate DNN Blog Module – SunBlogNuke. Later we will also make the [Customized] theme available in themes directory. Please stay tuned and leave your note.
Updated: I would like to share you that we have enhanced the theme architecture with new flexible workflow from v4.0. Now there is a default theme named "_default" and it should not modified anytime and anywhere. If the blog engine can't find any view file from target theme folder, it will retrieve the default view from the "_default" theme, in other words, it is not essential that you must include the multiple view files which was just copied and you didn't customize it anywhere. For example, when upgrade done, you can delete the possible multiple view files in your customized theme folder, like TagsView.ascx, SearchView.ascx, and PrintView.ascx. It will make your folder clean.
And you may be interested in another valuable tutorial - Handy Tips You Should Know.