Create a new Theme
The first step we describe here really isn’t about customization, this is just a safe way to create new themes. Go to SpeedBlog Settings, scroll down to Themes section and create a new Theme. Once the theme is created, select it from the drop-down and click Change.
Skinning the Theme
As an example, we’ll just edit the Summary View control. you can do the same to any other control you wish to Theme. Since we just created a new Theme by name ActiveSocial, you can find it under
C:\DNNAppPath\DesktopModules\SpeedBlog\Themes\ActiveSocial\UI\Plugins\View\Summary\Main.ascx
As a first step, we’ll add the author image from the User Profile section along with a link to the Author Profile Page. Open up the file in your favorite editor and add the following code anywhere in the Summary control file.
<a href="<%=SpeedBlog_AuthorProfileUrl %>">
<img width="64" height="64" class="sbc_auth_icon" alt="<%=SpeedBlog_AuthorDisplayName %>"
src="<%=SpeedBlog_AuthorPhotoURL %>"></a>
And voila, you have just added an author profile image that links to User Profile Page.
A word of caution here though. Since this data is being pulled from DNN Profiles, you need to make sure you have them populated and visible to everyone.
You can even create your own profile properties and add them. For example, login as admin or host, go to User Accounts and Manage Properties, Click add new Profile Property
For example, lets create a new Profile Property called AuthorPage which is a simple text box and is a link to where we wish to send users to; If they click on the Author Picture.
Once you’ve created the profile property, its simple to link to it via the following code:
<a href="<%=SpeedBlog_GetAuthorProfileProperty(SpeedBlog_AuthorUserId,"AuthorPage") %>">
<img width="48" height="48" class="sbc_auth_icon" alt="<%=SpeedBlog_AuthorDisplayName %>"
src="<%=SpeedBlog_AuthorPhotoURL %>"></a>
The available methods and properties are listed in the resources. In this case, we used the method SpeedBlog_GetAuthorProfileProperty
Integrating with ActiveSocial
<a href="<%=SpeedBlog_AuthorProfileUrl %>">
<img width="64" height="64" class="sbc_auth_icon" alt="<%=SpeedBlog_AuthorDisplayName %>"
src="/DesktopModules/ActiveSocial/ProfilePic.ashx?PortalId=0&uid=<%=SpeedBlog_AuthorUserId%>&h=64&w=64"></a>
Integrating with ActiveSocial is just as simple as editing the image or the profile URL. In this particular case, we make use of the SpeedBlog_AuthorUserId to generate the link.
Of course, the possibilities don’t just end here, customization is the key to integration and almost all plugins and controls in SpeedBlog allow customization by Theme. Feel free to experiment!