Username Password
Bookmark and Share

How To Install a WebGUI Site Theme

There have been and will hopefully be more themes submitted for WebGUI.  A theme as far as this HowTo is concerned consists of one or more of the following items:

  • A WebGUI Stylesheet containing the HTML for a website layout or look
  • A CSS File in the form of a snippet or as part of the style
  • Supporting collateral such as images and icons
  • One or more WebGUI Navigation wobjects and and navigation templates

Essentially it is all the components to give your entire site a certain look and feel.  Now, each theme may require steps slightly different from this, but generally speaking this is how you implement one.  Also, note that WebGUI Themes are called "Packages" and can be found in the User Contributions section of under "Packages"

First, a small disclaimer.  These instructions assume that the person who created the Theme or "package" you are installing followed widely accepted community best practices in packaging their theme.  If they did not, these instructions may need to be modifed or may not work at all.  It's all up to the person who makes the package.  Generally speaking though, these will work just fine. 

Installing a Theme

  1. Download the wgpkg file from the user contributions area and save it to your desktop somewhere
  2. Log in to your WebGUI site and turn admin mode on
  3. Go to the Asset Manager
  4. Navigate to the Import Node (or where ever you would like to store the package contents)
  5. Towards the bottom center of the Asset Manager screen you will see the word "Package" with two buttons next to it, "Browse" and "Import".
  6. Click on the "Browse" button and select the wgpkg file you saved to your desktop in step 1
  7. Click on the "Import" button
  8. You should now see a folder that resembles the package name you imported.  Note, depending on how the package was created this can vary a great deal.  Most themes are packaged in a folder.
  9. Edit the folder wobject containing the theme files and goto the "Meta" tab.
  10. Set the option "Make Package" to "No".  This will convert the folder from a package to a regular set of assets.
  11. Click on the "Back to Site" link on the right hand side of the Asset Manager.

Now all of the files you need for your new site design are loaded into WebGUI, but how do we make WebGUI actually use the files?  Simply follow these steps:

  1. Click on the "class icon" of the page layout asset that is your home page.  The Layout asset is very similar to a page and has an icon on the far left side of the edit toolbar that resembles a piece of paper.  If you hover over this icon, it will say "Page Layout".  This icon is called the "class icon".
  2. When you click on it, a small menu will pop up.  One of the options will be "Edit Branch".  Click that.
  3. Goto the "Display" tab and select the style drop down box.  There will be a style name listed that corresponds to the name of the theme you downloaded.  Select it.
  4. Underneath the Style drop down selection will be a radio select button that says "Change Recursively".  Select "Yes"
  5. Click the "Save" Button.

So what did you just do?  You told WebGUI to use the style template that came with your theme on every page underneath and including your home page.  Some themes may have several style templates that you will apply to different pages.  They may also come with specific templates for different WebGUI wobjects such as Articles and Collaboration Systems that you will need to select when you add that type of content.  It all depends on what the Theme contributor included in his package.

To make these changes appear to all of the people who visit your site, you will need to commit the version tag you are working under by selecting "VersionTags" from the admin bar on the left side of your screen and clicking the "Commit" button.  If you wish to undo these changes after a commit you can roll back the version tag from the Version Tag screen inside the WebGUI admin console.  You may also delete the version tag from this screen prior to committing if you are not happy with the package. 

After committing the theme, you are likely to have one minor "gotcha" to finish: If somebody uses an incorrect username/password when logging in, they will not get a page with your new them, but rather a page which uses the site wide default theme for user functions. This is a trivial setting to change, though. Open the Admin Console, and go to "Settings".  Now click on "UI" and change "User Function Style" to be the new theme. Now click "Save", and that will set your theme as the default.

You should follow any specific instructions the Theme creator includes with their contribution as there may be little gotchas because of the way they created the package.  Also, keep in mind that user contributed content is not supported by Plain Black and neither are the instructions the contributor provides.  This includes these instructions as well.  Be careful when applying packages to a live site and be sure you understand what files are included and what effect they have on your site before commiting your version tag.  Have fun!

Keywords: howto site style theme

Search | Most Popular | Recent Changes | Wiki Home
© 2023 Plain Black Corporation | All Rights Reserved