BiofuelsWikiDesign

Create your own Foswiki WidgetDesign by attaching your Moveable Type CSS and images (and a copy of base-weblog.css) to your copy of the WidgetSampleDesign? topic. Then configure the settings on the topic to match, so that you can proof your design.

Enable this design

Copy and paste the following section to your SitePreferences topic (or WebPreferences, or your personal topic) * Set Foswiki to use this Widget design, set the following on Main.SitePreferences (don't copy the raw text) * Set SKIN = biofuelswiki,linkedin,famfamfam,widgets * Set the Widget skin to use this topic to get the _Moveable Type Common Text sections_ from this topic * Set WIDGETSSKIN_DESIGNTOPIC = System/BiofuelsWikiDesign * Set the Widget skin to use to get the css and images from here * Set WIDGETSSKIN_CSSFILE = http://www.biofuelswiki.org/pub/System/BiofuelsWikiSkin/screen.css * Is the CSS w, tw, wt, twt, wtt (wide, thin-wide, wide-thin, thin-wide-thin, wide-thin-thin)? * Set WIDGETSSKIN_COLUMNS = tw * favicon * Set FAVICON = /pub/System/BiofuelsWikiSkin/favicon.ico
NOTE: you will usually have to delete the already-existing FAVICON statement in SitePreferences.

---

Page Sections

first column

%STARTSECTION{"column-one"}%
%INCLUDE{"%SYSTEMWEB%.DefaultWidgets" section="widget-login" warn="on"}%
%INCLUDE{"%SYSTEMWEB%.%IF{"context authenticated" then="LinkedInPlugin" else="nada"}%" section="widget-linkedinshare" warn="off"}%
%INCLUDE{"%WEB%.%IF{"context authenticated" then="%TOPIC%" else="nada"}%" section="wiki-leftbar" warn="off"}%
%INCLUDE{"%WEB%.%IF{"context authenticated" then="%TOPIC%" else="nada"}%" section="widget-webchanges" warn="off"}%
%INCLUDE{"%WEB%.%IF{"context authenticated" then="%TOPIC%" else="nada"}%" section="widget-webleftbar" warn="off"}%
%ENDSECTION{"column-one"}%

example

second column (for three column designs)

%STARTSECTION{"column-two"}%
%ENDSECTION{"column-two"}%

example

header

%SYSTEMWEB%.DefaultWidgets
%STARTSECTION{"header-widgets"}%
<a href="%WIKILOGOURL%" title="Wiki Home" style="position:absolute; top:8px; left:15px; width:63px; height:100px;" >&nbsp;</a>%INCLUDE{"%WEB%.%IF{"context authenticated" then="%TOPIC%" else="nada"}%" section="header-search" warn="off"}%
%ENDSECTION{"header-widgets"}%

%STARTSECTION{"header-search"}%<form name="quickSearchForm" action="%SCRIPTURLPATH{kinosearch}%/%BASEWEB%/WebSearch">%IF{" '%URLPARAM{"search" encode="entity" scope="topic"}%' = '' " then="<input type=\"text\" class=\"BiofuelsWikiDesign-search twikiInputField patternFormFieldDefaultColor\" name=\"search\" value=\"%MAKETEXT{"Search"}%\" size=\"14\" onfocus=\"clearDefaultandCSS(this);\" onblur=\"setDefaultText(this);\" />" else="<input type=\"text\" class=\"BiofuelsWikiDesign-search twikiInputField\" name=\"search\" value=\"%URLPARAM{ "search" encode="entity" scope="topic" }%\" size=\"14\" />"}%<input type='hidden' name='web' value='%URLPARAM{"web" default="%BASEWEB%"}%' /></form>%ENDSECTION{"header-search"}%

example

 

footer

%STARTSECTION{"footer-widgets"}%
<div style="position:absolute; vertical-align:middle; right:1em;" >
<a href="http://foswiki.org/"> 
     <img src="%PUBURL%/%SYSTEMWEB%/ProjectLogos/foswiki-badge.gif" alt="This site is powered by Foswiki" width="88" height="31" title="This site is powered by Forwiki" border="0" /> 
</a>
</div>
<center>
Copyright &copy; 2011 Biofuels Center of North Carolina.<br/>
All Rights Reserved.<br/>
</center><script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-18813055-2']);
  _gaq.push(['_setDomainName', 'none']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
%ENDSECTION{"footer-widgets"}%

example

Copyright © 2011 Biofuels Center of North Carolina.
All Rights Reserved.

Customized Widgets

widget-webleftbar

Use this to put the web's WebLeftBar into a rounded side widget. If the web does not have a WebLeftBar, then Main.WebLeftBar is used instead.

%STARTSECTION{"widget-webleftbar"}%<div class="widget-archives widget">
   <div class="widget-content">
%INCLUDE{
   "%IF{"istopic '%BASEWEB%.WebLeftBar'" then="%BASEWEB%.WebLeftBar" else="%MAINWEB%.WebLeftBar"}%"
}%
   </div>
</div>%ENDSECTION{"widget-webleftbar"}%

example

wiki-leftbar

Widget content to include on ever page wiki-wide, regardless of web.

%STARTSECTION{"wiki-leftbar"}%\
<div class="widget-archives widget">
   <div class="widget-content">
%INCLUDE{"%MAINWEB%.WebLeftBar" section="site_menu"}%
   </div>
</div>
%ENDSECTION{"wiki-leftbar"}%

example

widget-webchanges

%STARTSECTION{"widget-webchanges"}%<div class="widget-archives widget"><div class="widget-content">
<h2 class="widget-header">Recent Changes</h2>
%SEARCH{"1" web="%BASEWEB%" type="query" order="modified" reverse="on" limit="5" nonoise="on" format="   * [[$web.$topic][$topic]]"}%
   * [[%BASEWEB%.WebChanges][More changes...]]</li>
</div></div>%ENDSECTION{"widget-webchanges"}%

example