r4 - 01 Feb 2006 - 12:01 - Main.TWikiContributor | r3 - 28 Aug 2004 - 22:59 - Main.ArthurClemens | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
PatternSkin Customization |
Customization of PatternSkin |
||||||||||||||||
Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook. |
This page describes ways to change the layout, fonts and colors of PatternSkin. |
||||||||||||||||
Logo questions |
Your own TWiki look |
||||||||||||||||
How can I change the web logo? |
You can easily create your own TWiki look by attaching modified css files to your home page: |
||||||||||||||||
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): |
* Personal TWiki.PatternSkin CSS settings * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css |
||||||||||||||||
* Set WEBLOGONAME = logo.gif * Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME% * Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC% * Set WEBLOGOALT = Home |
Screen parts |
||||||||||||||||
There are several ways to change the logo in a web: |
The PatternSkin view template uses four screen parts: |
||||||||||||||||
|
|
||||||||||||||||
or: |
These parts are dynamically included topics: |
||||||||||||||||
|
|
||||||||||||||||
* Set WEBLOGONAME = your-logo-name.gif-or-png |
Top bar |
||||||||||||||||
How do I set a site-wide logo? |
The top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo. |
||||||||||||||||
There is a bunch of site-wide logo variables in Main.TWikiPreferences: |
Left bar |
||||||||||||||||
* Set WEBLOGOIMG = %WIKILOGOIMG% |
The menu items are css-formatted bullet lists. So in WebLeftBar you write: |
||||||||||||||||
My logo does not fit the top bar |
* *Group* * [[SomeTopic][Link 1]] * [[AnotherTopic][Link 2]] * [[ThirdTopic][Link 3]] |
||||||||||||||||
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 left bar may contain a Go box instead of the top bar. Use: |
||||||||||||||||
/* height of the top bar */ #patternLeftBar { top:64px; /*C3*/ } #patternTopBar, #patternTopBar table.patternTopBarContents { height:64px; /*C3*/ } |
* |
||||||||||||||||
(C3 is used as reference to all occurrences with the same value) |
The personal left bar block is formatted like the rest of the left bar. |
||||||||||||||||
You can change these numbers in layout.css directly, or create a new stylesheet, attach it to a topic and point |
Putting the left bar at the right |
||||||||||||||||
I want to change the white space above and below the logo |
If you have a low screen resolution of say, 640 by 480 pixels, it can be useful to put the left bar "out of the way", at the right side of the page - at the cost of a horizontal scroll bar to access the left (now right) bar. This CSS does this: |
||||||||||||||||
The logo is centered vertically be default. If you want to align it to the top, change the style in style.css. |
Add this to layout.css:.twikiMain { margin-left:0px; } .twikiLeftBar { margin-left:100%; } .twikiBottomBar { margin-left:1em; margin-right:0; padding:0; }Add this to style.css:.twikiMain { padding-left:1em; padding-right:1em; } .twikiBottomBarContents { padding-left:0em; } |
||||||||||||||||
Change: |
This CSS is also attached to this topic, LowRes.css. To use this style, add this to your home page: |
||||||||||||||||
table.patternTopBarContents td { height:100%; width:100%; vertical-align:middle; } |
* Personal TWiki.PatternSkin CSS settings * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css |
||||||||||||||||
to: |
Bottom bar |
||||||||||||||||
table.patternTopBarContents td { height:100%; width:100%; vertical-align:top; } |
The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list. |
||||||||||||||||
You can also define an offset like this: |
Customizing the logo |
||||||||||||||||
table.patternTopBarContents td { height:100%; width:100%; vertical-align:top; padding-top:12px; } |
The top bar is 60 pixels high, and has a padding of 5 pixels on top, bottom and left, so the logo should be 50 pixels high. If your logo image has a different size, you can either alter the padding in |
||||||||||||||||
Top bar questions |
You can also choose to set a background image for the top bar. In |
||||||||||||||||
I want to set or change the top background image |
background-position:top left; background-attachment:fixed; background-repeat:no-repeat; background-image:url(http://absolute_path_to_your_image); |
||||||||||||||||
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 |
and set the correct image file path. |
||||||||||||||||
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact): |
Fonts |
||||||||||||||||
* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif * Set WEBHEADERBGCOLOR = somehexcolor |
Font style |
||||||||||||||||
You can also set |
Font styles are defined in |
||||||||||||||||
I want to have the web color in the top bar |
html body { font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif; } textarea { font-family:monospace; } input, select { font-family:verdana,arial,sans-serif; } .twikiSeparator { font-family:Arial,sans-serif; } .twikiEditPage .twikiSig input { font-family:monospace; } |
||||||||||||||||
Redefine |
Font size |
||||||||||||||||
* Set WEBHEADERBGCOLOR = %WEBBGCOLOR% |
Font sizes in PatternSkin are scalable. This means that even on Windows Explorer, the text in the browser can scale with the user settings (in contrast to many sites where texts have a fixes pixel size, these cannot be changed by the user). |
||||||||||||||||
I want other items in the top bar |
Scalable text is a big accessibility asset. If you notwithstanding want to have a fixed font, or if you want to set the default size smaller or bigger, the easiest way is to make a new entry for body, below the 2 other entries: |
||||||||||||||||
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. |
html body { ... (keep) } html>body { ... (keep) } html body { font-size:11px; } |
||||||||||||||||
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
|
Colors |
||||||||||||||||
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: |
To create a customised palette of colors, see PatternSkinPalette?. |
||||||||||||||||
<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> |
Tables |
||||||||||||||||
This will render: |
Tables in topic text |
||||||||||||||||
If you have TablePlugin installed, tables in topics take on the properties from |
|||||||||||||||||
I want to hide the top bar |
Topic text table example |
||||||||||||||||
This is an example css to give tables in topic text a similar appearance. This will override settings in TablePlugin . This code should be added below the other |
|||||||||||||||||
Left bar questions |
.twikiTopic table { border-collapse:collapse; padding:0px; border-spacing:0px; empty-cells:show; border:0px; } .twikiTopic table th { background-color:#ccc; padding:0.5em 1em; } .twikiTopic table td { border:1px solid #eee; } /* override hardcoded font color */ .twikiTopic table font { color:#1e5bbd; } .twikiTopic table th a:link, .twikiTopic table th a:visited { color:#1e5bbd; text-decoration:none; } /* don't show hover background color because we have a table header background */ .twikiTopic table th a:hover { background-color:transparent; text-decoration:underline; border-width:1px; } /* no underline if a sort indicator (line) is displayed */ .twikiTopic table th.twikiSortedDescendingCol a:hover, .twikiTopic table th.twikiSortedAscendingCol a:hover { text-decoration:none; } /* hide sort icons */ .twikiTopic table th img, .twikiTopic table th a:link img, .twikiTopic table th a:visited img { display:none; } |
||||||||||||||||
I want to hide the left bar |
Attachment table, Form table |
||||||||||||||||
The appearance of the form table and the attachment table are set in style.css under |
|||||||||||||||||
white-space:nowrap; |
|||||||||||||||||
Other templates |
|||||||||||||||||
Other templates than |
|||||||||||||||||
-- TWiki:Main.ArthurClemens - 28 Aug 2004 |
|||||||||||||||||
|
|||||||||||||||||
r4 - 01 Feb 2006 - 12:01 - TWikiContributor | r3 - 28 Aug 2004 - 22:59 - ArthurClemens? | ||||||||||||||||
Topic PatternSkinCustomization . { View | History | Interweave | r6 < r5 < r4 < r3 < r2 | More } |
Revision r4 - 01 Feb 2006 - 12:01 - TWikiContributor Revision r3 - 28 Aug 2004 - 22:59 - ArthurClemens? |
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. |