PatternSkinCustomization < TWiki

---+!! %TWIKIWEB%.PatternSkin Customization

*Questions and answers on configuring page elements.* For styling your TWiki, see PatternSkinCssCookbook.

%TOC%

---++ Logo questions

---+++ How can I change the web logo?

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. <br />
The default variables that cause this behavior are defined in [[%WIKIPREFSTOPIC%]].

Redefine your custom variables in [[%LOCALSITEPREFS%]] (to keep %WIKIPREFSTOPIC% intact):
<pre>
      * Set <nop>WEBLOGONAME = logo.gif
      * Set <nop>WEBLOGOIMG = %<nop>PUBURLPATH%/%<nop>BASEWEB%/%<nop>WEBPREFSTOPIC%/%<nop>WEBLOGONAME%
      * Set <nop>WEBLOGOURL = %<nop>SCRIPTURLPATH{"view"}%/%<nop>BASEWEB%/%<nop>HOMETOPIC%
      * Set <nop>WEBLOGOALT = Home
</pre>

There are 2 ways to change the logo in a web:

*Using logo.gif:*
<blockquote>
   * Create a new image named =logo.gif= and attach it to the web's WebPreferences topic. %TWIKIWEB%.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/=.
</blockquote>
*Using a new filename:*
<blockquote>
   * Attach whatever image and attach it to the web's WebPreferences topic. Then add to the WebPreferences (under _Custom web preferences_):
<pre>
      * Set <nop>WEBLOGONAME = your-logo-name.gif-or-png
</pre>
</blockquote>

---+++ How do I set a site-wide logo?

There is a bunch of site-wide logo variables in [[%LOCALSITEPREFS%]]: =WIKILOGOIMG=, =WIKILOGOURL= and =WIKILOGOALT=.
To change only the web logo image to site-wide, in [[%LOCALSITEPREFS%]] set:
<pre>
   * Set <nop>WEBLOGOIMG = %<nop>WIKILOGOIMG%
</pre>


---+++ My logo does not fit the top bar

The top bar is 64 pixels high by default.

*Using templates:*
<blockquote>
Change the height of the top bar in =templates/viewtopbar.pattern.tmpl=:
<verbatim>
%TMPL:DEF{"topbardimensions"}%
#patternTopBar,
#patternClearHeaderCenter,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter {
	height:64px; /* top bar height; make room for header columns */
	overflow:hidden;
}
%TMPL:END%
</verbatim>
Only change the number.
</blockquote>

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

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

Change the table style in %TWIKIWEB%.WebTopBar. Default top padding is 11px.

---++ Top bar questions

---+++ 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 [[%WIKIPREFSTOPIC%]].

Redefine your custom variables in [[%LOCALSITEPREFS%]] (to keep %WIKIPREFSTOPIC% intact):
<pre>
   * Set WEBHEADERART = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/PatternSkin/TWiki_header.gif
   * Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
</pre>

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 [[%LOCALSITEPREFS%]] (to keep %WIKIPREFSTOPIC% intact):
<pre>
   * Set WEBHEADERBGCOLOR = %<nop>WEBBGCOLOR%
</pre>

---+++ 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.

You can remove these items from %TWIKIWEB%.WebTopBar.

---+++ I want to hide the top bar

*Using templates:*
<blockquote>
The view template is populated like this:
<verbatim>
%TMPL:INCLUDE{"page"}%
%TMPL:INCLUDE{"viewtopbar"}%
%TMPL:INCLUDE{"viewtoolbar"}%
%TMPL:INCLUDE{"viewleftbar"}%
%TMPL:INCLUDE{"viewrightbar"}%
%TMPL:INCLUDE{"viewtopicactionbuttons"}%
%TMPL:INCLUDE{"viewbottombar"}%
</verbatim>
Each included template draws a part of the screen. Omit =%<nop>TMPL:INCLUDE{"viewtopbar"}%= to hide the top bar, or in a view template clear it using =%<nop>TMPL:INCLUDE{"viewtopbar"}%%TMPL:END%=
</blockquote>

*Using style sheets:*
<blockquote>
See PatternSkinCssCookbookNoTopBar.
</blockquote>

---++ Left bar questions

---+++ I want to hide the left bar

*Using templates:*
<blockquote>
Omit =%<nop>TMPL:INCLUDE{"viewleftbar"}%= to hide the left bar, or in a view template clear it using =%<nop>TMPL:INCLUDE{"viewleftbar"}%%TMPL:END%=
</blockquote>

*Using style sheets:*
<blockquote>
See PatternSkinCssCookbookNoLeftBar.
</blockquote>

---++ Other page parts

---+++ 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 customers.

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

In %MAINWEB%.TWikiGuest, set the cover to 
<verbatim>
   * Set COVER = customer
</verbatim>

By default this topic is editable only by !TWikiAdminGroup members.
This topic: TWiki > PatternSkinCustomization
Topic revision: r5 - 2005-10-22 - TWikiContributor
Copyright © 1999-2025 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.