Welcome | Register | Changes | Topics | Index | Search | Go

<<O>> Difference Topic PatternSkinCssCookbook (5 - 2005-10-14 - TWikiContributor)

-<
<
+  PatternSkin CSS Cookbook
->
>
+  PatternSkin CSS Cookbook
 Questions and answers on how to customize the default look of TWiki for your own needs, using style sheets. For configuring page elements, see PatternSkinCustomization.

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
   No top bar
   Centered page
   Centered page (with a border around the page)
   Setting EditTablePlugin styles
 
   Style sheet documentation
 


 First Read: How to modify PatternSkin styles
-<
<
+PatternSkin uses 3 style sheets (attached to PatternSkin): 
 layout.css - the positioning of main page elements (blocks), widths and heights
  style.css - fonts, sizes, margins and paddings
  colors.css - border colors, text colors and background colors
->
>
+PatternSkin uses 3 style sheets (attached to PatternSkin): 
 layout.css - the positioning of main page elements (blocks), widths and heights
  style.css - fonts, sizes, margins and paddings
  colors.css - border colors, text colors and background colors
 When customizing your TWiki installation, you can either choose to completely rewrite all css styles, or to selectively override some styles. The latter option is by far less time consuming, but all depends on your graphical wishes.

 Changing the color scheme 
Have a look at PatternSkinColorSettings.

 When you need lots of graphic changes: Rewriting CSS 
 
 Create a new topic that will contain your new CSS files
  Attach 3 new style sheets to the topic
-<
<
+ Point the CSS variables in TWiki.TWikiPreferences to your new files:
->
>
+ Point the CSS variables in TWiki.TWikiPreferences to your new files:
-<
<
+ Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
  Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
  Set TWIKICOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
->
>
+ Set TWIKILAYOUTURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/layout.css
  Set TWIKISTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
  Set TWIKICOLORSURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/colors.css
  When you need to make small adjustments: Adding to existing CSS 
With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles. 

Overriding default CSS is done with 3 variables: USERLAYOUTURL, USERSTYLEURL, USERCOLORSURL. 
 Create a new topic that will contain your new CSS files
  Attach 1, 2 or 3 new style sheets to the topic, dependent on your CSS setup (if you don't change much, you might as well put everything in one CSS file, layout, margins and colors)
-<
<
+ Point the CSS variables in TWiki.TWikiPreferences to your new files (below the TWIKIXXXURL variables):
->
>
+ Point the CSS variables in TWiki.TWikiPreferences to your new files (below the TWIKIXXXURL variables):
-<
<
+ Set USERLAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
  Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
  Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
->
>
+ Set USERLAYOUTURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/layout.css
  Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
  Set USERCOLORSURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/colors.css
  If you use only little CSS and you've only attached one file, write:
-<
<
+ Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
->
>
+ Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
-<
<
+Instead of setting these variables in TWiki.TWikiPreferences, you can set these in your home topic, or in any other topic. Setting style URL variables in: 
 TWiki.TWikiPreferences: the style is visible for all users, site-wide
->
>
+Instead of setting these variables in TWiki.TWikiPreferences, you can set these in your home topic, or in any other topic. Setting style URL variables in: 
 TWiki.TWikiPreferences: the style is visible for all users, site-wide
  WebPreferences: the style is visible for all users in one web
  Home topic: the style is visible for that one user when viewing the site
  Some other topic: the style is only visible in that one topic
 

User styles are always loaded after TWiki styles.

The rest of this topic shows examples of small CSS changes.

 Recipes 

 Hide the left bar 

See example at: PatternSkinCssCookbookNoLeftBar

 Use different fonts 

See example at: PatternSkinCssCookbookFonts

 No top bar 

See example at: PatternSkinCssCookbookNoTopBar

 Centered page 

See example at: PatternSkinCssCookbookCenterPage

 Centered page (with a border around the page) 

See example at: PatternSkinCssCookbookCenterPageBorder

 Setting EditTablePlugin styles 

See example at: PatternSkinCssCookbookEditTableStyle

 Style sheet documentation
-<
<
+See PatternSkinCss for documentation of PatternSkin CSS classes
->
>
+See PatternSkinCss for documentation of PatternSkin CSS classes

<<O>> Difference Topic PatternSkinCssCookbook (4 - 2005-10-14 - TWikiContributor)

-<
<
   PatternSkin CSS Cookbook 

Questions and answers on how to customize the default look of TWiki for your own needs, using style sheets. For configuring page elements, see PatternSkinCustomization.

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
   No top bar
   Centered page
   Centered page (with a border around the page)
   Setting EditTablePlugin styles
 
   Style sheet documentation
-<
<
+ Introduction
->
>
+ First Read: How to modify PatternSkin styles
 PatternSkin uses 3 style sheets (attached to PatternSkin): 
 layout.css - the positioning of main page elements (blocks), widths and heights
  style.css - fonts, sizes, margins and paddings
  colors.css - border colors, text colors and background colors
 

When customizing your TWiki installation, you can either choose to completely rewrite all css styles, or to selectively override some styles. The latter option is by far less time consuming, but all depends on your graphical wishes.
->
>
+ Changing the color scheme 
Have a look at PatternSkinColorSettings.
  When you need lots of graphic changes: Rewriting CSS 
 
 Create a new topic that will contain your new CSS files
  Attach 3 new style sheets to the topic
  Point the CSS variables in TWiki.TWikiPreferences to your new files:
 
      * Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
      * Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
      * Set TWIKICOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
-<
<
+ When you need small adjustments: Adding to existing CSS
->
>
+ When you need to make small adjustments: Adding to existing CSS
 With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles. 

Overriding default CSS is done with 3 variables: USERLAYOUTURL, USERSTYLEURL, USERCOLORSURL. 
 Create a new topic that will contain your new CSS files
  Attach 1, 2 or 3 new style sheets to the topic, dependent on your CSS setup (if you don't change much, you might as well put everything in one CSS file, layout, margins and colors)
  Point the CSS variables in TWiki.TWikiPreferences to your new files (below the TWIKIXXXURL variables):
 
      * Set USERLAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
      * Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
      * Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
 
 
 If you use only little CSS and you've only attached one file, write:
 
      * Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
 

Instead of setting these variables in TWiki.TWikiPreferences, you can set these in your home topic, or in any other topic. Setting style URL variables in: 

 TWiki.TWikiPreferences: the style is visible for all users, site-wide
  WebPreferences: the style is visible for all users in one web
  Home topic: the style is visible for that one user when viewing the site
  Some other topic: the style is only visible in that one topic
 

User styles are always loaded after TWiki styles.

The rest of this topic shows examples of small CSS changes.

 Recipes 

 Hide the left bar 

See example at: PatternSkinCssCookbookNoLeftBar

 Use different fonts 

See example at: PatternSkinCssCookbookFonts

 No top bar 

See example at: PatternSkinCssCookbookNoTopBar

 Centered page 

See example at: PatternSkinCssCookbookCenterPage

 Centered page (with a border around the page) 

See example at: PatternSkinCssCookbookCenterPageBorder

 Setting EditTablePlugin styles 

See example at: PatternSkinCssCookbookEditTableStyle
->
>
+ Style sheet documentation 
See PatternSkinCss for documentation of PatternSkin CSS classes

<<O>> Difference Topic PatternSkinCssCookbook (3 - 2005-10-14 - TWikiContributor)

	PatternSkin CSS Cookbook Questions and answers on how to customize the default look of TWiki for your own needs, using style sheets. For configuring page elements, see PatternSkinCustomization. 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 No top bar Centered page Centered page (with a border around the page) Setting EditTablePlugin styles Style sheet documentation Introduction PatternSkin uses 3 style sheets (attached to PatternSkin): layout.css - the positioning of main page elements (blocks), widths and heights style.css - fonts, sizes, margins and paddings colors.css - border colors, text colors and background colors When customizing your TWiki installation, you can either choose to completely rewrite all css styles, or to selectively override some styles. The latter option is by far less time consuming, but all depends on your graphical wishes. When you need lots of graphic changes: Rewriting CSS Create a new topic that will contain your new CSS files Attach 3 new style sheets to the topic Point the CSS variables in TWiki.TWikiPreferences to your new files: * Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css * Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
Changed:
< <	Set TWIKICOLORURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
> >	Set TWIKICOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
	When you need small adjustments: Adding to existing CSS With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles. Overriding default CSS is done with 3 variables: `USERLAYOUTURL`, `USERSTYLEURL`, `USERCOLORSURL`. Create a new topic that will contain your new CSS files Attach 1, 2 or 3 new style sheets to the topic, dependent on your CSS setup (if you don't change much, you might as well put everything in one CSS file, layout, margins and colors) Point the CSS variables in TWiki.TWikiPreferences to your new files (below the `TWIKIXXXURL` variables): * Set USERLAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css * Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css * Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css If you use only little CSS and you've only attached one file, write: * Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css Instead of setting these variables in TWiki.TWikiPreferences, you can set these in your home topic, or in any other topic. Setting style URL variables in: TWiki.TWikiPreferences: the style is visible for all users, site-wide WebPreferences: the style is visible for all users in one web Home topic: the style is visible for that one user when viewing the site Some other topic: the style is only visible in that one topic User styles are always loaded after TWiki styles. The rest of this topic shows examples of small CSS changes. Recipes Hide the left bar See example at: PatternSkinCssCookbookNoLeftBar Use different fonts See example at: PatternSkinCssCookbookFonts No top bar See example at: PatternSkinCssCookbookNoTopBar Centered page See example at: PatternSkinCssCookbookCenterPage Centered page (with a border around the page) See example at: PatternSkinCssCookbookCenterPageBorder Setting EditTablePlugin styles See example at: PatternSkinCssCookbookEditTableStyle

<<O>> Difference Topic PatternSkinCssCookbook (2 - 2005-10-14 - TWikiContributor)

   PatternSkin CSS Cookbook 

Questions and answers on how to customize the default look of TWiki for your own needs, using style sheets. For configuring page elements, see PatternSkinCustomization.

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
   No top bar
   Centered page
   Centered page (with a border around the page)
   Setting EditTablePlugin styles
 
   Style sheet documentation
 


 Introduction 

PatternSkin uses 3 style sheets (attached to PatternSkin):
-<
<
+ layout.css - the positioning of main page elements (blocks), widths and heights
  stylestyle.css - fonts, sizes, margins and paddings
  colors.css - border colors, text colors and background colors
->
>
+ layout.css - the positioning of main page elements (blocks), widths and heights
  style.css - fonts, sizes, margins and paddings
  colors.css - border colors, text colors and background colors
 When customizing your TWiki installation, you can either choose to completely rewrite all css styles, or to selectively override some styles. The latter option is by far less time consuming, but all depends on your graphical wishes.

 When you need lots of graphic changes: Rewriting CSS
-<
<
+ Create a new topic that will contain your new CSS files
  Attach 3 new style sheets to the topic
  Point the CSS variables in TWiki.TWikiPreferences to your new files:
->
>
+ Create a new topic that will contain your new CSS files
  Attach 3 new style sheets to the topic
  Point the CSS variables in TWiki.TWikiPreferences to your new files:
-<
<
+ Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
  Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
  Set TWIKICOLORURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
->
>
+ Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
  Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
  Set TWIKICOLORURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
  When you need small adjustments: Adding to existing CSS 
With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles. 

Overriding default CSS is done with 3 variables: USERLAYOUTURL, USERSTYLEURL, USERCOLORSURL.
-<
<
+ Create a new topic that will contain your new CSS files
  Attach 1, 2 or 3 new style sheets to the topic, dependent on your CSS setup (if you don't change much, you might as well put everything in one CSS file, layout, margins and colors)
  Point the CSS variables in TWiki.TWikiPreferences to your new files (below the TWIKIXXXURL variables):
->
>
+ Create a new topic that will contain your new CSS files
  Attach 1, 2 or 3 new style sheets to the topic, dependent on your CSS setup (if you don't change much, you might as well put everything in one CSS file, layout, margins and colors)
  Point the CSS variables in TWiki.TWikiPreferences to your new files (below the TWIKIXXXURL variables):
-<
<
+ Set USERLAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
  Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
  Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
->
>
+ Set USERLAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
  Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
  Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
-<
<
+ If you use only little CSS and you've only attached one file, write:
->
>
+ If you use only little CSS and you've only attached one file, write:
-<
<
+ Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
->
>
+ Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
 Instead of setting these variables in TWiki.TWikiPreferences, you can set these in your home topic, or in any other topic. Setting style URL variables in:
-<
<
+ TWiki.TWikiPreferences: the style is visible for all users, site-wide
  WebPreferences: the style is visible for all users in one web
  Home topic: the style is visible for that one user when viewing the site
  Some other topic: the style is only visible in that one topic
->
>
+ TWiki.TWikiPreferences: the style is visible for all users, site-wide
  WebPreferences: the style is visible for all users in one web
  Home topic: the style is visible for that one user when viewing the site
  Some other topic: the style is only visible in that one topic
 User styles are always loaded after TWiki styles.

The rest of this topic shows examples of small CSS changes.

 Recipes 

 Hide the left bar
-<
<
->
>
 See example at: PatternSkinCssCookbookNoLeftBar

 Use different fonts 

See example at: PatternSkinCssCookbookFonts

 No top bar 

See example at: PatternSkinCssCookbookNoTopBar

 Centered page 

See example at: PatternSkinCssCookbookCenterPage

 Centered page (with a border around the page) 

See example at: PatternSkinCssCookbookCenterPageBorder

 Setting EditTablePlugin styles 

See example at: PatternSkinCssCookbookEditTableStyle

<<O>> Difference Topic PatternSkinCssCookbook (1 - 2005-10-14 - TWikiContributor)

PatternSkin CSS Cookbook

Questions and answers on how to customize the default look of TWiki for your own needs, using style sheets. For configuring page elements, see PatternSkinCustomization.

On this page:

First Read: How to modify PatternSkin styles
Recipes
Style sheet documentation

Introduction

PatternSkin uses 3 style sheets (attached to PatternSkin):

layout.css - the positioning of main page elements (blocks), widths and heights
stylestyle.css - fonts, sizes, margins and paddings
colors.css - border colors, text colors and background colors

When customizing your TWiki installation, you can either choose to completely rewrite all css styles, or to selectively override some styles. The latter option is by far less time consuming, but all depends on your graphical wishes.

When you need lots of graphic changes: Rewriting CSS

Create a new topic that will contain your new CSS files
Attach 3 new style sheets to the topic
Point the CSS variables in TWiki.TWikiPreferences to your new files:

		* Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
		* Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
		* Set TWIKICOLORURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css

When you need small adjustments: Adding to existing CSS

With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles.
Overriding default CSS is done with 3 variables: USERLAYOUTURL, USERSTYLEURL, USERCOLORSURL.

Create a new topic that will contain your new CSS files
Attach 1, 2 or 3 new style sheets to the topic, dependent on your CSS setup (if you don't change much, you might as well put everything in one CSS file, layout, margins and colors)
Point the CSS variables in TWiki.TWikiPreferences to your new files (below the TWIKIXXXURL variables):

		* Set USERLAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
		* Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
		* Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css

If you use only little CSS and you've only attached one file, write:

		* Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css

Instead of setting these variables in TWiki.TWikiPreferences, you can set these in your home topic, or in any other topic. Setting style URL variables in:

TWiki.TWikiPreferences: the style is visible for all users, site-wide
WebPreferences: the style is visible for all users in one web
Home topic: the style is visible for that one user when viewing the site
Some other topic: the style is only visible in that one topic

User styles are always loaded after TWiki styles.

The rest of this topic shows examples of small CSS changes.

Recipes

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