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"}%