custom layouts
Examples
Here are all of the layouts in use on wagn.org:
<!DOCTYPE HTML> <html> <head> {{*head}} </head> <body id="wagn"> <div id="wrapper"> <div id="top-bar"> {{bruce top bar}} </div> <div id="primary"> {{_main|titled}} </div> <div id="secondary"> {{bruce sidebar}} </div>...<!DOCTYPE HTML> <html> <head> {{*head}} <meta name="google-site-verification" content="uV_uT0a4P7zzEzwGZgYGOl4BLk4o2EEJ6SBmsMojFec" /> </head> <body id="wagn" class="home-layout"> <div id="menu"> [[/ | Home]] [[/recent | Recent]] {{*navbox}} {{*account links}} </div>...<!DOCTYPE HTML> <html> <head> {{*head}} </head> <body id="wagn"> <div id="menu"> [[/ | Home]] [[/recent | Recent]] {{*navbox}} {{*account links}} </div> <div id="primary"> <h1 class="page-header">Recently Changed...
How To
Different sets of Wagn cards can have different layouts. By default, new Wagns have one layout, specified by *all+*layout:
A layout setting card points to an HTML card that specifies the layout for the relevant set — so to add a layout just for User cards, you'd add their +*layout setting, pointing to a new HTML card that you would create. In the case of *all shown above, it points to a card called Default Layout, which looks like this:
Notice how the only special syntax on the card is already very familiar stuff: inclusions.
Some of these inclusions, like {{*logo}} and {{*sidebar}} work just like any normal inclusion -- it simply includes those cards. Others are special, uneditable, dynamic "virtual" cards, which appear differently depending on context. If you click on them, however, you see they, too, largely behave like normal cards:
*head -- this one's invisible but very important for proper javascript functioning.
*navbox, *account links -- both of these appear in the default Wagn header.
*version -- Wagn release number.Last but not least is the {{_main}} inclusion, which determines where the "main" card of the page will be. For example, if you click Support Ticket, then "Support Ticket" is the main card on the page, and {{_main}} determines where on the page that will appear.
Note: the default view for cards included anywhere outside the main card is core, rather than the usual content.
Tips
- If you manage to break your Wagn while messing around with layouts, try adding ?layout=blank to the end of your url. This will give you access to a functioning, built-in layout
- This trick is often most useful in combination with direct links to editing.
- Similarly, you can test layouts before using them by adding "?layout=[layout name]" at the end of most Wgn URLs.
- There are several other terms — besides _main — for constructing contextual names.
Hey Guys! I'm excited about the new layouts infrastructure!
Simple. Elegant. Flexible. Just like wagneering. Well Done! I look forward to playing with it more.
This is amazing! I am so glad to find this. I was considering Semantic MediaWiki for a project, but the ease and grace of Wagn is superb, as with this custom layout feature. Well done! Excellent crafting!
--Patrick (Not signed in).....Sun Oct 25 14:58:07 -0700 2009
Great job. Getting very close to the 'Everything-is-a-Card' meme.
--WG (Not signed in).....Mon Oct 26 08:52:55 -0700 2009
Layouts now work with any set, not just *all.
--John Abbe.....Tue Apr 27 02:24:59 -0700 2010
The list (in +examples) of "all" layouts isn't complete, and I can't think of a way to get all layouts, since some (e.g. mobile) aren't referred to by a +*layout card. Ideas?
--John Abbe.....Thu Jan 27 16:34:09 -0800 2011