Difference: PatternSkinCustomization (1 vs. 9)

Revision 92005-10-22 - Main.TWikiContributor

Line: 1 to 1
 
Changed:
<
<

PatternSkin Customization

>
>

PatternSkin Customization

  Guidelines how to create and customize page templates. For styling your TWiki using stylesheets, see PatternSkinCssCookbook.
Line: 83 to 83
  twiki css viewtopbar
Changed:
<
<
WebTopBar
>
>
WebTopBar
  viewleftbar WebLeftBar viewtopicactionbuttons viewbottombar
Changed:
<
<
WebBottomBar
>
>
WebBottomBar
 

Logo

Line: 110 to 110
  Using logo.gif:
Changed:
<
<
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
>
>
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
 
  • You can also upload the image with FTP to /pub/YourWeb/WebPreferences/.
  • Copy the above instructions ("Redefine your custom variables") and insert your logo name.
Line: 137 to 137
 

I want to change the white space above and below the logo

Changed:
<
<
Change the table style in topic WebTopBar. The default top padding is 11px.
>
>
Change the table style in topic WebTopBar. The default top padding is 11px.
 

Top bar

Line: 191 to 191
  Using style sheets:
Changed:
<
<
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
>
>
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
 

I want to set or change the top background image

Line: 200 to 200
  Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):

Changed:
<
<
  • Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
>
>
  • Set WEBHEADERART = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/TWiki_header.gif
 
  • Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
Line: 217 to 217
  If you have localization enabled, you will also see a language dropdown box at the far right.
Changed:
<
<
You can remove these items from WebTopBar.
>
>
You can remove these items from WebTopBar.
 

I want to hide the top bar

Line: 311 to 311
 %TMPL:DEF{"topicaction"}%%TMPL:END%
Changed:
<
<
In the user page of TWikiGuest, set the cover to
>
>
In the user page of TWikiGuest, set the cover to
 
   * Set COVER = customer

Revision 82005-10-22 - Main.TWikiContributor

Line: 1 to 1
 
Changed:
<
<

PatternSkin Customization

>
>

PatternSkin Customization

 
Changed:
<
<
Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook.
>
>
Guidelines how to create and customize page templates. For styling your TWiki using stylesheets, see PatternSkinCssCookbook.
 
Line: 33 to 33
 
  1. In view.myskin.tmpl you write:
       %TMPL:INCLUDE{"view"}%
Changed:
<
<
%TMPL:DEF{"topicactionbuttons"}%More topic actions%TMPL:END%
>
>
%TMPL:DEF{"top:toolbarbuttons"}%More topic actions%TMPL:END%
 
  1. For testing, view any topic and append to the topic name: ?cover=myskin. You should see an effect now.
  2. To make the changes visible on all pages, go to Main.TWikiPreferences (to keep TWikiPreferences intact) and write:

Line: 69 to 69
 
%TMPL:INCLUDE{"view"}%
Changed:
<
<
%TMPL:DEF{"topicactionbuttons"}%More topic actions%TMPL:END%
>
>
%TMPL:DEF{"top:toolbarbuttons"}%More topic actions%TMPL:END%
 
Line: 77 to 77
 

Reference: pattern skin template INCLUDE tree

Added:
>
>
The view script invokes the view template:
 
view
Changed:
<
<
page constants javascript styles stylesdynamic body
>
>
twiki css
  viewtopbar
Changed:
<
<
WebTopBar viewtoolbar
>
>
WebTopBar
  viewleftbar WebLeftBar viewtopicactionbuttons viewbottombar
Changed:
<
<
WebBottomBar
>
>
WebBottomBar
 

Logo

Line: 114 to 110
  Using logo.gif:
Changed:
<
<
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
>
>
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
 
  • You can also upload the image with FTP to /pub/YourWeb/WebPreferences/.
  • Copy the above instructions ("Redefine your custom variables") and insert your logo name.
Line: 141 to 137
 

I want to change the white space above and below the logo

Changed:
<
<
Change the table style in topic WebTopBar. The default top padding is 11px.
>
>
Change the table style in topic WebTopBar. The default top padding is 11px.
 

Top bar

Line: 195 to 191
  Using style sheets:
Changed:
<
<
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
>
>
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
 

I want to set or change the top background image

Line: 204 to 200
  Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):

Changed:
<
<
  • Set WEBHEADERART = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/TWiki_header.gif
>
>
  • Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
 
  • Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
Line: 221 to 217
  If you have localization enabled, you will also see a language dropdown box at the far right.
Changed:
<
<
You can remove these items from WebTopBar.
>
>
You can remove these items from WebTopBar.
 

I want to hide the top bar

Line: 242 to 238
 Each included template draws a part of the screen.
Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar.
Changed:
<
<
Another approach is to clear the contents of module topbar. Using either a template or a topic template, write in your custom template:
>
>
Another approach is to clear the contents of module topbar with an empty definition. Using either a template or a topic template, write in your custom template:
 
%TMPL:INCLUDE{"view"}%
Changed:
<
<
%TMPL:INCLUDE{"topbar"}%%TMPL:END%
>
>
%TMPL:DEF{"topbar"}%%TMPL:END%
 

and add:

Line: 271 to 267
 Using templates:
Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a custom template clear it using
Changed:
<
<
%TMPL:DEF{"viewleftbar"}%%TMPL:END%
>
>
%TMPL:DEF{"leftbar"}%%TMPL:END% %TMPL:DEF{"leftbardimensions"}%%TMPL:END%
 

Using style sheets:

Line: 300 to 297
 
Changed:
<
<

Other page parts

>
>

Buttons

 

I want to hide the edit buttons from certain users

It may defy the wiki-ness of your TWiki installation, but in certain circumstances it could be useful to hide the edit buttons from users that are not logged in, for instance for clients that have gotten viewing rights only.

Changed:
<
<
Using either a template or a topic template, 'empty' topicaction and toolbar by writing:
>
>
Using either a template or a topic template, 'empty' top:toolbarbuttons and topicaction by writing:
 
%TMPL:INCLUDE{"view"}%

Added:
>
>
%TMPL:DEF{"top:toolbarbuttons"}%%TMPL:END%
 %TMPL:DEF{"topicaction"}%%TMPL:END%
Deleted:
<
<
%TMPL:DEF{"toolbar"}%%TMPL:END%
 
Changed:
<
<
In the user page of TWikiGuest, set the cover to
>
>
In the user page of TWikiGuest, set the cover to
 
   * Set COVER = customer
Line: 322 to 320
 

I want to remove the History button from the bottom

Changed:
<
<
All action buttons are defined in viewtopicactionbuttons.pattern.tmpl. The history buttons or in module revisions:
%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_raw_edit"}%%TMPL:P{"sep"}% %TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}% %TMPL:P{context="WysiwygPluginEnabled" then="sep"}% %TMPL:P{"activatable_attach"}%%TMPL:P{"sep"}% %TMPL:P{"printable"}%%TMPL:P{"sep"}% %TMPL:P{"raw"}%%TMPL:P{"sep"}% %TMPL:P{"backlinks"}%%TMPL:P{"sep"}% %TMPL:P{"revisions"}%%TMPL:P{"sep"}% < HERE %TMPL:P{"activatable_more"}%%TMPL:END%

If we emptied module revisions we would end up with 2 separators, so we need to remove the line altogether. We do this by copying the block and omitting the line.
Using either a template or a topic template, to remove the history buttons write in your custom template:

>
>
All action links and buttons are defined in viewtopicactionbuttons.tmpl. The bottom history link is defined in DEF action_revisions
%TMPL:DEF{"topicactionbuttons"}%
%TMPL:P{"action_activatable_edit_or_create"}%
%TMPL:P{"action_activatable_attach"}%
%TMPL:P{"action_printable"}%
%TMPL:P{"action_revisions"}%
%TMPL:P{"action_backlinks_simple"}%
%TMPL:P{"action_raw_or_view"}%
%TMPL:P{"action_activatable_raw_edit"}%
%TMPL:P{"activatable_more"}%
%TMPL:END%
 
