Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook.
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.
The default variables that cause this behavior are defined in TWikiPreferences.
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
There are several 2 ways to change the logo in a web:
logo.gif
and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later. /pub/YourWeb/WebPreferences/
. Using logo.gif:
or:
- 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.- You can also upload the image with FTP to
/pub/YourWeb/WebPreferences/
.
Using a new filename:
* Set WEBLOGONAME = your-logo-name.gif-or-png
- Attach whatever image and attach it to the web's WebPreferences topic. Then add to the WebPreferences (under Custom web preferences):
* Set WEBLOGONAME = your-logo-name.gif-or-png
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:
* Set WEBLOGOIMG = %WIKILOGOIMG%
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:
/* height of the top bar */ #patternLeftBar { top:64px; /*C3*/ } #patternTopBar, #patternTopBar table.patternTopBarContents { height:64px; /*C3*/ }
Using templates:
(C3 is used as reference to all occurrences with the same value)
Change the height of the top bar intemplates/viewtopbar.pattern.tmpl
:%TMPL:DEF{"topbardimensions"}% #patternTopBar, #patternClearHeaderCenter, #patternClearHeaderLeft, #patternClearHeaderRight, #patternTopBarContentsOuter { height:64px; /* top bar height; make room for header columns */ overflow:hidden; } %TMPL:END%Only change the number.
You can change these numbers in Using style sheets:layout.css directly, or create a new stylesheet, attach it to a topic and point USERLAYOUTURL
to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL
to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
The Change logo is centered vertically be default. If you want to align it to the top, table change the style in style.css WebTopBar . Default top padding is 11px.
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; }
The image at the top is called "header art" - after commonly the traditional 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 * Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
You can also set WEBHEADERART
per web, by defining the variable in the Web's WebPreferences.
Redefine WEBHEADERBGCOLOR
in Main.TWikiPreferences (to keep TWikiPreferences intact):
* Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
In If you have localization enabled, you will also see a language dropdown box at the far right. 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.
The WebTopBar contents is placed inside a table that is written by twiki.pattern.tmpl
(the gray text is from the template):
<div id="patternTopBar">
<table class="patternTopBarContents" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<span class="patternTopBarLogo twikiLeft">
<a href="%WEBLOGOURL%"><img src="%WEBLOGOIMG%" border="0" alt="%WEBLOGOALT%"/></a>
</span>
</td>
</tr>
</table>
</div>
You can remove these items from WebTopBar.
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:
See Using templates:PatternSkinCssCookbookNoTopBar
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%TMPL:INCLUDE{"viewtopbar"}%
to hide the top bar, or in a view template clear it using%TMPL:INCLUDE{"viewtopbar"}%%TMPL:END%
Using style sheets:
See Using templates:PatternSkinCssCookbookNoLeftBar
Omit%TMPL:INCLUDE{"viewleftbar"}%
to hide the left bar, or in a view template clear it using%TMPL:INCLUDE{"viewleftbar"}%%TMPL:END%
Using style sheets:
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 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.
Topic PatternSkinCustomization . { View | History | Side-by-side | 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. |