HOW TO: Create a new Portal Store 6.5 Theme
Being fairly new to DotNetNuke and new to Portal Store 6.5, I knew I wanted to modify the layout of various sections such as the catalog and product listing. I’ve given myself a crash course on creating and modifying DNN skins and I believed I discovered that some of these same techniques could be transferred over to creating a Portal Store 6.5 theme. When I come across tasks that involve numerous steps, I like to “dumb it down” for myself to step by step procedures so I don’t miss a step and then have to spend the same amount of time figuring out where I screwed up. So here it goes. If someone finds flaws in my procedures, please let me know.
Object: Create a new Portal Store 6.5 Theme so as to change the layout of some of the sections such as catalog and product list.
1. Make sure you have the latest DefaultSkin.Zip from http://www.DotNetNuke-modules.com.
a. Log in.
b. Go to product downloads and download DefaultSkin.zip
c. Create a directory on your computer and Unzip DefaultSkin.zip into that directory.
2. This directory will be your original DefaultSkin Portal Store 6.5 theme. Copy this directory to another directory. We will call this directory MyNewPortalStoreThemeVersion1 and we will make our revisions to files in this directory.
3. Open up the .pst file using a program such as NotePad or FrontPage: When I first installed the DefaultSkin.zip file, I thought I had to go through the DNN Host Settings page to upload the skin. I had received and error that DNN did not allow .pst files so I added that pst to the acceptable file types in DNN. I thought that maybe ByDesignWebsites had placed this file in the skin by accident because I thought it was an outlook data file. When I opened it, I discovered that it is basically an html file.
4. Change the NAME tag and the Description tag: Change the NAME (between and) from DefaultSkin to something like MyNewPST_ver01. The name you choose will appear in the Skin Admin section of Portal Store 6.5 after it has been uploaded from there. Change the description tag to something more suitable for you to describe the theme.
5. Save and close the revised .PST file.
6. Make your changes to any or all of the .htm and .ascx files using programs such as FrontPage and VS2003. Check the Portal Store documentation and release notes to find out what tokens or id tags are available.
7. Zip up the entire directory and call it something like MyNewPST_ver01.zip
8. Install the new skin package using the Portal Store 6.5 skin manager:
a. Log in as host or admin to the site.
b. Edit the store
c. Go to skin manager
d. Upload the skin (note that Portal Store does not bring a pop up dialog to browse and select several files like DotNetNuke does. Portal Store uploads the new theme after you select it)
e. Return to the Store
f. Go to Store Admin
9. Edit the store to select the new theme.
a. Click Basic Settings and Update
b. Select your new Skin Theme from the drop down and click update.
c. Return to Store
Note: I modified the productlist.ascx and the changes did not appear to take affect. I got that to work by going to:
i. Module Settings
ii. Override skin
iii. I selected ProductList from the drop down and Update.
10. My new Theme appears.
Revising your New Theme:
To quote a brilliant singer: “Oops, I did it again.” I made a mistake in my layout and I didn’t notice it until I uploaded my new theme. There are a couple of pitfalls to watch out for when uploading the theme a second time. First off, switch back to the DefaultSkin theme. I’ve had this happen to me a couple of times when loading a revised DNN skin. If I load a revised skin and, in essence, replace the currently selected skin in DNN, I’ve had the site bomb out on me to the point where I could no longer log in. At the beginning of my DNN learning curve, I cleared everything out, deleted the database and started from scratch. I discovered that if I go into the skins table in the database and change the skin directory that DNN is looking for the host and admin, I can get back to the point where I can log in again and upload the new skin.
The 2nd reason to switch back to the DefaultSkin is because if you upload the newly revised PortalStore 6.5 theme a 2nd time, it will appear twice in the drop down of themes to choose from and it will get confusing. So the basic summarized steps to uploading a newly revised PortalStore Theme is to:
1. Switch to the DefaultSkin theme from Store Admin, Basic Settings
2. In the Skin Admin, delete the list item that displays your new Theme that was uploaded previously.
3. Upload your newly revised skin.
4. Log out
5. Close out of your browser and start a new session.
6. Log in
7. Select the newly revised theme from the Store Admin
I’m not sure if logging out and closing out your browser is absolutely necessary, but it may help with some caching and session issues.