A new layout for Wikka?

Last edited by DarTar:
Replaces old-style internal links with new pipe-split links.
Fri, 20 May 2016 07:38 UTC [diff]


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