Difference: PatternSkinCustomization (4 vs. 5)

Revision 52005-10-22 - TWikiContributor

   PatternSkin Customization
  Set WEBLOGOALT = Home
-<
<
+There are several ways to change the logo in a web:
->
>
+There are 2 ways to change the logo in a web:

Using logo.gif:
  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/.
-<
<
+or:
->
>
+Using a new filename:
  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?
  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:
->
>
+The top bar is 64 pixels high by default.

Using templates:

Change the height of the top bar in templates/viewtopbar.pattern.tmpl:
-<
<
+/* height of the top bar */
#patternLeftBar {
	top:64px; /*C3*/
}
->
>
+%TMPL:DEF{"topbardimensions"}%
 #patternTopBar,
-<
<
+#patternTopBar table.patternTopBarContents {
	height:64px; /*C3*/
->
>
+#patternClearHeaderCenter,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter {
	height:64px; /* top bar height; make room for header columns */
	overflow:hidden;
+}
->
>
+%TMPL:END%
->
>
+Only change the number.
-<
<
+(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.
->
>
+Using style sheets:

Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See 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 style.css.

Change:
table.patternTopBarContents td {
   height:100%;
   width:100%;
   vertical-align:middle;
}

to:
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;
}
->
>
+Change the table style in WebTopBar. Default top padding is 11px.
  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 TWikiPreferences.
->
>
+The image at the top is called "header art" - commonly the top image found on blog sites. The image that is displayed by default is set by the variable WEBHEADERART, defined in TWikiPreferences.
 Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):
	* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
-<
<
+ Set WEBHEADERBGCOLOR = somehexcolor
->
>
+ Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
 You can also set WEBHEADERART per web, by defining the variable in the Web's WebPreferences.
  Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
-<
<
+ I want other items in the top bar
->
>
+ I want to remove the Jump and Search boxes from 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.
->
>
+If you have localization enabled, you will also see a language dropdown box at the far right.
-<
<
+You probably don't need the following information unless you are encountering a strange problem.
->
>
+You can remove these items from WebTopBar.
-<
<
+The WebTopBar contents is placed inside a table that is written by twiki.pattern.tmpl (the gray text is from the template):
->
>
+ I want to hide the top bar
-<
<
+<div id="patternTopBar">

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

</td>

</tr>

</table>

</div>
->
>
+Using templates:

The view template is populated like this:
%TMPL:INCLUDE{"page"}%
%TMPL:INCLUDE{"viewtopbar"}%
%TMPL:INCLUDE{"viewtoolbar"}%
%TMPL:INCLUDE{"viewleftbar"}%
%TMPL:INCLUDE{"viewrightbar"}%
%TMPL:INCLUDE{"viewtopicactionbuttons"}%
%TMPL:INCLUDE{"viewbottombar"}%

Each included template draws a part of the screen. Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar, or in a view template clear it using %TMPL:INCLUDE{"viewtopbar"}%%TMPL:END%
->
>
+Using style sheets:

See PatternSkinCssCookbookNoTopBar.
-<
<
+ I want to have the language selection in the top bar
->
>
+ Left bar questions
-<
<
+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 WebTopBar:
<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>
->
>
+ I want to hide the left bar
-<
<
+This will render:
->
>
+Using templates:

Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a view template clear it using %TMPL:INCLUDE{"viewleftbar"}%%TMPL:END%
-<
<
->
>
+Using style sheets:

See PatternSkinCssCookbookNoLeftBar.
-<
<
+ I want to hide the top bar
->
>
+ Other page parts
-<
<
+See PatternSkinCssCookbookNoTopBar
->
>
+ I want to hide the edit buttons from certain users
-<
<
+ Left bar questions
->
>
+It may defy the wiki-ness of your TWiki installation, but in certain circumstances it could be useful to hide the edit buttons from users that are not logged in, for instance for customers.
-<
<
+ I want to hide the left bar
->
>
+Create in the template directory the file view.customer.tmpl. 'Empty' topicaction and toolbar by writing in the template:
%TMPL:INCLUDE{"view.pattern"}%
%TMPL:DEF{"topicaction"}%%TMPL:END%
%TMPL:DEF{"toolbar"}%%TMPL:END%


In TWikiGuest, set the cover to 
   * Set COVER = customer


By default this topic is editable only by TWikiAdminGroup members.
-<
<
+See PatternSkinCssCookbookNoLeftBar

View topic | History: r12 < r11 < r10 < r9 | More topic actions...

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.