Pattern skin

Creating your own look

If you want to make more changes than the themes on this page allow, you have the option to change CSS files and templates to make changes (small or large).

Template customization

PatternSkinCustomization - how to configure page elements. View Table of Contents...View Table of Contents...

On this page:

• First Read: How to modify PatternSkin templates
  • The template approach
  • The topic template approach (using VIEW_TEMPLATE)
• Reference: pattern skin template INCLUDE tree
• Logo
  • How can I change the web logo?
  • How do I set a site-wide logo?
  • My logo does not fit the top bar
  • I want to change the white space above and below the logo
• Top bar
  • The search box won't find topics in other webs
  • I want to change the height of the top bar
  • I want to set or change the top background image
  • I want to have the web color in the top bar
  • I want to remove the Jump and Search boxes from the top bar
  • I want to hide the top bar
• Left bar
  • I want to hide the side bar
• Buttons
  • I want to hide the edit buttons from certain users
  • I want to remove the History button from the bottom
  • I want to put the bottom links as buttons at the top
• Other page parts
  • I want to insert text outside of the topic content
  • I want to place the form at the top

Style sheet customization

PatternSkinCssCookbook - how to customize the visual style. View Table of Contents...View Table of Contents...

On this page:

• First Read: How to modify PatternSkin styles
  • Changing the color scheme
  • When you need lots of graphic changes: Rewriting CSS
  • When you need to make small adjustments: Adding to existing CSS
• Recipes
  • Hide the left bar
  • Use different fonts
  • I want to change the height of the top bar
  • No top bar
  • Centered page
  • Centered page (with a border around the page)
  • Setting EditTablePlugin styles
• Style sheet documentation

Changing graphics

The original Photoshop files of the skin graphics (mainly background images) are attached to PatternSkinGraphics.

Top, Bottom and Left Bar customization

Most will customise top, bottom, and left bars.

• Topic System.WebTopBar defines the content of the top bar. If this topic does not exist the topic System.WebTopBarExample will define the top bar. Foswiki does not ship with a WebTopBar topic so by creating this topic as a copy of WebTopBarExample and customizing the copy, you will not later risk that upgrading Foswiki will overwrite your top bar. The top bar is common for all webs.
• Topic System.WebBottomBar defines the content of the bottom bar. If this topic does not exist the topic System.WebBottomBarExample will define the bottom bar. Foswiki does not ship with a WebBottomBar topic so by creating this topic as a copy of WebBottomBarExample and customizing the copy, you will not later risk that upgrading Foswiki will overwrite your bottom bar. The bottom bar is common for all webs.
• Topic WebLeftBar defines the content of the left bar. Each web has its own WebLeftBar. If this topic does not exist the topic WebLeftBarExample will define the left bar. Foswiki does not ship with WebLeftBar topics so by creating these topics as copies of WebLeftBarExample and customizing the copies, you will not later risk that upgrading Foswiki will overwrite your left bars. You can choose to display the WebLeftBar on the right side of the screen.

See these topics for more information: WebLeftBarCookbook, WebLeftBarExample, WebLeftBarLogin, WebLeftBarPersonalTemplate, WebLeftBarSearch, WebLeftBarWebsList, WebTopBarExample, and WebBottomBarExample.

Installation

Note: You do not need to install anything on the browser to use this skin. The following instructions are for the administrator who installs the skin on the server where Foswiki is running.

Note 2: PatternSkin is included with Foswiki by default. Use the following instructions only if you are upgrading PatternSkin.

• Download the ZIP file from the Skin Home page (see below)
• Unzip PatternSkin.zip in your Foswiki installation directory
• Test if installed
• For skin activation see System.Skins

To set pattern skin as default (site wide) skin, use these settings in Main.SitePreferences:

• Global skin styles. To change the look of the site, point these variables to custom CSS attachments.
  • Set FOSWIKI_LAYOUT_URL = /pub/System/PatternSkin/layout.css
  • Set FOSWIKI_STYLE_URL = /pub/System/PatternSkin/style.css
  • Set FOSWIKI_COLORS_URL = /pub/System/PatternSkin/colors.css

• Themes that add upon the global skin styles. Choose from the Theme Browser at PatternSkin.
  • Set PATTERNSKIN_THEME = /pub/System/PatternSkin/theme_foswiki_noframe.css
  • Set PATTERNSKIN_COLUMNS = /pub/System/PatternSkin/column_left.css

• Overriding styles that add upon the global and theme styles. Enabled by default but empty to prevent browsers from fetching %USERLAYOUTURL%-style URLs.
  • Set USERLAYOUTURL =
  • Set USERSTYLEURL =
  • Set USERCOLORSURL =
  • Set WEBHEADERART =
  • Set WEBHEADERBGCOLOR =

Troubleshooting

If you have set the SKIN setting to pattern and you still don't see the layout as on the screenshot, a few settings in may have been disabled.

Check these preference settings here:

• FOSWIKI_LAYOUT_URL = /pub/System/PatternSkin/layout.css
• FOSWIKI_STYLE_URL = /pub/System/PatternSkin/style.css
• FOSWIKI_COLORS_URL = /pub/System/PatternSkin/colors.css
• SKIN = pattern

