InstantEnhancements < TWiki

---+!! Instant Site Enhancements

These quick enhancements are aimed at improving and customising your Foswiki.  New site administrators are especially encouraged to review this document for ideas before deploying a new site. The metaphor of building a house is useful.  The listed enhancements are some of the details possible when moving into a new office or home. These small changes can make a *big* differences for user satisfaction at your site. All modifications can be done through your Web browser, and they don't take more then in a couple of minutes.  No system administration expertise is required. Some of these enhancements are also mentioned in the reference manual and other topics.

Many of these tips are based on setting some special [[WebPreferencesHelp][preferences]].

%S% We recommend implementing at least *some* of these enhancements *right after installation* to get a taste for what is possible.  Some of these tips and enhancements _should_ be implemented before or during initial roll-out.

This may spark your imagination to *really* customize your site so that it's optimal for *your* users.  Slightly more advanced customization tips can be found in Foswiki:Support.SupplementalDocuments.

%TOC%

---++ Tips using Preference Settings

Preference settings can be redefined and are a great resource to customize your site. You need to know the preference name and decide where to put it.

---+++ Change Colors of Page Header/Footer

Incredibly obvious, maybe, but some site admins don't get around to changing the default web colors right off, whether they like them or not. Simply changing the defaults will make a huge difference in the overall look. 

*What we are doing*

We want to set the preference WEBBGCOLOR in topic WebPreferences to one of the StandardColors. <nop>WebPreferences is, as you can guess, a topic which holds all kind of [[%SYSTEMWEB%.PreferenceSettings][preference settings]] for each Web[[ManagingWebs][{*}]]. Each web has its own <nop>WebPreferences, and you can set them differently for each web.

*How to do it*

   1 Pick color code from company or product references, the StandardColors table (recommended for 8-bit client compatibility), or some other color reference. 
   2 Go to WebPreferences in each web, and edit the topic.
   3 Set your preferred WEBBGCOLOR [[%SYSTEMWEB%.PreferenceSettings][preference settings]], and save the topic.
   4 %X% Add a new line immediately after the color code. If there is (invisible) space after the color code, the page header might get strange colors (e.g. black).

It's just as easy to refine later on, so you're not locked in, just looking better.

---+++ Set Page Background Color 

Without getting into the [[skin templates]] system yet, you can easily edit the ==view.tmpl== (in the =templates= directory). In the HTML at the top, the body tag has the page background hardcoded to white ==bgcolor="#ffffff"==. You can change that color value to a new setting. First, define a new[[%SYSTEMWEB%.PreferenceSettings][preference setting]] in the site-level [[%LOCALSITEPREFS%]], e.g. =* Set =PAGEBGCOLOR = #d0d0d0=, then edit the ==view.tmpl== template file and change ==bgcolor="#ffffff"== to ==bgcolor="%<nop>PAGEBGCOLOR%"==. If you want, you can set the page background color individually per web, simple add a =* Set =PAGEBGCOLOR = #d0d0d0= bullet to the WebPreferences to overload the site-level preferences. (Without font color control, you'll have to stick to light colors.)

---+++ Titles-Only Topic List - !WebTopicList

WebTopicList is a *good first navigation tool for new users,* a fast-loading linked list (page titles only) of a web's topics is a quick and easy way see what's available. By default, slower, but more powerful WebIndex is used. 

Without explaining what WEBTOPICLIST is, just try it: 

   1 Go to WebPreferences in each web, and edit the topic.
   2 In the WEBTOPICLIST setting, replace =WebIndex= with =WebTopicList=, and save.

---+++ Simple way to create %RED% colored text %ENDCOLOR% and graphics

This should be enabled, see the "Miscellaneous Settings" in the DefaultPreferences. Look for the settings RED, BLUE etc (which define HTML tag FONT). To copy/paste the definitions of the colors you need to see the source text, but =Edit= is disabled. Instead, view the topic in ==raw== format (if your skin has no button for this, type "?raw=on" at the end of the URL).

---+++ EZ Graphic Icons to Highlight Text

