PatternSkin Customization

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 TWiki.TWikiPreferences:

		* Set WEBLOGONAME = logo.gif
		* Set WEBLOGOIMG = %PUBURL%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME%
		* Set WEBLOGOURL = %SCRIPTURL%/view%SCRIPTSUFFIX%/%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?

Edit WebTopBar and change:

<a href="%WEBLOGOURL%"><img src="%WEBLOGOIMG%" border="0" alt="%WEBLOGOALT%"/></a>

<a href="%WIKILOGOURL%"><img src="%WIKILOGOIMG%" border="0" alt="%WIKILOGOALT%"/></a>

My logo does not fit the top bar

PatternSkin's stylesheet assumes the logo is 40px high. The top bar is 60px high, and has a vertical padding of 5px. This makes the logo appear in the middle of the top bar.

If you want to have a higher top bar:

layout.css has these style definitions:

.patternLeftBar {
   top:60px; /* height of patternTopBar */
}
.patternTopBar {
   height:60px;
}

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.

If you want to change the white space above and below the logo

style.css has this style definition:

.patternTopBarContents {
   padding:10px 2em 10px 1em; /*S6*/ /* right padding same as .patternViewPage .patternMain; left padding same as .patternLeftBar */ 
}

Assuming you want to keep the 60px top bar height (otherwise see above): if your logo is 50px high, change the 10px to 5px:

.patternTopBarContents {
   padding:5px 2em 5px 1em; /*S6*/ /* right padding same as .patternViewPage .patternMain; left padding same as .patternLeftBar */ 
}