Revision [11397]

This is an old revision of WikkaSkinOptimization made by DarTar on 2005-10-13 12:03:21.

 

A new layout for Wikka?

Last edited by DarTar:
updated template to match dev version
Thu, 13 Oct 2005 12:03 UTC [diff]


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:
 


  1. <!-- BEGIN DOC OPEN -->
  2. <!DOCTYPE....>
  3. <!-- END DOC OPEN -->
  4. <!-- BEGIN HEAD (only head section) -->
  5.     <!-- head elements here -->
  6. </head>
  7. <!-- END HEAD -->
  8. <!-- BEGIN BODY (whole body section) -->
  9. <body>
  10. <!-- BEGIN PAGE WRAPPER -->
  11.     <div id="page"> <!--new wrapper, was called //container// in previous draft-->
  12. <!-- BEGIN PAGE HEADER -->
  13.         <div id="header"> <!--//id// instead of //class//-->
  14.             <h1 id="hn_main">PageTitle</h1>
  15.             <ul id="main_menu">' <!-- See WikkaMenus -->
  16.                 <li>menu item</li>
  17.                 ...
  18.             </ul>
  19.         </div><!-- end div "header" -->
  20. <!-- END PAGE HEADER -->
  21. <!-- BEGIN PAGE CONTENT -->    
  22.         <div id="content"> <!--currently called //page//, //id// instead of //class//-->
  23.         The quick brown fox jumps over the lazy dog
  24.         The quick brown fox jumps over the lazy dog
  25.         The quick brown fox jumps over the lazy dog  (main content)
  26.         The quick brown fox jumps over the lazy dog
  27.         The quick brown fox jumps over the lazy dog
  28.         </div><!-- end div "content" -->
  29. <!-- END PAGE CONTENT -->
  30. <!-- BEGIN COMMENT BLOCK -->
  31.         <div id="comments"> <!--new wrapper-->
  32.             <div id="commentheader"> <!--//id// instead of //class//-->
  33.             </div>
  34.             <div id="commentlist">
  35.                 <div class="comment">
  36.                 </div>
  37.                 <div class="comment">
  38.                 </div>
  39.                 ...
  40.             </div><!-- end div "commentlist" -->
  41.             <div id="commentform"> <!--//id// instead of //class//-->
  42.                 <!-- (form here) -->
  43.             </div><!-- end div "commentform" -->
  44.         </div><!-- end div "comments" -->
  45. <!-- END COMMENT BLOCK -->
  46. <!-- BEGIN PAGE FOOTER -->
  47.         <div id="footer"> <!--//id// instead of //class//-->
  48.             <ul id="extra_menu"> <!-- See WikkaMenus -->
  49.                 <li>menu item</li>
  50.                 ...
  51.             </ul>
  52.         </div><!-- end div "footer" -->
  53. <!-- END PAGE FOOTER -->
  54. <!-- BEGIN SYSTEM INFO -->
  55.         <div id="smallprint">
  56.         </div>
  57. <!-- END SYSTEM INFO -->
  58. <!-- BEGIN MICROTIME -->
  59.         <div id="microtime"> <!--new id for formatting (or masking) the microtime information-->
  60.         </div>
  61. <!-- END MICROTIME -->
  62.     </div><!-- end div "page" -->
  63. <!-- END PAGE WRAPPER -->
  64. </body>
  65. <!-- END BODY -->
  66. <!-- BEGIN DOC CLOSE -->
  67. </html>
  68. <!-- END DOC CLOSE -->


Hope it's clear what I'm trying to do... if not, let me know. We definitely should move to a better structure, both in generated code as well as in which parts of PHP code do the generating. More later... --JavaWoman

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
There are 18 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki