how to build a site style · • css, javascript, xml • just give the appropriate url... •.css,...

How to Build a Site StyleWebGUI LIVE!

Where do we start?

• Create a design

• Turn it into HTML & graphics

• Introduce WebGUI Components

• Putting it all together

• A Closer Look

Creating a Design The Big Question...

What are my limitations when desiging for WebGUI?

NONEIf anything, it gives more freedom

Our Example

• Photoshop Slices

• Text Editors (Notepad++, etc)

• WYSIWYG???

HTML & GraphicsBreak it up however you normally would

Such As...

• Login Fields

• Areas that might have security

• Graphics

• Where is your content

• Navigation systems


Keep in mind

• Where to put them?

• WebGUI Templates define their look... to a point

• Easy to add via Macros


Login Fields

• Can provide restricted access to...

• Special Links

• Login areas

• Special messages

HTML & GraphicsAreas that might have security

Remember WebGUI Groups

• Two different ways to reference them

• Both use macros

HTML & GraphicsGraphics

What about em?

• Anything that ISN’T part of your design

• If you put content into a style, it shows up EVERYWHERE that style is used

• You insert content using template variables

HTML & GraphicsWhere is your content?

So, what exactly IS content?

• Remember, WebGUI navigation is dynamic

• Automatically can add or remove pages

• Navigation is referenced by using a Macro

HTML & GraphicsNavigation Systems

Just the highlights...

• Allow logins, access to your account, turn admin-mode on

• Insert graphics, navigation, restricted content

• Display page titles

• And more!

Introducing WebGUI ComponentsMacros

Helpful, and reusable, pieces of code that help you...

• Login - ^L(...); • Simple way to call the default login fields


Admin and Account Macros


• Account - ^a(...);• Lets the user click on a link to access their account





• Gateway URL - ^/;• Returns the URL of the domain





• Gateway URL - ^/;• Returns the URL of the domain

• Admin Toggle - ^AdminToggle(...);• Lets you flip to Admin mode and back



Look for them in WebGUI Help, there’s more!...

• ^AssetProxy(...); • Grabs an object and displays it (and it’s smart too)

• <img src=”myImage.gif” /> becomes...

• ^AssetProxy(myImage.gif);


Referencing Objects

• ^AssetProxy(...); • Grabs an object and displays it (and it’s smart too)


• ^AssetProxy(myImage.gif);

• ^FileUrl(...);• Returns the URL of whatever you give it


• <img src=”^FileUrl(myImage.gif);” />


Referencing Objects

^AssetProxy(); vs. ^FileUrl();• Why use ^AssetProxy()?

• Grabs and processes passed values

• Recognizes what is being passed to it and creates necessary tags to display it

• Ex- <img>

• Great for quickly referencing assets

^AssetProxy(); vs. ^FileUrl();• Why use ^AssetProxy()?

• Grabs and processes passed values

• Recognizes what is being passed to it and creates necessary tags to display it

• Ex- <img>

• Great for quickly referencing assets

• Why use ^FileUrl()?

• Returns the full URL (minus the domain) of the passed Asset

• Draws no tags at all

• Great for giving you more control in your template or for CSS backgrounds

• Page - ^Page(...); • Pass it menuTitle and you’ll display the

menu title, pass it title and you’ll get the title• ^Page(title); becomes...

• An Example Title


Page Titles




• Company - ^c;• Returns the company name in your

settings• ^c; becomes...

• Widgets Inc.


Page Titles




• Company - ^c;• Returns the company name in your

settings• ^c; becomes...

• Widgets Inc.


Page Titles

<title> Widgets Inc - Home</title>

<title> ^c; - ^Page(title);</title>

• Backup your work

• Keep your .htm file as a reference

Putting It All TogetherThe Beginning

Prep Work



• Create a copy of that orginal .htm file

• Called the ‘Working Copy’

• Insert the macros here!


Prep Work



• Create a copy of that orginal .htm file

• Called the ‘Working Copy’

• Insert the macros here!

• Create a WebGUI folder in your asset manager to store your-

• Template

• Images

• Snippets


Prep Work

• <tmpl_var head.tags>

• Inserts necessary code to handle editing on a page

• Needs to be in your <head></head> tags

Putting It All TogetherThe Middle

Setup Admin Mode and Content




• ^AdminBar();

• Places the Admin bar at the left of the page in admin mode

• Should be right after your <body> tag






• ^AdminBar();

• Places the Admin bar at the left of the page in admin mode

• Should be right after your <body> tag

• <tmpl_var body.content>

• This creates the area for your content

• Put it wherever you want your content to be (once!)



• Use ^AssetProxy(); and ^FileUrl for your images

• ^AssetProxy(red.gif);

Putting It All TogetherThe Middle, Still

External References



• Use ^FileUrl(); to reference javascripts, CSS files or backgrounds in CSS files

• background-image: url(‘^FileUrl(red.gif);’);


External References



• Use ^FileUrl(); to reference javascripts, CSS files or backgrounds in CSS files

• background-image: url(‘^FileUrl(red.gif);’);

• Use ^AssetProxy(); to pull in Snippets and your Navigation


External References

• Use ‘File Pile’ to upload images, CSS, Javascripts to WebGUI

Putting It All TogetherThe End

Installing the Template


• Create a template from the Asset Manager

• Be sure to select ‘style’!



Putting It All TogetherThe Template


• Create a template from the Asset Manager

• Be sure to select ‘style’!

• Create a Navigation configuration from the Asset Manager

• Remember its URL!



A Few Important BitsNavigation

&Snippets

• Include a navigation system by ^AssetProxy();

• Many available pre-installed

• You can always create your own

• Comes in 2 parts-

• Navigation Configuration

• Navigation Style Template

A Word About Navigation

• Navigation Configurations

• This is what is AssetProxy’d

• Controls what pages will be displayed


• Navigation Configurations

• This is what is AssetProxy’d

• Controls what pages will be displayed

• Navigation Style Template

• Associated with the Configuration

• Controls the look of your navigation


Behold the power of Snippets

• Can be used for external file referencing

• CSS, Javascript, XML

• Just give the appropriate URL...

• .css, .js., .xml






• And select the appropriate MIME type

• text/css, text/javascript, text/xml








• Why use a snippet instead of uploading a file?

• Speed and Ease

• Include template variables and macros








• Why use a snippet instead of uploading a file?

• Speed and Ease

• Include template variables and macros

• Restrict sections of your template

• You can set the security properties for specific groups

A Closer Look at our Example

The HeadA Closer Look at our Example

The HeadA Closer Look at our Example

WebGUIComponents

The Body, Part 1A Closer Look at our Example

The Body, Part 1A Closer Look at our Example

WebGUIComponents

The Body, Part 2 - HTMLA Closer Look at our Example

The Body, Part 2 - HTML with WebGUIA Closer Look at our Example

WebGUIComponents

Questions?

how to build a site style · • css, javascript, xml • just give the appropriate url... •.css,...

Documents