WidgetsMantisDesign < System

---+ <nop>%TOPIC%
Create your own Foswiki <nop>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 %USERSWEB%.SitePreferences topic (or !WebPreferences, or your personal topic)
<textarea readonly rows="13" style="width:85%;margin:10px;">
   * Set Foswiki to use this Widget design, set the following on %USERSWEB%.SitePreferences (don't copy the raw text)
      * Set SKIN=Widget
   * Set the Widget skin to use this topic to get the _Moveable Type Common Text sections_ from this topic
      * Set WidgetsSkin_DESIGNTOPIC = %TOPIC%
   * Set the Widget skin to use to get the css and images from here
      * Set WidgetsSkin_CSSFILE = %PUBURL%/%SYSTEMWEB%/%WidgetsSkin_DESIGNTOPIC%/theme.css
   * Is the css one-column, two-column-left, two-column-right, three-column?
      * Set WidgetsSkin_COLUMNS = two-column-left
</textarea>

----
---++ Moveable Type Common Text sections
---+++ module-search-left
%STARTSECTION{"module-search-left-three-column"}%%STARTSECTION{"module-search-left-two-column-left"}%%STARTSECTION{"module-search-left"}%<div class="module-search module">
   <h2 class="module-header">Search</h2>
   <div class="module-content">
<form name="quickSearchForm" action="%SCRIPTURLPATH{view}%/%INCLUDINGWEB%/WebSearch">%IF{" '%URLPARAM{"search" encode="entity" scope="topic"}%' = '' " then="<input type=\"text\" class=\"twikiInputField patternFormFieldDefaultColor\" name=\"search\" value=\"%MAKETEXT{"Search"}%\" size=\"14\" onfocus=\"clearDefaultandCSS(this);\" onblur=\"setDefaultText(this);\" />" else="<input type=\"text\" class=\"twikiInputField\" name=\"search\" value=\"%URLPARAM{ "search" encode="entity" scope="topic" }%\" size=\"14\" />"}%</form>
   </div>
</div>%ENDSECTION{"module-search-left"}%%ENDSECTION{"module-search-left-two-column-left"}%%ENDSECTION{"module-search-left-three-column"}%

---+++ module-search-right
%STARTSECTION{"module-search-right-three-column"}%%STARTSECTION{"module-search-right-two-column-right"}%%STARTSECTION{"module-search-right"}%<div class="module-search module">
   <h2 class="module-header">Search</h2>
   <div class="module-content">
<form name="quickSearchForm" action="%SCRIPTURLPATH{view}%/%INCLUDINGWEB%/WebSearch">%IF{" '%URLPARAM{"search" encode="entity" scope="topic"}%' = '' " then="<input type=\"text\" class=\"twikiInputField patternFormFieldDefaultColor\" name=\"search\" value=\"%MAKETEXT{"Search"}%\" size=\"14\" onfocus=\"clearDefaultandCSS(this);\" onblur=\"setDefaultText(this);\" />" else="<input type=\"text\" class=\"twikiInputField\" name=\"search\" value=\"%URLPARAM{ "search" encode="entity" scope="topic" }%\" size=\"14\" />"}%</form>
   </div>
</div>%ENDSECTION{"module-search-right"}%%ENDSECTION{"module-search-right-two-column-right"}%%ENDSECTION{"module-search-right-three-column"}%
---
---+++ module-categories-left
%STARTSECTION{"module-categories-left-three-column"}%%STARTSECTION{"module-categories-left-two-column-left"}%%STARTSECTION{"module-categories-left"}%
%ENDSECTION{"module-categories-left"}%%ENDSECTION{"module-categories-left-two-column-left"}%%ENDSECTION{"module-categories-left-three-column"}%
<div class="module-categories module">
   <h2 class="module-header">Categories</h2>
   <div class="module-content">
      <ul class="module-list">
            <li class="module-list-item"><a href="http://www.thestylecontest.com/browser/category_1/" title="">Category 1</a>
            <ul class="module-list">
            <li class="module-list-item"><a href="http://www.thestylecontest.com/browser/category_1/sub_category_a/" title="">Sub Category a</a></li>
            <li class="module-list-item"><a href="http://www.thestylecontest.com/browser/category_1/sub_category_b/" title="">Sub Category b</a></li>
   </ul>
      </li>
            <li class="module-list-item"><a href="http://www.thestylecontest.com/browser/category_2/" title="">Category 2</a>
      </li>
   </ul>
   </div>
</div>
---+++ module-categories-right
%STARTSECTION{"module-categories-right-three-column"}%%STARTSECTION{"module-categories-right-two-column-right"}%%STARTSECTION{"module-categories-right"}%
%ENDSECTION{"module-categories-right"}%%ENDSECTION{"module-categories-right-two-column-right"}%%ENDSECTION{"module-categories-right-three-column"}%
<div class="module-categories module">
   <h2 class="module-header">Categories</h2>
   <div class="module-content">
      <ul class="module-list">
            <li class="module-list-item"><a href="http://www.thestylecontest.com/browser/category_1/" title="">Category 1</a>
            <ul class="module-list">
            <li class="module-list-item"><a href="http://www.thestylecontest.com/browser/category_1/sub_category_a/" title="">Sub Category a</a></li>
            <li class="module-list-item"><a href="http://www.thestylecontest.com/browser/category_1/sub_category_b/" title="">Sub Category b</a></li>
   </ul>
      </li>
            <li class="module-list-item"><a href="http://www.thestylecontest.com/browser/category_2/" title="">Category 2</a>
      </li>
   </ul>
   </div>
</div>

---
---+++ module-categories-left
%STARTSECTION{"module-archives-left-three-column"}%%STARTSECTION{"module-archives-left-two-column-left"}%%STARTSECTION{"module-archives-left"}%<div class="module-archives module">
   <h2 class="module-header">Foswiki Webs</h2>
   <div class="module-content">
         <ul class="module-list">
            <li class="module-list-item">%TMPL:P{"login"}%</li>
%WEBLIST{"<li class="module-list-item">[[$name.WebHome][$name]]</li>"}%
      </ul>
   </div>
</div>
<div class="module-archives module">
   <h2 class="module-header">Links</h2>
   <div class="module-content">
%INCLUDE{"%BASEWEB%.WebLeftBar"}%      
   </div>
</div>%ENDSECTION{"module-archives-left"}%%ENDSECTION{"module-archives-left-two-column-left"}%%ENDSECTION{"module-archives-left-three-column"}%

---+++ module-categories-right
%STARTSECTION{"module-archives-right-three-column"}%%STARTSECTION{"module-archives-right-two-column-right"}%%STARTSECTION{"module-archives-right"}%<div class="module-archives module">
   <h2 class="module-header">Foswiki Webs</h2>
   <div class="module-content">
         <ul class="module-list">
            <li class="module-list-item">%TMPL:P{"login"}%</li>
%WEBLIST{"<li class="module-list-item">[[$name.WebHome][$name]]</li>"}%
      </ul>
   </div>
</div>
<div class="module-archives module">
   <h2 class="module-header">Links</h2>
   <div class="module-content">
%INCLUDE{"%BASEWEB%.WebLeftBar"}%      
   </div>
</div>%ENDSECTION{"module-archives-right"}%%ENDSECTION{"module-archives-right-two-column-right"}%%ENDSECTION{"module-archives-right-three-column"}%


---
---+++ module-syndicate-left
%STARTSECTION{"module-syndicate-left-three-column"}%%STARTSECTION{"module-syndicate-left-two-column-left"}%%STARTSECTION{"module-syndicate-left"}%
%ENDSECTION{"module-syndicate-left"}%%ENDSECTION{"module-syndicate-left-two-column-left"}%%ENDSECTION{"module-syndicate-left-three-column"}%
<div class="module-syndicate module">
   <div class="module-content">
      <a href="http://www.thestylecontest.com/browser/atom.xml">Subscribe to this blog's feed</a><br />
      [<a href="http://www.sixapart.com/about/feeds">What is this?</a>]
   </div>
</div>

---+++ module-syndicate-right
%STARTSECTION{"module-syndicate-right-three-column"}%%STARTSECTION{"module-syndicate-right-two-column-right"}%%STARTSECTION{"module-syndicate-right"}%
%ENDSECTION{"module-syndicate-right"}%%ENDSECTION{"module-syndicate-right-two-column-right"}%%ENDSECTION{"module-syndicate-right-three-column"}%
<div class="module-syndicate module">
   <div class="module-content">
      <a href="http://www.thestylecontest.com/browser/atom.xml">Subscribe to this blog's feed</a><br />
      [<a href="http://www.sixapart.com/about/feeds">What is this?</a>]
   </div>
</div>

---
---+++ module-powered-left
%STARTSECTION{"module-powered-left-three-column"}%%STARTSECTION{"module-powered-left-two-column-left"}%%STARTSECTION{"module-powered-left"}%<div class="module-powered module">
   <div class="module-content">
      <a href="http://twiki.org"><img src="%PUBURLPATH%/%SYSTEMWEB%/ProjectLogos/T-logo-34x26.png" />Foswiki powered</a>
%BR% skin by <a href="http://DistributedINFORMATION.com">Distributed INFORMATION.com</a>
%BR% [[http://WikiRing.com][a <img src="%PUBURLPATH%/%SYSTEMWEB%/WidgetsSkin/wikiringlogo20x20.png" alt="@" width='20' height='20' border='0'  /> WikiRing.com partner]]
   </div>
</div> %ENDSECTION{"module-powered-left"}%%ENDSECTION{"module-powered-left-two-column-left"}%%ENDSECTION{"module-powered-left-three-column"}%

---+++ module-powered-right
%STARTSECTION{"module-powered-right-three-column"}%%STARTSECTION{"module-powered-right-two-column-right"}%%STARTSECTION{"module-powered-right"}%<div class="module-powered module">
   <div class="module-content">
      <a href="http://twiki.org"><img src="%PUBURLPATH%/%SYSTEMWEB%/ProjectLogos/T-logo-34x26.png" />Foswiki powered</a>
 skin by <a href="http://DistributedINFORMATION.com">Distributed INFORMATION.com</a>
 [[http://WikiRing.com][a <img src="%PUBURLPATH%/%SYSTEMWEB%/WidgetsSkin/wikiringlogo20x20.png" alt="@" width='20' height='20' border='0'  /> WikiRing.com partner]]
   </div>
</div> %ENDSECTION{"module-powered-right"}%%ENDSECTION{"module-powered-right-two-column-right"}%%ENDSECTION{"module-powered-right-three-column"}%

---

   * Mantis artwork Copyright 2008 Sven Dowideit - SvenDowideit@home.org.au
I	Attachment	Action	Size	Date	Who	Comment
css	Foswiki.css	manage	0.1 K	16 Mar 2007 - 14:13	UnknownUser
css	base-weblog.css	manage	0.1 K	16 Mar 2007 - 14:13	UnknownUser
This topic: System > Skins > WidgetsSkin > WidgetsMantisDesign
Topic revision: 14 Apr 2011, UnknownUser (raw view)
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback