Customization of PatternSkin PatternSkin Customization

This page describes ways to change the layout, fonts and colors of Questions and answers on configuring page elements.PatternSkin For styling your TWiki, see PatternSkinCssCookbook.

Your own Logo questions TWiki look

You can easily create your own TWiki look by attaching modified css files to your home page:

How can I change the web logo?

• If you want to change the layout of the page, download layout.css from PatternSkin
• If you want to change the spacing or colors, download style.css from PatternSkin
• modify the CSS in either style sheet, using tips from this page
• attach your modified layout.css and/or style.css to your home page
• as shown below, add the USERLAYOUTURL and USERSTYLEURL settings to your home page

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

   * Personal TWiki.PatternSkin CSS settings
      * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css
      * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css

Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):

Screen parts

		* Set WEBLOGONAME = logo.gif
		* Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME%
		* Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC%
		* Set WEBLOGOALT = Home

The PatternSkin view template uses four screen parts: There are several ways to change the logo in a web:

• The topic part - contains Create a new image named besides the topic content: action buttons, form table, attachment table, topic info logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
• Top bar - used for a logo, contains Go You can also upload the image with FTP to box /pub/YourWeb/WebPreferences/.
• Left bar - site and web navigation, contains a personal link block; may contain a Go box
• Bottom bar - copyright, disclaimer

These or: parts are dynamically included topics:

• Top bar: Attach whatever image and attach it to the web's WebTopBar WebPreferences topic. Then add to the WebPreferences (under Custom web preferences):
• Left bar: included topic WebLeftBar (one WebLeftBar topic per web)
  • Personal links block: Main.%USERNAME%LeftBar. Your own personal leftbar: Main.guestLeftBar
• Bottom bar: included topic WebBottomBar

Top bar

		* Set WEBLOGONAME = your-logo-name.gif-or-png

The top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo.

How do I set a site-wide logo?

Left bar

There is a bunch of site-wide logo variables in Main.TWikiPreferences: WIKILOGOIMG, WIKILOGOURL and WIKILOGOALT. To change only the web logo image to site-wide, in Main.TWikiPreferences set:

The menu items are css-formatted bullet lists. So in WebLeftBar you write:

	* Set WEBLOGOIMG = %WIKILOGOIMG%

   * *Group*
   * [[SomeTopic][Link 1]]
   * [[AnotherTopic][Link 2]]
   * [[ThirdTopic][Link 3]]

My logo does not fit the top bar

The left top bar may contain is 64 pixels high by default. If you have a Go box instead bigger logo you might want to change the height of the top bar. Use: bar in layout.css:

*  /* height of the top bar */ #patternLeftBar { top:64px; /*C3*/ } #patternTopBar, #patternTopBar table.patternTopBarContents { height:64px; /*C3*/ } 

The (C3 personal left bar block is formatted like used as reference to all occurrences with the rest of same value) the left bar.

Putting the left bar at the right

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 have a low screen resolution of say, 640 by 480 pixels, it can be useful to put the left bar "out of the way", at the right side of the page - at the cost of a horizontal scroll bar to access the left (now right) bar. This CSS does this:

I want to change the white space above and below the logo

Add this to layout.css:

.twikiMain {
   margin-left:0px;
}
.twikiLeftBar {
   margin-left:100%;
}
.twikiBottomBar {
   margin-left:1em;
   margin-right:0;
   padding:0;
}

Add this to style.css:

.twikiMain {
   padding-left:1em;
   padding-right:1em;
}
.twikiBottomBarContents {
   padding-left:0em;
}

The logo is centered vertically be default. If you want to align it to the top, change the style in style.css.

This Change: CSS is also attached to this topic, LowRes.css. To use this style, add this to your home page:

* Personal TWiki.PatternSkin CSS settings * Set table.patternTopBarContents td { height:100%; width:100%; vertical-align:middle; } USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css 

Bottom bar

to:

The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.

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

Customizing the logo

You can also define an offset like this:

The top bar is 60 pixels high, and has a padding of 5 pixels on top, bottom and left, so the logo should be 50 pixels high. If your logo image has a different size, you can either alter the padding in style.css (.twikiTopBarContents) or change the top bar height in layout.css (look for the comment setting the height of the top bar).

table.patternTopBarContents td {
   height:100%;
   width:100%;
   vertical-align:top;
   padding-top:12px;
}

You can also choose to set a background image for the top bar. In style.css, add this to .twikiTopBar:

Top bar questions

   background-position:top left;
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-image:url(http://absolute_path_to_your_image);

I want to set or change the top background image

and set The image at the correct top is called "header art" - after the traditional top image file path. found on blog sites. The image that is displayed by default is set by the variable WEBHEADERART, defined in TWikiPreferences.

Fonts

Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):

Font style

	* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
	* Set WEBHEADERBGCOLOR = somehexcolor

Font styles are defined You can also set in style.css WEBHEADERART per web, by defining the variable in these places: the Web's WebPreferences.

html body {
   font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
   font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
}
textarea {
   font-family:monospace;
}
input, select {
   font-family:verdana,arial,sans-serif;
}
.twikiSeparator {
   font-family:Arial,sans-serif;
}
.twikiEditPage .twikiSig input {
   font-family:monospace;
}

I want to have the web color in the top bar

Font size

Redefine WEBHEADERBGCOLOR in Main.TWikiPreferences (to keep TWikiPreferences intact):

Font sizes in PatternSkin are scalable. This means that even on Windows Explorer, the text in the browser can scale with the user settings (in contrast to many sites where texts have a fixes pixel size, these cannot be changed by the user).

	* Set WEBHEADERBGCOLOR = %WEBBGCOLOR%

Scalable text is a big accessibility asset. If you notwithstanding want to have a fixed font, or if you want to set the default size smaller or bigger, the easiest way is to make a new entry for body, below the 2 other entries:

I want other items in the top bar

html body {
   ... (keep)
}
html>body {
   ... (keep)   
}
html body {
   font-size:11px;
}

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.

Colors

I want to have the language selection in the top bar

To create If you want to have the language selection more prominent, you can put a customised palette of colors, see language selection dropdown box in the top bar. Put this in PatternSkinPalette?WebTopBar. :

Tables

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

Tables in topic text

This will render:

If you have TablePlugin installed, tables in topics take on the properties from TABLEATTRIBUTES. Without TablePlugin (if not installed, or disabled in TWikiPreferences under DISABLEDPLUGINS), the tables have a default appearance that is hardcoded in Render.pm. Styles of topic text tables are not set in a style sheet. If you want to have control over the design of tables, for instance if you work with a style guide, you should add table styles under .twikiTopic. See for an example below.

English

Topic text table example

I want to hide the top bar

This See is an example css to give tables in topic text a similar appearance. This will override settings in TablePlugin PatternSkinCssCookbookNoTopBar . This code should be added below the other .twikiTopic code in style.css:

.twikiTopic table {
   border-collapse:collapse;
   padding:0px;
   border-spacing:0px;
   empty-cells:show;
   border:0px;
}
.twikiTopic table th {
   background-color:#ccc;
   padding:0.5em 1em;
}
.twikiTopic table td {
   border:1px solid #eee;
}
/* override hardcoded font color */
.twikiTopic table font {
   color:#1e5bbd;
}
.twikiTopic table th a:link,
.twikiTopic table th a:visited {
   color:#1e5bbd;
   text-decoration:none;
}
/* don't show hover background color because we have a table header background */
.twikiTopic table th a:hover {
   background-color:transparent;
   text-decoration:underline;
   border-width:1px;
}
/* no underline if a sort indicator (line) is displayed */
.twikiTopic table th.twikiSortedDescendingCol a:hover,
.twikiTopic table th.twikiSortedAscendingCol a:hover {
   text-decoration:none;
}
/* hide sort icons */
.twikiTopic table th img,
.twikiTopic table th a:link img,
.twikiTopic table th a:visited img {
   display:none;
}

Left bar questions

Attachment table, Form table I want to hide the left bar

The See appearance of the form table and the attachment table are set in style.css under .twikiFormPatternSkinCssCookbookNoLeftBar and .twikiAttachments. Text in these tables is set to wrap, so often the dates are wrapped to two lines. If you prefer to have text on one line and are not disturbed by an extra wide attachment table (or when you screen resolution is big enough), add this code to .twikiAttachments td, .twikiForm td {:

   white-space:nowrap;

Other templates

Other templates than view use the style .twikiVersatileTable for, as the name says, tables with versatile functions. Versatile tables appear a little diffent in each template page (differences are created using multiple classes). Versatile tables are mostly used to format forms to highlight important parts and to dim less important parts. See style.css for specific settings for each template.

-- TWiki:Main.ArthurClemens - 28 Aug 2004