If FOSWIKI_LAYOUT_URL or FOSWIKI_STYLE_URL don't give a value or point to non-existing files, check in DefaultPreferences and in SitePreferences that the following preferences do exist and that they are set to on:

   * System.PatternSkin settings:
      * Set FOSWIKI_LAYOUT_URL = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/layout.css
      * Set FOSWIKI_STYLE_URL = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/style.css
      * Set FOSWIKI_COLORS_URL = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/colors.css

NOTE: customization of these values should be done in Main.SitePreferences

If this still does not work, contact the administrator who installs skins.

For further troubleshooting and feedback, go to http://foswiki.org/Support/PatternSkin.

All PatternSkin topics

• PatternSkinCss
• PatternSkinCssCookbook
• PatternSkinCssCookbookCenterPage
• PatternSkinCssCookbookEditTableStyle
• PatternSkinCssCookbookFonts
• PatternSkinCssCookbookNoLeftBar
• PatternSkinCssCookbookNoTopBar
• PatternSkinCustomization
• PatternSkinGraphics
• WebBottomBar? (not distributed with Foswiki)
• WebBottomBarExample
• WebLeftBar? (not distributed with Foswiki)
• WebLeftBarCookbook
• WebLeftBarExample
• WebLeftBarLogin
• WebLeftBarPersonalTemplate
• WebLeftBarSearch
• WebLeftBarWebsList
• WebTopBar? (not distributed with Foswiki)
• WebTopBarExample

Iterators for theme and column file
   * Theme
      * Set CURRENTTHEME = %URLPARAM{"themeidx" default="%THEME_DEFAULT%"}%
      * Set NEXTTHEME = %CALC{"$IF( $EVAL( %CURRENTTHEME% + 1 ) > %THEMELAST%, %THEMEFIRST%, $EVAL( %CURRENTTHEME% + 1 ))"}%
      * Set PREVIOUSTHEME = %CALC{"$IF( $EVAL( %CURRENTTHEME% - 1 ) < %THEMEFIRST%, %THEMELAST%, $EVAL( %CURRENTTHEME% - 1 ))"}%
      * Set THEMEPARAM = themefile=%URLPARAM{"themefile" default="%THEME%CURRENTTHEME%%"}%;themeidx=%CURRENTTHEME%

   * Columns
      * Set CURRENTCOL = %URLPARAM{"colidx" default="%COL_DEFAULT%"}%
      * Set NEXTCOL = %CALC{"$IF( $EVAL( %CURRENTCOL% + 1 ) > %COLLAST%, %COLFIRST%, $EVAL( %CURRENTCOL% + 1 ))"}%
      * Set PREVIOUSCOL = %CALC{"$IF( $EVAL( %CURRENTCOL% - 1 ) < %COLFIRST%, %COLLAST%, $EVAL( %CURRENTCOL% - 1 ))"}%
      * Set COLPARAM = colsfile=%URLPARAM{"colsfile" default="%COL%CURRENTCOL%%"}%;colidx=%CURRENTCOL%
   

BROWSER SETTINGS

Column layouts
   * Set COL_DEFAULT = 1
   * Set COLFIRST = 1
   
   * Set COL1 = %PUBURL%/%SYSTEMWEB%/PatternSkin/column_left.css
   * Set COL_NAME1 = Column left
   * Set COL2 = %PUBURL%/%SYSTEMWEB%/PatternSkin/column_right.css
   * Set COL_NAME2 = Column right
   * Set COL3 = %PUBURL%/%SYSTEMWEB%/PatternSkin/column_none.css
   * Set COL_NAME3 = No column
   * Set COL4 = %PUBURL%/%SYSTEMWEB%/PatternSkin/column_twiki.css
   * Set COL_NAME4 = TWiki's Pattern Skin left colum
   
   * Set COLLAST = 4
   
Themes
   * Set THEME_DEFAULT = 1
   * Set THEMEFIRST = 1
   
   * Set THEME1 = %PUBURL%/%SYSTEMWEB%/PatternSkin/theme_foswiki_noframe.css
   * Set THEME_NAME1 = Foswiki without a frame
   * Set THEME2 = %PUBURL%/%SYSTEMWEB%/PatternSkin/theme_foswiki.css
   * Set THEME_NAME2 = Foswiki with a frame
   * Set THEME3 = %PUBURL%/%SYSTEMWEB%/PatternSkin/theme_twiki.css
   * Set THEME_NAME3 = TWiki's Pattern Skin

   * Set THEMELAST = 3
   
Relative paths with macros
   * Set PATTERNSKIN_THEME_RELATIVE = %CALC{"$SUBSTITUTE(%THEME%CURRENTTHEME%%, %PUBURL%/%SYSTEMWEB%/PatternSkin, $NOP(%<nop>PUBURL%/%<nop>SYSTEMWEB%/PatternSkin))"}%
   * Set PATTERNSKIN_COLUMNS_RELATIVE = %CALC{"$SUBSTITUTE(%COL%CURRENTCOL%%, %PUBURL%/%SYSTEMWEB%/PatternSkin, $NOP(%<nop>PUBURL%/%<nop>SYSTEMWEB%/PatternSkin))"}%
   
Setting the variables to view the results on this page
   * Local PATTERNSKIN_THEME = %THEME%CURRENTTHEME%%
   * Local PATTERNSKIN_COLUMNS = %COL%CURRENTCOL%%