(Category) (Category) WebGUI FAQ :
Web Design
How-to make your content *shine*
wg-fomATgwyDOTorg
Subcategories:

Answers in this category:

(Answer) How do I create a new Site theme/template?
(Answer) How to Center coolmenu ...
(Answer) How to check if user is Visitor (Logged on) or not?
(Answer) How to retrieve USS items in a list...
(Answer) Logon Macro issues 6.2.9
(Answer) TMPL_IF, TMPL_LOOP... What's it all about?
(Answer) Add dropdown list of posted articles to User Profile
(Answer) How do I add custom fields to USS? (6.2.x)
(Answer) How do I remove index.pl? (invalid for 6.8.x+)
(Answer) How do I use the SQL Macro to populate items in a drop down list in a DataForm?
(Answer) How do I make a Recent Discussion list?
(Answer) Can you point me to some things that I can do with a DataForm?
(Answer) How do I provide specific content based upon a field in a user's profile?
(Answer) How do I deal with macros that need "s and HTML that needs "s?
(Answer) How do I include Javascript in my Articles, etc.? The <script> tags keep getting mangled!
(Answer) In a Weblog template of a CS (6.6+), how do I know where the Synopsis will end?
(Answer) How do I pull the first words, sentences, paragraphs from a SQL Query?
(Answer) Cross-Site database access
(Answer) Create an RSS feed quickly and easily 6.7+
(Answer) Javascript: Display a number in an input text as money.
(Answer) How do I mouse-over thumbnails to replace big image?
(Answer) How do I use *my* design in WebGUI?
(Answer) Basic Template for Thumbnails

[New Answer in "Web Design"]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I create a new Site theme/template?
For 6.2.x
This assumes you know how to log on as Admin, Turn Admin On, and choose the edit button.


First, understand that there are three parts to a design: 

 A style template
 A page template
 Content.
The style template is the static layout of the site. It handles how the head and body is supposed to look, style wise. CSS and other information about the layout of the shell of the site is put here. It is intended to be that the site doesn't change its shell much. If it does change, the expectation is that the style is either replaced or copied and changed.

In the <head> tags, the following should likely exist: 

 <head>
 <title><tmpl_var session.page.title> - <tmpl_var session.setting.companyName></title>
 <tmpl_var head.tags>
 </head>
The <body> should contain at least: 
 ^PageTitle;
 ^AdminBar(2);
 ^Navigation(type or name);
 ^L(17,"User:<a href=^/;?op=displayAccount>^@;</a>. %Logout%");
 <tmpl_var body.content>
(The locations and content of the macros should be customized according to the needs of the site).

Optionally, add the D (date) macro, c (company) macro, etc.. in appropriate places.

The Page Layout template is designed to allow for ease of transitioning between, say, a single-column page to a left-bar or a right bar or a three columns over one type scenario, among others. The Page Layout template also provides the editing icons interface that appears when the "Turn Admin On" is used. Usually, you shouldn't want to change these templates, but they are available if you do.

Content is Wobjects. (Web Objects). Articles, SQL Reports, Dataforms, etc. Each has their own default template to display. This is where the content of the page is provided.
wg-fomATgwyDOTorg

