PatternSkin Customization

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

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.
The default variables that cause this behavior are defined in TWikiPreferences.

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

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

• Attach whatever image and attach it to the web's WebPreferences topic. Then add to the WebPreferences (under Custom web preferences):

		* Set WEBLOGONAME = your-logo-name.gif-or-png

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:

	* Set WEBLOGOIMG = %WIKILOGOIMG%

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:

/* height of the top bar */
#patternLeftBar {
   top:64px; /*C3*/
}
#patternTopBar,
#patternTopBar table.patternTopBarContents {
   height:64px; /*C3*/
}

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

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

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;
}

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;
}

Top bar questions

I want to set or change the top background image

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.

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

	* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
	* Set WEBHEADERBGCOLOR = somehexcolor

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):

	* Set WEBHEADERBGCOLOR = %WEBBGCOLOR%

I want other items in the top bar

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.

I want to have the language selection in the top bar

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>

This will render:

Български English Español 日本語 Português

I want to hide the top bar

See PatternSkinCssCookbookNoTopBar

Left bar questions

I want to hide the left bar

See PatternSkinCssCookbookNoLeftBar