The first thing I tried was just making a simple change to the layout. The site uses themes. So I started by making a new theme and using it.
The easy way to do this is go to the folder App_Themes. Now create a new theme called MyTheme. This involves the following steps:
- Select the App_Themes in Solution Explorer
- Create a new theme by clicking the right mouse button and from the popup menu select Add ASP.NET Folder|Theme menu item.
- Name the theme MyTheme
- Now copy the two files from the White theme and rename them MyTheme.css and MyTheme.skin
- Open the MyTheme.css file
- Find the body style rule and change the background color to black.
To actually use the theme change open the web config file and change the pages node attribute styleSheetTheme to MyTheme. Then run the website and you should now see instead of a white background the site now has a black background.
You can do a lot to jazz up the site just by creating and changing themes. I would highly recommend that you create new themes rather than change the White theme. That way when a new CSK is released you can minimize what you have to change.
A New Master
Suppose you want to change the logo for your site. You have a couple of ways you can do this.
The easiest is just replacing yourlogohere.gif with your logo named the same. Another easy method, if the logo is not a gif is to change the master page for the site. I am going to use this last method with a twist. With a little bit of extra work the logo will become part of a theme. That way when you change a theme you can change the logo just by changing the theme.
You can start by adding a folder named “images” under the two themes, White and MyTheme. Then copy yourlogohere.gif to the images folder under white and put the logo you want under MyTheme.
The next part becomes a little tricky as we need to tell the master page to use the logo in the theme. I certainly do not want to hardcode the url. What I want is to have the image dynamically based on the theme to pick the correct image. This can be accomplished by using the image tag and telling it to replace itself with one from the theme.
So open the white.skin file. Add the following to the bottom of the page.
<asp:image skinid="logo" runat="server" Imageurl="images/yourlogohere.gif" />
Essentially you have told the theme that any image control with the skinid of logo should be replaced with this image control and attributes.
Now do the same for MyTheme however this time, replace the Imageurl with the name of your logo file. For example:
<asp:image skinid="logo" runat="server" Imageurl="images/logo.gif" />
Finally you change the master.site file. This contains layout of the pages. The actual pages then put their content into placeholders of the master.site file. So for example you could flip the layout and put the navigation on the left on the right by changing the master page. Then any template using the master page will show up with the new layout.
In this case, I am going to change the image for the logo to use the new skin element logo. I replaced the old img tag with
<asp:Image ID="Image1" runat="server" SkinID="logo" />
You can now switch between themes and see a different logo for each theme.
I hope this gives you some ideas on how to start modifying your site. The next article will look at making changes to the web components and adding functionality to existing providers.