Username Password
Bookmark and Share

Getting Started with WebGUI

An often asked question is, “How exactly do I get my entire site running with WebGUI?” This chapter covers some of the basic steps to get yourself up and running. Sort of a high-level road map to get you started.


A Clean Slate


When you first access your WebGUI site, you're going to see the default design.



You're going to want to immediately log in to the system and start to put things together. First, read up on how you create a style template in the chapter, “Building a Style Template.” That will give you step by step instructions on how to take an existing design and put it into WebGUI. Aside from just putting a design into WebGUI, you actually need to assemble all of the pieces.

  • You may have a Style template, but what if you need a Page template?

  • What if you want all of your default articles to have a specific font size?

  • What about areas with different headers?

  • How do you target what you actually want for your navigation?

  • Do you need a navigation template aside from what comes with WebGUI?

  • When should you use a Folder instead of a Page Layout?


Setting Up Your Workspace


First things first. You need to create a spot in WebGUI that you feel comfortable uploading all of your files and templates into. I always suggest putting all of your files for a specific project in one central location so you can find them later. To do so, just create a folder in the “Import Node” and name it based on your project. Here's the steps you'll want to take to create your space.


Steps to Make Your Space


  1. Select “Folder” from the New Content Menu.



  1. Give the folder a recognizable name and URL.




  1. Replace the current number in the rank field with a “1”. When you click outside of the rank field, WebGUI will automatically select the checkbox for that asset.



  1. Click the “Update” button.



  1. You're done! You now have your workspace created in the Import Node. Put all of your files here.




What do you Need?


The big question to ask is what do you need to do in WebGUI to accomplish what you need. Here are some questions that you should ask yourself:


  • Will I have pages that need different graphical headers? Different navigations?

  • How many levels deep will the site be? Or in other words, will the site be deep or shallow?

  • What type of content do you plan to have on this site? Do you care?


Will you have pages that need different graphical headers? Different navigations?


This is a good question because it's going to let you know if you need multiple Style Templates. Although dynamic, Style Templates have the limitation of not being able to dynamically change pieces of themselves.


If you have two entirely different side-navigation systems you want for your site, you'll have to actually prepare two different Style Templates to accomplish that. If you have pages with completely different headers, you're going to have to create a Style Template for each section. Try to plan ahead, and consider just how many templates you might need to create.


How many levels deep will the site be? Or in other words, will the site be deep or shallow?


This is a good question to ask yourself because of navigation. Remember that WebGUI navigation is dynamic, so whatever navigation system you create is going to rely on you knowing how many levels deep your navigation should be. That said, take a look at a few settings for navigation that are commonly used.


Note: For a more in depth look at the Navigation asset, see the Navigation section of “How to Build a Style Template”.


Dropdown Menu





  • Start Point Type - Relative To Root : This is set because you want the navigation to start grabbing pages directly from the root of your site.

  • Start Point - /a/(+1) : You don't actually want “Home” displayed in this navigation, you want all the pages immediately underneath it to show up, so you're setting the nav to start pulling one level deeper.

  • Relatives to Include – Descendants : All you want are descendants of the root (relative to where you are in the site) to show up.

  • Descendant End Point – Infinity : This makes it so EVERY single descendant is going to show up in the nav.







  • Start Point Type - Relative To Current URL : You need the navigation to start grabbing pages based on where you currently are.

  • Start Point - ./(0) : And you want the navigation to definitely start showing pages all the way to where you are now.

  • Ancestor End Point – Infinity : You're going all the way back to home

  • Relatives to Include – Ancestors & Self : Since you want all the ancestors of this current page to show up, you have to select Ancestors. You also want the page you're currently viewing to show up, which is why Self is selected




Contextual Navigation



  • Start Point Type – Specific URL : You want the navigation to start from a specific spot, so you pass it the URL of a page you want to start from.

  • Start Point - getting_started : This is the URL you are starting from.

  • Relatives to Include – Pedigree : This setting makes it so that depending on where you are in the navigation, all of the relatives to that page will be displayed. So, in the first screenshot you are on Page 1, which has no relatives save for siblings (which would be Page 2).

In the third screenshot, you are on Page 4, which has a sibling (Page 3) and it has an ancestor (Example 2).

This is a good way to keep your navigation nice and tidy so that the user can only see deeper pages when it clicks on a specific section.


