This project is read-only.

This is the basic documentation on how you can use the Toolkit, a more thorough explanation will follow later when it's feature complete.

  1. First start-up and creating a theme
    When you start up the program, the first screen you will see a screen with the buttons "open" and "new".
    When you click on "new" you will be presented with a dialogbox to enter a name for the theme. Typ a name for your theme and click the OK button. Then select a place to save your file.
    A file with a .wsd-extension will be created in the selected location. 
  2. Saving a theme
    To save the changes to your theme click on the top left menu and select "save"
  3. Editing a theme
    To edit a theme you can use the top ribbon to change settings of the different parts:
    1. Document
      background color, background image, background gradient and text properties of the footer
    2. Page
      Here you can change the background color of the page, the padding and the borders
    3. Primary navigation
      This concerns the top navigation of the page, you can change the background color and the hover color of the menu items as well as the border
    4. Secondary navigation
      Concerns the navigation on the left side. Currently only the background color editing is supported
    5. Header
      Here you can change the gradient color on the top of the page. You can also change the text in the header (you need to be logged in to view this)
    6. Containers
      Here you change the header color of the containers
    7. BreadCrumb
      You can change the font properties of the links and the current user. You can also change the background color
    8. View
      Here you can select view options for the image manager and the status bar of the browser.
  4. Image manager
    The image manager will display all the images that are presented on a given page (except for the ones not hosted in the websitepanel installation and dynamically generated images).
    You can select any image, click on the replace button and replace it with any image you want (NOTE: if the image appears on other pages, the images on the other pages will also be substituted)
    By clicking the default button, the default image will be put back in again.
  5. Exporting and deploying a theme
    If you are happy with your theme, you can export it and upload it to your websitepanel installation. To do this, go to the top left menu and click on export. Select the folder where you want the theme to be exported. A folder with the name of your theme will be created. In this folder you will find three folders:
    1. App_Themes
    2. App_Skins
    3. App_Containers
      In order to deploy the theme you have to copy these three folder into you websitepanel web portal folder (normally something like c:\websitepanel\Portal). You will be asked if you want to merge these folder with the existing folders.
      Next you need a configuration file on your web portal configuration. This file is located in the App_data folder and is called SupportedThemes.config. It looks like this:

      <?xml version="1.0" encoding="utf-8" ?>
             <Theme name="Default" title="Energy Blue" />
             <Theme name="<your themename>" title="<displayname for the theme>" />

      You have to add the line in red and fill in the appropiate values for name and title (without the < and >)

Last edited Apr 22, 2012 at 10:01 PM by Kennethtruyers, version 3


connowr Jan 14, 2013 at 9:06 AM 
1. Goto "x:\Program Files (x86)\Kenneth Truyers\WebsitePanel Skin Designer Toolkit"
2. edit "WebSitePanel.SkinDesigner.exe.config"
3. Change <setting name="WSP_URL" serializeAs="String">
<setting name="WSP_URL" serializeAs="String">

4. Change <setting name="WSP_Username" serializeAs="String">
<setting name="WSP_Username" serializeAs="String">

5. <setting name="WSP_Password" serializeAs="String">
<setting name="WSP_Password" serializeAs="String">

Buliwyfa Jan 4, 2012 at 6:41 PM 
I cannot use the program with URL or any other.
Is still working?