PS: If you want to drag content under navigation, put the navigation in the page template, above the position_loop, instead of in your style template.
wg-fomATgwyDOTorg
A suggested minimum (If you use this as a style template, you won't get lost/locked out easily):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><tmpl_var session.page.title> - <tmpl_var session.setting.companyName></title>
<tmpl_var head.tags>
</head>
<body>
^AdminBar(2);
<br />
^PageTitle;
^Navigation(FlexMenu);
^L(17,"User:<a href=^/;?op=displayAccount>^@;</a>. %Logout%");
<tmpl_var body.content>
</body>
</html>
wg-fomATgwyDOTorg
Just a reminder to change Navigation to AssetProxy in 6.3x+.

Also, I've been a proponent of putting Navigation in the Page Template. The problem with this is that it won't show up in renderings where only one asset might be on a page. There is no choose-your-own default page template, and it's of course not recommended to make changes to the default templates because upgrades tend to overwrite them.
wg-fomATgwyDOTorg

Don't forget to add the Admin Toggle:
^AdminToggle;
As it appears to be missing above. I added it as follows:
^L(17,"User:<a href=^/;?op=displayAccount>^@;</a>. %Logout%"); &middot; ^AdminToggle;
aewhaleATABS-CompTechDOTcom
AdminToggle is good. I think it is necessary to revamp the default "assumed" stuff in this FAQ. Essentially, AdminBar (I think) was supposed to be the same thing but in 6.x
wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How to Center coolmenu ...
From nuba:
Change line 151 html file to
 coolmenu.menuPlacement="center"

[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How to check if user is Visitor (Logged on) or not?
From Klaus :^GroupText("Visitors","Display this message","Display this alternate message");

From Len (adjusted by crythias for generic usage):
^GroupText(Visitors,<div align="center">
<a href="/index.pl/home?op=displayLogin">
<^I(someimagename);" width="183" height="35" alt="Click here to login!" border="0">
</a>
</div>
<div align="center" style="padding-top: 10px;">,<center><a class="myAccountLink"
href="/index.pl/packages?op=displayAccount">My
Account</a></center></div>);
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How to retrieve USS items in a list...
From a post from Crythias:
Here is a query: 

 select page.title, page.urlizedTitle, USS_submission.dateSubmitted,
 USS_submission.title, USS_submission.username, USS_submission.userId,
 USS_submission.USS_submissionId, USS_submission.status, 
 left(USS_submission.content,100), USS_submission.image from USS_submission 
 left join USS on USS_submission.USS_Id=USS.USS_Id left join wobject on
 USS.wobjectId=wobject.wobjectId left join page on page.pageId=USS_submission.pageId 
 where USS_submission.status='approved' order by USS_submission.dateSubmitted desc limit 7

and here is another: 

 select page.title, page.urlizedTitle, USS_submission.dateSubmitted, 
 USS_submission.title, USS_submission.username, USS_submission.userId, 
 USS_submission.USS_submissionId, USS_submission.status, 
 left(USS_submission.content,100), USS_submission.image from USS_submission
 left join USS on USS_submission.USS_Id=USS.USS_Id left join wobject on
 USS.wobjectId=wobject.wobjectId left join page on wobject.pageId=page.pageId
 where USS_submission.status='approved' order by USS_submission.dateSubmitted
 desc limit 7
The first query gives you the URL of the USS (only the USS). The second should
give you the root of the page containing the USS (and other stuff on that page).
Here's a template: 
 <tmpl_if displayTitle>
   <h1><tmpl_var title></h1>
 </tmpl_if>

 <tmpl_if description>
    <tmpl_var description><p />
 </tmpl_if>

 <tmpl_if debugMode>
        <ul>
        <tmpl_loop debug_loop>
                <li><tmpl_var debug.output></li>
        </tmpl_loop>
        </ul>
 </tmpl_if>

 <table width="100%">
 <tmpl_loop rows_loop>
        <tr><td>
                <a href="^/;<tmpl_var row.field.urlizedTitle.value>"><tmpl_var row.field.title.value></a> ^D(%M/%D/%Y,<tmpl_var row.field.dateSubmitted.value>);<br />
 <tmpl_var row.field.left(USS_submission.content,100).value><br />
        </td></tr>
 </tmpl_loop>
 </table>

 <tmpl_if pagination.pageCount.isMultiple>
  <div class="pagination">
    <tmpl_var pagination.previousPage>   <tmpl_var pagination.pageList.upTo20>  <tmpl_var pagination.nextPage>
  </div>
 </tmpl_if>

[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
Logon Macro issues 6.2.9
 ^L(17,"User:^a(^@;);. %Logout%");
             ^^^^^^^^ doesn't work when %% tags exist
 ^L(17,"User:<a href=^\;?op=displayAccount>^@;</a>. %Logout%");
works.
wg-fomATgwyDOTorg
Try this for 6.7x: <a href="?op=auth;method=displayAccount">^@;</a>
wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
TMPL_IF, TMPL_LOOP... What's it all about?
From bottelberghs: The boolean expressions in HTML::Template are evaluated in this way: the expression is true if the following conditions are met: 

   1. the variable must exist (=> is there a key in the hash-reference of 
      variables with this name?) and be defined (so it may not be assigned undef);
   2. the value of the variable must not be empty (e.g. may not be a string 
      with no content);
   3. the value of the variable may not be zero (as in the integer 0);

In any other case, the expression will be evaluated to false.

[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
Add dropdown list of posted articles to User Profile
In conjunction with hj we came up with the following: 
 <script type="text/javascript" language="JavaScript">
        <!-- 
        function GoThere(fe){
                var opt_key = fe.selectedIndex;
                var url_val = fe.options[opt_key].value;
                window.open(url_val,'_top');
                return true;
        }
        //-->
 </script>

 <form name="form" method="post" action="">

 <select onChange="GoThere(this);">

 <option value="0">-- Choose One --</option>

 ^SQL("select

 page.title,

 page.urlizedTitle,

 USS_submission.title,

 USS_submission.userId,

 USS_submission.USS_submissionId,

 USS_submission.status,

 USS_submission.image, 

 USS.wobjectId


 from USS_submission


 left join USS on USS_submission.USS_Id=USS.USS_Id

 left join wobject on USS.wobjectId=wobject.wobjectId

 left join page on page.pageId=USS_submission.pageId 


 where USS_submission.userId='^FormParam(uid);' and USS.wobjectId=273  and USS_submission.status='approved'

 order by USS_submission.dateSubmitted", <option value='^/1;'>^0;</option> );

 </select>

 </form>

wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I add custom fields to USS? (6.2.x)
Take a look at the help. (hint: append this to your own WebGUI site) ?op=viewHelp&hid=submission%20form%20template&namespace=USS

Essentially, change the USS form and template to include <tmpl_var userDefined1.form> where you want to see the box for the custom field. Be certain to include that variable in your display template as well.

[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I remove index.pl? (invalid for 6.8.x+)
This is a bit old, but it probably still works: http://www.inertramblings.com/archives/000229.html
wg-fomATgwyDOTorg
Don't have to worry about this in 6.8+ (index.pl is removed and replaced with the WebGUI Handler of httpd.conf)
wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I use the SQL Macro to populate items in a drop down list in a DataForm?
it's possible. HTML purists won't like it, but it is possible.
From crythias:

(Note: This will not make your HTML TIDY or compliant)
At least in 6.2.x, you could put your SQL Macro in the possible values section. Here's a hint: use something like
CONCAT('<OPTION VALUE=',valuefield,'>',listfield)
... A little playing around and you just might see it work.
wg-fomATgwyDOTorg

[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I make a Recent Discussion list?
Please note: This is probably answered completely in the Ruling WebGUI pay-for version. Any information listed here came from public discussion.

http://www.plainblack.com/etcetera/recent-discussions/5 is a link to check out.
wg-fomATgwyDOTorg

[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
Can you point me to some things that I can do with a DataForm?
First, understand that the Default DataForm Template has 
 <tmpl_var form.start>
which expands to 
 <form action="/path/to/form-url" enctype="multipart/form-data" method="post" >
 <div class="formContents">
 <input type="hidden" name="func" value="process"  />
This places the contents into the database, parsed for appropriate content. If you're going to do something *more* with the data than the Default Acknowledgement page, you might consider removing the <table> in the Acknowledgement Template and using a SQLReport by calling it with the ^AssetProxy("SQLReportAssetId"); (v6.5+) and placing that macro in the place of the <table>. The SQLReport should already be defined. Make certain you have 
 FormParam => FormParam, \
in your webgui.conf **macros** section (located in WebGUI/etc. It might be www.domain.com.conf). Then, in your SQLReport, you can use ^FormParam("field"); to search.
wg-fomATgwyDOTorg
The above is nice when you don't need any interactivity with your data. That is, you are simply "adding" to your data with the DataForm. What if you're trying to look something up?

Honestly, don't use DataForm. Here's a sample: http://www.gwy2.org/cgi-bin/fom?file=46



wg-fomATgwyDOTorg

[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I provide specific content based upon a field in a user's profile?
Either use the ^If(condition,"result","else result"); macro (You'll need to add it manually to your etc/webgui.conf or etc/www_example_com.conf -- 
 If => If, \
) or use Javascript:
 <script type="text/javascript">
 <!--
 var x= "^User("gender");"

 if ( x =="male") {
 document.write("he ")
 } else {
 document.write("she ")
 }
 -->
 </script>

wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I deal with macros that need "s and HTML that needs "s?
Very simply: instead of (a non-functioning example:) 
 <a href="^UrlMacro("assetId");">Click me</a>
Try: 
 <a href='^UrlMacro("assetId");'>Click me</a>
(note the single quotes!)
wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I include Javascript in my Articles, etc.? The <script> tags keep getting mangled!
Put your script in a Snippet, and call the Snippet with an AssetProxy macro.
wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
In a Weblog template of a CS (6.6+), how do I know where the Synopsis will end?
The code for synopsis is based upon where a \n is located in the body/description of a Weblog Post. At the point of a physical new line (not a <p> or <br>), the ^-; macro is added to the synopsis/body, and chopped off to the left to provide the Synopsis. HOWEVER, if the body *has* a ^-; in it (view your document in HTML mode, perhaps?), *that* is the point that will determine the synopsis length.
wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I pull the first words, sentences, paragraphs from a SQL Query?
Here's a sample that will pull (space delimited, mind you) the first 5 words from Post.content
 SELECT CONCAT(SUBSTRING_INDEX(content, ' ',5) , 
 if(CHAR_LENGTH(content)-CHAR_LENGTH(SUBSTRING_INDEX(content, ' ',5))> 0, 
 '...',' ') COLLATE utf8_general_ci) as str from Post
I leave it as an exercise to the reader to filter the feeds. NOTE: Post.content already is a short version of the full content. I'd also *suggest* that one might include exit tags as indicated, although it could possibly break TIDY:
 SELECT CONCAT(SUBSTRING_INDEX(content, ' ',5) , 
 if(CHAR_LENGTH(content)-CHAR_LENGTH(SUBSTRING_INDEX(content, ' ',5))> 0, 
 '...',' ') COLLATE utf8_general_ci, '</b></u></i></p>' COLLATE utf8_general_ci)
 as str from Post

Sentences? change the ' ' to '.' and the count appropriately.
Paragraphs? change the ' ' to '</p>' or '<p>' and the count...
wg-fomATgwyDOTorg

[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
Cross-Site database access
To access the wg db of one site from another wg site: www.site1.com db=www_site1_com www.site2.com db=www_site2_com
on site2 create a new database connection whose connect string is: DBI:mysql:www_site1_com
Now you can access the db from both sites. It's probably a bad idea to write anything to site1 from site2 though. I have not even tried that. I just use it for accessing the same news items on each site. I update one site and they all get it.
[Append to This Answer]
howellATnbccDOTorg
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
Create an RSS feed quickly and easily 6.7+
0) Create a new Page Layout to hold RSS content

1) Create a Snippet with Mime Type RSS

2) Create a Navigation (and make it only see stuff on the current page) such as: 

 <tmpl_if session.var.adminOn><tmpl_var controls><br /></tmpl_if><?xml version="1.0"?>
 <rss version="2.0">
 <channel>
   <title>INSERT TITLE HERE</title>
 <description>GIVE A GOOD DESCRIPTION</description>
 <link>http://YOURDOMAINHERE/^H(linkonly);</link>
  <tmpl_loop page_loop>
    <item>
     <title><tmpl_var page.menuTitle></title>
     <link>http://YOURDOMAINHERE/<tmpl_var page.url></link>
    </item>
  </tmpl_loop>
 </channel>
 </rss>
3) put the ^AssetProxy(navigation URL); inside the Snippet

4) Add shortcuts to the RSS Page (don't forget you can put expirations on the shortcuts)

5) Use the url of the Snippet in your links to RSS. To make a live Bookmark, add this to your <head>: 

 <link rel="alternate" type="application/rss+xml"
    title="RSS FEED TITLE GOES HERE" href="/path/to/snippet/url" >

wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
Javascript: Display a number in an input text as money.
 <SCRIPT type="text/javascript" LANGUAGE="JavaScript"><!--
 function outputMoney(number) {
      number=checkval(number);
     return "$"+outputDollars(Math.floor(number-0) + '') + outputCents(number - 0);
 }

 function checkval(mycheckval) {
    mycheckval=mycheckval.replace(/,/g,"");
        mycheckval=mycheckval.replace(/\$/g,"");
        return (mycheckval);
 }

 function outputDollars(number) {
    if (number.length <= 3)
        return (number == '' ? '0' : number);
    else {
        var mod = number.length%3;
        var output = (mod == 0 ? '' : (number.substring(0,mod)));
        for (i=0 ; i < Math.floor(number.length/3) ; i++) {
            if ((mod ==0) && (i ==0))
                output+= number.substring(mod+3*i,mod+3*i+3);
            else
                output+= ',' + number.substring(mod+3*i,mod+3*i+3);
        }
        return (output);
    }
 } 

 function outputCents(amount) {
    amount = Math.round( ( (amount) - Math.floor(amount) ) *100);
    return (amount < 10 ? '.0' + amount : '.' + amount);
 }

 //--></SCRIPT>
and for the field, I have...
 <input type="text" name="salary" onclick="this.value=checkval(this.value);this.select();" onBlur="this.value=outputMoney(this.value)">
I'm expecting to have JS active for my in-office usage, so I'm not absolutely paranoid about JS being on or off.
I'm also expecting to do something like 
 <form onsubmit="salary.value=checkval(salary.value)">
to make certain I've stored the proper type of number.
The onclick part allows for the entire value to be highlighted-selected after removing $ and commas.
Main js code copied from http://www.irt.org/script/723.htm
wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I mouse-over thumbnails to replace big image?
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
How do I use *my* design in WebGUI?
http://www.plainblack.com/community-wiki/how-to-give-webgui-your-own-style
wg-fomATgwyDOTorg
[Append to This Answer]
(Answer) (Category) WebGUI FAQ : (Category) Web Design :
Basic Template for Thumbnails
Courtesy of rizen via irc: see it in action at http://www.plainblack.com/wuc/photos
 <a name="<tmpl_var assetId>"></a><tmpl_if session.var.adminOn>
 <p><tmpl_var controls></p>
 </tmpl_if>
 
 <tmpl_if displayTitle>
      <h1><tmpl_var title></h1>
 </tmpl_if>
 
 <tmpl_if description>
     <tmpl_var description>
 </tmpl_if>
 <style>
 #thumbContainer{
        text-align: center;
        margin: 10px auto;
 }
 .thumbnail{
        float: left;
        margin: 5px;
        padding: 3px;
        border: 1px solid #e3e3e3;
 }
 </style>
 
 <tmpl_loop file_loop>
        <div class="thumbnail"><a href="<tmpl_var file.url>"><img src="<tmpl_var thumbnail.url>" border="0" alt="<tmpl_var title>"></a></div>
 
 </tmpl_loop>
 <div style="clear:both;"></div>

wg-fomATgwyDOTorg
[Append to This Answer]
Previous: (Category) Troubleshooting
Next: (Category) Unanswered Questions
This document is: http://www.gwy2.org/cgi-bin/fom?file=18
[Search] [Appearance] [Show Top Category Only]
This is a Faq-O-Matic 2.721.
This FAQ administered by ... Gerald Young