data/TWiki/PatternSkinCssCookbook.txt,v
changeset 0 414e01d06fd5
equal deleted inserted replaced
-1:000000000000 0:414e01d06fd5
       
     1 head	1.5;
       
     2 access;
       
     3 symbols;
       
     4 locks; strict;
       
     5 comment	@# @;
       
     6 
       
     7 
       
     8 1.5
       
     9 date	2008.01.22.03.21.28;	author TWikiContributor;	state Exp;
       
    10 branches;
       
    11 next	1.4;
       
    12 
       
    13 1.4
       
    14 date	2007.01.16.04.11.59;	author TWikiContributor;	state Exp;
       
    15 branches;
       
    16 next	1.3;
       
    17 
       
    18 1.3
       
    19 date	2006.06.25.16.26.31;	author TWikiContributor;	state Exp;
       
    20 branches;
       
    21 next	1.2;
       
    22 
       
    23 1.2
       
    24 date	2006.04.01.05.55.30;	author TWikiContributor;	state Exp;
       
    25 branches;
       
    26 next	1.1;
       
    27 
       
    28 1.1
       
    29 date	2006.02.01.12.01.22;	author TWikiContributor;	state Exp;
       
    30 branches;
       
    31 next	;
       
    32 
       
    33 
       
    34 desc
       
    35 @new-topic
       
    36 @
       
    37 
       
    38 
       
    39 1.5
       
    40 log
       
    41 @buildrelease
       
    42 @
       
    43 text
       
    44 @%META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="5"}%
       
    45 
       
    46 ---+!! %SYSTEMWEB%.PatternSkin CSS Cookbook
       
    47 
       
    48 *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.
       
    49 
       
    50 %TOC%
       
    51 
       
    52 ---++ First Read: How to modify !PatternSkin styles
       
    53 
       
    54 !PatternSkin uses 3 style sheets (attached to %SYSTEMWEB%.PatternSkin):
       
    55    * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/layout.css][layout.css]] - the positioning of main page elements (blocks), widths and heights
       
    56    * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/style.css][style.css]] - fonts, sizes, margins and paddings
       
    57    * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/colors.css][colors.css]] - border colors, text colors and background colors
       
    58 
       
    59 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.
       
    60 
       
    61 ---+++ Changing the color scheme
       
    62 Have a look at PatternSkinColorSettings.
       
    63 
       
    64 ---+++ When you need lots of graphic changes: Rewriting CSS
       
    65    * Create a new topic that will contain your new CSS files
       
    66    * Attach 3 new style sheets to the topic
       
    67    * Point the CSS variables in [[%SYSTEMWEB%.TWikiPreferences]] to your new files:
       
    68 <pre>
       
    69       * <nop>Set TWIKILAYOUTURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/layout.css
       
    70       * <nop>Set TWIKISTYLEURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/style.css
       
    71       * <nop>Set TWIKICOLORSURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/colors.css
       
    72  </pre>
       
    73 
       
    74 ---+++ When you need to make small adjustments: Adding to existing CSS
       
    75 With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles. <br />
       
    76 Overriding default CSS is done with 3 variables: =USERLAYOUTURL=, =USERSTYLEURL=, =USERCOLORSURL=.
       
    77    * Create a new topic that will contain your new CSS files
       
    78    * 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)
       
    79    * Point the CSS variables in [[%SYSTEMWEB%.TWikiPreferences]] to your new files (below the =TWIKIXXXURL= variables):
       
    80 <pre>
       
    81       * <nop>Set USERLAYOUTURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/layout.css
       
    82       * <nop>Set USERSTYLEURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/style.css
       
    83       * <nop>Set USERCOLORSURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/colors.css
       
    84  </pre>
       
    85    * If you use only little CSS and you've only attached one file, write:
       
    86 <pre>
       
    87       * Set USERSTYLEURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/style.css
       
    88  </pre>
       
    89 
       
    90 Instead of setting these variables in [[%SYSTEMWEB%.TWikiPreferences]], you can set these in your home topic, or in any other topic. Setting style URL variables in:
       
    91    * [[%SYSTEMWEB%.TWikiPreferences]]: the style is visible for all users, site-wide
       
    92    * WebPreferences: the style is visible for all users in one web
       
    93    * Home topic: the style is visible for that one user when viewing the site
       
    94    * Some other topic: the style is only visible in that one topic
       
    95 
       
    96 User styles are always loaded after TWiki styles.
       
    97 
       
    98 The rest of this topic shows examples of small CSS changes.
       
    99 
       
   100 ---++ Recipes
       
   101 
       
   102 ---+++ Hide the left bar
       
   103    
       
   104 See example at: PatternSkinCssCookbookNoLeftBar
       
   105 
       
   106 ---+++ Use different fonts
       
   107 
       
   108 See example at: PatternSkinCssCookbookFonts
       
   109 
       
   110 ---+++ No top bar
       
   111 
       
   112 See example at: PatternSkinCssCookbookNoTopBar
       
   113 
       
   114 ---+++ Centered page
       
   115 
       
   116 See example at: PatternSkinCssCookbookCenterPage
       
   117 
       
   118 ---+++ Centered page (with a border around the page)
       
   119 
       
   120 See example at: PatternSkinCssCookbookCenterPageBorder
       
   121 
       
   122 ---+++ Setting !EditTablePlugin styles
       
   123 
       
   124 See example at: PatternSkinCssCookbookEditTableStyle
       
   125 
       
   126 ---++ Style sheet documentation
       
   127 See %SYSTEMWEB%.PatternSkinCss for documentation of !PatternSkin CSS classes
       
   128 @
       
   129 
       
   130 
       
   131 1.4
       
   132 log
       
   133 @buildrelease
       
   134 @
       
   135 text
       
   136 @d1 1
       
   137 a1 1
       
   138 %META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="4"}%
       
   139 d3 1
       
   140 a3 1
       
   141 ---+!! %TWIKIWEB%.PatternSkin CSS Cookbook
       
   142 d11 4
       
   143 a14 4
       
   144 !PatternSkin uses 3 style sheets (attached to %TWIKIWEB%.PatternSkin):
       
   145    * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]] - the positioning of main page elements (blocks), widths and heights
       
   146    * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/style.css][style.css]] - fonts, sizes, margins and paddings
       
   147    * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/colors.css][colors.css]] - border colors, text colors and background colors
       
   148 d24 1
       
   149 a24 1
       
   150    * Point the CSS variables in [[%TWIKIWEB%.TWikiPreferences]] to your new files:
       
   151 d26 3
       
   152 a28 3
       
   153       * <nop>Set TWIKILAYOUTURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/layout.css
       
   154       * <nop>Set TWIKISTYLEURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/style.css
       
   155       * <nop>Set TWIKICOLORSURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/colors.css
       
   156 d36 1
       
   157 a36 1
       
   158    * Point the CSS variables in [[%TWIKIWEB%.TWikiPreferences]] to your new files (below the =TWIKIXXXURL= variables):
       
   159 d38 3
       
   160 a40 3
       
   161       * <nop>Set USERLAYOUTURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/layout.css
       
   162       * <nop>Set USERSTYLEURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/style.css
       
   163       * <nop>Set USERCOLORSURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/colors.css
       
   164 d44 1
       
   165 a44 1
       
   166       * Set USERSTYLEURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/style.css
       
   167 d47 2
       
   168 a48 2
       
   169 Instead of setting these variables in [[%TWIKIWEB%.TWikiPreferences]], you can set these in your home topic, or in any other topic. Setting style URL variables in:
       
   170    * [[%TWIKIWEB%.TWikiPreferences]]: the style is visible for all users, site-wide
       
   171 d84 1
       
   172 a84 1
       
   173 See %TWIKIWEB%.PatternSkinCss for documentation of !PatternSkin CSS classes
       
   174 @
       
   175 
       
   176 
       
   177 1.3
       
   178 log
       
   179 @buildrelease
       
   180 @
       
   181 text
       
   182 @d1 1
       
   183 a1 2
       
   184 %META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="3"}%
       
   185 
       
   186 d9 1
       
   187 a9 1
       
   188 ---++ Introduction
       
   189 d18 3
       
   190 d31 1
       
   191 a31 1
       
   192 ---+++ When you need small adjustments: Adding to existing CSS
       
   193 d82 3
       
   194 @
       
   195 
       
   196 
       
   197 1.2
       
   198 log
       
   199 @buildrelease
       
   200 @
       
   201 text
       
   202 @d1 1
       
   203 a1 1
       
   204 %META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="2"}%
       
   205 d26 1
       
   206 a26 1
       
   207       * <nop>Set TWIKICOLORURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/colors.css
       
   208 @
       
   209 
       
   210 
       
   211 1.1
       
   212 log
       
   213 @buildrelease
       
   214 @
       
   215 text
       
   216 @d1 1
       
   217 a1 1
       
   218 %META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="1"}%
       
   219 d13 3
       
   220 a15 3
       
   221 	* [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]] - the positioning of main page elements (blocks), widths and heights
       
   222 	* [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/style.css][stylestyle.css]] - fonts, sizes, margins and paddings
       
   223 	* [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/colors.css][colors.css]] - border colors, text colors and background colors
       
   224 d20 3
       
   225 a22 3
       
   226 	* Create a new topic that will contain your new CSS files
       
   227 	* Attach 3 new style sheets to the topic
       
   228 	* Point the CSS variables in [[%TWIKIWEB%.TWikiPreferences]] to your new files:
       
   229 d24 3
       
   230 a26 3
       
   231 		* <nop>Set TWIKILAYOUTURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/layout.css
       
   232 		* <nop>Set TWIKISTYLEURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/style.css
       
   233 		* <nop>Set TWIKICOLORURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/colors.css
       
   234 d32 3
       
   235 a34 3
       
   236 	* Create a new topic that will contain your new CSS files
       
   237 	* 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)
       
   238 	* Point the CSS variables in [[%TWIKIWEB%.TWikiPreferences]] to your new files (below the =TWIKIXXXURL= variables):
       
   239 d36 3
       
   240 a38 3
       
   241 		* <nop>Set USERLAYOUTURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/layout.css
       
   242 		* <nop>Set USERSTYLEURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/style.css
       
   243 		* <nop>Set USERCOLORSURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/colors.css
       
   244 d40 1
       
   245 a40 1
       
   246 	* If you use only little CSS and you've only attached one file, write:
       
   247 d42 1
       
   248 a42 1
       
   249 		* Set USERSTYLEURL = %<nop>PUBURLPATH%/%<nop>TWIKIWEB%/YourNewTopic/style.css
       
   250 d46 4
       
   251 a49 4
       
   252 	* [[%TWIKIWEB%.TWikiPreferences]]: the style is visible for all users, site-wide
       
   253 	* WebPreferences: the style is visible for all users in one web
       
   254 	* Home topic: the style is visible for that one user when viewing the site
       
   255 	* Some other topic: the style is only visible in that one topic
       
   256 d58 1
       
   257 a58 1
       
   258 	
       
   259 @