Community Server on my mind

How to create a WeblogThemedControl

Want to create a Community Server control that adapts to your blog's theme/skin? Community Server (CS) contains a class named WeblogThemedControl, which is used for many of the built in blog controls in CS. One of the features of the WeblogThemedControl Read More... If you enjoyed this post Subscribe to my feed via RSS or e-mail!

The Secrets of CSModules

Listen to this article Whether you are a developer, or a Community Server admin that haven't got much experience of .NET Development, I believe you should benefit from this article. This article gives you an overview of what CSModules are, how can you Read More... If you enjoyed this post Subscribe to my feed via RSS or e-mail!

Setting up the SDK in VS 2005

Dave mentioned this in his Monday daily news post , but I thought it was worth repeating and also correcting Dave's statement a bit. In the daily news it says Dave Stokes released a document detailing the installation of Community Server 2.1. It's actually Read More... If you enjoyed this post Subscribe to my feed via RSS or e-mail!

Separating moderation on a forum level

Did you ever want to have different moderators for different forums in Community Server ? It is possible, but not very straight forward as checking a check-box.....yet anyway. During the last couple of days, I followed part of a thread at CS.org, where Read More... If you enjoyed this post Subscribe to my feed via RSS or e-mail!

How I do Community Server Upgrades

I know, most of you have done this a million times, and I am not trying to teach anyone that already knows with this article. I just wanted to write some pretty good practices on how I do it after learning from some mistakes in the past. Some of the mistakes Read More... If you enjoyed this post Subscribe to my feed via RSS or e-mail!

Create a new CS skin in 5 minutes

Yes, you can do that! Provided that you only want to change the color schema and one or 2 pictures referenced in the CSS files. I did a few skins last week, one of them cause I wanted it for a site of mine, the others just because I could, and wanted to test out if it really was as easy as I thought it could be. So having said that, you might realize that the first skin I did did not take 5 minutes to complete, it took a lot longer. But when all things were in place and I understood how to do it, it was a piece of cake. So here I thought I tell you how I did it, so you also could create your own skin in no time.

One of the things I had to do, which took some time, was to figure out which colors that was used in the original CS skin. If you count all colors that are made with the help of color codes (and not pictures) there are actually just 8 colors. Or maybe I should say 7 colors. Two of the colors are almost identical to the eye, but have have a slightly different color code, which is probably a mistake.

The original color codes are:

As you can see color 2 and 8 are almost identical.

So what I thought was, if I want to do a new skin, all I have to do is create a new row in the table above, and choose similar colors in for example blue. I did the table above in Microsoft Expression Web Designer (HTML Editor) so that I easily could get the color codes as well from the HTML code. But use any HTML editor should work.

So let's add a row to the table above, with a different color scheme:

Now when I have my new color codes, all I have to do is a search replace on the CSS files. I could open them one by one in Notepad and search replace 8 strings one by one. And that's what I did the first time. But then I realized there's Visual Studio 2005 with search/replace in files. So I opened that feature, pointed it to the /Themes/default/style folder, and went through the 8 colors to replace them. You might want to do this on a copy of the default skin.

That's all! Skin number 2 that I did, couldn't have taken more than 5 minutes to do. Oh, that's right. In one of the skin I did a new GIF for the menu bar,and edited the CommonTabBar class in Common.css to point to that GIF instead. The picture was a screenshot from Outlooks toolbar (made it 32 in height and 1 in width).

Here's a pic of the result:

You can see 2 more examples of skins over at CSMVPs.com in the photo gallery. I love the pink theme!! ;-)

I'll list the original color codes here as well in case you want to copy them:

#BBDE79,#D2E6BD, #99AA99, #698D73, #EFF7E0, #91723F, #667766, #e2eecd

If you enjoyed this post Subscribe to my feed via RSS or e-mail!

CS2: Skinning: Change the title image of your blog without access to the CSS file

I'd never have thought I'd write an article about skinning. I am not very good at CSS. But sometimes you learn when you have to, although what I'll talk about in this article is in no way anything complicated.

In Community Server you know you can change the skin of your blog to a skin that's installed at the CS site where the blog is. But sometimes you might want to change how that skin looks, even if most of it looks really good. If you're at for example weblogs.asp.net or some other CS hosted blog site, you can't do that since you don't have access to the files of the skin. But CS has a workaround for that called CSS Overrides. With that function, as you can hear from the name, you can override what's in the original stylesheet for the skin you are using. So of course, you need some way to figure out what the name of the CSS classes are that you want to modify. But mostly, the skins are available to download for free in some way.

In my case I wanted to chage the header picture for the Paperclip theme. I looked in the CSS file for it and found the class was named 'masthead' with that information I could change the header picture by overriding the masthead class's background-image as shown in the picture below.

Now it's good if your new image has about the same dimensions as the original one, at least in width.

If you enjoyed this post Subscribe to my feed via RSS or e-mail!

Moving your blog to Community Server 2.1

How do you move your blog to Community Server 2.1? Well, of course it depends on what blog you're on today. When I started thinking about this I stumbeled on a BlogML project of Keyvan which he mentiones in this post . His own words about the tool Read More... If you enjoyed this post Subscribe to my feed via RSS or e-mail!

CS2: Modifying José Lemas modifications of videos.aspx

In June I talked about having a videogallery in Community Server. I referenced an article by José Lema where he talks about the videos.aspx and how to modify that file to get a more Google-like videgallery.

Today I implemented a videolibrary on my Community Server Sweden site. But since the videos/screencasts I do is 800 x 600 they don't fit in the new CS 2.1 skin within a forums post (José's modification links to the respective forums post for each video). The video gets truncated. So what I wanted to do, was to instead link directly to the video/screencast file itself, and also to open the video in a new window. Also I wanted to create a new menu button for my video gallery, that also became the selected button when I went to that page.

So what I did, was to first get the videos.aspx the way I wanted. To do that I modified José's modification in the following ways. (Red text shows the parts I changed)

First, change the row:

<a href="<%# Globals.GetSiteUrls().Post((int)DataBinder.Eval(Container.DataItem, "PostID")) %> "><img src="<%# DataBinder.Eval(Container.DataItem, "VideoImageUrl") %>" width="200" height="150" border="0" /></a>

to

<a href="<%# DataBinder.Eval(Container.DataItem, "VideoUrl") %>" target="_new"><img src="<%# DataBinder.Eval(Container.DataItem, "VideoImageUrl") %>" width="200" height="150" border="0" /></a>

Then change:

<a href="<%# Globals.GetSiteUrls().Post((int)DataBinder.Eval(Container.DataItem, "PostID")) %> "><%# Formatter.CheckStringLength(DataBinder.Eval(Container.DataItem, "Subject").ToString(), 35) %></a>

to

<a href="<%# DataBinder.Eval(Container.DataItem, "VideoUrl") %>" target="_new"><%# Formatter.CheckStringLength(DataBinder.Eval(Container.DataItem, "Subject").ToString(), 35) %></a>

That's it! Now a click on the video thumbnail or the video title in the video galleri will open the video in a new window.

As for the menu button, that was really easy. Just followed the instructions from Dave Burke's excellent article in the subject. The results can be seen in the picture below. Yes the site shows in a strange language......it's swedish.

 

Click the picture to view it in larger scale.

View the video gallery live!

If you enjoyed this post Subscribe to my feed via RSS or e-mail!