Added:
>
>
To hide that link, In a custom skin view template view.myskin.tmpl empty action_revisions by replacing it with an empty string:
 
%TMPL:INCLUDE{"view"}%
Added:
>
>
%TMPL:DEF{"action_revisions"}%%TMPL:END%

I want to put the bottom links as buttons at the top

 
Changed:
<
<
%TMPL:DEF{"topicactionbuttons"}%Raw edit |  | 

 |  Attach |  Print version |   |  Backlinks: Web, All Webs |  More topic actions%TMPL:END%

>
>
The default definition in view.pattern.tmpl is:
%TMPL:DEF{"top:toolbarbuttons"}%%TMPL:P{"activatable_edit_or_create"}%%TMPL:P{"activatable_attach"}%%TMPL:END%
 
Changed:
<
<
Remove all newlines if you copy-paste above text.
>
>
Create a new skin by creating a file view.myskin.tmpl in the templates directory. Write in it:

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"top:toolbarbuttons"}%%TMPL:P{"history_history_link"}%%TMPL:END%

View any topic with ?skin=myskin,pattern, or set the SKIN variable to myskin,pattern.

This will remove the Edit and Attach buttons, and place a History button at the top.

You will probably not just want to have the History button there. Other button include names are:

create_topic_link
raw_edit_link
view_topic_link
activatable_attach
activatable_edit_or_create
more_link
activatable_printable
backlinks_web_link
backlinks_all_link
backlinks_link
history_rdiff_link
history_history_link
raw_link

Other page parts

 

I want to insert text outside of the topic content

Changed:
<
<
PatternSkin has 2 'buckets' to write additional content to: beforetextcontents and aftertextcontents, both defined in view.pattern.tmpl. These containers can contain text or html and are placed directly before and after the topic text.
>
>
PatternSkin has 2 'buckets' to write additional content to: contentheader and contentfooter, both defined in view.pattern.tmpl. These containers can contain text or html and are placed directly before and after the topic text.
  Both modules are wrapped in CSS containers:
Changed:
<
<
  • beforetextcontents - wrapped in div of class twikiBeforeText
  • aftertextcontents - wrapped in div of class twikiAfterText
>
>
  • contentheader - wrapped in div of class twikiContentHeader
  • contentfooter - wrapped in div of class twikiContentFooter
  To put contents before the main text, use the custom skin approach as described above.
So our custom template contains:
%TMPL:INCLUDE{"view"}%
Changed:
<
<
%TMPL:DEF{"beforetextcontents"}%This is the text before%TMPL:END%
>
>
%TMPL:DEF{"contentheader"}%This is the text before%TMPL:END%
 

Use the same procedure for contents to be put after the topic text:

%TMPL:INCLUDE{"view"}%
Changed:
<
<
%TMPL:DEF{"aftertextcontents"}%This is the text after%TMPL:END%
>
>
%TMPL:DEF{"contentfooter"}%This is the text after%TMPL:END%
 

I want to place the form at the top

Changed:
<
<
Pattern skin has 2 buckets for the form: formattop (form-at-the-top) and formatbottom (form-at-the-bottom):
>
>
Pattern skin has 2 buckets for the form: formtop (form at the top) and formbottom (form at the bottom). The default definition is:
 
Changed:
<
<
%TMPL:DEF{"formattop"}%%TMPL:END% %TMPL:DEF{"formatbottom"}%%TMPL:END%
>
>
%TMPL:DEF{"formtop"}%%TMPL:END% %TMPL:DEF{"formbottom"}%%TMPL:END%
 
Line: 392 to 416
 
%TMPL:INCLUDE{"view"}%
Changed:
<
<
%TMPL:DEF{"formattop"}%%TMPL:END% %TMPL:DEF{"formatbottom"}%%TMPL:END%
>
>
%TMPL:DEF{"formtop"}%%TMPL:END% %TMPL:DEF{"formbottom"}%%TMPL:END%
 
Changed:
<
<

I only want to show the WYSIWYG button on explicit pages

In Main.TWikiPreferences, set COMPOSER to a blank value:
>
>

I want to put the topic form in a twisty

The attachment tables are placed in a open/close twisty. You can do the same for the topic form.

Edit templates/formtables.pattern.tmpl to have this code:

 
Changed:
<
<
  • Set COMPOSER =
>
>
%{ These templates define the form attached at the bottom of viewed page. }%

%TMPL:DEF{"starttopicformwisty"}%

<--/twistyPlugin twikiMakeVisibleInline-->
%TMPL:END%

%TMPL:DEF{"endtopicformwisty"}%

<--/twistyPlugin-->
%TMPL:END%

%{ Start of form table }% %TMPL:DEF{FORM:display:header}%

%TMPL:END%

%{ Header }% %TMPL:DEF{FORM:display:header:headerrow}%

%TMPL:END%

%{ Each row }% %TMPL:DEF{FORM:display:row}%

%TMPL:END%

%{ Footer }% %TMPL:DEF{FORM:display:footer}%

%A_TITLE%
%A_TITLE% %A_VALUE%
<-- /twikiForm -->
%TMPL:END%
 
Deleted:
<
<
 
Changed:
<
<
In the topic, set the COMPOSER variable to kupu:
>
>
To give the twisty toggle link the same style as the attachment twisty link, add this to pattern skin's style.css:
 
Changed:
<
<
  • Set COMPOSER = kupu
>
>
.twikiForm .twistyTrigger .twikiLinkLabel { font-size:122%; /* h4 size */ font-weight:bold; }
 
Deleted:
<
<
 

Revision 72005-10-22 - Main.TWikiContributor

Line: 1 to 1
 
Changed:
<
<

PatternSkin Customization

>
>

PatternSkin Customization

  Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook.
Line: 8 to 8
 

First Read: How to modify PatternSkin templates

Changed:
<
<
If you need to change any of the elements that are visible on the common 'view' pages, you need to change the 'view' template: /templates/view.pattern.tmpl. The quickest way would be to simply change the text in the template. A safer way - strongly recommended, because it will survive a TWiki update - is to create your own custom skin. That may sound like an awful lot of work, but in reality a skin may be as much as 1 file that consists of only a few lines of code.
>
>
Everything you see on the common 'view' page is written by the view template. For pattern skin this file is /templates/view.pattern.tmpl.

We describe two approaches to override this template:

  1. By creating a custom skin file in the templates directory
  2. By creating a custom topic template

Which approach is best?

  • If you want to change the appearance for a lot of pages or even site-wide, the template approach is the easiest.
  • If you want to change the appearance of a single topic, or a set of topics, use a topic template.

The template approach

To change templates you will need shell access. If you don't have this read on below in The topic template approach.

The quickest way to change the view template would be to simply change the text in the template. A safer way - strongly recommended, because it will survive a TWiki update - is to create your own custom skin. That may sound like an awful lot of work, but in reality a skin may be as much as 1 file that consists of only a few lines of code.

  Example
Let's say you want to simplify the bottom toolbar and remove all links except for "More topic actions". You would need to target %TMPL:DEF{"topicactionbuttons"}%, which is located in view.pattern.tmpl.
Line: 16 to 30
 The steps you would need:
  1. Think up a name for your skin. Let us use myskin for now.
  2. Create a new (empty) view template file in /templates called view.myskin.tmpl.
Changed:
<
<
  1. In view.myskin.tmpl you write:
    %TMPL:INCLUDE{"view"}%
    %TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%
  2. Now the skin is set. For testing, view any topic and append to the topic name: ?cover=myskin. You should see an effect now.
