NatSkinStyleBrowser < System

---+ Style Browser
Explore the style variations of the %SYSTEMWEB%.NatSkin by changing the base
_style_ and a _variation_ of it. In general, style variations are used to change
not only the header art, but also adapt colors to match the graphics. Various elements of
the style can be relocated using style switches or even be switched off. Use
the "reset" button whenever you want to revert your selection and come back to
the site's default settings. Note that each web may have its own defaults built
in. If you select different style options they have precedence over those.

%STARTINCLUDE%<!-- -->
<noautolink>
<div class="natSkinStyleBrowser">
<form action="%SCRIPTURLPATH{"view"}%/%BASEWEB%/%BASETOPIC%" _method="post">
<div class="foswikiFormSteps">
  <div class="foswikiFormStep">
    <h3 >%MAKETEXT{"Style"}%:</h3>
    <select class="foswikiSelect" id="style" name="style"">
      %FORMATLIST{"%KNOWNSTYLES%" 
        pattern="\s*(.*)\s*" 
        format="<option $percntIF{\"context natskin_style_$1\" then=\"selected='selected'\"}$percnt>$1</option>" 
        join="\n" 
        separator=" "
      }%
    </select>
  </div>
  <div class="foswikiFormStep">
    <h3 >%MAKETEXT{"Variation"}%:</h3>
    <select class="foswikiSelect" id="variation" name="skinvariation">
    </select>
  </div>
  <div class="foswikiFormStep">
    <h3 >%MAKETEXT{"Layout"}%:</h3>
    <ul>
      <li> <input type="radio" class="foswikiRadiobox" id="fixed" name="skinlayout" value="fixed" %IF{"context natskin_layout_fixed" then="checked='checked'"}% /><label for="fixed">%MAKETEXT{"Fixed"}%</label></li>
      <li> <input type="radio" class="foswikiRadiobox" id="fluid" name="skinlayout" value="fluid" %IF{"context natskin_layout_fluid" then="checked='checked'"}% /><label for="fluid">%MAKETEXT{"Fluid"}%</label></li>
      <li> <input type="radio" class="foswikiRadiobox" id="bordered" name="skinlayout" value="bordered" %IF{"context natskin_layout_bordered" then="checked='checked'"}% /><label for="bordered">%MAKETEXT{"Bordered"}%</label></li>
    </ul>
    <h3 >%MAKETEXT{"Sidebar"}%:</h3>
    <ul>
      <li> <input type="radio" class="foswikiRadiobox" id="sidebarleft" name="skinsidebar" value="left" %IF{"context natskin_sidebar_left" then="checked='checked'"}% /><label for="sidebarleft">%MAKETEXT{"Left"}%</label></li>
      <li> <input type="radio" class="foswikiRadiobox" id="sidebarright" name="skinsidebar" value="right" %IF{"context natskin_sidebar_right" then="checked='checked'"}% /><label for="sidebarright">%MAKETEXT{"Right"}%</label></li>
      <li> <input type="radio" class="foswikiRadiobox" id="sidebarboth" name="skinsidebar" value="both" %IF{"context natskin_sidebar_both" then="checked='checked'"}% /><label for="sidebarboth">%MAKETEXT{"Both"}%</label></li>
      <li> <input type="radio" class="foswikiRadiobox" id="sidebaroff" name="skinsidebar" value="off" %IF{"context natskin_sidebar_off" then="checked='checked'"}% /><label for="sidebaroff">%MAKETEXT{"Off"}%</label></li>
    </ul>
    <h3 >%MAKETEXT{"Menu"}%:</h3>
    <ul>
      <li> <input type="radio" class="foswikiRadiobox" id="menuon" name="skinmenu" value="on" %IF{"context natskin_menu_on" then="checked='checked'"}% /><label for="menuon">%MAKETEXT{"On"}%</label></li>
      <li> <input type="radio" class="foswikiRadiobox" id="menuoff" name="skinmenu" value="off" %IF{"context natskin_menu_off" then="checked='checked'"}% /><label for="menuoff">%MAKETEXT{"Off"}%</label></li>
    </ul>
  </div>
  <div class="foswikiFormStep foswikiFormLast foswikiFormButtons">
    %BUTTON{"%MAKETEXT{"OK"}%" type="submit" icon="tick"}%
    %BUTTON{"%MAKETEXT{"Reset"}%" icon="cross" onclick="window.location.href='%SCRIPTURLPATH{"view"}%/%BASEWEB%/%BASETOPIC%?style=reset';" }%
    %CLEAR%
  </div>
</div>
</form>
</div>
%ADDTOZONE{"script" topic="%WEB%.%TOPIC%" section="javascript" requires="JQUERYPLUGIN::FOSWIKI"}%
</noautolink>
<!-- -->%STOPINCLUDE%
<verbatim style="display:none">
%STARTSECTION{"javascript"}%<literal>
<style>
.natSkinStyleBrowser ul {
  list-style:none;
  margin:1em 0;
  padding:0;
}
</style>
<script>
var knownVariations = {
  %KNOWNVARIATIONS{
    format="'$style': ['$variations']" 
    separator=", "
    varseparator="', '"
  }%
};
var selectedVariation = '%SKINSTATE{"$variation"}%';
function setVariations() {
  var style = jQuery("#style").val();
  var varSelect = jQuery("#variation").empty().append("<option>none</option>");
  if (knownVariations[style]) {
    for (var i = 0; i < knownVariations[style].length; i++) {
      var variation = knownVariations[style][i];
      var selected = variation == selectedVariation ? "selected":"";
      varSelect.append("<option "+selected+">"+knownVariations[style][i]+"</option>");
    }
  }
}
jQuery(function() {
  jQuery("#style").change(function() {
    setVariations();
  }).change();
});
</script>
</literal>
%ENDSECTION{"javascript"}%
</verbatim>
This topic: System > NatSkinStyleBrowser
Topic revision: revision 3 (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