PatternSkinCustomization < TWiki

Webs
Main
Sandbox
TWiki
You are here: FS > TWiki Web > PatternSkinCustomization	r4 - 22 Oct 2005 - 22:11 - TWikiContributor
EditAttachPrintable
Start of topic | Skip to actions
__See also: PatternSkinCssCookbook__

---+!! %TWIKIWEB%.PatternSkin Customization

%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 [[%TWIKIWEB%.TWikiPreferences]]:
<pre>
		* Set <nop>WEBLOGONAME = logo.gif
		* Set <nop>WEBLOGOIMG = %<nop>PUBURLPATH%/%<nop>BASEWEB%/%<nop>WEBPREFSTOPIC%/%<nop>WEBLOGONAME%
		* Set <nop>WEBLOGOURL = %<nop>SCRIPTURL{"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?

In TWiki.TWikiPreferences, 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.

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

---+++ 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][My logo does not fit the top bar]]), remove the left margin (_padding_ actually) in [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/style.css][style.css]]:

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

and change [[TWiki.WebTopBar]]:

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

to:

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

---+++ I want more than a logo 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"><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>
End of topic
Skip to actions | Back to top
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding FS? Send feedback