>
>
  1. In view.myskin.tmpl you write:
       %TMPL:INCLUDE{"view"}%
       %TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%
  2. For testing, view any topic and append to the topic name: ?cover=myskin. You should see an effect now.
 
  1. To make the changes visible on all pages, go to Main.TWikiPreferences (to keep TWikiPreferences intact) and write:
   * Set COVER = myskin

Line: 29 to 44
 
  • Set SKIN = myskin,pattern
Added:
>
>
Test by appending ?cover=myskin to the url.

The topic template approach (using VIEW_TEMPLATE)

Template overrides can be written in a topic, a so-called topic template. Topic template names end with Template, for instance BlogPostViewTemplate.

Call this template by setting VIEW_TEMPLATE:

   * Set VIEW_TEMPLATE = BlogPostView
  • Note that you don't use the Template extension now
  • You can make this setting hidden by writing this in the Settings screen: go to More and then Topic Settings
  • On topic creation you can set the topic template by passing templatetopic:
       <input type="hidden" name="templatetopic" value="BlogPostViewTemplate" />
       

We can use the same example as above. In a topic write:

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%

You can also test this by appending ?template=PersonalInfoView to the url.

Reference: pattern skin template INCLUDE tree

view
    page
        constants
        javascript
        styles
            stylesdynamic
        body
            viewtopbar
                %SYSTEMWEB%.WebTopBar
            viewtoolbar
            viewleftbar
                %WEB%.WebLeftBar
            viewtopicactionbuttons
            viewbottombar
                %SYSTEMWEB%.WebBottomBar
 

Logo

Line: 49 to 114
  Using logo.gif:
Changed:
<
<
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
>
>
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
 
  • You can also upload the image with FTP to /pub/YourWeb/WebPreferences/.
  • Copy the above instructions ("Redefine your custom variables") and insert your logo name.
Line: 72 to 137
 

My logo does not fit the top bar

Changed:
<
<
The top bar is 64 pixels high by default.
>
>
See I want to change the height of the top bar
 
Changed:
<
<
Using templates:
>
>

I want to change the white space above and below the logo

Change the table style in topic WebTopBar. The default top padding is 11px.

Top bar

The search box won't find topics in other webs

In WebTopBar you can find the line:

<input type="hidden" name="web" value="%BASEWEB%" />

To search all webs, write:

 
Changed:
<
<
Change the height of the top bar in templates/viewtopbar.pattern.tmpl:
>
>
<input type="hidden" name="web" value="all" />
 
Changed:
<
<

>
>
To search a couple of webs, for instance the webs Main and TWiki, write:
<input type="hidden" name="web" value="Main,TWiki" />

See also: Search variable

I want to change the height of the top bar

The top bar is 64 pixels high by default.

Using templates:
Using either a template or a topic template, copy this definition in your custom template:

 %TMPL:DEF{"topbardimensions"}% #patternTopBar, #patternClearHeaderCenter,
Line: 89 to 189
  overflow:hidden; } %TMPL:END%
Changed:
<
<

Only change the number from 64px to another value.

>
>
And change the number from 64px to a different value.
 

Using style sheets:

Changed:
<
<
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
>
>
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
 
Deleted:
<
<

I want to change the white space above and below the logo

Change the table style in topic WebTopBar. The default top padding is 11px.

Top bar

 

I want to set or change the top background image

The image at the top is called "header art" - commonly the top image found on blog sites. The image that is displayed by default is set by the variable WEBHEADERART, defined in TWikiPreferences.

Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):


Changed:
<
<
  • Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
  • Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
>
>
  • Set WEBHEADERART = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/TWiki_header.gif
  • Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
 

You can also set WEBHEADERART per web, by defining the variable in the Web's WebPreferences.

Line: 121 to 214
  Redefine WEBHEADERBGCOLOR in Main.TWikiPreferences (to keep TWikiPreferences intact):

Changed:
<
<
  • Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
>
>
  • Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
 

I want to remove the Jump and Search boxes from the top bar

If you have localization enabled, you will also see a language dropdown box at the far right.

Changed:
<
<
You can remove these items from WebTopBar.
>
>
You can remove these items from WebTopBar.
 

I want to hide the top bar

Line: 149 to 242
 Each included template draws a part of the screen.
Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar.
Changed:
<
<
Another approach is to clear the contents of module topbar; for example in view.myskin.tmpl:
%TMPL:INCLUDE{"view"}%

>
>
Another approach is to clear the contents of module topbar. Using either a template or a topic template, write in your custom template:
 
Changed:
<
<
%TMPL:INCLUDE{"topbar"}%%TMPL:END%
>
>
%TMPL:INCLUDE{"view"}%
%TMPL:INCLUDE{"topbar"}%%TMPL:END%
  and add:
Changed:
<
<
%TMPL:DEF{"topbardimensions"}%#patternTopBar,

>
>
%TMPL:DEF{"topbardimensions"}%#patternTopBar,
 #patternClearHeaderCenter, #patternClearHeaderLeft, #patternClearHeaderRight, #patternTopBarContentsOuter { height:0px;
Changed:
<
<
}%TMPL:END%
>
>
}%TMPL:END%
 
Changed:
<
<
Using style sheets:
See PatternSkinCssCookbookNoTopBar.
>
>
Using style sheets:
See PatternSkinCssCookbookNoTopBar
 

Left bar

I want to hide the left bar

Changed:
<
<
Using templates:
Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a view template clear it using %TMPL:DEF{"viewleftbar"}%%TMPL:END%
>
>
Using templates:
Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a custom template clear it using
%TMPL:DEF{"viewleftbar"}%%TMPL:END%

Using style sheets:
See PatternSkinCssCookbookNoLeftBar

I want to make the left bar wider

Using templates:

The left bar is 12 em wide by default.

Using templates:
Using either a template or a topic template, copy this definition in your custom template:

 
Deleted:
<
<
Using style sheets:
 
Changed:
<
<
See PatternSkinCssCookbookNoLeftBar.
>
>
%TMPL:DEF{"leftbardimensions"}%#patternOuter {
   margin-left:12em;
}
#patternLeftBar {
   width:12em;
   margin-left:-12em;
}%TMPL:END%
And change the number from 12em to a different value (3 occurrences).
 
Added:
>
>
 

Other page parts

I want to hide the edit buttons from certain users

Line: 192 to 304
 

I want to hide the edit buttons from certain users

Changed:
<
<
It may defy the wiki-ness of your TWiki installation, but in certain circumstances it could be useful to hide the edit buttons from users that are not logged in, for instance for customers.
>
>
It may defy the wiki-ness of your TWiki installation, but in certain circumstances it could be useful to hide the edit buttons from users that are not logged in, for instance for clients that have gotten viewing rights only.
 
Changed:
<
<
Create in the template directory the file view.customer.tmpl. 'Empty' topicaction and toolbar by writing in the template:
>
>
Using either a template or a topic template, 'empty' topicaction and toolbar by writing:
 
%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"topicaction"}%%TMPL:END%
%TMPL:DEF{"toolbar"}%%TMPL:END%
Changed:
<
<
In TWikiGuest, set the cover to
>
>
In the user page of TWikiGuest, set the cover to
 
   * Set COVER = customer
Changed:
<
<
By default this topic is editable only by TWikiAdminGroup members.
>
>
By default this topic is editable only by TWiki admins.
 

I want to remove the History button from the bottom

Changed:
<
<
All action buttons are defined in viewtopicactionbuttons.pattern.tmpl. Remove module revisions from %TMPL:DEF{"topicactionbuttons"}%.
>
>
All action buttons are defined in viewtopicactionbuttons.pattern.tmpl. The history buttons or in module revisions:
 
