TWiki/PatternSkinCustomization.mdwn

   1 # <a name="TWiki._PatternSkin Customization"></a><a name=" TWiki._PatternSkin Customizatio"></a> [[PatternSkin]] Customization
   2
   3 **Questions and answers on configuring page elements.** For styling your TWiki, see [[PatternSkinCssCookbook]].
   4
   5 <div>
   6   <ul>
   7     <li><a href="#Logo questions"> Logo questions</a><ul>
   8         <li><a href="#How can I change the web logo?"> How can I change the web logo?</a></li>
   9         <li><a href="#How do I set a site-wide logo?"> How do I set a site-wide logo?</a></li>
  10         <li><a href="#My logo does not fit the top bar"> My logo does not fit the top bar</a></li>
  11         <li><a href="#I want to change the white space"> I want to change the white space above and below the logo</a></li>
  12       </ul>
  13     </li>
  14     <li><a href="#Top bar questions"> Top bar questions</a><ul>
  15         <li><a href="#I want to set or change the top"> I want to set or change the top background image</a></li>
  16         <li><a href="#I want to have the web color in"> I want to have the web color in the top bar</a></li>
  17         <li><a href="#I want to remove the Jump and Se"> I want to remove the Jump and Search boxes from the top bar </a></li>
  18         <li><a href="#I want to hide the top bar"> I want to hide the top bar</a></li>
  19       </ul>
  20     </li>
  21     <li><a href="#Left bar questions"> Left bar questions</a><ul>
  22         <li><a href="#I want to hide the left bar"> I want to hide the left bar</a></li>
  23       </ul>
  24     </li>
  25     <li><a href="#Other page parts"> Other page parts</a><ul>
  26         <li><a href="#I want to hide the edit buttons"> I want to hide the edit buttons from certain users</a></li>
  27       </ul>
  28     </li>
  29   </ul>
  30 </div>
  31
  32 ## <a name="Logo questions"></a> Logo questions
  33
  34 ### <a name="How can I change the web logo?"></a> How can I change the web logo?
  35
  36 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]]. <br /> The default variables that cause this behavior are defined in [[TWikiPreferences]].
  37
  38 Redefine your custom variables in [[Main.TWikiPreferences|Main/TWikiPreferences]] (to keep [[TWikiPreferences]] intact):
  39
  40           * Set WEBLOGONAME = logo.gif
  41           * Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME%
  42           * Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC%
  43           * Set WEBLOGOALT = Home
  44
  45 There are 2 ways to change the logo in a web:
  46
  47 **Using logo.gif:**
  48
  49 > - 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.
  50 > - You can also upload the image with FTP to `/pub/YourWeb/WebPreferences/`.
  51
  52 **Using a new filename:**
  53
  54 > - Attach whatever image and attach it to the web's [[WebPreferences]] topic. Then add to the [[WebPreferences]] (under _Custom web preferences_):
  55 >
  56 >           * Set WEBLOGONAME = your-logo-name.gif-or-png
  57
  58 ### <a name="How do I set a site-wide logo?"></a> How do I set a site-wide logo?
  59
  60 There is a bunch of site-wide logo variables in [[Main.TWikiPreferences|Main/TWikiPreferences]]: `WIKILOGOIMG`, `WIKILOGOURL` and `WIKILOGOALT`. To change only the web logo image to site-wide, in [[Main.TWikiPreferences|Main/TWikiPreferences]] set:
  61
  62        * Set WEBLOGOIMG = %WIKILOGOIMG%
  63
  64 ### <a name="My logo does not fit the top bar"></a> My logo does not fit the top bar
  65
  66 The top bar is 64 pixels high by default.
  67
  68 **Using templates:**
  69
  70 > Change the height of the top bar in
  71 >
  72 > `templates/viewtopbar.pattern.tmpl`
  73 >
  74 > :
  75 >
  76 >     %TMPL:DEF{"topbardimensions"}%
  77 >     #patternTopBar,
  78 >     #patternClearHeaderCenter,
  79 >     #patternClearHeaderLeft,
  80 >     #patternClearHeaderRight,
  81 >     #patternTopBarContentsOuter {
  82 >        height:64px; /* top bar height; make room for header columns */
  83 >        overflow:hidden;
  84 >     }
  85 >     %TMPL:END%
  86 >
  87 > Only change the number.
  88
  89 **Using style sheets:**
  90
  91 > Create a new stylesheet with above definition in it, attach it to a topic and point
  92 >
  93 > `USERLAYOUTURL`
  94 >
  95 > to that topic attachment. See
  96 >
  97 > [[PatternSkinCssCookbook]]
  98 >
  99 > about creating custom styles.
 100
 101 ### <a name="I want to change the white space"></a> I want to change the white space above and below the logo
 102
 103 Change the table style in [[WebTopBar]]. Default top padding is 11px.
 104
 105 ## <a name="Top bar questions"></a> Top bar questions
 106
 107 ### <a name="I want to set or change the top"></a><a name="I want to set or change the top "></a> I want to set or change the top background image
 108
 109 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]].
 110
 111 Redefine your custom variables in [[Main.TWikiPreferences|Main/TWikiPreferences]] (to keep [[TWikiPreferences]] intact):
 112
 113        * Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
 114        * Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
 115
 116 You can also set `WEBHEADERART` per web, by defining the variable in the Web's WebPreferences.
 117
 118 ### <a name="I want to have the web color in"></a><a name="I want to have the web color in "></a> I want to have the web color in the top bar
 119
 120 Redefine `WEBHEADERBGCOLOR` in [[Main.TWikiPreferences|Main/TWikiPreferences]] (to keep [[TWikiPreferences]] intact):
 121
 122        * Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
 123
 124 ### <a name="I want to remove the Jump and Se"></a> I want to remove the Jump and Search boxes from the top bar
 125
 126 If you have localization enabled, you will also see a language dropdown box at the far right.
 127
 128 You can remove these items from [[WebTopBar]].
 129
 130 ### <a name="I want to hide the top bar"></a> I want to hide the top bar
 131
 132 **Using templates:**
 133
 134 > The view template is populated like this:
 135 >
 136 >     %TMPL:INCLUDE{"page"}%
 137 >     %TMPL:INCLUDE{"viewtopbar"}%
 138 >     %TMPL:INCLUDE{"viewtoolbar"}%
 139 >     %TMPL:INCLUDE{"viewleftbar"}%
 140 >     %TMPL:INCLUDE{"viewrightbar"}%
 141 >     %TMPL:INCLUDE{"viewtopicactionbuttons"}%
 142 >     %TMPL:INCLUDE{"viewbottombar"}%
 143 >
 144 > Each included template draws a part of the screen. Omit
 145 >
 146 > `%TMPL:INCLUDE{"viewtopbar"}%`
 147 >
 148 > to hide the top bar, or in a view template clear it using
 149 >
 150 > `%TMPL:INCLUDE{"viewtopbar"}%%TMPL:END%`
 151
 152 **Using style sheets:**
 153
 154 > See
 155 >
 156 > [[PatternSkinCssCookbookNoTopBar]]
 157 >
 158 > .
 159
 160 ## <a name="Left bar questions"></a> Left bar questions
 161
 162 ### <a name="I want to hide the left bar"></a> I want to hide the left bar
 163
 164 **Using templates:**
 165
 166 > Omit
 167 >
 168 > `%TMPL:INCLUDE{"viewleftbar"}%`
 169 >
 170 > to hide the left bar, or in a view template clear it using
 171 >
 172 > `%TMPL:INCLUDE{"viewleftbar"}%%TMPL:END%`
 173
 174 **Using style sheets:**
 175
 176 > See
 177 >
 178 > [[PatternSkinCssCookbookNoLeftBar]]
 179 >
 180 > .
 181
 182 ## <a name="Other page parts"></a> Other page parts
 183
 184 ### <a name="I want to hide the edit buttons"></a><a name="I want to hide the edit buttons "></a> I want to hide the edit buttons from certain users
 185
 186 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.
 187
 188 Create in the template directory the file `view.customer.tmpl`. 'Empty' `topicaction` and `toolbar` by writing in the template:
 189
 190     %TMPL:INCLUDE{"view.pattern"}%
 191     %TMPL:DEF{"topicaction"}%%TMPL:END%
 192     %TMPL:DEF{"toolbar"}%%TMPL:END%
 193
 194 In [[TWikiGuest]], set the cover to
 195
 196        * Set COVER = customer
 197
 198 By default this topic is editable only by TWikiAdminGroup members.