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]
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:- The current Wikka CSS: WikkaSkins
- <!-- BEGIN DOC OPEN -->
- <!DOCTYPE....>
- <html>
- <!-- END DOC OPEN -->
- <!-- BEGIN HEAD (only head section) -->
- <head>
- <!-- head elements here -->
- </head>
- <!-- END HEAD -->
- <!-- BEGIN BODY (whole body section) -->
- <body>
- <!-- BEGIN PAGE WRAPPER -->
- <div id="page"> <!--new wrapper, was called //container// in previous draft-->
- <!-- BEGIN PAGE HEADER -->
- <div id="header"> <!--//id// instead of //class//-->
- <ul id="main_menu"> <!-- See WikkaMenus -->
- ...
- </ul>
- </div><!-- end div "header" -->
- <!-- END PAGE HEADER -->
- <!-- BEGIN PAGE CONTENT -->
- <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><!-- end div "content" -->
- <!-- END PAGE CONTENT -->
- <!-- BEGIN COMMENT BLOCK -->
- <div id="comments"> <!--new wrapper-->
- <div id="commentheader"> <!--//id// instead of //class//-->
- </div>
- <div id="commentlist">
- <div class="comment">
- </div>
- <div class="comment">
- </div>
- ...
- </div><!-- end div "commentlist" -->
- <div id="commentform"> <!--//id// instead of //class//-->
- <!-- (form here) -->
- </div><!-- end div "commentform" -->
- </div><!-- end div "comments" -->
- <!-- END COMMENT BLOCK -->
- <!-- BEGIN PAGE FOOTER -->
- <div id="footer"> <!--//id// instead of //class//-->
- <ul id="extra_menu"> <!-- See WikkaMenus -->
- ...
- </ul>
- </div><!-- end div "footer" -->
- <!-- 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 -->
- </div><!-- end div "page" -->
- <!-- END PAGE WRAPPER -->
- </body>
- <!-- END BODY -->
- <!-- BEGIN DOC CLOSE -->
- </html>
- <!-- 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
I don't like the (current) id="page" either - the whole thing, including masthead and footer, is a page, after all (and see above). Something like "pagebody" or "content" might be more descriptive.
What's "commentinfo" for?
Also, I think everything comments-related should be wrapped in a single div, and everything in the footer also a single div. So you'd get:
- body (can have global background and margin/padding)
- contains "page" (what you call "container")
- contains header, content (what you call "page"), comments, footer: just 4 "blocks"
- comments contains commentsheader, several (>=0) comments, and commentform
- footer contains footer menu, smallprint, microtime
We should also look at a multi-column layout, I think; this type of single-column layout could just be a special case. But that's for later...
if I succeed and if the code isn't too ugly, I'll put it here.
http://css.openformats.org/wikka.php?wakka=HomePage
Thanks in advance
unfortunately the proposed solution at http://wikkawiki.org/MySkin does not work for me (looks like I am not alone). It would be great to know how it is done here: http://css.openformats.org/wikka.php?wakka=MySkin
These skins are said to work only with the new template.
There it says that one needs the new template.