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 USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles. | |||||||
> > | 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 questionsI 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 WEBHEADERART per web, by defining the variable in the Web's WebPreferences. | ||||||||
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 = customerBy default this topic is editable only by TWikiAdminGroup members. | |||||||
Deleted: | ||||||||
< < | See PatternSkinCssCookbookNoLeftBar | |||||||
Line: 1 to 1 | ||||||||
---|---|---|---|---|---|---|---|---|
Deleted: | ||||||||
< < | Customization of PatternSkin | |||||||
Changed: | ||||||||
< < | This page describes ways to change the layout, fonts and colors of PatternSkin. | |||||||
> > | PatternSkin Customization | |||||||
Changed: | ||||||||
< < | ||||||||
> > | Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook. | |||||||
Changed: | ||||||||
< < | Your own TWiki look | |||||||
> > | ||||||||
Changed: | ||||||||
< < | You can easily create your own TWiki look by attaching modified css files to your home page:
* Personal TWiki.PatternSkin CSS settings * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css | |||||||
> > | Logo questions | |||||||
Changed: | ||||||||
< < | Screen parts | |||||||
> > | How can I change the web logo? | |||||||
Changed: | ||||||||
< < | The PatternSkin view template uses four screen parts:
| |||||||
> > | 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. | |||||||
Changed: | ||||||||
< < | These parts are dynamically included topics:
| |||||||
> > | 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 | |||||||
Changed: | ||||||||
< < | Top bar | |||||||
> > | There are several ways to change the logo in a web:
* Set WEBLOGONAME = your-logo-name.gif-or-png | |||||||
Changed: | ||||||||
< < | The top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo. | |||||||
> > | How do I set a site-wide logo? | |||||||
Changed: | ||||||||
< < | Left bar | |||||||
> > | 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% | |||||||
Deleted: | ||||||||
< < | The menu items are css-formatted bullet lists. So in WebLeftBar you write:
* *Group* * [[SomeTopic][Link 1]] * [[AnotherTopic][Link 2]] * [[ThirdTopic][Link 3]] | |||||||
Changed: | ||||||||
< < | The left bar may contain a Go box instead of the top bar. Use: | |||||||
> > | My logo does not fit the top barThe 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: | |||||||
Changed: | ||||||||
< < | | |||||||
> > | /* height of the top bar */ #patternLeftBar { top:64px; /*C3*/ } #patternTopBar, #patternTopBar table.patternTopBarContents { height:64px; /*C3*/ } | |||||||
Changed: | ||||||||
< < | The personal left bar block is formatted like the rest of the left bar. | |||||||
> > | (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 USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles. | |||||||
Changed: | ||||||||
< < | Putting the left bar at the right | |||||||
> > | I want to change the white space above and below the logo | |||||||
Changed: | ||||||||
< < | 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. | |||||||
Changed: | ||||||||
< < | Add this to layout.css:<-- /* --> | |||||||
> > | Change: | |||||||
Changed: | ||||||||
< < | .twikiMain { margin-left:0px; } .twikiLeftBar { margin-left:100%; } .twikiBottomBar { margin-left:1em; margin-right:0; padding:0; | |||||||
> > | table.patternTopBarContents td { height:100%; width:100%; vertical-align:middle; | |||||||
} | ||||||||
Changed: | ||||||||
< < | <-- */ -->Add this to style.css: <-- /* --> | |||||||
> > | to: | |||||||
Changed: | ||||||||
< < | .twikiMain { padding-left:1em; padding-right:1em; } .twikiBottomBarContents { padding-left:0em; | |||||||
> > | table.patternTopBarContents td { height:100%; width:100%; vertical-align:top; | |||||||
} | ||||||||
Deleted: | ||||||||
< < | <-- */ --> | |||||||
Changed: | ||||||||
< < | This CSS is also attached to this topic, LowRes.css. To use this style, add this to your home page: | |||||||
> > | You can also define an offset like this: | |||||||
Changed: | ||||||||
< < |
| |||||||
> > | table.patternTopBarContents td { height:100%; width:100%; vertical-align:top; padding-top:12px; } | |||||||
Changed: | ||||||||
< < | Bottom barThe bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.Customizing the logoThe 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 instyle.css (.twikiTopBarContents) or change the top bar height in layout.css (look for the comment setting the height of the top bar).
You can also choose to set a background image for the top bar. In style.css , add this to .twikiTopBar:
background-position:top left; background-attachment:fixed; background-repeat:no-repeat; background-image:url(http://absolute_path_to_your_image);and set the correct image file path. | |||||||
> > | Top bar questions | |||||||
Changed: | ||||||||
< < | Fonts | |||||||
> > | I want to set or change the top background image | |||||||
Changed: | ||||||||
< < | Font style | |||||||
> > | 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. | |||||||
Changed: | ||||||||
< < | Font styles are defined in style.css in these places:
<-- /* --> 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 your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):
* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif * Set WEBHEADERBGCOLOR = somehexcolor | |||||||
Changed: | ||||||||
< < | Font size | |||||||
> > | You can also set WEBHEADERART per web, by defining the variable in the Web's WebPreferences. | |||||||
Changed: | ||||||||
< < | 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 to have the web color in the top bar | |||||||
Changed: | ||||||||
< < | 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:
<-- /* --> html body { ... (keep) } html>body { ... (keep) } html body { font-size:11px; } <-- */ --> | |||||||
> > | Redefine WEBHEADERBGCOLOR in Main.TWikiPreferences (to keep TWikiPreferences intact):
* Set WEBHEADERBGCOLOR = %WEBBGCOLOR% | |||||||
Changed: | ||||||||
< < | Colors | |||||||
> > | I want other items in 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. | |||||||
Changed: | ||||||||
< < | To create a customised palette of colors, see PatternSkinPalette?. | |||||||
> > |
You probably don't need the following information unless you are encountering a strange problem. | |||||||
Changed: | ||||||||
< < | Tables | |||||||
> > | The WebTopBar contents is placed inside a table that is written by twiki.pattern.tmpl (the gray text is from the template): | |||||||
Changed: | ||||||||
< < | Tables in topic text | |||||||
> > |
<div id="patternTopBar">
| |||||||
Deleted: | ||||||||
< < | If you have TablePlugin installed, tables in topics take on the properties from TABLEATTRIBUTES . Without TablePlugin (if not installed, or disabled in TWikiPreferences under DISABLEDPLUGINS ), the tables have a default appearance that is hardcoded in Render.pm. Styles of topic text tables are not set in a style sheet. If you want to have control over the design of tables, for instance if you work with a style guide, you should add table styles under .twikiTopic . See for an example below. | |||||||
Changed: | ||||||||
< < | Topic text table example | |||||||
> > | I want to have the language selection in the top bar | |||||||
Changed: | ||||||||
< < | 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 .twikiTopic code in style.css:
<-- /* --> | |||||||
> > | 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: | |||||||
Changed: | ||||||||
< < | .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; } | |||||||
> > | ||||||||
Deleted: | ||||||||
< < | <-- */ --> | |||||||
Changed: | ||||||||
< < | Attachment table, Form table | |||||||
> > | This will render: | |||||||
Changed: | ||||||||
< < | The appearance of the form table and the attachment table are set in style.css under .twikiForm and .twikiAttachments . Text in these tables is set to wrap, so often the dates are wrapped to two lines. If you prefer to have text on one line and are not disturbed by an extra wide attachment table (or when you screen resolution is big enough), add this code to .twikiAttachments td, .twikiForm td { : | |||||||
> > | ||||||||
Changed: | ||||||||
< < | <-- /* --> white-space:nowrap; <-- */ --> | |||||||
> > | I want to hide the top barSee PatternSkinCssCookbookNoTopBar | |||||||
Changed: | ||||||||
< < | Other templates | |||||||
> > | Left bar questions | |||||||
Changed: | ||||||||
< < | Other templates than view use the style .twikiVersatileTable for, as the name says, tables with versatile functions. Versatile tables appear a little diffent in each template page (differences are created using multiple classes). Versatile tables are mostly used to format forms to highlight important parts and to dim less important parts. See style.css for specific settings for each template. | |||||||
> > | I want to hide the left bar | |||||||
Changed: | ||||||||
< < | -- TWiki:Main.ArthurClemens - 28 Aug 2004 | |||||||
> > | See PatternSkinCssCookbookNoLeftBar | |||||||
Deleted: | ||||||||
< < |
|
Line: 1 to 1 | ||||||||
---|---|---|---|---|---|---|---|---|
Customization of PatternSkinThis page describes ways to change the layout, fonts and colors of PatternSkin. | ||||||||
Added: | ||||||||
> > | Your own TWiki lookYou can easily create your own TWiki look by attaching modified css files to your home page:
* Personal TWiki.PatternSkin CSS settings * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css | |||||||
Screen partsThe PatternSkin view template uses four screen parts: | ||||||||
Line: 40 to 54 | ||||||||
The personal left bar block is formatted like the rest of the left bar. | ||||||||
Added: | ||||||||
> > | Putting the left bar at the rightIf 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:Add this to layout.css:This CSS is also attached to this topic, LowRes.css. To use this style, add this to your home page:<-- /* -->.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; }<-- */ --> * Personal TWiki.PatternSkin CSS settings * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css | |||||||
Bottom barThe bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list. | ||||||||
Line: 108 to 163 | ||||||||
<-- */ --> | ||||||||
Changed: | ||||||||
< < | -- TWiki:Main.ArthurClemens - 15 Aug 2004 | |||||||
> > | ColorsTo create a customised palette of colors, see PatternSkinPalette?.TablesTables in topic textIf you have TablePlugin installed, tables in topics take on the properties fromTABLEATTRIBUTES . Without TablePlugin (if not installed, or disabled in TWikiPreferences under DISABLEDPLUGINS ), the tables have a default appearance that is hardcoded in Render.pm. Styles of topic text tables are not set in a style sheet. If you want to have control over the design of tables, for instance if you work with a style guide, you should add table styles under .twikiTopic . See for an example below.
Topic text table exampleThis 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.twikiTopic code in style.css:
<-- /* --> .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; } <-- */ --> Attachment table, Form tableThe appearance of the form table and the attachment table are set in style.css under.twikiForm and .twikiAttachments . Text in these tables is set to wrap, so often the dates are wrapped to two lines. If you prefer to have text on one line and are not disturbed by an extra wide attachment table (or when you screen resolution is big enough), add this code to .twikiAttachments td, .twikiForm td { :
<-- /* --> white-space:nowrap; <-- */ --> Other templatesOther templates thanview use the style .twikiVersatileTable for, as the name says, tables with versatile functions. Versatile tables appear a little diffent in each template page (differences are created using multiple classes). Versatile tables are mostly used to format forms to highlight important parts and to dim less important parts. See style.css for specific settings for each template.
-- TWiki:Main.ArthurClemens - 28 Aug 2004 | |||||||
Added: | ||||||||
> > |
|
Line: 1 to 1 | ||||||||
---|---|---|---|---|---|---|---|---|
Customization of PatternSkinThis page describes ways to change the layout, fonts and colors of PatternSkin. | ||||||||
Line: 108 to 108 | ||||||||
<-- */ --> | ||||||||
Changed: | ||||||||
< < | -- ArthurClemens? - 15 Aug 2004 | |||||||
> > | -- TWiki:Main.ArthurClemens - 15 Aug 2004 | |||||||
Line: 1 to 1 | ||||||||
---|---|---|---|---|---|---|---|---|
Added: | ||||||||
> > | Customization of PatternSkinThis page describes ways to change the layout, fonts and colors of PatternSkin.Page contents:
Screen partsThe PatternSkin view template uses four screen parts:
Top barThe top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo.Left barThe menu items are css-formatted bullet lists. So in WebLeftBar you write:* *Group* * [[SomeTopic][Link 1]] * [[AnotherTopic][Link 2]] * [[ThirdTopic][Link 3]]The left bar may contain a Go box instead of the top bar. Use: * <input type="text" name="topic" size="16" />The personal left bar block is formatted like the rest of the left bar. Bottom barThe bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.Customizing the logoThe 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 instyle.css (.twikiTopBarContents) or change the top bar height in layout.css (look for the comment setting the height of the top bar).
You can also choose to set a background image for the top bar. In style.css , add this to .twikiTopBar:
background-position:top left; background-attachment:fixed; background-repeat:no-repeat; background-image:url(http://absolute_path_to_your_image);and set the correct image file path. FontsFont styleFont styles are defined instyle.css in these places:
<-- /* --> 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; } <-- */ --> Font sizeFont 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). 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:<-- /* --> html body { ... (keep) } html>body { ... (keep) } html body { font-size:11px; } <-- */ -->-- ArthurClemens? - 15 Aug 2004 |