PatternSkin Customization

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

		* Set WEBLOGONAME = logo.gif
		* Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME%
		* Set WEBLOGOURL = %SCRIPTURL{"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?

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

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

How do I set a page-wide top background image?

Simple approach: see recipe PatternSkinCssCookbookTopBarBackgroundImage.

A different approach:

Assuming your image is the height of the top bar (else see My logo does not fit the top bar), remove the left margin (padding actually) in style.css:

table.patternTopBarContents {
   padding:0 0 0 1em; /*S6*/ /* left padding same as #patternLeftBar */ 
   height:100%;
   width:100%;
}   

table.patternTopBarContents {
   padding:0;
   height:100%;
   width:100%;
}      

and change TWiki.WebTopBar:

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

to:

<div class="patternTopBarLogo" style="width:100%; height:100%; background-image:url('%WEBLOGOIMG%'); background-repeat:no-repeat;"></div>

I want more than a logo 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.