(r4) PatternSkinCustomization < TWiki

Tags: view all tags
---+!! %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 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. %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/=.
or:
	* 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>

---+++ 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. If you have a bigger logo you might want to change the height of the top bar in [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]]:
<verbatim>
/* height of the top bar */
#patternLeftBar {
	top:64px; /*C3*/
}
#patternTopBar,
#patternTopBar table.patternTopBarContents {
	height:64px; /*C3*/
}
</verbatim>

(C3 is used as reference to all occurrences with the same value)

You can change these numbers in [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]] directly, or create a new stylesheet, attach it to a topic and point =USERLAYOUTURL= to that topic attachment. See %TWIKIWEB%.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 [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/style.css][style.css]].

Change:
<verbatim>
table.patternTopBarContents td {
	height:100%;
	width:100%;
	vertical-align:middle;
}
</verbatim>
to:
<verbatim>
table.patternTopBarContents td {
	height:100%;
	width:100%;
	vertical-align:top;
}
</verbatim>

You can also define an offset like this:
<verbatim>
table.patternTopBarContents td {
	height:100%;
	width:100%;
	vertical-align:top;
	padding-top:12px;
}
</verbatim>

---++ 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 [[%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
</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 other items in the top bar

In %TWIKIWEB%.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.

<div class="twikiHelp">
You probably don't need the following information unless you are encountering a strange problem.

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

<code><span class="twikiGrayText">
&lt;div id="patternTopBar"><br />
&lt;table class="patternTopBarContents" border="0" cellpadding="0" cellspacing="0"><br />
&lt;tr><br />
&lt;td></span><br />
&lt;span class="patternTopBarLogo twikiLeft"><br />
&lt;a href="%<nop>WEBLOGOURL%">&lt;img src="%<nop>WEBLOGOIMG%" border="0" alt="%<nop>WEBLOGOALT%"/>&lt;/a><br />
&lt;/span><br />
<span class="twikiGrayText">&lt;/td><br />
&lt;/tr><br />
&lt;/table><br />
&lt;/div></span></code>
</div>


---+++ 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 %TWIKIWEB%.WebTopBar:
<verbatim>
<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>
</verbatim>

This will render:

<div style="padding:10px 0 10px 10px; border:1px solid #ddd; height=64px;">
<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>
<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>" marker="selected=\"selected\"" selection="%LANGUAGE%"}%
</select>
<input type="hidden" name="template" value="oopslanguagechanged" />
<noscript>
<input type="submit" value="%MAKETEXT{"Change language"}%" />
</noscript>
</form>
</div>
</td></tr></table>
</div>

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

See PatternSkinCssCookbookNoTopBar

---++ Left bar questions

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

See PatternSkinCssCookbookNoLeftBar
Topic revision: r4 - 2005-10-22 - TWikiContributor
Account
- Log In
~~Edit~~
~~Attach~~
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.