Comparing revisions for WikkaSkinOptimization
- [8166] 2005-05-15 00:25:19 by DarTar (unregistered user) [Announcing new template test server]
- [18645] 2008-01-28 00:12:18 by DarTar (unregistered user) [Modified links pointing to docs server]
Additions:
<<**Related pages**:
<<::c::
For several reasons the HTML output produced by Wikka does not allow optimal control on the layout.
Before installing skins, I'd like to discuss some ideas for a better template. Proposed modification are highlighted, feel free to add your comments and/or other proposals.
##<html>
~''<div id="page">'' (new wrapper, was called //container// in previous draft)
~~<div ''id''="**header**"> (//id// instead of //class//)
~~~<h2> ""PageTitle"" </h2>
~~~''<ul id="main_menu">'' ([[WikkaMenus *]])
~~~''<li>menu item</li>''
~~~''</ul>''
~~</div>
~~<div ''id''="''**content**''"> (currently called //page//, //id// instead of //class//)
~~The quick brown fox jumps over the lazy dog
~~The quick brown fox jumps over the lazy dog
~~The quick brown fox jumps over the lazy dog (main content)
~~The quick brown fox jumps over the lazy dog
~~The quick brown fox jumps over the lazy dog
~~</div>
~~''<div id="**comments**">'' (new wrapper)
~~</div>
~~~<div ''id''="commentsheader"> (//id// instead of //class//)
~~~</div>
~~~<div class="comment">
~~~</div>
~~~<div class="comment">
~~~</div>
~~~...
~~~</div>
~~~<div ''id''="commentform"> (//id// instead of //class//)
~~~</div>
~~''</div>''
~~<div ''id''="**footer**"> (//id// instead of //class//)
~~~''<ul id="footer_menu">'' ([[WikkaMenus *]])
~~~''<li>menu item</li>''
~~~''</ul>''
~~~<div class="smallprint">
~~~</div>
~~~''<div id="microtime">'' (new class for formatting (or masking) the microtime information)
~~~''</div>''
~~</div>
~''</div>''
</html>##
Your ideas?
-- DarTar
==A different "view"==
Taking your code, and annotating it a bit, to try and explain to myself how it's structured and what might be in which (partial) "template". (Doing that, I also found an extra </div> which I've removed.)
%%(html4strict)
<!-- BEGIN doc open -->
<!-- END doc open -->
<!-- BEGIN head (only head section) -->
<!-- END head -->
<!-- BEGIN body (whole body section) -->
<!-- BEGIN page header -->
<h2>PageTitle</h2>
<ul id="main_menu">' <!--[[WikkaMenus *]]-->
<!-- END page header -->
<!-- BEGIN page content -->
<div id="commentsheader"> <!--//id// instead of //class//-->
<div class="comment">
<div class="comment">
...
<!-- END page content -->
<!-- BEGIN page footer -->
<ul id="footer_menu"> <!--[[WikkaMenus *]]-->
<div class="smallprint">
<div id="microtime"> <!--new class for formatting (or masking) the microtime information-->
<!-- END page footer -->
<!-- END body -->
<!-- BEGIN doc close -->
<!-- END doc close -->
%%
CategoryLayout
<<::c::
For several reasons the HTML output produced by Wikka does not allow optimal control on the layout.
Before installing skins, I'd like to discuss some ideas for a better template. Proposed modification are highlighted, feel free to add your comments and/or other proposals.
##<html>
~''<div id="page">'' (new wrapper, was called //container// in previous draft)
~~<div ''id''="**header**"> (//id// instead of //class//)
~~~<h2> ""PageTitle"" </h2>
~~~''<ul id="main_menu">'' ([[WikkaMenus *]])
~~~''<li>menu item</li>''
~~~''</ul>''
~~</div>
~~<div ''id''="''**content**''"> (currently called //page//, //id// instead of //class//)
~~The quick brown fox jumps over the lazy dog
~~The quick brown fox jumps over the lazy dog
~~The quick brown fox jumps over the lazy dog (main content)
~~The quick brown fox jumps over the lazy dog
~~The quick brown fox jumps over the lazy dog
~~</div>
~~''<div id="**comments**">'' (new wrapper)
~~</div>
~~~<div ''id''="commentsheader"> (//id// instead of //class//)
~~~</div>
~~~<div class="comment">
~~~</div>
~~~<div class="comment">
~~~</div>
~~~...
~~~</div>
~~~<div ''id''="commentform"> (//id// instead of //class//)
~~~</div>
~~''</div>''
~~<div ''id''="**footer**"> (//id// instead of //class//)
~~~''<ul id="footer_menu">'' ([[WikkaMenus *]])
~~~''<li>menu item</li>''
~~~''</ul>''
~~~<div class="smallprint">
~~~</div>
~~~''<div id="microtime">'' (new class for formatting (or masking) the microtime information)
~~~''</div>''
~~</div>
~''</div>''
</html>##
Your ideas?
-- DarTar
==A different "view"==
Taking your code, and annotating it a bit, to try and explain to myself how it's structured and what might be in which (partial) "template". (Doing that, I also found an extra </div> which I've removed.)
%%(html4strict)
<!-- BEGIN doc open -->
<!-- END doc open -->
<!-- BEGIN head (only head section) -->
<!-- END head -->
<!-- BEGIN body (whole body section) -->
<!-- BEGIN page header -->
<h2>PageTitle</h2>
<ul id="main_menu">' <!--[[WikkaMenus *]]-->
<!-- END page header -->
<!-- BEGIN page content -->
<div id="commentsheader"> <!--//id// instead of //class//-->
<div class="comment">
<div class="comment">
...
<!-- END page content -->
<!-- BEGIN page footer -->
<ul id="footer_menu"> <!--[[WikkaMenus *]]-->
<div class="smallprint">
<div id="microtime"> <!--new class for formatting (or masking) the microtime information-->
<!-- END page footer -->
<!-- END body -->
<!-- BEGIN doc close -->
<!-- END doc close -->
%%
CategoryLayout
Deletions:
~-[[WikkaMenus Configurable header/footer navigation bars]]
>> For several (mainly "historical") reasons, the HTML output produced by Wikka does not allow optimal control on the layout. Here's a proposal for a more structured template:
::c::
%%(html4strict;1)
<!-- BEGIN DOC OPEN -->
<!-- END DOC OPEN -->
<!-- BEGIN HEAD (only head section) -->
<!-- END HEAD -->
<!-- BEGIN BODY (whole body section) -->
<!-- BEGIN PAGE WRAPPER -->
<!-- BEGIN PAGE HEADER -->
<h1 id="hn_main">PageTitle</h1>
<ul id="main_menu"> <!-- See WikkaMenus -->
<!-- END PAGE HEADER -->
<!-- BEGIN PAGE CONTENT -->
<!-- END PAGE CONTENT -->
<!-- BEGIN COMMENT BLOCK -->
<div id="commentheader"> <!--//id// instead of //class//-->
<div id="commentlist">
<div class="comment">
</div>
<div class="comment">
</div>
</div><!-- end div "commentlist" -->
<!-- END COMMENT BLOCK -->
<!-- BEGIN PAGE FOOTER -->
<ul id="extra_menu"> <!-- See WikkaMenus -->
<!-- END PAGE FOOTER -->
<!-- BEGIN SYSTEM INFO -->
<div id="smallprint">
</div>
<!-- END SYSTEM INFO -->
<!-- BEGIN MICROTIME -->
<div id="microtime"> <!--new id for formatting (or masking) the microtime information-->
</div>
<!-- END MICROTIME -->
<!-- END PAGE WRAPPER -->
<!-- END BODY -->
<!-- BEGIN DOC CLOSE -->
<!-- END DOC CLOSE -->%%
Small tweak: wrapped comments in a div as well which may help in styling. And main heading properly a h1, with id. Small id name changes. --JavaWoman
CategoryDevelopmentDiscussion CategoryLayout
