Username Password
Bookmark and Share

WebGUI 7.x Designers Guide

The WebGUI Designers Guide was written with the Web Designer in mind. It was written for an experienced web designer, and assumes you have a working knowledge of HTML and CSS. This book also assumes that you have a basic working knowledge of WebGUI's user interface as described in the WebGUI Content Managers Guide. While we do provide some basic references for HTML, CSS, and WebGUI in this book complete references of those subjects is well beyond the scope of this document.

WebGUI was built to avoid placing limitations on the designer. Similarly, we don't want this book to limit your creativity. This book is part reference, part tutorial, and part cookbook, but it is by no means a complete guide to everything you can do as a designer. With this book our intent is to give you a good understanding of what tools you have at your disposal and how to use them, and provide some examples of how to put them together to make a web site. Ultimately, it's your creativity that makes the site unique and compelling.



collaboration system (3)
css (49)
folder (1)
macros (2)
navigation (5)
snippet (1)
style (2)
template variables (1)
templates (10)

Featured Article: Table of Contents

Design Basics


XHTML Example Page


CSS Syntax

CSS Example 1


CSS Example 2

CSS Example 2, Using it in XHTML

CSS Example 2, In Action

CSS Example 3

CSS Example 3, Using it in XHTML

CSS Example 3, In Action


CSS Example 4

CSS Example 4, Using it in XHTML

CSS Example 4, In Action

The Nature of Cascading

CSS Example 5

Example 5, Using it in XHTML

Target Even More Specifically

CSS Example 6

CSS Example 6, Using it in XHTML

CSS Example 6, In Action

Other Example


CSS In Action

Programming Logic

The IF Statement

The IF/ELSE Statement

The IF/NOT Statement

The IF/ELSE IF Statement


CSS Vs. Tables

The Choices

Code Example 1


Exact Same HTML Modified with CSS

Same HTML, But With Different CSS

So then, why use a table?

Example 1, Tables

Example 1, CSS

Table Advantages

The Big Advantage of Tables

Can’t I just keep on using tables?

Reasons to use table-free layouts


WebGUI Macros and Template Variables


Title Variable in an Article Template

The Basics of WebGUI Template Variables

Syntax of a Template Variable

Example Template Variables

Navigation Asset Settings


Basic Page Loop

Loop Syntax

Logic Tests

The If Statement

The If Statement with a Variable

The IF/ELSE Statement

IF/ELSE Example

The IF/ELSE IF Statement


Macro Example

Passing a Parameter to a Macro

Passing Multiple Parameters to a Macro

Macro Examples

Using RandomAssetProxy


Getting Started with WebGUI

A Clean Slate

Setting Up Your Workspace

Steps to Make Your Space

What do you Need?

Will you 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?

Dropdown Menu


Contextual Navigation

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

Example of the Head Block

Building Templates

Creating a Template

Copying Indent Nav

Create a Template from Scratch

Putting it Together


How to Build a Style Template

Get Started

First Steps

Choosing Whether to Use AssetProxy or FileUrl



Installing the Template


Creating a WebGUI Workspace

Preview Your Template


Navigation Configurations

Configuring Your Navigation Configuration

Choose a Navigation Style Template

Options for CSS and Javascripts

CSS Snippets


Making a Page Layout Part of Your Design

The Example

Admin Mode On

Page Layout Template

Template Code – Chunk 1

Template Code – Chunk 2

Template Code – Chunk 3

Template Code – Chunk 4

Template Code – Chunk 5

Template Code – Chunk 6

Template Code – Chunk 7

Page Layouts + CSS = Pretty (Right Column)

hotLinks and tickets CSS

Height and Width of Tickets Background

Page Layouts + CSS = Pretty (Left Column)

frontPage CSS

Page Layouts + CSS = Pretty (Bottom)


Customizing Indent Nav

Indent Nav's Default Look & XHTML


Default CSS

Fancy Indent Nav CSS

Horizontal Indent Nav

Indent Nav – anAncestor, navOn


Third Example

CSS – Block 1

CSS – Block 2


Bulleted List Navigations

Basic Bulleted List and XHTML


First Example

A Few Submenu Items

A Few Submenu Items, XHTML

A Few Submenu Items, In Action

Navigation Setting

First CSS Block

First Three Selectors

Second CSS Block

Next Set of Selectors

Second Example

Submenu for Blue Nav

First CSS Block

Second CSS Block

Third CSS Block

Final product

Adding in DHTML

A Look at the Code - initList

A Look at the Code – swapVis


Making a News Brief with Collaboration Systems

Redefining the Collaboration System (CS)

Collaboration System (CS) Templates

Collaboration System (CS) Security

Collaboration System Settings

News Brief Collaboration System (CS)

Analyzing What You Need


Image Previewer with WebGUI Collaboration Systems

The Example

The Template

Template, Lines 1 - 5

Template, Lines 6 – 8

Template, Lines 9 – 10 : The Post Loop

Template, Lines 11 – 13 : Text Content

Template, Lines 14 – 26 : Attachments

Template, Lines 27 – 38 : Edit/Delete Controls

Template, Lines 36 – 37 : Ending the Loop, Closing the Cell

Template, Lines 38 – 46 : Ending the Loop, Closing the Cell

Template, Lines 47 – 51 : Ending the Row & Table, Running the Javascript

The Template, Explanation

The Attachment Loop

WebGUI Admin Console Settings

The Last Important Pieces

The Javascript – bigImage

Watching it Come Together


Custom RSS Displays

The Pieces

A Collaboration System

Finally, Syndicated Content

Enabling RSS

Bringing in the Syndicated Content

Syndicated Content Settings

Custom RSS Template

The Template Code

Displaying What You Want

Narrowing it Down


Trouble Shooting

General Design & WebGUI

Cascading Style Sheets (CSS)

WebGUI Templates



HTML Cheat Sheet

CSS Cheat Sheet

© 2023 Plain Black Corporation | All Rights Reserved