Project Live*: Wiki: UsingLiveStarStyleSheet

Issue Tracking
» Issue Tracking
Mailing List
Downloads
» Downloads
Message Forums
» General Discussion
» User Discussion
Source Code Repository
» Mercurial Source Code Repos...
Wiki
» Wiki

Jump to Page:

» Project Live* Home Page

Project Live* was started in December 2008, is owned by Eric Lalonde, and has 13 members.

» Join This Project

Last updated January 22, 2009 08:38, by Eric Lalonde

<html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Building a twiki with the Live* Style Sheet</title> <style type="text/css">  </style> </head> <body> <a class="linkindex" href="http://sunlabs.sfbay.sun.com/twiki/bin/view/Projects/Live*">Back to the Live* twiki</a> HTML editing with the Live* Style Sheet Web pages built using the Live* style sheet will have html source that can be pasted anywhere with almost no modifications necessary to the code. This makes it easy to evangelize the project, as web pages (such as guides or walkthroughs) can be easily pasted into external blogs, wikis, etc. for the world to see. We'll explore how to format your html so that the code is portable. Keep in mind that this guide itself is rendered using the Live* style sheet, so if you're familiar with html and css, you may refer to the html of this guide for an example and go from there. Click Edit on this twiki to do so. 1. Picking an HTML Editor It doesn't matter what HTML editor you use, but some members of the Live* project are using Coda for html editing. It has an easy preview option so you can see how things render as they appear. Coda runs only on the OS X platform. It can be found at <a href="http://www.panic.com/coda">http://www.panic.com/coda</a>. 2. Required HTML Tags In order to render a pure-HTML document inside a twiki, your HTML document must follow the following format: <html><head>Header here</head><body>Body here</body></html> All of the aforementioned section tags are necessary or the twiki will not recognize the document as being HTML, and will attempt to render it using the standard twiki rules. 3. Import the Live* style sheet The next thing to do is import the Live* style sheet. This allows your text to be represented cleanly, and with a Sun-centric color palette. To do this, insert the following line in the <head></head> section of your document: <style type="text/css">  </style> (Once the Live* website is set up correctly, we should move the style sheet so it is accessible outside SWAN) 4. Link to the Live* twiki index Any twiki created for the Live* project must link back to the Live* index. This is achieved by including the following html as the first line of your body: <a class="linkindex" href="http://sunlabs.sfbay.sun.com/twiki/bin/view/Projects/Live*"> Back to the Live* twiki</a> 5. Link From the Live* twiki index Your twiki should be listed as a link in the Live* twiki index (<a href="http://sunlabs.sfbay.sun.com/twiki/bin/view/Projects/Live*">http://sunlabs.sfbay.sun.com/twiki/bin/view/Projects/Live*</a>) , as this is the central repository for Live* twikis. 6. Using the style sheet To use the style sheet, simply tag your text with the paragraph style you want to use. This is best illustrated using examples. Here is how you would tag a document title: This is a test title This would render as: This is a test title Another common paragraph style is for normal paragraph text. The sentence you are reading right now is rendered using this style. To use this style, simply tag your text with: This is paragraph text. There are additional classes for section headers, section numbers, comments, etc. Load the Live* style sheet in a browser window to view all paragraph classes. 7. The infobox paragraph style The infobox paragraph style is very useful for a verbatim illustration of actions that the user should perform. The below code snippet is used to show the user how to perform a directory listing, and what result they should expect. $ ls -l /usr/java total 3 default -> /usr/java/latest jdk1.6.0_06 latest -> /usr/java/jdk1.6.0_06 The above code would render as below: $ ls -l /usr/java total 3 default -> /usr/java/latest jdk1.6.0_06 latest -> /usr/java/jdk1.6.0_06 The above example uses the infobox paragraph style, along with two span styles. The span tag is useful if you want to apply a style to some subset of characters in a paragraph, not the whole thing. Here is a more in-depth explanation of the above snippet: - The "infobox" style applies to the entire paragraph. If no spanning styles were used inside the infobox, all text would render via the "infobox" style. Since ls -l /usr/java is not tagged, it is rendered in the "infobox" style. - The $ character is tagged with a "prompt" spanning style. This is so that it looks like a true shell prompt. - The output of the ls command is tagged with an "output" span style. As a result, it looks like text on a computer console. - Note that whitespace in an infobox is set to WYSIWYG. That is, three spaces in a row will show up as three spaces in the infobox. This is especially useful when putting code snippets in an infobox. These are just a few of the styles that are defined in the Live* style sheet. Load the style sheet into a web browser to see all styles. 8. Adding or Changing the Live* Style Sheet The Live* style sheet is constructed so that html documents can be created using a clear style that is compatible with the Sun color palette. Not all of the styles in the sheet will work for every situation. You may find it necessary to add styles to the sheet. This should be done with caution, as style sheets can become unwieldly to the point where it is not clear what style to use in a given context. You should not remove styles from the style sheet once people start rolling out blogs and wikis in the Live* style. If you remove a style from the sheet, someone's blog/wiki somewhere is going to look really ugly, and that hurts Live* evangelism efforts. </body> </html> <nowiki>