PatternSkin CustomizationQuestions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook. | ||||||||
Changed: | ||||||||
< < | Logo questions | |||||||
> > | First Read: How to modify PatternSkin templates | |||||||
Added: | ||||||||
> > | If you need to change any of the elements that are visible on the common 'view' pages, you need to change the 'view' template: /templates/view.pattern.tmpl . The quickest way would be to simply change the text in the template. A safer way - strongly recommended, because it will survive a TWiki update - is to create your own custom skin. That may sound like an awful lot of work, but in reality a skin may be as much as 1 file that consists of only a few lines of code.
Example Let's say you want to simplify the bottom toolbar and remove all links except for "More topic actions". You would need to target %TMPL:DEF{"topicactionbuttons"}% , which is located in view.pattern.tmpl .
The steps you would need:
* Set COVER = myskinor write* Set SKIN = myskin,pattern Logo | |||||||
How can I change the web logo?By default the logo at the top left of each web points to the image with namelogo.gif that is attached to each web's WebPreferences. The default variables that cause this behavior are defined in TWikiPreferences. Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact): | ||||||||
Changed: | ||||||||
< < | * Set WEBLOGONAME = logo.gif * Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME% * Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC% * Set WEBLOGOALT = Home | |||||||
> > | * Set WEBLOGONAME = logo.gif * Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME% * Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC% * Set WEBLOGOALT = Home | |||||||
There are 2 ways to change the logo in a web:
Using logo.gif:
| ||||||||
Added: | ||||||||
> > |
| |||||||
Using a new filename:
| ||||||||
Added: | ||||||||
> > |
| |||||||
How do I set a site-wide logo?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: | ||||||||
Changed: | ||||||||
< < | ||||||||
> > | ||||||||
| ||||||||
Changed: | ||||||||
< < | ||||||||
> > | ||||||||
Deleted: | ||||||||
< < | ||||||||
My logo does not fit the top barThe top bar is 64 pixels high by default. Using templates:
Change the height of the top bar in | ||||||||
Changed: | ||||||||
< < | ||||||||
> > | ||||||||
Added: | ||||||||
> > | ||||||||
%TMPL:DEF{"topbardimensions"}% #patternTopBar, #patternClearHeaderCenter, #patternClearHeaderLeft, #patternClearHeaderRight, #patternTopBarContentsOuter { height:64px; /* top bar height; make room for header columns */ overflow:hidden; } %TMPL:END% | ||||||||
Changed: | ||||||||
< < | Only change the number. | |||||||
> > | ||||||||
Added: | ||||||||
> > | Only change the number from 64px to another value. | |||||||
Using style sheets:
Create a new stylesheet with above definition in it, attach it to a topic and point
I want to change the white space above and below the logo | ||||||||
Changed: | ||||||||
< < | Change the table style in WebTopBar. Default top padding is 11px. | |||||||
> > | Change the table style in topic WebTopBar. The default top padding is 11px. | |||||||
Changed: | ||||||||
< < | Top bar questions | |||||||
> > | Top bar | |||||||
I want to set or change the top background imageThe 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 variableWEBHEADERART , defined in TWikiPreferences.
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact): | ||||||||
Changed: | ||||||||
< < | ||||||||
> > | ||||||||
| ||||||||
Changed: | ||||||||
< < | ||||||||
> > | ||||||||
You can also set WEBHEADERART per web, by defining the variable in the Web's WebPreferences.
I want to have the web color in the top barRedefineWEBHEADERBGCOLOR in Main.TWikiPreferences (to keep TWikiPreferences intact): | ||||||||
Changed: | ||||||||
< < | ||||||||
> > | ||||||||
| ||||||||
Changed: | ||||||||
< < | ||||||||
> > | ||||||||
I want to remove the Jump and Search boxes from the top barIf you have localization enabled, you will also see a language dropdown box at the far right. You can remove these items from WebTopBar.I want to hide the top barUsing templates: | ||||||||
Changed: | ||||||||
< < | The view template is populated like this:%TMPL:INCLUDE{"page"}% %TMPL:INCLUDE{"viewtopbar"}% %TMPL:INCLUDE{"viewtoolbar"}% %TMPL:INCLUDE{"viewleftbar"}% %TMPL:INCLUDE{"viewrightbar"}% %TMPL:INCLUDE{"viewtopicactionbuttons"}% %TMPL:INCLUDE{"viewbottombar"}%Each included template draws a part of the screen. Omit | |||||||
> > |
The view template is populated with page elements using template inclusions:
%TMPL:INCLUDE{"page"}% %TMPL:INCLUDE{"viewtopbar"}% %TMPL:INCLUDE{"viewtoolbar"}% %TMPL:INCLUDE{"viewleftbar"}% %TMPL:INCLUDE{"viewrightbar"}% %TMPL:INCLUDE{"viewtopicactionbuttons"}% %TMPL:INCLUDE{"viewbottombar"}% | |||||||
Added: | ||||||||
> > |
Each included template draws a part of the screen. Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar.
Another approach is to clear the contents of module topbar ; for example in view.myskin.tmpl :
%TMPL:INCLUDE{"view"}% %TMPL:INCLUDE{"topbar"}%%TMPL:END%and add:%TMPL:DEF{"topbardimensions"}%#patternTopBar, #patternClearHeaderCenter, #patternClearHeaderLeft, #patternClearHeaderRight, #patternTopBarContentsOuter { height:0px; }%TMPL:END% | |||||||
Using style sheets:
See PatternSkinCssCookbookNoTopBar. | ||||||||
Changed: | ||||||||
< < | Left bar questions | |||||||
> > | Left bar | |||||||
I want to hide the left barUsing templates: | ||||||||
Changed: | ||||||||
< < | Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a view template clear it using %TMPL:INCLUDE{"viewleftbar"}%%TMPL:END% | |||||||
> > | Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a view template clear it using %TMPL:DEF{"viewleftbar"}%%TMPL:END% | |||||||
Using style sheets:
See PatternSkinCssCookbookNoLeftBar. Other page partsI want to hide the edit buttons from certain usersIt 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. Create in the template directory the fileview.customer.tmpl . 'Empty' topicaction and toolbar by writing in the template: | ||||||||
Changed: | ||||||||
< < | %TMPL:INCLUDE{"view.pattern"}% %TMPL:DEF{"topicaction"}%%TMPL:END% %TMPL:DEF{"toolbar"}%%TMPL:END% | |||||||
> > | %TMPL:INCLUDE{"view"}% %TMPL:DEF{"topicaction"}%%TMPL:END% %TMPL:DEF{"toolbar"}%%TMPL:END% | |||||||
Changed: | ||||||||
< < | In TWikiGuest, set the cover to
* Set COVER = customer | |||||||
> > | In TWikiGuest, set the cover to
* Set COVER = customer | |||||||
By default this topic is editable only by TWikiAdminGroup members. | ||||||||
Added: | ||||||||
> > | I want to remove the History button from the bottom | |||||||
Added: | ||||||||
> > | All action buttons are defined in viewtopicactionbuttons.pattern.tmpl . Remove module revisions from %TMPL:DEF{"topicactionbuttons"}% .
In your view.myskin.tmpl file (see above) you write:
Test by appending%TMPL:INCLUDE{"view"}% %TMPL:DEF{"topicactionbuttons"}%Raw edit | | %TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}% | %TMPL:P{"activatable_attach"}% | %TMPL:P{"printable"}% | %TMPL:P{"raw"}% | %TMPL:P{"backlinks"}% | %TMPL:P{"activatable_more"}%%TMPL:END%Remove all newlines if you copy-paste above text. ?cover=myskin to any topic.
I want to insert text outside of the topic contentPatternSkin has 2 'buckets' to write additional content to:beforetextcontents and aftertextcontents , both defined in view.pattern.tmpl . These containers can contain text or html and are placed directly before and after the topic text.
Both modules are wrapped in CSS containers:
So our view.myskin.tmpl file contains:
Test by appending%TMPL:INCLUDE{"view"}% %TMPL:DEF{"beforetextcontents"}%This is the text before%TMPL:END% ?cover=myskin to any topic.
Use the same procedure for contents to be put after the topic text:
%TMPL:INCLUDE{"view"}% %TMPL:DEF{"aftertextcontents"}%This is the text after%TMPL:END% | |||||||