Search

Categories

collaboration system css    - navigation    - rss    - style    - template       - CSS          - navigation          - rss          - style          - template       - HTML       - design       - macro       - navigation       - style       - template variable folder macros navigation snippet style template variables templates

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

XHTML Example Page

CSS

CSS Syntax

CSS Example 1

Classes

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

IDs

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

XHTML

CSS In Action

Programming Logic

The IF Statement

The IF/ELSE Statement

The IF/NOT Statement

The IF/ELSE IF Statement

Conclusion

CSS Vs. Tables

The Choices

Code Example 1

Drab HTML

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

Conclusion

WebGUI Macros and Template Variables

Variables

Title Variable in an Article Template

The Basics of WebGUI Template Variables

Syntax of a Template Variable

Example Template Variables

Navigation Asset Settings

Loops

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

Macros

Macro Example

Passing a Parameter to a Macro

Passing Multiple Parameters to a Macro

Macro Examples

Using RandomAssetProxy

Conclusion

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

Crumbtrail

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

Conclusion

How to Build a Style Template

Get Started

First Steps

Choosing Whether to Use AssetProxy or FileUrl

ˆAssetProxy();

ˆFileUrl();

Installing the Template

WebGUI URLs

Creating a WebGUI Workspace

Preview Your Template

Navigation

Navigation Configurations

Configuring Your Navigation Configuration

Choose a Navigation Style Template

Options for CSS and Javascripts

CSS Snippets

Conclusion

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)

Conclusion

Customizing Indent Nav

Indent Nav's Default Look & XHTML

XHTML

Default CSS

Fancy Indent Nav CSS

Horizontal Indent Nav

Indent Nav – anAncestor, navOn

XHTML

Third Example

CSS – Block 1

CSS – Block 2

Conclusion

Bulleted List Navigations

Basic Bulleted List and XHTML

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

Conclusion

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

Conclusion

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

Conclusion

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

Conclusion

Trouble Shooting

General Design & WebGUI

Cascading Style Sheets (CSS)

WebGUI Templates

Javascript

 

HTML Cheat Sheet

CSS Cheat Sheet