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]


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
Comments
Comment by NilsLindenberg
2004-11-22 12:56:01
It looks goot to me, but I have one question: why the <div id="container"> around everything?
Comment by DarTar
2004-11-22 13:43:54
With some skins, you might want to have: 1) a global background for the <BODY> tag, 2) a background for the page 'block' (the <DIV>that I call "container"), including all the divs like header, page, comment, footer etc. The problem emerges as soon as you use vertical menus formatted as UL.
Comment by JavaWoman
2004-11-22 14:08:19
I stumbled over that "container" as well; I understand the objective, but it's not a very good name since everything actually is a container. "page" would be more appropriate (so you can have a margin around the page, if desired) - but see below.

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...
Comment by PivWan
2005-05-24 15:33:02
I considering rewriting parts of wikka to use a 2 cols layout (see http://www.pivwan.net/weblog for base template).

if I succeed and if the code isn't too ugly, I'll put it here.
Comment by DarTar
2005-05-24 18:30:37
PivWan, tu es le bienvenu pour faire tes tests sur le nouveau template:

http://css.openformats.org/wikka.php?wakka=HomePage
Comment by BernHard
2006-03-25 11:29:41
Is there a way to use this new template already? Did a earch but without success. Could anyone give me a hint how to get the new skins to work.

Thanks in advance
Comment by NilsLindenberg
2006-03-25 18:41:40
you can try out http://wikkawiki.org/MySkin as it does not depend on this layout changes (right, DarTar?)
Comment by BernHard
2006-03-26 11:03:02
Thank you Nils,
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.
Comment by 134.76.60.193
2006-03-27 05:09:10
Could you please describe "does not work" a bit further? Nils (not logged in)
Comment by BernHard
2006-03-27 12:28:53
Tried it only once but after the proposed changes no css was found. Didn´t look to deep though because what I would like to have is not a Skin-Switcher but the the skins that are here: http://css.openformats.org/wikka.php?wakka=MySkin.
There it says that one needs the new template.
Comment by DarTar
2006-03-27 18:01:27
BernHard, the skins presented at css.openformats.org make use of the new page template and are meant for testing purposes only. Because of many requests, I uploaded a modified Wikka package based on the new template (you can find it at http://dartar.free.fr/code/) - but please note that this version should not be used for production websites, but for local testing only.
Comment by BernHard
2006-03-28 03:06:49
Dario, may I ask why this should not be used for production. Is it for security or stability reasons? The fact that you are running it on your site suggests that it is mere stability. Could you then give some hints about the remaining problems. To have these layout possibilities available would be a great improvement for us. Thanks again!
Comment by DarTar
2006-03-28 03:22:43
The package at /code is actually not the same installed at openformats. It contains some extensions that have not been released and have to be tested for stability AND security. Moreover its codebase is 1.1.6.0, which contained some security issues which have been fixed with 1.1.6.1. I'm afraid you'll have to wait until the official release of a package to be able to use the new template and skins in a production environment. A good starting point, though, might be to upload this test package as a branch to our SVN repository, so more developers can keep an eye on it. I'll do this asap.
Comment by BernHard
2006-03-28 04:19:57
Thank you for clarification. I´ll test and wait for the SVN branch. :-)
Comment by MartinRenvoize
2006-08-30 09:04:11
So what are we currently running. These cooments seem to be a little behind the times? It this still a suggestion, or a reality in version 1.1.6.2?
Comment by DarTar
2006-08-30 13:46:41
Martin, as of 1.1.6.2 the new layout has not been adopted yet. For the next major release (1.1.7) we are focusing on security issues, an improved installer/upgrader and a rich markup for tables. If there is time left, we might integrate the new template as described here, but at the moment this is not scheduled for 1.1.7, which should be out in the coming weeks.
Comment by PezHore
2009-04-30 11:22:11
Any update on if this has been added to the SVN branch yet? I'm really excited about the possibilities that this new template can provide.
Comment by DarTar
2009-05-03 17:54:29
Hi PezHore, we discussed this tonight. The new layout will be included as of the next major release (1.2).
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki