none
authorArthurClemens <ArthurClemens>
Sat, 28 Aug 2004 23:11:49 +0000 (23:11 +0000)
committerArthurClemens <ArthurClemens>
Sat, 28 Aug 2004 23:11:49 +0000 (23:11 +0000)
TWiki/PatternSkin.mdwn
TWiki/PatternSkinCustomization.mdwn

index bb9905e..38de0ba 100644 (file)
@@ -87,17 +87,16 @@ You can eiter:
 - Change the `layout.css` and `style.css` attachment files for this topic (upload updated versions)
 - In [[TWikiPreferences]], point the variables `TWIKILAYOUTURL` and `TWIKISTYLEURL` to other attachments, perhaps in another topic (your new skin topic?)
 
-If you want to change colors and white space of screen elements, modify `style.css`. %BR% If you want to change the positioning of screen elements, modify `layout.css`.
-
 See for practical details: [[PatternSkinCustomization]] %BR% The CSS classes that PatternSkin uses are documented in [[PatternSkinCss]].
 
 ## <a name="Customization"></a> Customization
 
-See: [[PatternSkinCustomization]]
+See: [[PatternSkinCustomization]], [[PatternSkinPalette]]
 
 ## <a name="Further reading"></a> Further reading
 
 - [[PatternSkinCustomization]] - Practical information on how to change the looks of PatternSkin
+- [[PatternSkinPalette]] - How to change the colors only
 - [[PatternSkinCss]] - A reference to used CSS classes
 - TWiki:Plugins/PatternSkinDev - Development page, bug reports, solutions from users
 
@@ -122,13 +121,17 @@ See: [[PatternSkinCustomization]]
   </tr>
   <tr>
     <td align="right"> Skin Version: </td>
-    <td> 24 Aug 2004 (v1.0.8) </td>
+    <td> 28 Aug 2004 (v1.0.9) </td>
   </tr>
   <tr>
     <td align="right"> History: </td>
     <td>  </td>
   </tr>
   <tr>
+    <td align="right"> 28 Aug 2004: </td>
+    <td> v.1.0.9 - CAIRO RELEASE VERSION - Removed twikiTopic div from attach template </td>
+  </tr>
+  <tr>
     <td align="right"> 24 Aug 2004: </td>
     <td> v.1.0.8 - Fix for disabled TablePlugin; added plain.pattern.tmpl </td>
   </tr>
@@ -207,4 +210,4 @@ Other skins:
 
 Leave remarks, suggestions and other feedback in TWiki:Plugins.PatternSkinDev.
 
--- TWiki:Main/ArthurClemens - 24 Aug 2004
+-- TWiki:Main/ArthurClemens - 28 Aug 2004
index 114d073..7834a76 100644 (file)
@@ -3,9 +3,13 @@
 This page describes ways to change the layout, fonts and colors of [[PatternSkin]].
 
 <div><span>Page contents:</span><ul>
+    <li><a href="#Your own TWiki look"> Your own TWiki look</a></li>
     <li><a href="#Screen parts"> Screen parts</a><ul>
         <li><a href="#Top bar"> Top bar</a></li>
-        <li><a href="#Left bar"> Left bar</a></li>
+        <li><a href="#Left bar"> Left bar</a><ul>
+            <li><a href="#Putting the left bar at the righ"> Putting the left bar at the right</a></li>
+          </ul>
+        </li>
         <li><a href="#Bottom bar"> Bottom bar</a></li>
       </ul>
     </li>
@@ -15,9 +19,33 @@ This page describes ways to change the layout, fonts and colors of [[PatternSkin
         <li><a href="#Font size"> Font size</a></li>
       </ul>
     </li>
+    <li><a href="#Colors"> Colors</a></li>
+    <li><a href="#Tables"> Tables</a><ul>
+        <li><a href="#Tables in topic text"> Tables in topic text</a><ul>
+            <li><a href="#Topic text table example"> Topic text table example</a></li>
+          </ul>
+        </li>
+        <li><a href="#Attachment table, Form table"> Attachment table, Form table</a></li>
+        <li><a href="#Other templates"> Other templates</a></li>
+      </ul>
+    </li>
   </ul>
 </div>
 
+## <a name="Your own TWiki look"></a> Your own TWiki look
+
+You can easily create your own TWiki look by attaching modified css files to your home page:
+
+- If you want to change the layout of the page, download layout.css from [[PatternSkin]]
+- If you want to change the spacing or colors, download style.css from [[PatternSkin]]
+- modify the CSS in either style sheet, using tips from this page
+- [attach](http://www.dementia.org/twiki//attach/Main/admin) your modified layout.css and/or style.css to your home page
+- as shown below, add the `USERLAYOUTURL` and `USERSTYLEURL` settings to [[your home page|Main/Admin]]
+
+       * Personal TWiki.PatternSkin CSS settings
+          * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css
+          * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css
+
 ## <a name="Screen parts"></a> Screen parts
 
 The PatternSkin view template uses four screen parts:
@@ -53,6 +81,39 @@ The left bar may contain a Go box instead of the top bar. Use:
 
 The personal left bar block is formatted like the rest of the left bar.
 
+#### <a name="Putting the left bar at the righ"></a> Putting the left bar at the right
+
+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:
+
+> 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;
+>     }
+
+This CSS is also attached to this topic, [LowRes.css](http://www.dementia.org/twiki//view/LowRes.css). To use this style, add this to your home page:
+
+       * Personal TWiki.PatternSkin CSS settings
+          * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css
+
 ### <a name="Bottom bar"></a> Bottom bar
 
 The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.
@@ -111,4 +172,71 @@ Scalable text is a big accessibility asset. If you notwithstanding want to have
        font-size:11px;
     }
 
--- TWiki:Main.ArthurClemens - 15 Aug 2004
+## <a name="Colors"></a> Colors
+
+<span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span>
+
+To create a customised palette of colors, see [[PatternSkinPalette]].
+
+## <a name="Tables"></a> Tables
+
+### <a name="Tables in topic text"></a> Tables in topic text
+
+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.
+
+#### <a name="Topic text table example"></a> 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 `.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;
+    }
+
+### <a name="Attachment table, Form table"></a> Attachment table, Form table
+
+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 {`:
+
+       white-space:nowrap;
+
+### <a name="Other templates"></a> Other templates
+
+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.
+
+-- TWiki:Main.ArthurClemens - 28 Aug 2004