Username Password
Bookmark and Share

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

Keywords: table of contents

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