%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_raw_edit"}%%TMPL:P{"sep"}%
Changed:
<
<
%TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}%%TMPL:P{context="WysiwygPluginEnabled" then="sep"}%
>
>
%TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}% %TMPL:P{context="WysiwygPluginEnabled" then="sep"}%
 %TMPL:P{"activatable_attach"}%%TMPL:P{"sep"}% %TMPL:P{"printable"}%%TMPL:P{"sep"}% %TMPL:P{"raw"}%%TMPL:P{"sep"}% %TMPL:P{"backlinks"}%%TMPL:P{"sep"}%
Changed:
<
<
%TMPL:P{"revisions"}%%TMPL:P{"sep"}%
>
>
%TMPL:P{"revisions"}%%TMPL:P{"sep"}% < HERE
 %TMPL:P{"activatable_more"}%%TMPL:END%
Deleted:
<
<
In your view.myskin.tmpl file (see above) you write:
%TMPL:INCLUDE{"view"}%

 
Changed:
<
<
%TMPL:DEF{"topicactionbuttons"}%Raw edit |  |  %TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}% |  %TMPL:P{"activatable_attach"}% |  %TMPL:P{"printable"}% |  %TMPL:P{"raw"}% |  %TMPL:P{"backlinks"}% |  %TMPL:P{"activatable_more"}%%TMPL:END%
>
>
If we emptied module revisions we would end up with 2 separators, so we need to remove the line altogether. We do this by copying the block and omitting the line.
Using either a template or a topic template, to remove the history buttons write in your custom template:

%TMPL:INCLUDE{"view"}%

%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_raw_edit"}%%TMPL:P{"sep"}%
%TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}%
%TMPL:P{context="WysiwygPluginEnabled" then="sep"}%
%TMPL:P{"activatable_attach"}%%TMPL:P{"sep"}%
%TMPL:P{"printable"}%%TMPL:P{"sep"}%
%TMPL:P{"raw"}%%TMPL:P{"sep"}%
%TMPL:P{"backlinks"}%%TMPL:P{"sep"}%
%TMPL:P{"activatable_more"}%%TMPL:END%
  Remove all newlines if you copy-paste above text.
Deleted:
<
<
Test by appending ?cover=myskin to any topic.
 

I want to insert text outside of the topic content

Line: 247 to 363
 
  • beforetextcontents - wrapped in div of class twikiBeforeText
  • aftertextcontents - wrapped in div of class twikiAfterText

Changed:
<
<
To put contents before the main text, use the custom skin approach as described above.
So our view.myskin.tmpl file contains:
%TMPL:INCLUDE{"view"}%

>
>
To put contents before the main text, use the custom skin approach as described above.
So our custom template contains:
%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"beforetextcontents"}%This is the text before%TMPL:END%

Use the same procedure for contents to be put after the topic text:

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"aftertextcontents"}%This is the text after%TMPL:END%
 
Changed:
<
<
%TMPL:DEF{"beforetextcontents"}%This is the text before%TMPL:END% Test by appending ?cover=myskin to any topic.
>
>

I want to place the form at the top

 
Changed:
<
<
Use the same procedure for contents to be put after the topic text:
%TMPL:INCLUDE{"view"}%

>
>
Pattern skin has 2 buckets for the form: formattop (form-at-the-top) and formatbottom (form-at-the-bottom):

%TMPL:DEF{"formattop"}%%TMPL:END%
%TMPL:DEF{"formatbottom"}%%TMPL:P{"form"}%%TMPL:END%

You simply swap the bucket contents. Using either a template or a topic template, write in your custom template:

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"formattop"}%%TMPL:P{"form"}%%TMPL:END%
%TMPL:DEF{"formatbottom"}%%TMPL:END%

I only want to show the WYSIWYG button on explicit pages

In Main.TWikiPreferences, set COMPOSER to a blank value:
   * Set COMPOSER =

In the topic, set the COMPOSER variable to kupu:

   * Set COMPOSER = kupu
 
Deleted:
<
<
%TMPL:DEF{"aftertextcontents"}%This is the text after%TMPL:END%

Revision 62005-10-22 - Main.TWikiContributor

Line: 1 to 1
 

PatternSkin Customization

Line: 6 to 6
 
Changed:
<
<

Logo questions

>
>

First Read: How to modify PatternSkin templates

If you need to change any of the elements that are visible on the common 'view' pages, you need to change the 'view' template: /templates/view.pattern.tmpl. The quickest way would be to simply change the text in the template. A safer way - strongly recommended, because it will survive a TWiki update - is to create your own custom skin. That may sound like an awful lot of work, but in reality a skin may be as much as 1 file that consists of only a few lines of code.

Example
Let's say you want to simplify the bottom toolbar and remove all links except for "More topic actions". You would need to target %TMPL:DEF{"topicactionbuttons"}%, which is located in view.pattern.tmpl.

The steps you would need:

  1. Think up a name for your skin. Let us use myskin for now.
  2. Create a new (empty) view template file in /templates called view.myskin.tmpl.
  3. In view.myskin.tmpl you write:
    %TMPL:INCLUDE{"view"}%
    %TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%
  4. Now the skin is set. For testing, view any topic and append to the topic name: ?cover=myskin. You should see an effect now.
  5. To make the changes visible on all pages, go to Main.TWikiPreferences (to keep TWikiPreferences intact) and write:
   * Set COVER = myskin
or write
   * Set SKIN = myskin,pattern

Logo

 

How can I change the web logo?

Line: 14 to 38
 The default variables that cause this behavior are defined in TWikiPreferences.

Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):

Changed:
<
<

>
>

 
    • Set WEBLOGONAME = logo.gif
    • Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME%
    • Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC%
    • Set WEBLOGOALT = Home
Changed:
<
<
>
>
  There are 2 ways to change the logo in a web:
Line: 27 to 51
 
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
  • You can also upload the image with FTP to /pub/YourWeb/WebPreferences/.
Added:
>
>
  • Copy the above instructions ("Redefine your custom variables") and insert your logo name.
  Using a new filename:
Line: 34 to 59
 
      * Set WEBLOGONAME = your-logo-name.gif-or-png
Added:
>
>
  • Copy the above instructions ("Redefine your custom variables") and insert your logo name.
 

How do I set a site-wide logo?

There is a bunch of site-wide logo variables in Main.TWikiPreferences: WIKILOGOIMG, WIKILOGOURL and WIKILOGOALT. To change only the web logo image to site-wide, in Main.TWikiPreferences set:

Changed:
<
<

>
>

 
  • Set WEBLOGOIMG = %WIKILOGOIMG%
Changed:
<
<
>
>
 

My logo does not fit the top bar

Line: 52 to 77
 Using templates:
Change the height of the top bar in templates/viewtopbar.pattern.tmpl:
Changed:
<
<
>
>

 %TMPL:DEF{"topbardimensions"}% #patternTopBar, #patternClearHeaderCenter,
Line: 63 to 89
  overflow:hidden; } %TMPL:END%
Changed:
<
<
Only change the number.
>
>

Only change the number from 64px to another value.

 

Using style sheets:

Line: 74 to 101
 

I want to change the white space above and below the logo

Changed:
<
<
Change the table style in WebTopBar. Default top padding is 11px.
>
>
Change the table style in topic WebTopBar. The default top padding is 11px.
 
Changed:
<
<

Top bar questions

>
>

Top bar

 

I want to set or change the top background image

The image at the top is called "header art" - commonly the top image found on blog sites. The image that is displayed by default is set by the variable WEBHEADERART, defined in TWikiPreferences.

Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):

Changed:
<
<

>
>

 
  • Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
  • Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
Changed:
<
<
>
>
  You can also set WEBHEADERART per web, by defining the variable in the Web's WebPreferences.

I want to have the web color in the top bar

Redefine WEBHEADERBGCOLOR in Main.TWikiPreferences (to keep TWikiPreferences intact):

Changed:
<
<

