%META:TOPICINFO{author="TWikiContributor" date="1130019100" format="1.1" version="4"}%

---+!! %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>

---+++ 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 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 value='$langtag'>$langname</option>" }%
</select>
<input type="hidden" name="template" value="oopslanguagechanged" />
<noscript>
<input type="submit" value="%MAKETEXT{"Change language"}%" />
</noscript>
</form>
</div>
</verbatim>

This will render like this:

<div style="padding:1em 0 1em 1em; border:1px solid #ddd;">
<span class="patternTopBarLogo"><a href="%WEBLOGOURL%"><img src="%WEBLOGOIMG%" border="0" alt="%WEBLOGOALT%" /></a></span><!-- /patternTopBarLogo-->
<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 value='$langtag'>$langname</option>" }%
</select>
<input type="hidden" name="template" value="oopslanguagechanged" />
<noscript>
<input type="submit" value="%MAKETEXT{"Change language"}%" />
</noscript>
</form>
</div>
</div>
