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.

%STARTSECTION{"css"}%<literal><style class='head NATSKINSTYLEBROWSER' type='text/css'>
.natSkinStyleBrowser ul {
  list-style:none;
  margin:1em 0;
  padding:0;
}
</style></literal>%ENDSECTION{"css"}%
%STARTSECTION{"javascript"}%<literal>
<script class='script NATSKINSTYLEBROWSER' type='text/javascript'>
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"}%