customizing WSS 3.0 /MOSS based site theme using sharepoint designer

there are really multiple ways you can benefit from the out-of-the-box features provided by WSS or MOSS. As we all know that you can choose different themes from the site settings -> site themes, MOSS offers you something extra. If you are familiar with sharepoint designer, you will know that in Style Library folder of your site, there is a folder called "Core", in there, some extra css files will help you with the "new look" help you to make your site look less like a sharepoint site but rather a more customized web site.

So if you would like to spice up your site with extra color & instead of tweaking the boring core.css to make a sharepoint-brotherhood look site, you can create your own master page and publish it . In order to do this , you need a copy of sharepoint designer and open up you site by its url. then find your master page under _catalogs/masterpages/default.master. this is all the content pages in your site derives from. So if you open up a page in your site, say lists ->(list with your customized name)->allitems.aspx which is the default page when you click the name of your list name. then switch to the code view of your page. You will see on the top of your page. there's the reference for your master. If you are a little bit familiar with asp.net 2, you will know how it works. also, as you know, WSS 3.0 is built on top of .net 2 framework with asp.net. so if you update this reference with your own master page,

the rest is easy as long as you know how it works.All you need is your css files and customized master page.


1. make a new master page in either Visual Studio or sharepoint designer. I won't explain this because you all know how. I suggest you start from a copy of default.master instead of modifying default.master in case you want to revert back. BTW, if you really messed up your default master, right click your default.master then select "revert to site definition". Which will clear all changes you have made and saved.
2. copy the following code into top of your page for the assemblies used in your master page so you can still use sharepoint functions(i.e. you don't go too far on this to lose what sharepoint is offering you or even worse, your master page won't work at all).



as you can see in the code above

SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/Band.css%>" runat="server"

is used to import your customzied css file. you can use this to override your core style, and of course it also works with old school css reference.

3. make sure if all the place holders are what you want. Do be careful when deleting these placeholders. You better know which one of them is needed by content pages. Otherwise sharepoint designer won't show you the design view because the content place holders don't match between your master and content pages.

After all the customization is done,go back to your WSS/MOSS site , select site settings->galleries->master pages, where you can then upload your customized master and then right click your master page uploaded ->"publish a major version", click ok on the following form , then right click master again ->"approve /reject" to approve your master to make it visible to your site.

that should be easier than make sharepoint themes, in that way you have to change the xml config files of your MOSS and btw, I don't think you can change layout by simply applying a theme. That can only change the color and some style.Your MOSS site will still look like a MOSS site anyway... It's really up to you for the level of details you want to change.

It's actually quite fun to style up MOSS, enjoy!

Ajax Introduction Page

Since this is the first ajax page created in this wiki, I will introduce how to install Ajax to work with your visual studio 2005. And here is the showcase video which will decide you should read on. If that doesn't get you interested , don't bother then :p

What is Ajax?
Ajax(Asynchronous JavaScript And XML)Someone may have heard of Ajax as kind of better of Javascript. Well, to my point of view, it's right and wrong. It does utilize Javascript as the underlying mechanisms , but if offers so much more: what makes it outstanding is the power of doing the server side quickie e.g. on your datagrid, click on the view details button and popup dialog box , not annoying popup browser windows which will be blocked by most of the modern browsers (you can decide it's modal or not) . All the details pulled out of the DB can be extracted on server and displayed on page with no postback overhead! And more importantly, it's easy (breezingly easy) to incorporate Ajax into your site, so... why not?!

2. How to install Ajax to your VS2005

N.B. Please uninstall any beta version of Ajax before doing so, then install following in order

• get ASP Ajax 1.0 from MS


• get ASP Ajax Control Toolkit and make sure you download the full version so you can play around with the source

If you want to learn more about Ajax new features that will appear in future version of Ajax , which can be downloaded here

Please note that all these tools can also be found in the software installer section on the left hand side of the site. If you are still not sure, you can watch the installation video

3. Use Ajax

Many of the video footages I give on top of the page are self-explanatory, and very easy to implement. Basically after you download and install the ajax 1.0 and toolkit you will have template to create Ajax enalbed site which is optional, since you can still choose from the ajax extension tool box to drop on your page. There are sample sites for demo purposes as well for you to play and get excited.



I don't know what you guys think, I was blown away when I first saw the powerful features provided by ajax.

originally posted 20/02/2007 14:13 (old post)

interchangable language skin for web pages with .net 2 profiling structure

During the exploring the method to implement multilanguage skin web site, I found out that Java provides the solution which you need to have the configuration file which contains separated language translation and string flags to indicate what control this is for, which is pretty much similar to the one I am going to introduce, however , the advantages of using .net 2 profiling structure is the easy to use , less pain when composing the language config file and well - supported event handling, i.e. UI changes according to user selection of what language the user wants to read on screen by simply choosing a radio button or whatever you like. Setting up profile structure will make developer benefit so much more than just language changing, role,membership management which enables your to develop scalable customized CMS system is really handy when designing middle,large scale system. I will keep this coming when I got more time.

First things first, we need to set up the profile environment, which should be fast and pain-free.

if you are using SQL Server Express that comes with the Visual Studio 2005 , you don't have to do anything really to enable the profile management because it's by default supported locally on your aspnetdb.mdf file. The downside is the headache(lots of them) when you tries to deploy your website on a remote web/DB server. It will keep saying Error 26 connect to your SQL Server via remote, remote connection is not enabled , blah, blah blah... and you have to gone through the trivial settings to make it work. Since we have standard SQL Server already, this is omitted at the moment. Let me know if you want to do it in express...
Go to your web.config file in your webroot, add in following section


this will add in the profile provider which you can link to your SQL Server connection string , which is the server your want to use to for your web app.

2. You might already know how to add SQL Server connection string section into your web.config, but here it goes in case you don't. Type aspnet_regsql in your Visual Studio.net command console, you will get ASP.net SQL Server Setup Wizard dialog, click next, you should select Configure Sql server for application services and radio button and then next again to select sql server DB and login credentials, then next to confirm your settings, in my case , the login details is like following image. You should fill in the information matching your DB settings





After this you should be able to see your database (SeeYouDB in my case)is populated by the tables where .Net will persist the Profile class data. These will be the back-end to implement your role, membership mechanism later as well, which will be discussed in my later articles.



Ok, now we have DB support, next thing we should enable is to finish up with the DB connection using connectionString element added by above procedures. This can be done simply by putting following code in your section outside your system.web section.



This will update the old LocalSqlServer setting which uses SQL Server Express with your customized DB server for provider and at the same time add in connection for web root of your project. Please note, you can add in as many connection string as your wish and use them by accessing connectionStrings collection by name.

After this, make sure you have such settings in your asp.net property in your IIS manager.







Now your .net profile environment is setup . And if you have done the web config settings as above, you should have a property name called LanguagePreference,this will be accessed via Profile class , which is to be demontrated later. The problem we have now is that if you are coding in webroot, everything will be fine and dandy, but if you code in class library or in classes of .Net 2 folder e.g. App_code, Profile class is not accessible, what we can do is to convert the Profile object in HttpContext as follows:

HttpContext context = System.Web.HttpContext.Current;

ProfileCommon profile = (ProfileCommon)context.Profile;

There you will have access to all properties in profile class again.

Now we go back to what this article is really up for :) language magic. As we can see the default value of LanguagePreference is "no" which is the code for Norwegian. What we will do is to read/change this at runtime according to the user selectindex change event on a radiobox list. To achieve this we need to override the

InitializeCulture() method from System.web.UI.Page class, and customize with our own code

string LanguagePref = profile.LanguagePreference;

if ((LanguagePref != null) && (LanguagePref != "Auto"))

{

this.UICulture = LanguagePref;

Thread.CurrentThread.CurrentCulture =
CultureInfo.CreateSpecificCulture(LanguagePref); //setting up region

}

So when the user selection on radio box changes, you can update the profile property LanguagePreference value accordingly.



Now we need to think about where to override this InitializeCulture() method. Obviously, it will be awkward to do this in every single page, you know why... Some may think it should be in Master page, which is better ,only thing is that Master page doesn't derive from class Page -_-! which means you can't override! .Net provides a special folder called App_Code where you can put in class which can be accessed site-wide. And it's auto-compiled by .net. So we can write a new class derives from Page class and override InitializeCulture in there, and make every partial class of page code behind derive from that class. At this point, we are able to listen to event triggered by users' selection and now we only need to have according language translation file to make things roll! this is the breezy bit.

Add in a .net 2 special folder called App_GlobalResource under webroot, then just add new item-> resource file, give it a name , mine is called PenSurveyCulture.resx, if you right click and then view code, you will see it's nothing but a xml file. But Visual Studio just liberate you from boring typing job by handcode or copy&paste all the attributes and elements with a GUI like this...



I am pretty sure you will love this.It is plainly a string table and in your code behind for all these web page elements, you can say

lblLoginPrompt.Text = Resources.PensurveyCulture.LoginPrompt;

so whatever the user chooses as the language preference, you can have it shown on your page!

At this point, we have implemented user-friendly , interchangable language skin for your .Net 2 based websites.



Also, you might put the content that needs to support multi-language into your updatePanel of your AJAX and trigger it to a button or radio button, you will make it even cooler without postback!