+{include page_id=362} |
|
+!!For a hypothetical bitweaverPackage foo, here is how it should present its data: |
|
-Here is the page layout for a generic TikiPro page:
|
+{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 style="padding:0.5px;border:0.px;margin:0px;">
|
-
|
-<div style="padding:1em; margin:0px; background-color:lightblue; text-align:center;clear:both; border:1px solid #000;">~np~#tikibody~/np~
|
-
|
-<div style="padding:0.5px;background-color:peachpuff; color:black;text-align:center;border:1px solid black;">~np~#tikitop~/np~</div>
|
-
|
-<div style="padding:0.25em 0.5em;margin:0px;width:90px; float:left; background-color:green; color:white; text-align:center;height:100%; border:0px; clear:none;">~np~#tikileft~/np~
|
-
|
-</div><div style="padding:0.25em 0.5em;margin:0px; width:90px; float:right; background-color:purple ;color:white;text-align:center;height:100%; border-right:0.5px solid black;clear:none;">~np~#tikiright~/np~
|
-
|
-</div><div style="margin-right:90px;margin-left:90px;padding:.25em 2.0em;background-color:blue;color:white;height:100%;border:0px;clear:none;">::#tikimain::
|
-__featuretitle__
|
-
|
-<div style="background-color:orange;text-align:left;padding:0.25em 0.5em;">::featurebody::
|
-__featureheader__
|
-featurecontent
|
-__featurefooter__
|
-</div>
|
+ <div class="body"> |
+ <div class="content">this is more foo</div> |
+ <div class="pagination">page 1 of 4</div> |
+ </div> |
</div>
|
+{code} |
|
-<div style="padding:0.5px;background-color:peachpuff; clear:both;color:black;text-align:center;border:1px solid black;">~np~#tikibottom~/np~</div>
|
-</div>
|
+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. |
|
-</div>
|
+in the CSS, the selection of any h1 that is part of the very top of the page would be: |
+.header h1 {} |
|
+for the header h1 title of the package __foo__, you would use |
+.foo .header h1 {} |
|
-<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>
|
+as an example you could define the following: |
+.header h1 {background: silver;} |
+.foo .header h1 {color: red;} |
|
-<div class="tikibar">For a hypothetical TikiPackage foo, here is how it should present its data:</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. |
|
-{code( syntax=html )}
|
-<div class="foo">
|
-or
|
-<div class="admin foo">
|
-
|
-<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>
|
-
|
-<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>
|
-{code} |
+for a more detailed list of css instructions and notes, please visit ThemeTutorial |