SpeedBlog.Plugins.FBLike Minimize
spacer
Now Reading ...
Feb
26
Sat
Posted By SB Support on Saturday, February 26, 2011
37109 Views


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.

Creating a new SpeedBlog Theme

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.

Adding Author Proile Picture

 

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.

DNN User Profile Properties

 

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

 

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!

Categories

spacer
Comments and Discussions Minimize

spacer
dummy