Icons can do a lot to enhance scannability of topics. For instance, on *HELP* pages, most people tend to jump around looking for answers rather than reading through - icons help point out the most important bits.

DocumentGraphics has a whole collection of ready icon images. You can use these images in any topic by referring to their name. For example, !DocumentGraphics has an image attachment called =days.gif=. To show this image in a topic, write =%<nop>ICON{"days"}%= to get %ICON{"days"}%.

*Creating image macros*

You may find it easier to write shorthand graphic notation. You can create your own image macros by defining them in a preference topic (most likely [[%USERSWEB%.%WIKIPREFSTOPIC%]].)

A macro name may be one letter, like =Y=, or may be longer like =HELP=, =WARN= etc. You can also add your own images, e.g. a =NEW=, or a =ASK= to ask question.

For instance, if we want to write =%<nop>DOWN%= instead of =%<nop>ICON{"arrowbdown"}%=, define the new macro like this:
<verbatim>
   * Set DOWN = %ICON{"arrowbdown"}%
</verbatim>
Or if you have a custom image to use, attach this to [[%LOCALSITEPREFS%]] and write:
<verbatim>
   * Set DOWN = <img src="%ATTACHURL%/my_image.gif" border="0" alt="DOWN" width="16" height="16" />
</verbatim>

Most images in DocumentGraphics are 16 x 16 pixels.

   * *Related:* There are other approaches for creating more extensive icon libraries. This is a simply and quick way to get started. See DocumentGraphics for more info.

---+++ Use TOC macro to create table of content

TOC is Table-Of-Content, generated automagically from headers (defined like that: ==---++== , see ShortHand).

For example, you may want to put all your custom settings in [[%LOCALSITEPREFS%]] right on top of the page, and generate table of contents, like:

   * Preferences for easy creating nice pages 
      * Graphics icons in text 
      * Colored text 
   * System Preferences 
      * Contents of page header and footer 
      * User interface defaults 
      * Email 
      * Plugins 
      * Notes 

Non-admin users wil be interested only in first part, non-system preferences.

---++ Personal Productivity - Tools and Tips for Working Faster

Although this area applies to all setups, the initial focus is on site managers working on a Linux/Apache site, from a Windows local PC. The assumption being: if you're working with Linux as your desktop, you're probably a programmer or system admin and have these basics handled!

---+++ Use your favorite text editor for major edits

When you have a fair bit of formatting work - for example, compiling new info pages from various cut'n'paste sources, editing multiple topics or contributed material - it's often easier to use a real *[[TextEditor]]* instead of the browser's text edit box.  There are several methods for doing this.  For Windows, there are several well-recommended text editors.

*Windows&nbsp;Example:* [[http://textpad.com][TextPad]] is a low-cost, top flight Windows program, with an extended trial period. You can download from a well-stocked library of user-contributed macros, dictionaries, and syntax and clip files. You can also easily create a clip collection that allows you to format text with TML code: select a text string and click for bold, italic, links, bullet lists - just like a regular HTML editor - and also insert blocks of TML code, use simple or regex search and replace, more.

*Copy&nbsp;&amp;&nbsp;Paste:* Using the web window this can work very well.  System differences may present difficulties with this method but it is simple and reliable in most cases.

*Browser&nbsp;Integration:* Some web browsers can be configured to automatically use an external editor.  See your browser documentation for details.

*Alternate&nbsp;Browser:* While your main browser might not have the features for topic editing, another one might.
   * An example on the Linux platform is the =w3m= pager/browser for Linux.  This is a text based version similar to =lynx= but it includes text editor features and a configurable command set to act like =lynx= if you are more accustomed to it.

---++ Ready to use SEARCH 

---+++ Personal directory of topics you're involved in

Here's how you can create your own personal directory of topics you've contributed to recently. Copy the text below (between *Start Copy* and *End Copy*) and paste it into your personal page (%WIKIUSERNAME%). You can add other webs to search by duplicating one of the web subsections and editing the string {web ="webname"} in the search parameters to refer to the specific web you want to search. This script would also work for a group.

*Start Copy*
<verbatim>
*Here's a list of topics I've been involved in recently:*

---++++ Project Web

%SEARCH{ "%TOPIC%" web="Project" scope="text" nosearch="on" nosummary="on" noheader="on" nototal="on" order="modified" reverse="on" limit="20"}%

</verbatim>
*End Copy*

The [[VarSEARCH][SEARCH macro]] has many more formatting options.

---+++ Recently changed pages 
Here are the last 15 changed pages, formatted into a neat table.

<verbatim>
<table>
%SEARCH{ "'1'" scope="topic" type="query" nosearch="on" nototal="on" order="modified" reverse="on"  format="<tr><td>  [[$topic][$topic]] </td><td>  $wikiusername  </td><td> $date  </td></tr>" limit="15" }%
</table>
</verbatim>

---++ Hidden Edit Lock for Individual Topics

When you're creating main gateway pages, you may want to temporarily (or permanently) restrict editing to yourself or a limited group of people. You can do this with a Preference setting that includes one or more users and groups. Only auhorized users will be able to use ==Edit==.
   * *Example:* ==Set ALLOWTOPICCHANGE = <nop>%USERSWEB%.UserName, <nop>%USERSWEB%.GroupName==
   * %T% *To hide the setting:* Use HTML comment tags - put ==&lt;!--== on the line _above the setting, and ==--&gt;== on the line below.

---++ Change the Default Logo

If you want to change the logo per web, simply attach a new logo.gif to the web's <nop>WebPreferences, and change the logo's filename by overriding the name using WEBLOGONAME in <nop>WebPreferences:  
   * =Set WEBLOGONAME = filename.gif=

Other cusomtisations are possible using =WEBLOGOIMG=, =WEBLOGOURL=, and =WEBLOGOALT= (they mirror the =WIKILOGO*= macros, but are applied to each web, rather than to the %<nop>WIKITOOLNAME%-based references)

If you'd like to have the same customised logo for all the webs, make these changes in %LOCALSITEPREFS% instead of each web's <nop>WebPreferences, e.g.,
   * =Set WEBLOGOIMG = %<nop>PUBURLPATH%/%USERSWEB%/WebPreferences/mylogo.gif=

---++ Customize Topic Classification Forms

With a simple one or two-line default topic form available for every topic  - in *Edit* mode, click the ==[Add]== button, and select the form if it isn't already enabled. Then, click the title to get to the actual form, ==[Edit]==, and carefully change values, probably basic page classifications. You'll get some increased value, and hands-on experience with DataForms, without having to read up about them first. %X% *(add the corresponding search per category - copy a default and change)*


---++ Add Your Favorite <nop>JavaScript Features

You're no doubt familiar or better with HTML, JS, and "webmastering". Without getting into the [[skin templates]] system yet, you can easily edit the ==view.pattern.tmpl== (if you are using default pattern skin) (in the =templates= directory) for some dramatic effects. The top of the template is mostly regular HTML with some macros. Open up some space in the ==&lt;head&gt;== area, and you can drop in reliable <nop>JavaScripts - a pop-up window script, for example - or tag it as an external script.

   * %T% Obviously, you can do the same - place a link to an external stylesheet as well. If you set values for standard HTML tags, you can control a good deal of the type size, style and color with out adding CSS tags. *example*

%X% Depending on what you load up, you may change the overall cross-browser compatibility - however be careful that your site does not look beat up in various other browsers. The scripts you choose will determine compatibility.

---++ Customize The Left Navigation Bar

Customize the contents of the WebLeftBar for each web to include important topics for that web, or to link to an important topic for the overall site. Each web has its own WebLeftBar page. (This is specific to the PatternSkin.) 

----
*Related Topics:* AdminDocumentationCategory
This topic: TWiki > CategoryCategory > AdminDocumentationCategory > InstantEnhancements
Topic revision: r1 - 2009-09-12 - 01:27:37 - ProjectContributor
Copyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding STALklubben? Send feedback