>
>

 
  • Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
Changed:
<
<
>
>
 

I want to remove the Jump and Search boxes from the top bar

Line: 106 to 133
 

I want to hide the top bar

Using templates:

Changed:
<
<
The view template is populated like this:
%TMPL:INCLUDE{"page"}%
%TMPL:INCLUDE{"viewtopbar"}%
%TMPL:INCLUDE{"viewtoolbar"}%
%TMPL:INCLUDE{"viewleftbar"}%
%TMPL:INCLUDE{"viewrightbar"}%
%TMPL:INCLUDE{"viewtopicactionbuttons"}%
%TMPL:INCLUDE{"viewbottombar"}%
Each included template draws a part of the screen. Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar, or in a view template clear it using %TMPL:INCLUDE{"viewtopbar"}%%TMPL:END%
>
>
The view template is populated with page elements using template inclusions:

%TMPL:INCLUDE{"page"}%
%TMPL:INCLUDE{"viewtopbar"}%
%TMPL:INCLUDE{"viewtoolbar"}%
%TMPL:INCLUDE{"viewleftbar"}%
%TMPL:INCLUDE{"viewrightbar"}%
%TMPL:INCLUDE{"viewtopicactionbuttons"}%
%TMPL:INCLUDE{"viewbottombar"}%

Each included template draws a part of the screen.
Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar.

Another approach is to clear the contents of module topbar; for example in view.myskin.tmpl:

%TMPL:INCLUDE{"view"}%

%TMPL:INCLUDE{"topbar"}%%TMPL:END%

and add:

%TMPL:DEF{"topbardimensions"}%#patternTopBar,
#patternClearHeaderCenter,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter {
	height:0px;
}%TMPL:END%
 

Using style sheets:

Line: 125 to 174
 See PatternSkinCssCookbookNoTopBar.
Changed:
<
<

Left bar questions

>
>

Left bar

 

I want to hide the left bar

Using templates:

Changed:
<
<
Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a view template clear it using %TMPL:INCLUDE{"viewleftbar"}%%TMPL:END%
>
>
Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a view template clear it using %TMPL:DEF{"viewleftbar"}%%TMPL:END%
 

Using style sheets:

Line: 146 to 195
 It may defy the wiki-ness of your TWiki installation, but in certain circumstances it could be useful to hide the edit buttons from users that are not logged in, for instance for customers.

Create in the template directory the file view.customer.tmpl. 'Empty' topicaction and toolbar by writing in the template:

Changed:
<
<
%TMPL:INCLUDE{"view.pattern"}%
%TMPL:DEF{"topicaction"}%%TMPL:END%
%TMPL:DEF{"toolbar"}%%TMPL:END%
>
>
%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"topicaction"}%%TMPL:END%
%TMPL:DEF{"toolbar"}%%TMPL:END%
  In TWikiGuest, set the cover to
Changed:
<
<
   * Set COVER = customer
>
>
   * Set COVER = customer
  By default this topic is editable only by TWikiAdminGroup members.
Added:
>
>

I want to remove the History button from the bottom

All action buttons are defined in viewtopicactionbuttons.pattern.tmpl. Remove module revisions from %TMPL:DEF{"topicactionbuttons"}%.

%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_raw_edit"}%%TMPL:P{"sep"}% %TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}%%TMPL:P{context="WysiwygPluginEnabled" then="sep"}% %TMPL:P{"activatable_attach"}%%TMPL:P{"sep"}% %TMPL:P{"printable"}%%TMPL:P{"sep"}% %TMPL:P{"raw"}%%TMPL:P{"sep"}% %TMPL:P{"backlinks"}%%TMPL:P{"sep"}% %TMPL:P{"revisions"}%%TMPL:P{"sep"}% %TMPL:P{"activatable_more"}%%TMPL:END%
In your view.myskin.tmpl file (see above) you write:
%TMPL:INCLUDE{"view"}%

%TMPL:DEF{"topicactionbuttons"}%Raw edit |  | 
%TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}% | 
%TMPL:P{"activatable_attach"}% | 
%TMPL:P{"printable"}% | 
%TMPL:P{"raw"}% | 
%TMPL:P{"backlinks"}% | 
%TMPL:P{"activatable_more"}%%TMPL:END%

Remove all newlines if you copy-paste above text.

Test by appending ?cover=myskin to any topic.

I want to insert text outside of the topic content

PatternSkin has 2 'buckets' to write additional content to: beforetextcontents and aftertextcontents, both defined in view.pattern.tmpl. These containers can contain text or html and are placed directly before and after the topic text.

Both modules are wrapped in CSS containers:

  • beforetextcontents - wrapped in div of class twikiBeforeText
  • aftertextcontents - wrapped in div of class twikiAfterText

To put contents before the main text, use the custom skin approach as described above.
So our view.myskin.tmpl file contains:

%TMPL:INCLUDE{"view"}%

%TMPL:DEF{"beforetextcontents"}%This is the text before%TMPL:END%
Test by appending ?cover=myskin to any topic.

Use the same procedure for contents to be put after the topic text:

%TMPL:INCLUDE{"view"}%

 
Added:
>
>
%TMPL:DEF{"aftertextcontents"}%This is the text after%TMPL:END%

Revision 52005-10-22 - Main.TWikiContributor

Line: 1 to 1
 

PatternSkin Customization

Line: 21 to 21
 
    • Set WEBLOGOALT = Home
Changed:
<
<
There are several ways to change the logo in a web:
>
>
There are 2 ways to change the logo in a web:

Using logo.gif:

 
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
  • You can also upload the image with FTP to /pub/YourWeb/WebPreferences/.
Changed:
<
<
or:
>
>
Using a new filename:
 
		* Set WEBLOGONAME = your-logo-name.gif-or-png
Added:
>
>
 

How do I set a site-wide logo?

Line: 41 to 47
 

My logo does not fit the top bar

Changed:
<
<
The top bar is 64 pixels high by default. If you have a bigger logo you might want to change the height of the top bar in layout.css:
>
>
The top bar is 64 pixels high by default.

Using templates:

Change the height of the top bar in templates/viewtopbar.pattern.tmpl:
 
Changed:
<
<
/* height of the top bar */ #patternLeftBar { top:64px; /*C3*/ }
>
>
%TMPL:DEF{"topbardimensions"}%
 #patternTopBar,
Changed:
<
<
#patternTopBar table.patternTopBarContents { height:64px; /*C3*/
>
>
#patternClearHeaderCenter, #patternClearHeaderLeft, #patternClearHeaderRight, #patternTopBarContentsOuter { height:64px; /* top bar height; make room for header columns */ overflow:hidden;
 }
Added:
>
>
%TMPL:END%
 
Added:
>
>
Only change the number.
 
Changed:
<
<
(C3 is used as reference to all occurrences with the same value)

You can change these numbers in layout.css directly, or create a new stylesheet, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.

>
>
Using style sheets:
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
 

I want to change the white space above and below the logo

Changed:
<
<
The logo is centered vertically be default. If you want to align it to the top, change the style in style.css.

Change:

table.patternTopBarContents td {
   height:100%;
   width:100%;
   vertical-align:middle;
}
to:
table.patternTopBarContents td {
   height:100%;
   width:100%;
   vertical-align:top;
}

You can also define an offset like this:

table.patternTopBarContents td {
   height:100%;
   width:100%;
   vertical-align:top;
   padding-top:12px;
}
>
>
Change the table style in WebTopBar. Default top padding is 11px.
 

Top bar questions

I want to set or change the top background image

Changed:
<
<
The image at the top is called "header art" - after the traditional top image found on blog sites. The image that is displayed by default is set by the variable WEBHEADERART, defined in TWikiPreferences.
>
>
The image at the top is called "header art" - commonly the top image found on blog sites. The image that is displayed by default is set by the variable WEBHEADERART, defined in TWikiPreferences.
  Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):
	* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif

