Style Browser

Explore the style variations of the 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.

Style:

Variation:

Layout:

Sidebar:

Menu:

%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"}%
Topic revision: r1 - 23 Dec 2012, UnknownUser
 
This site is powered by FoswikiCopyright © CC-BY-SA by the contributing authors. All material on this collaboration platform is copyrighted under CC-BY-SA by the contributing authors unless otherwise noted.
Ideas, requests, problems regarding Foswiki? Send feedback