r5 - 01 Apr 2006 - 05:55 - Main.TWikiContributor | r4 - 01 Feb 2006 - 12:01 - Main.TWikiContributor | ||||
---|---|---|---|---|---|
PatternSkin Customization |
PatternSkin Customization |
||||
Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook. |
Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook. |
||||
Logo questions |
Logo questions |
||||
How can I change the web logo? |
How can I change the web logo? |
||||
By default the logo at the top left of each web points to the image with name |
By default the logo at the top left of each web points to the image with name |
||||
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact): |
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact): |
||||
* 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: |
There are several ways to change the logo in a web: |
||||
Using logo.gif: |
|
||||
|
or: |
||||
Using a new filename: |
|
||||
|
* Set WEBLOGONAME = your-logo-name.gif-or-png |
||||
How do I set a site-wide logo? |
How do I set a site-wide logo? |
||||
There is a bunch of site-wide logo variables in Main.TWikiPreferences: |
There is a bunch of site-wide logo variables in Main.TWikiPreferences: |
||||
* Set WEBLOGOIMG = %WIKILOGOIMG% |
* Set WEBLOGOIMG = %WIKILOGOIMG% |
||||
My logo does not fit the top bar |
My logo does not fit the top bar |
||||
The top bar is 64 pixels high by default. |
The top bar is 64 pixels high by default. If you have a bigger logo you might want to change the height of the top bar in layout.css: |
||||
Using templates: |
/* height of the top bar */ #patternLeftBar { top:64px; /*C3*/ } #patternTopBar, #patternTopBar table.patternTopBarContents { height:64px; /*C3*/ } |
||||
Change the height of the top bar in |
(C3 is used as reference to all occurrences with the same value) |
||||
Using style sheets: |
You can change these numbers in layout.css directly, or create a new stylesheet, attach it to a topic and point |
||||
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 |
I want to change the white space above and below the logo |
||||
Change the table style in WebTopBar . Default top padding is 11px. |
The logo is centered vertically be default. If you want to align it to the top, change the style in style.css . |
||||
Change: |
|||||
table.patternTopBarContents td { height:100%; width:100%; vertical-align:middle; } |
|||||
to: |
|||||
table.patternTopBarContents td { height:100%; width:100%; vertical-align:top; } |
|||||
You can also define an offset like this: |
|||||
table.patternTopBarContents td { height:100%; width:100%; vertical-align:top; padding-top:12px; } |
|||||
Top bar questions |
Top bar questions |
||||
I want to set or change the top background image |
I want to set or change the top background image |
||||
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 |
The image at the top is called "header art" - after the traditional top image found on blog sites. The image that is displayed by default is set by the variable |
||||
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact): |
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact): |
||||
* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif * Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff) |
* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif * Set WEBHEADERBGCOLOR = somehexcolor |
||||
You can also set |
You can also set |
||||
I want to have the web color in the top bar |
I want to have the web color in the top bar |
||||
Redefine |
Redefine |
||||
* Set WEBHEADERBGCOLOR = %WEBBGCOLOR% |
* Set WEBHEADERBGCOLOR = %WEBBGCOLOR% |
||||
I want to remove the Jump and Search boxes from the top bar |
I want other items in the top bar |
||||
If you have localization enabled, you will also see a language dropdown box at the far right. |
In WebTopBar shows a logo, but that does not mean you cannot put other things in there. You can put a table, or divs or images. |
||||
You can remove these items from WebTopBar. |
You probably don't need the following information unless you are encountering a strange problem. The WebTopBar contents is placed inside a table that is written by
|
||||
I want to have the language selection in the top bar |
|||||
If you want to have the language selection more prominent, you can put a language selection dropdown box in the top bar. Put this in WebTopBar: |
|||||
<div class="twikiRight" style="margin-right:2em;"> <form id="topBarChangeLanguage" action="%SCRIPTURLPATH{"oops"}%/%WEB%/%TOPIC%" method="get"> <select name="language" onchange="document.getElementById('topBarChangeLanguage').submit()"> %LANGUAGES{format="<option $marker value='$langtag'>$langname</option>" selection="%LANGUAGE%"}% </select> <input type="hidden" name="template" value="oopslanguagechanged" /> <noscript> <input type="submit" value="%MAKETEXT{"Change language"}%" /> </noscript> </form> </div> |
|||||
This will render: |
|||||
I want to hide the top bar |
I want to hide the top bar |
||||
Using templates: |
|||||
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 |
|||||
Using style sheets: |
|||||
See PatternSkinCssCookbookNoTopBar. |
|||||
Left bar questions |
Left bar questions |
||||
I want to hide the left bar |
I want to hide the left bar |
||||
Using templates: |
|||||
Omit |
|||||
Using style sheets: |
|||||
See PatternSkinCssCookbookNoLeftBar. |
|||||
Other page parts |
|||||
I want to hide the edit buttons from certain users |
|||||
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. |
|||||
Create in the template directory the file |
|||||
%TMPL:INCLUDE{"view.pattern"}% %TMPL:DEF{"topicaction"}%%TMPL:END% %TMPL:DEF{"toolbar"}%%TMPL:END% |
|||||
In TWikiGuest, set the cover to |
|||||
* Set COVER = customer |
|||||
By default this topic is editable only by TWikiAdminGroup members. |
|||||
r5 - 01 Apr 2006 - 05:55 - TWikiContributor | r4 - 01 Feb 2006 - 12:01 - TWikiContributor | ||||
Topic PatternSkinCustomization . { View | History | Interweave | r6 < r5 < r4 < r3 < r2 | More } |
Revision r5 - 01 Apr 2006 - 05:55 - TWikiContributor Revision r4 - 01 Feb 2006 - 12:01 - TWikiContributor |
This site is powered by the TWiki collaboration platform. All material on this collaboration platform is the property of the contributing authors. All material marked as authored by Eben Moglen is available under the license terms CC-BY-SA version 4. |