Changed:
<
<
  • Set WEBHEADERBGCOLOR = somehexcolor
>
>
  • Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
 

You can also set WEBHEADERART per web, by defining the variable in the Web's WebPreferences.

Line: 109 to 97
 
  • Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
Changed:
<
<

I want other items in the top bar

>
>

I want to remove the Jump and Search boxes from the top bar

 
Changed:
<
<
In WebTopBar shows a logo, but that does not mean you cannot put other things in there. You can put a table, or divs or images.
>
>
If you have localization enabled, you will also see a language dropdown box at the far right.
 
Changed:
<
<
You probably don't need the following information unless you are encountering a strange problem.
>
>
You can remove these items from WebTopBar.
 
Changed:
<
<
The WebTopBar contents is placed inside a table that is written by twiki.pattern.tmpl (the gray text is from the template):
>
>

I want to hide the top bar

 
Changed:
<
<
<div id="patternTopBar">
<table class="patternTopBarContents" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>

<span class="patternTopBarLogo twikiLeft">
<a href="%WEBLOGOURL%"><img src="%WEBLOGOIMG%" border="0" alt="%WEBLOGOALT%"/></a>
</span>
</td>
</tr>
</table>
</div>
>
>
Using templates:
The view template is populated like this:
%TMPL:INCLUDE{"page"}%
%TMPL:INCLUDE{"viewtopbar"}%
%TMPL:INCLUDE{"viewtoolbar"}%
%TMPL:INCLUDE{"viewleftbar"}%
%TMPL:INCLUDE{"viewrightbar"}%
%TMPL:INCLUDE{"viewtopicactionbuttons"}%
%TMPL:INCLUDE{"viewbottombar"}%
Each included template draws a part of the screen. Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar, or in a view template clear it using %TMPL:INCLUDE{"viewtopbar"}%%TMPL:END%
 
Added:
>
>
Using style sheets:
See PatternSkinCssCookbookNoTopBar.
 
Changed:
<
<

I want to have the language selection in the top bar

>
>

Left bar questions

 
Changed:
<
<
If you want to have the language selection more prominent, you can put a language selection dropdown box in the top bar. Put this in WebTopBar:
<div class="twikiRight" style="margin-right:2em;">
<form id="topBarChangeLanguage" action="%SCRIPTURLPATH{"oops"}%/%WEB%/%TOPIC%" method="get">
<select name="language" onchange="document.getElementById('topBarChangeLanguage').submit()">
%LANGUAGES{format="<option $marker value='$langtag'>$langname</option>" selection="%LANGUAGE%"}%
</select>
<input type="hidden" name="template" value="oopslanguagechanged" />
<noscript>
<input type="submit" value="%MAKETEXT{"Change language"}%" />
</noscript>
</form>
</div>
>
>

I want to hide the left bar

 
Changed:
<
<
This will render:
>
>
Using templates:
Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a view template clear it using %TMPL:INCLUDE{"viewleftbar"}%%TMPL:END%
 
Changed:
<
<
>
>
Using style sheets:
See PatternSkinCssCookbookNoLeftBar.
 
Changed:
<
<

I want to hide the top bar

>
>

Other page parts

 
Changed:
<
<
See PatternSkinCssCookbookNoTopBar
>
>

I want to hide the edit buttons from certain users

 
Changed:
<
<

Left bar questions

>
>
It may defy the wiki-ness of your TWiki installation, but in certain circumstances it could be useful to hide the edit buttons from users that are not logged in, for instance for customers.
 
Changed:
<
<

I want to hide the left bar

>
>
Create in the template directory the file view.customer.tmpl. 'Empty' topicaction and toolbar by writing in the template:
%TMPL:INCLUDE{"view.pattern"}%
%TMPL:DEF{"topicaction"}%%TMPL:END%
%TMPL:DEF{"toolbar"}%%TMPL:END%

In TWikiGuest, set the cover to

   * Set COVER = customer

By default this topic is editable only by TWikiAdminGroup members.

 
Deleted:
<
<
See PatternSkinCssCookbookNoLeftBar
 

Revision 42005-10-22 - Main.TWikiContributor

Line: 1 to 1
Deleted:
<
<

Customization of PatternSkin

 
Changed:
<
<
This page describes ways to change the layout, fonts and colors of PatternSkin.
>
>

PatternSkin Customization

 
Changed:
<
<
>
>
Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook.
 
Changed:
<
<

Your own TWiki look

>
>
 
Changed:
<
<
You can easily create your own TWiki look by attaching modified css files to your home page:
  • If you want to change the layout of the page, download layout.css from PatternSkin
  • If you want to change the spacing or colors, download style.css from PatternSkin
  • modify the CSS in either style sheet, using tips from this page
  • attach your modified layout.css and/or style.css to your home page
  • as shown below, add the USERLAYOUTURL and USERSTYLEURL settings to your home page
   * Personal TWiki.PatternSkin CSS settings
      * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css
      * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css
>
>

Logo questions

 
Changed:
<
<

Screen parts

>
>

How can I change the web logo?

 
Changed:
<
<
The PatternSkin view template uses four screen parts:
  • The topic part - contains besides the topic content: action buttons, form table, attachment table, topic info
  • Top bar - used for a logo, contains Go box
  • Left bar - site and web navigation, contains a personal link block; may contain a Go box
  • Bottom bar - copyright, disclaimer
>
>
By default the logo at the top left of each web points to the image with name logo.gif that is attached to each web's WebPreferences.
The default variables that cause this behavior are defined in TWikiPreferences.
 
Changed:
<
<
These parts are dynamically included topics:
  • Top bar: WebTopBar
  • Left bar: included topic WebLeftBar (one WebLeftBar topic per web)
    • Personal links block: Main.%USERNAME%LeftBar. Your own personal leftbar: Main.guestLeftBar
  • Bottom bar: included topic WebBottomBar
>
>
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):
		* Set WEBLOGONAME = logo.gif
		* Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME%
		* Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC%
		* Set WEBLOGOALT = Home
 
Changed:
<
<

Top bar

>
>
There are several ways to change the logo in a web:
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
  • You can also upload the image with FTP to /pub/YourWeb/WebPreferences/.
or:
		* Set WEBLOGONAME = your-logo-name.gif-or-png
 
Changed:
<
<
The top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo.
>
>

How do I set a site-wide logo?

 
Changed:
<
<

Left bar

>
>
There is a bunch of site-wide logo variables in Main.TWikiPreferences: WIKILOGOIMG, WIKILOGOURL and WIKILOGOALT. To change only the web logo image to site-wide, in Main.TWikiPreferences set:
	* Set WEBLOGOIMG = %WIKILOGOIMG%
 
Deleted:
<
<
The menu items are css-formatted bullet lists. So in WebLeftBar you write:
   * *Group*
   * [[SomeTopic][Link 1]]
   * [[AnotherTopic][Link 2]]
   * [[ThirdTopic][Link 3]]
 
Changed:
<
<
The left bar may contain a Go box instead of the top bar. Use:
>
>

My logo does not fit the top bar

The top bar is 64 pixels high by default. If you have a bigger logo you might want to change the height of the top bar in layout.css:

 
Changed:
<
<
>
>
/* height of the top bar */ #patternLeftBar { top:64px; /*C3*/ } #patternTopBar, #patternTopBar table.patternTopBarContents { height:64px; /*C3*/ }
 
Changed:
<
<
The personal left bar block is formatted like the rest of the left bar.
>
>
(C3 is used as reference to all occurrences with the same value)

You can change these numbers in layout.css directly, or create a new stylesheet, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.

 
Changed:
<
<

Putting the left bar at the right

>
>