There are dozens of other combinations you can make with the Navigation Configuration, but these three comprise some of the most common settings. How you use them from here is entirely up to you. Just remember, keep it simple. No one likes convoluted navigation systems.


What type of content do I plan to have on this site? Do I care?


Sometimes, all you really care about is getting a style template finished and installed on a site. You let the content managers worry about what's actually going to be out there. But, there are definite times when you need to concern yourself with content.


  • What if your company really wanted WebGUI so they could have a customized Collaboration System?

  • What if your boss wanted the content on your front page to have an unusual layout?

  • Will you need multiple CSS files to hold the code for your Collaboration System, or are you okay with just putting all the code into the head block of the template?


Note: In the future you may need to change parts of your CSS and it can be hard to track down styles that are in head blocks. Use the head block for quick testing of CSS and move it to external stylesheets when you're done.


Example of the Head Block



There are many options with WebGUI, and honestly no one way is necessarily better than another. Remember this sage advice: as long as you can get it to work, then that's a good way to do it. Essentially, if you are able to use an Article to accomplish something that maybe a Collaboration System could do too, one way isn't superior to the other. You need to do what works for you.


Building Templates


Templates can be a little daunting at first glance. They're filled with a mixture of CSS, XHTML and WebGUI macros and template variables. If you're not familiar at all with programming, then this can be all the more intimidating. You should try to make yourself comfortable with templates, and the best way to do that is jumping right on in and starting to play with them.


Just remember a couple of things.

  1. NEVER modify a default WebGUI template.

  2. ALWAYS make a copy of a template you want to modify.


Creating a Template


How do you make a template? It's actually pretty simple, but sometimes it can seem difficult if you don't know where to look. There are two methods.


  1. Copy an existing template and modify it.

  2. Create a new template from the Asset Manager.


Those who are just starting out with WebGUI are encouraged to go with the first option. Just find a template anywhere on the site by clicking “Manage” next to a template drop down menu. You'll be taken to the asset manager screen where you can copy and paste that template into your own workspace so that you can call it yours.


In the example below, you're going to find out where the Indent Nav navigation template is in the asset manager, then make a copy of it and paste it into your workspace.


Copying Indent Nav


  1. Click on Manage next to the Navigation Template dropdown.




  1. You're taken to the asset manager. Click the checkbox next to the template you want to copy.




  1. Navigate to your workspace, and mark the checkbox next to the Indent Nav copy in the Clipboard.




  1. You're done! You've successfully made a copy of a navigation template which you can modify without worrying about ruining the original.



Aside from this method, you can also create a template from scratch. This is a good way once you've familiarized yourself with all of the different types of templates you can make in WebGUI. There are only a few steps you needed in order to set this up.


Create a Template from Scratch


  1. Select “Template” from the New Content menu in the Asset Manager.




  1. Give the template an easily recognizable Title and Menu Title. Then, be sure to pick the correct namespace. Every template has a corresponding namespace. It's how WebGUI knows what type of template it is.




  1. Take all of your template code and paste it into the Template field.





  1. You're done! Just click save and your new template is created.




Putting it Together


By now, you hopefully have a good idea of how to create what you need to make your site, from building templates, to where you should put them, to the way that navigation can pull information from your page structure. The last thing this chapter will cover is how to go about taking your design and actually build it out into your website.


  1. Go to the homepage of your site, login and turn admin mode on.


  1. On the Page Layout asset toolbar, click on the small page icon to bring up the context menu, then click on “Change Recursively.”




  1. The Change Recursively screen appears. Click on the “Display” tab, then click on the dropdown menu next to “Style Template” and pick your new style.




  1. Set the radio button for Style Template's “Change Recursively” option to “Yes.”




  1. You're done! You've just applied your new style to all of the pages that came with WebGUI.





It's always tough to figure out where exactly you need to start when you're in unfamiliar settings. Hopefully, with these step-by-step instructions, along with a few details on things you should consider, getting things going with WebGUI will seem less intimidating.


If you feel that you still need more help, be sure to check out the following chapters in this book: “Macros and Variables,” “Making a Page Layout Part of Your Design,” “How to Build a Style Template,” and “Troubleshooting.”

Keywords: cms folder head block headblock menu navigation style Templates webgui

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