Line: 1 to 1 | ||||||||
---|---|---|---|---|---|---|---|---|
PatternSkin Customization | ||||||||
Line: 21 to 21 | ||||||||
| ||||||||
Changed: | ||||||||
< < | There are several ways to change the logo in a web: | |||||||
> > | There are 2 ways to change the logo in a web:
Using logo.gif: | |||||||
| ||||||||
Changed: | ||||||||
< < | or: | |||||||
> > | Using a new filename: | |||||||
* Set WEBLOGONAME = your-logo-name.gif-or-png | ||||||||
Added: | ||||||||
> > | ||||||||
How do I set a site-wide logo? | ||||||||
Line: 41 to 47 | ||||||||
My logo does not fit the top bar | ||||||||
Changed: | ||||||||
< < | 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: | |||||||
> > | The top bar is 64 pixels high by default.
Using templates:
Change the height of the top bar in | |||||||
Changed: | ||||||||
< < | /* height of the top bar */ #patternLeftBar { top:64px; /*C3*/ } | |||||||
> > | %TMPL:DEF{"topbardimensions"}% | |||||||
#patternTopBar, | ||||||||
Changed: | ||||||||
< < | #patternTopBar table.patternTopBarContents { height:64px; /*C3*/ | |||||||
> > | #patternClearHeaderCenter, #patternClearHeaderLeft, #patternClearHeaderRight, #patternTopBarContentsOuter { height:64px; /* top bar height; make room for header columns */ overflow:hidden; | |||||||
} | ||||||||
Added: | ||||||||
> > | %TMPL:END% | |||||||
Added: | ||||||||
> > | Only change the number. | |||||||
Changed: | ||||||||
< < | (C3 is used as reference to all occurrences with the same value)
You can change these numbers in layout.css directly, or create a new stylesheet, attach it to a topic and point | |||||||
> > | 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: | ||||||||
< < | 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; } | |||||||
> > | Change the table style in WebTopBar. Default top padding is 11px. | |||||||
Top bar questions
I want to set or change the top background image | ||||||||
Changed: | ||||||||
< < | 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 WEBHEADERART , defined in TWikiPreferences. | |||||||
> > | 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. | |||||||
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):
* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif | ||||||||
Changed: | ||||||||
< < |
| |||||||
> > |
| |||||||
You can also set | ||||||||
Line: 109 to 97 | ||||||||
| ||||||||
Changed: | ||||||||
< < | I want other items in the top bar | |||||||
> > | I want to remove the Jump and Search boxes from the top bar | |||||||
Changed: | ||||||||
< < | 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. | |||||||
> > | If you have localization enabled, you will also see a language dropdown box at the far right. | |||||||
Changed: | ||||||||
< < |
You probably don't need the following information unless you are encountering a strange problem. | |||||||
> > | You can remove these items from WebTopBar. | |||||||
Changed: | ||||||||
< < | The WebTopBar contents is placed inside a table that is written by twiki.pattern.tmpl (the gray text is from the template): | |||||||
> > | I want to hide the top bar | |||||||
Changed: | ||||||||
< < |
<div id="patternTopBar">
| |||||||
> > | 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 | |||||||
Added: | ||||||||
> > | Using style sheets:
See PatternSkinCssCookbookNoTopBar. | |||||||
Changed: | ||||||||
< < | I want to have the language selection in the top bar | |||||||
> > | Left bar questions | |||||||
Changed: | ||||||||
< < | 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> | |||||||
> > | I want to hide the left bar | |||||||
Changed: | ||||||||
< < | This will render: | |||||||
> > | Using templates:
Omit | |||||||
Changed: | ||||||||
< < | ||||||||
> > | Using style sheets:
See PatternSkinCssCookbookNoLeftBar. | |||||||
Changed: | ||||||||
< < | I want to hide the top bar | |||||||
> > | Other page parts | |||||||
Changed: | ||||||||
< < | See PatternSkinCssCookbookNoTopBar | |||||||
> > | I want to hide the edit buttons from certain users | |||||||
Changed: | ||||||||
< < | Left bar questions | |||||||
> > | 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. | |||||||
Changed: | ||||||||
< < | I want to hide the left bar | |||||||
> > | Create in the template directory the file view.customer.tmpl . 'Empty' topicaction and toolbar by writing in the template:
%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. | |||||||
Deleted: | ||||||||
< < | See PatternSkinCssCookbookNoLeftBar | |||||||