I want to change the white space above and below the logo

 
Changed:
<
<
If you have a low screen resolution of say, 640 by 480 pixels, it can be useful to put the left bar "out of the way", at the right side of the page - at the cost of a horizontal scroll bar to access the left (now right) bar. This CSS does this:
>
>
The logo is centered vertically be default. If you want to align it to the top, change the style in style.css.
 
Changed:
<
<
Add this to layout.css:
<-- /* -->
>
>
Change:
 
Changed:
<
<
.twikiMain { margin-left:0px; } .twikiLeftBar { margin-left:100%; } .twikiBottomBar { margin-left:1em; margin-right:0; padding:0;
>
>
table.patternTopBarContents td { height:100%; width:100%; vertical-align:middle;
 }
Changed:
<
<
<-- */ -->
Add this to style.css:
<-- /* -->
>
>
to:
 
Changed:
<
<
.twikiMain { padding-left:1em; padding-right:1em; } .twikiBottomBarContents { padding-left:0em;
>
>
table.patternTopBarContents td { height:100%; width:100%; vertical-align:top;
 }
Deleted:
<
<
<-- */ -->
 
Changed:
<
<
This CSS is also attached to this topic, LowRes.css. To use this style, add this to your home page:
>
>
You can also define an offset like this:
 
Changed:
<
<
>
>
table.patternTopBarContents td { height:100%; width:100%; vertical-align:top; padding-top:12px; }
 
Changed:
<
<

Bottom bar

The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.

Customizing the logo

The top bar is 60 pixels high, and has a padding of 5 pixels on top, bottom and left, so the logo should be 50 pixels high. If your logo image has a different size, you can either alter the padding in style.css (.twikiTopBarContents) or change the top bar height in layout.css (look for the comment setting the height of the top bar).

You can also choose to set a background image for the top bar. In style.css, add this to .twikiTopBar:

   background-position:top left;
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-image:url(http://absolute_path_to_your_image);
and set the correct image file path.
>
>

Top bar questions

 
Changed:
<
<

Fonts

>
>

I want to set or change the top background image

 
Changed:
<
<

Font style

>
>
The image at the top is called "header art" - after the traditional top image found on blog sites. The image that is displayed by default is set by the variable WEBHEADERART, defined in TWikiPreferences.
 
Changed:
<
<
Font styles are defined in style.css in these places:
<--
/*
-->
html body {
   font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
   font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
}
textarea {
   font-family:monospace;
}
input, select {
   font-family:verdana,arial,sans-serif;
}
.twikiSeparator {
   font-family:Arial,sans-serif;
}
.twikiEditPage .twikiSig input {
   font-family:monospace;
}
<--
*/
-->
>
>
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):
	* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
	* Set WEBHEADERBGCOLOR = somehexcolor
 
Changed:
<
<

Font size

>
>
You can also set WEBHEADERART per web, by defining the variable in the Web's WebPreferences.
 
Changed:
<
<
Font sizes in PatternSkin are scalable. This means that even on Windows Explorer, the text in the browser can scale with the user settings (in contrast to many sites where texts have a fixes pixel size, these cannot be changed by the user).
>
>

I want to have the web color in the top bar

 
Changed:
<
<
Scalable text is a big accessibility asset. If you notwithstanding want to have a fixed font, or if you want to set the default size smaller or bigger, the easiest way is to make a new entry for body, below the 2 other entries:
<-- /* -->
html body {
   ... (keep)
}
html>body {
   ... (keep)   
}
html body {
   font-size:11px;
}
<-- */ -->
>
>
Redefine WEBHEADERBGCOLOR in Main.TWikiPreferences (to keep TWikiPreferences intact):
	* Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
 
Changed:
<
<

Colors

>
>

I want other items in the top bar

 
Changed:
<
<
                                                
>
>
In WebTopBar shows a logo, but that does not mean you cannot put other things in there. You can put a table, or divs or images.
 
Changed:
<
<
To create a customised palette of colors, see PatternSkinPalette .
>
>
You probably don't need the following information unless you are encountering a strange problem.
 
Changed:
<
<

Tables

>
>
The WebTopBar contents is placed inside a table that is written by twiki.pattern.tmpl (the gray text is from the template):
 
Changed:
<
<

Tables in topic text

>
>
<div id="patternTopBar">
<table class="patternTopBarContents" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>

<span class="patternTopBarLogo twikiLeft">
<a href="%WEBLOGOURL%"><img src="%WEBLOGOIMG%" border="0" alt="%WEBLOGOALT%"/></a>
</span>
</td>
</tr>
</table>
</div>
 
Deleted:
<
<
If you have TablePlugin installed, tables in topics take on the properties from TABLEATTRIBUTES. Without TablePlugin (if not installed, or disabled in TWikiPreferences under DISABLEDPLUGINS), the tables have a default appearance that is hardcoded in Render.pm. Styles of topic text tables are not set in a style sheet. If you want to have control over the design of tables, for instance if you work with a style guide, you should add table styles under .twikiTopic. See for an example below.
 
Changed:
<
<

Topic text table example

>
>

