| -<h1>Page Layout</h1>
|
| -<div style="padding:0.5px;border:0.px;margin:0px;text-align:center;">
|
| - <div style="padding:1em;margin:0px;background-color:lightblue;clear:both;border:1px solid #000;"><p>#tikibody</p>
|
| - <div style="padding:0.5px;background-color:peachpuff;color:black;border:1px solid black;"><p>#tikitop</p></div>
|
| - <div style="padding:0.25em 0.5em;margin:0px;width:90px;float:left;background-color:green;color:white;height:100%;border:0px;clear:none;"><p>#tikileft</p></div>
|
| - <div style="padding:0.25em 0.5em;margin:0px;width:90px;float:right;background-color:purple ;color:white;height:100%;border-right:0.5px solid black;clear:none;"><p>#tikiright</p></div>
|
| - <div style="margin-right:90px;margin-left:90px;padding:.25em 2.0em;background-color:blue;color:white;height:100%;border:0px;clear:none;">
|
| - <p>#tikimain</p>
|
| +{include page_id=362} |
|
|
| - <div style="background-color:orange;padding:0.25em 0.5em;">
|
| - <p>header</p>
|
| - <p>content</p>
|
| - <p>footer</p>
|
| - </div>
|
| - </div>
|
| +!!For a hypothetical bitweaverPackage foo, here is how it should present its data: |
|
|
| - <div style="padding:0.5px;background-color:peachpuff;clear:both;color:black;border:1px solid black;"><p>#tikibottom</p></div>
|
| +{code source=HTML} |
| +<div class="display foo"> |
| + <div class="header"> |
| + <h1>pile of foo</h1> |
| + <div class="date">created by fooster on april 1, 2004</div> |
| + </div> |
| + |
| + <div class="body"> |
| + <div class="content">this is more foo</div> |
| + <div class="pagination">page 1 of 4</div> |
| + </div> |
| </div>
|
| +{code} |
|
|
| +depending on the type of page, in the outermost div we use the following classifcations: |
| +* display |
| +* edit |
| +* listing |
| +* admin |
| +when we use what class should be self explanatory. |
|
|
| -<p>this will be the standard for the templates for content pages. within the admin areas, foo will be augmented by a class called admin.</p>
|
| +in the CSS, the selection of any h1 that is part of the very top of the page would be: |
| +.header h1 {} |
|
|
| -<div class="tikibar">For a hypothetical TikiPackage foo, here is how it should present its data:</div>
|
| +for the header h1 title of the package __foo__, you would use |
| +.foo .header h1 {} |
|
|
| -<div class="foo">
|
| -or
|
| -<div class="admin foo">
|
| +as an example you could define the following: |
| +.header h1 {background: silver;} |
| +.foo .header h1 {color: red;} |
|
|
| -<div class="header">
|
| -<h1 class="title">pile of foo</h1>
|
| -<div class="date">created by fooster on april 1, 2004</div>
|
| -<div class="description">desciption of foo</div>
|
| -</div>
|
| +on all pages, the h1 title will appear with a silver background |
| +on the foo package, the top header will appear with a silver background __and__ red text. |
|
|
| -<div class="body">
|
| -<div class="introduction">this is foo</div>
|
| -<div class="content">this is more foo</div>
|
| -</div>
|
| -
|
| -<div class="footer">read comments...</div>
|
| -
|
| -<div class="navbar">navigation bar</div>
|
| -<div class="pagination">page 1/1</div>
|
| -
|
| -</div> |
| +for a more detailed list of css instructions and notes, please visit ThemeTutorial |