Community Server on my mind

How to learn where your users click

Implementing a more clear menu, like I did the other day, and do other changes to you blog, might be of no meaning at all if you're not aware of how/if they are used. Assuming your blog is for you readers, and not just a personal journal for yourself, Read More... If you enjoyed this post Subscribe to my feed via RSS or e-mail!

Adding more buttons to TinyMCE in CS

Community Server 2.1 uses TinyMCE as the build-in editor for posting in forums, blogs etc. You can choose in your profile if you want to run the Standard or Enhanced implementation of TinyMCE in CS. Figure 1: Content Editor Options in your profile Even Read More... If you enjoyed this post Subscribe to my feed via RSS or e-mail!

Add/Remove buttons from the Paperclip Theme

If you run your blog at the root as I do, you might want to get better use of the toolbar of the blog. In my case I use a modified version of the Paperclip theme. As you can see in the picture above, I have modified the toolbar by adding 2 buttons (Media 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!