I want to have the language selection in the top bar

 
Changed:
<
<
This is an example css to give tables in topic text a similar appearance. This will override settings in TablePlugin. This code should be added below the other .twikiTopic code in style.css:
<-- /* -->
>
>
If you want to have the language selection more prominent, you can put a language selection dropdown box in the top bar. Put this in WebTopBar:
 
Changed:
<
<
.twikiTopic table { border-collapse:collapse; padding:0px; border-spacing:0px; empty-cells:show; border:0px; } .twikiTopic table th { background-color:#ccc; padding:0.5em 1em; } .twikiTopic table td { border:1px solid #eee; } /* override hardcoded font color */ .twikiTopic table font { color:#1e5bbd; } .twikiTopic table th a:link, .twikiTopic table th a:visited { color:#1e5bbd; text-decoration:none; } /* don't show hover background color because we have a table header background */ .twikiTopic table th a:hover { background-color:transparent; text-decoration:underline; border-width:1px; } /* no underline if a sort indicator (line) is displayed */ .twikiTopic table th.twikiSortedDescendingCol a:hover, .twikiTopic table th.twikiSortedAscendingCol a:hover { text-decoration:none; } /* hide sort icons */ .twikiTopic table th img, .twikiTopic table th a:link img, .twikiTopic table th a:visited img { display:none; }
>
>
 
Deleted:
<
<
<-- */ -->
 
Changed:
<
<

Attachment table, Form table

>
>
This will render:
 
Changed:
<
<
The appearance of the form table and the attachment table are set in style.css under .twikiForm and .twikiAttachments. Text in these tables is set to wrap, so often the dates are wrapped to two lines. If you prefer to have text on one line and are not disturbed by an extra wide attachment table (or when you screen resolution is big enough), add this code to .twikiAttachments td, .twikiForm td {:
>
>
 
Changed:
<
<
<-- /* -->
   white-space:nowrap;
<-- */ -->
>
>

I want to hide the top bar

See PatternSkinCssCookbookNoTopBar

 
Changed:
<
<

Other templates

>
>

Left bar questions

 
Changed:
<
<
Other templates than view use the style .twikiVersatileTable for, as the name says, tables with versatile functions. Versatile tables appear a little diffent in each template page (differences are created using multiple classes). Versatile tables are mostly used to format forms to highlight important parts and to dim less important parts. See style.css for specific settings for each template.
>
>

I want to hide the left bar

 
Changed:
<
<
-- TWiki:Main.ArthurClemens - 28 Aug 2004
>
>
See PatternSkinCssCookbookNoLeftBar
 
Deleted:
<
<
META FILEATTACHMENT attr="" comment="CSS to put the left bar at the right, with horizontal scroll bar" date="1093734017" name="LowRes.css" path="LowRes.css" size="287" user="ArthurClemens" version="1.1"

Revision 32004-08-28 - ArthurClemens

Line: 1 to 1
 

Customization of PatternSkin

This page describes ways to change the layout, fonts and colors of PatternSkin.

Added:
>
>

Your own TWiki look

You can easily create your own TWiki look by attaching modified css files to your home page:

  • If you want to change the layout of the page, download layout.css from PatternSkin
  • If you want to change the spacing or colors, download style.css from PatternSkin
  • modify the CSS in either style sheet, using tips from this page
  • attach your modified layout.css and/or style.css to your home page
  • as shown below, add the USERLAYOUTURL and USERSTYLEURL settings to your home page
   * Personal TWiki.PatternSkin CSS settings
      * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css
      * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css
 

Screen parts

The PatternSkin view template uses four screen parts:

Line: 40 to 54
  The personal left bar block is formatted like the rest of the left bar.
Added:
>
>

Putting the left bar at the right

If you have a low screen resolution of say, 640 by 480 pixels, it can be useful to put the left bar "out of the way", at the right side of the page - at the cost of a horizontal scroll bar to access the left (now right) bar. This CSS does this:

Add this to layout.css:
<-- /* -->
.twikiMain {
   margin-left:0px;
}
.twikiLeftBar {
   margin-left:100%;
}
.twikiBottomBar {
   margin-left:1em;
   margin-right:0;
   padding:0;
}
<-- */ -->
Add this to style.css:
<-- /* -->
.twikiMain {
   padding-left:1em;
   padding-right:1em;
}
.twikiBottomBarContents {
   padding-left:0em;
}
<-- */ -->

This CSS is also attached to this topic, LowRes.css. To use this style, add this to your home page:

   * Personal TWiki.PatternSkin CSS settings
      * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css
 

Bottom bar

The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.

Line: 108 to 163
 
<-- */ -->
Changed:
<
<
-- TWiki:Main.ArthurClemens - 15 Aug 2004
>
>

Colors

                                                

To create a customised palette of colors, see PatternSkinPalette .

Tables

Tables in topic text

If you have TablePlugin installed, tables in topics take on the properties from TABLEATTRIBUTES. Without TablePlugin (if not installed, or disabled in TWikiPreferences under DISABLEDPLUGINS), the tables have a default appearance that is hardcoded in Render.pm. Styles of topic text tables are not set in a style sheet. If you want to have control over the design of tables, for instance if you work with a style guide, you should add table styles under .twikiTopic. See for an example below.

Topic text table example

This is an example css to give tables in topic text a similar appearance. This will override settings in TablePlugin. This code should be added below the other .twikiTopic code in style.css:

<-- /* -->
.twikiTopic table {
   border-collapse:collapse;
   padding:0px;
   border-spacing:0px;
   empty-cells:show;
   border:0px;
}
.twikiTopic table th {
   background-color:#ccc;
   padding:0.5em 1em;
}
.twikiTopic table td {
   border:1px solid #eee;
}
/* override hardcoded font color */
.twikiTopic table font {
   color:#1e5bbd;
}
.twikiTopic table th a:link,
.twikiTopic table th a:visited {
   color:#1e5bbd;
   text-decoration:none;
}
/* don't show hover background color because we have a table header background */
.twikiTopic table th a:hover {
   background-color:transparent;
   text-decoration:underline;
   border-width:1px;
}
/* no underline if a sort indicator (line) is displayed */
.twikiTopic table th.twikiSortedDescendingCol a:hover,
.twikiTopic table th.twikiSortedAscendingCol a:hover {
   text-decoration:none;
}
/* hide sort icons */
.twikiTopic table th img,
.twikiTopic table th a:link img,
.twikiTopic table th a:visited img {
   display:none;
}
<-- */ -->

Attachment table, Form table

The appearance of the form table and the attachment table are set in style.css under .twikiForm and .twikiAttachments. Text in these tables is set to wrap, so often the dates are wrapped to two lines. If you prefer to have text on one line and are not disturbed by an extra wide attachment table (or when you screen resolution is big enough), add this code to .twikiAttachments td, .twikiForm td {:

<-- /* -->
   white-space:nowrap;
<-- */ -->

Other templates

Other templates than view use the style .twikiVersatileTable for, as the name says, tables with versatile functions. Versatile tables appear a little diffent in each template page (differences are created using multiple classes). Versatile tables are mostly used to format forms to highlight important parts and to dim less important parts. See style.css for specific settings for each template.

-- TWiki:Main.ArthurClemens - 28 Aug 2004

 
Added:
>
>
META FILEATTACHMENT attr="" comment="CSS to put the left bar at the right, with horizontal scroll bar" date="1093734017" name="LowRes.css" path="LowRes.css" size="287" user="ArthurClemens" version="1.1"

Revision 22004-08-17 - PeterThoeny

Line: 1 to 1
 

Customization of PatternSkin

This page describes ways to change the layout, fonts and colors of PatternSkin.

Line: 108 to 108
 
<-- */ -->
Changed:
<
<
-- ArthurClemens - 15 Aug 2004
>
>
-- TWiki:Main.ArthurClemens - 15 Aug 2004
 

Revision 12004-08-16 - ArthurClemens

Line: 1 to 1
Added:
>
>

Customization of PatternSkin

This page describes ways to change the layout, fonts and colors of PatternSkin.

Screen parts

The PatternSkin view template uses four screen parts:

  • The topic part - contains besides the topic content: action buttons, form table, attachment table, topic info
  • Top bar - used for a logo, contains Go box
  • Left bar - site and web navigation, contains a personal link block; may contain a Go box
  • Bottom bar - copyright, disclaimer

These parts are dynamically included topics:

  • Top bar: WebTopBar
  • Left bar: included topic WebLeftBar (one WebLeftBar topic per web)
    • Personal links block: Main.%USERNAME%LeftBar. Your own personal leftbar: Main.guestLeftBar
  • Bottom bar: included topic WebBottomBar

Top bar

The top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo.

Left bar

The menu items are css-formatted bullet lists. So in WebLeftBar you write:

   * *Group*
   * [[SomeTopic][Link 1]]
   * [[AnotherTopic][Link 2]]
   * [[ThirdTopic][Link 3]]

The left bar may contain a Go box instead of the top bar. Use:

   * <input type="text" name="topic" size="16" />

The personal left bar block is formatted like the rest of the left bar.

Bottom bar

The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.

Customizing the logo

The top bar is 60 pixels high, and has a padding of 5 pixels on top, bottom and left, so the logo should be 50 pixels high. If your logo image has a different size, you can either alter the padding in style.css (.twikiTopBarContents) or change the top bar height in layout.css (look for the comment setting the height of the top bar).

You can also choose to set a background image for the top bar. In style.css, add this to .twikiTopBar:

   background-position:top left;
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-image:url(http://absolute_path_to_your_image);
and set the correct image file path.

Fonts

Font style

Font styles are defined in style.css in these places:

<--
/*
-->
html body {
   font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
   font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
}
textarea {
   font-family:monospace;
}
input, select {
   font-family:verdana,arial,sans-serif;
}
.twikiSeparator {
   font-family:Arial,sans-serif;
}
.twikiEditPage .twikiSig input {
   font-family:monospace;
}
<--
*/
-->

Font size

Font sizes in PatternSkin are scalable. This means that even on Windows Explorer, the text in the browser can scale with the user settings (in contrast to many sites where texts have a fixes pixel size, these cannot be changed by the user).

Scalable text is a big accessibility asset. If you notwithstanding want to have a fixed font, or if you want to set the default size smaller or bigger, the easiest way is to make a new entry for body, below the 2 other entries:

<-- /* -->
html body {
   ... (keep)
}
html>body {
   ... (keep)   
}
html body {
   font-size:11px;
}
<-- */ -->

-- ArthurClemens - 15 Aug 2004

 
This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinCustomization