change_appearance.naml

<macro name="change_appearance" requires="servlet">
	<n.if.not.visitor.can_edit.root_node>
		<then>
			<n.login.><t>Only authorized users can proceed in this area.</t></n.login.>
		</then>
	</n.if.not.visitor.can_edit.root_node>

	<n.nabble_html>
		<do>
			<n.embedding_redirection_js/>
			<n.change_appearance_body/>
		</do>
		<output>
			<![CDATA[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">]]>
			<html>
				<head>
					<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
					<title>Change appearance of <n.root_node.subject/></title>
					<link rel="stylesheet" href="/nabble[n.dot_pack/].css?v=[n.css_version/]" type="text/css" />
					<n.change_appearance_stylesheet/>
					<n.nabble_javascript_libraries/>
					<script type="text/javascript" src="/util/jscolor/jscolor.js"></script>
					<script type="text/javascript">
						jscolor.dir = '/images/jscolor/';
					</script>
					<n.change_appearance_js/>
					<n.html_head_content/>
				</head>
				<body>
					<n.html_body_content/>
				</body>
			</html>
		</output>
	</n.nabble_html>
</macro>

<macro name="change_appearance_stylesheet">
	<style type="text/css">
		body {
			margin:0;
			padding:0;
			overflow:hidden;
		}
		#change-appearance {
			padding:.8em;
			font: normal 1em 'Open Sans', Verdana, sans-serif;
			color: #EEE;
			text-shadow: 1px 1px 0 #000;
			background: url('gradients/v30_DDDDDD88_CCCCCC00') #000 repeat-x;
		}
		#preview-frame {
			position:absolute;
			width:100%;
		}
		span.change-appearance-group {
			background: url("gradients/v30_FFFFFF65_DDDDDD00") repeat-x scroll 0 0 #222222;
			font-weight:bold;
			padding: .2em .4em;
			border-color: #333 #555 #888;
			border-width:2px;
			border-style: solid;
			margin-right:.7em;
			cursor: pointer;
			white-space:nowrap;
		}
		div.change-appearance-group-panel {
			background-color: #000;
			border: 2px solid #888;
			width:30em;
			padding:.5em;
			margin-top:.3em;
			position:absolute;
			z-index:1000;
			display:none;
		}
		.weak-color {
			color: #bbb;
		}
		td.label-column {
			white-space:nowrap;
			font-weight:bold;
		}
		div.sub-section-title {
			font-size:80%;
			margin:.3em 0 .1em;
			padding:.2em .3em;
			border-bottom:1px solid #777;
		}
		span.option-button {
			background:#444;
			padding:.2em .4em;
			color:#dd0;
			margin:0 .3em .3em 0;
			white-space:nowrap;
			cursor:pointer;
		}
		div.dropdown-box {
			width:20em;
			padding: .3em;
			background:#000;
			border:2px solid #777;
			display:none;
			-moz-box-shadow: 2px 2px 10px #FFFFFF;
			-webkit-box-shadow: 2px 2px 10px #FFFFFF;
			box-shadow: 2px 2px 10px #FFFFFF;
		}
		.section-title {
			font-weight:bold;
			color: #dd0;
		}
		.small-description {
			font-size:80%;
			padding:.3em 0;
			color:#ddd;
		}
		table {
			border-spacing:0;
			width:100%;
		}
		table td {
			padding:0;
		}
		.error-message {
			color:red;
			font-weight:bold;
			display:none;
		}
		.error-field { border: 3px solid red; }
		a:link { color:#78F; }
		a:visited { color:#76D; }
		a.close-link {
			font-size:200%;
			position:absolute;
			right:10px;
			top:0;
			text-decoration:none;
			color:white;
		}
		div.color-scheme-row {
			clear:both;
			cursor:pointer;
			margin-bottom:.2em;
		}
		div.color-scheme {
			width:8px;
			float:right;
			font-size:80%;
			margin-top:2px;
		}
	</style>
</macro>

<macro name="change_appearance_js">
	<script type="text/javascript">
		window.isChangeAppearance = true; /* see dropdown.naml */
		var selectedFont = '#ADE';
		function layout() {
			var $frm = $('#preview-frame');
			var $w = $(window);
			var $tbar = $('#change-appearance');
			$frm.height($w.height()-$tbar.height()-30);
			$frm.css('top', $tbar.height()+20);
		};
		function closeFrame() {
			location = '<n.base_url/>';
		};
		function hideOpenMenus() {
			$('span.change-appearance-group').next().slideUp('fast');
		};

		var font_list = [];
		var color_list = [];
		var preferences_list = [];
		var css_list = [];
		function addField(list, id, initial, def, type) {
			list.push({
				'id': id,
				'initial': initial,
				'default': def,
				'type': type
			});
		};
<![CDATA[
		function setFieldValues0(list, source) {
			for (var i=0; i < list.length; i++) {
				var o = list[i];
				var value = o[source];
				if (o.type == 'checkbox')
					checkboxValue('#'+o.id, value);
				else if (o.type == 'radio')
					$('#'+o.id+value).attr('checked', true);
				else if (o.type == 'color') {
					var input = document.getElementById(o.id);
					if (input.color)
						input.color.fromString(value);
					else
						$(input).val(value);
				} else
					$('#'+o.id).val(value);
			}
		};
]]>
		function setFieldValues() {
			addField(font_list, 'font-size', '<n.javascript_string_encode.naml_configuration.get_value name="fontSize" default="84"/>', '84');
			addField(font_list, 'main-font', '<n.javascript_string_encode.naml_configuration.get_value name="mainFontFamily" default=""/>', '');
			addField(font_list, 'title-font', '<n.javascript_string_encode.naml_configuration.get_value name="titleFontFamily" default=""/>', '');
			setFieldValues0(font_list, 'initial');

			addField(color_list, 'bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="bgColor" default="FFFFFF"/>', 'FFFFFF', 'color');
			addField(color_list, 'light-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="lightBgColor" default="F2F2F2"/>', 'F2F2F2', 'color');
			addField(color_list, 'shaded-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="shadedBgColor" default="EEEEEE"/>', 'EEEEEE', 'color');
			addField(color_list, 'dark-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="darkBgColor" default="DDDDDD"/>', 'DDDDDD', 'color');
			addField(color_list, 'highlight-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="highlightBgColor" default="FFFF99"/>', 'FFFF99', 'color');
			addField(color_list, 'text-color', '<n.javascript_string_encode.naml_configuration.get_value name="textColor" default="000000"/>', '000000', 'color');
			addField(color_list, 'text-weak-color', '<n.javascript_string_encode.naml_configuration.get_value name="textWeakColor" default="666666"/>', '666666', 'color');
			addField(color_list, 'title-color', '<n.javascript_string_encode.naml_configuration.get_value name="titleColor" default="333333"/>', '333333', 'color');
			addField(color_list, 'link-color', '<n.javascript_string_encode.naml_configuration.get_value name="linkColor" default="0000EE"/>', '0000EE', 'color');
			addField(color_list, 'link-visited-color', '<n.javascript_string_encode.naml_configuration.get_value name="linkVisitedColor" default="551A8B"/>', '551A8B', 'color');
			addField(color_list, 'input-text-color', '<n.javascript_string_encode.naml_configuration.get_value name="inputTextColor" default="000000"/>', '000000', 'color');
			addField(color_list, 'input-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="inputBgColor" default="FFFFFF"/>', 'FFFFFF', 'color');
			addField(color_list, 'light-border-color', '<n.javascript_string_encode.naml_configuration.get_value name="lightBorderColor" default="EEEEEE"/>', 'EEEEEE', 'color');
			addField(color_list, 'medium-border-color', '<n.javascript_string_encode.naml_configuration.get_value name="mediumBorderColor" default="CCCCCC"/>', 'CCCCCC', 'color');
			addField(color_list, 'dark-border-color', '<n.javascript_string_encode.naml_configuration.get_value name="darkBorderColor" default="666666"/>', '666666', 'color');
			addField(color_list, 'info-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="infoBgColor" default="FFFFCC"/>', 'FFFFCC', 'color');
			addField(color_list, 'info-text-color', '<n.javascript_string_encode.naml_configuration.get_value name="infoTextColor" default="000000"/>', '000000', 'color');
			addField(color_list, 'error-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="errorBgColor" default="FFFFCC"/>', 'FFFFCC', 'color');
			addField(color_list, 'error-text-color', '<n.javascript_string_encode.naml_configuration.get_value name="errorTextColor" default="000000"/>', '000000', 'color');
			setFieldValues0(color_list, 'initial');

			addField(preferences_list, 'show-search-box', '<n.javascript_string_encode.naml_configuration.get_value name="showSearchBox" default="true"/>', 'true', 'checkbox');
			addField(preferences_list, 'search-box-alignment', '<n.javascript_string_encode.naml_configuration.get_value name="searchBoxAlignment" default="right"/>', 'right');
			addField(preferences_list, 'show-app-title', '<n.javascript_string_encode.naml_configuration.get_value name="showAppTitle" default="true"/>', 'true', 'checkbox');
			addField(preferences_list, 'app-title-alignment', '<n.javascript_string_encode.naml_configuration.get_value name="appTitleAlignment" default="center"/>', 'center');
			addField(preferences_list, 'app-description-alignment', '<n.javascript_string_encode.naml_configuration.get_value name="appDescriptionAlignment" default="center"/>', 'center');
			addField(preferences_list, 'page-layout', '<n.javascript_string_encode.naml_configuration.get_value name="pageLayout" default="wide"/>', 'wide');
			addField(preferences_list, 'forum-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="forumTopicsPerPage" default="35"/>', '35');
			addField(preferences_list, 'blog-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="blogTopicsPerPage" default="10"/>', '10');
			addField(preferences_list, 'news-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="newsTopicsPerPage" default="25"/>', '25');
			addField(preferences_list, 'gallery-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="galleryTopicsPerPage" default="16"/>', '16');
			addField(preferences_list, 'mixed-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="mixedTopicsPerPage" default="6"/>', '6');
			addField(preferences_list, 'classic-posts-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="classicPostsPerPage" default="20"/>', '20');
			addField(preferences_list, 'picture-size-classic', '<n.javascript_string_encode.naml_configuration.get_value name="pictureSizeClassic" default="big"/>', 'big');
			addField(preferences_list, 'forum-format-', '<n.javascript_string_encode.naml_configuration.get_value name="forumFormat" default="standard"/>', 'standard', 'radio');
			setFieldValues0(preferences_list, 'initial');

			addField(css_list, 'custom-css', '<n.javascript_string_encode.naml_configuration.get_value name="customCss" default=""/>', '');
			setFieldValues0(css_list, 'initial');
		};

		function confirmRestore() {
			return confirm('Do you really want to restore the default values and lose your changes?');
		};

		function restoreFontDefaults() {
			if (confirmRestore()) {
				setFieldValues0(font_list, 'default');
				applyFont();
			}
		};

		function applyFont() {
			try {
				clearValidation();
				validateRange('#font-size', 70, 140);
			} catch(err) {
				showErrorMessage('font');
				return;
			}
			var fontSize = $('#font-size').val();
			var mainFont = $('#main-font').val();
			var titleFont = $('#title-font').val();
			var params = {};
			params['macro'] = 'save_font_config';
			params['fontSize'] = fontSize;
			params['mainFontFamily'] = mainFont;
			params['titleFontFamily'] = titleFont;
			apply(params);
		};
		function checkboxValue(selector, value) {
			if (value) $(selector).attr('checked', true);
			else $(selector).removeAttr('checked');
		};

		function restoreColorDefaults() {
			if (confirmRestore()) {
				setFieldValues0(color_list, 'default');
				applyColor();
			}
		};

		function applyColor() {
			var params = {};
			params['macro'] = 'save_color_config';
			params['bgColor'] = $('#bg-color').val();
			params['lightBgColor'] = $('#light-bg-color').val();
			params['shadedBgColor'] = $('#shaded-bg-color').val();
			params['darkBgColor'] = $('#dark-bg-color').val();
			params['highlightBgColor'] = $('#highlight-bg-color').val();
			params['textColor'] = $('#text-color').val();
			params['textWeakColor'] = $('#text-weak-color').val();
			params['titleColor'] = $('#title-color').val();
			params['linkColor'] = $('#link-color').val();
			params['linkVisitedColor'] = $('#link-visited-color').val();
			params['inputTextColor'] = $('#input-text-color').val();
			params['inputBgColor'] = $('#input-bg-color').val();
			params['lightBorderColor'] = $('#light-border-color').val();
			params['mediumBorderColor'] = $('#medium-border-color').val();
			params['darkBorderColor'] = $('#dark-border-color').val();
			params['infoBgColor'] = $('#info-bg-color').val();
			params['infoTextColor'] = $('#info-text-color').val();
			params['errorBgColor'] = $('#error-bg-color').val();
			params['errorTextColor'] = $('#error-text-color').val();
			apply(params);
		};

		function applyPreferences() {
			try {
				clearValidation();
				validateRange('#forum-topics-per-page', 1, 100);
				validateRange('#blog-topics-per-page', 1, 100);
				validateRange('#gallery-topics-per-page', 1, 100);
				validateRange('#news-topics-per-page', 1, 100);
				validateRange('#classic-posts-per-page', 1, 100);
				validateMixedCsv('#mixed-topics-per-page', 1, 20);
			} catch(err) {
				showErrorMessage('preferences');
				return;
			}
			var showSearchBox = $('#show-search-box').is(':checked');
			var searchBoxAlignment = $('#search-box-alignment').val();
			var showAppTitle = $('#show-app-title').is(':checked');
			var appTitleAlignment = $('#app-title-alignment').val();
			var appDescriptionAlignment = $('#app-description-alignment').val();
			var pageLayout = $('#page-layout').val();
			var forumTopicsPerPage = $('#forum-topics-per-page').val();
			var blogTopicsPerPage = $('#blog-topics-per-page').val();
			var galleryTopicsPerPage = $('#gallery-topics-per-page').val();
			var newsTopicsPerPage = $('#news-topics-per-page').val();
			var mixedTopicsPerPage = $('#mixed-topics-per-page').val();
			var pictureSizeClassic = $('#picture-size-classic').val();
			var classicPostsPerPage = $('#classic-posts-per-page').val();
			var forumFormat = $('#forum-format-standard').is(':checked')?'standard':'topics';
			var params = {};
			params['macro'] = 'save_preferences_config';
			params['showSearchBox'] = showSearchBox;
			params['searchBoxAlignment'] = searchBoxAlignment;
			params['showAppTitle'] = showAppTitle;
			params['appTitleAlignment'] = appTitleAlignment;
			params['appDescriptionAlignment'] = appDescriptionAlignment;
			params['pageLayout'] = pageLayout;
			params['forumTopicsPerPage'] = forumTopicsPerPage;
			params['blogTopicsPerPage'] = blogTopicsPerPage;
			params['galleryTopicsPerPage'] = galleryTopicsPerPage;
			params['newsTopicsPerPage'] = newsTopicsPerPage;
			params['mixedTopicsPerPage'] = mixedTopicsPerPage;
			params['pictureSizeClassic'] = pictureSizeClassic;
			params['classicPostsPerPage'] = classicPostsPerPage;
			params['forumFormat'] = forumFormat;
			apply(params);
		};
		function restorePreferencesDefaults() {
			if (confirmRestore()) {
				setFieldValues0(preferences_list, 'default');
				updateUI();
				applyPreferences();
			}
		};
		function applyCss() {
			var customCss = $('#custom-css').val();
			var params = {};
			params['macro'] = 'save_css_config';
			params['customCss'] = customCss;
			apply(params);
		};
		function restoreCssDefaults() {
			if (confirmRestore()) {
				setFieldValues0(css_list, 'default');
				applyCss();
			}
		};
		function apply(params) {
			if (Nabble.clientID)
				params['cid'] = Nabble.clientID;
			hideOpenMenus();
			window.preview.notice('<t>Loading...</t>');
			$('.error-message').hide();
			clearValidation();
			$.post("/template/NamlServlet.jtp", params,
				function(data) {
					window.preview.location = '<n.base_url/>';
				}
			);
		};
		function showErrorMessage(group) {
			$('#error-message-'+group).show();
		};
		function clearValidation() {
			$('.error-field').removeClass('error-field');
		};
		function updateUI() {
			checkboxEnable('#show-search-box', '#search-box-alignment');
			checkboxEnable('#show-app-title', '#app-title-alignment');
		};
		function checkboxEnable(checkbox, control) {
			var checked = $(checkbox).is(':checked');
			var $control = $(control);
			if (checked) $control.removeAttr('disabled');
			else $control.attr('disabled', true);
		};
		function setEventHandlers() {
			$('#show-search-box').change(updateUI);
			$('#show-app-title').change(updateUI);
		};
		$(document).ready(function() {
			layout();
			$(window).resize(layout);
			setEventHandlers();
			setFieldValues();
			updateUI();
			var $groups = $('span.change-appearance-group');
			$groups.hover(function(){
					$(this).css('color', selectedFont);
				}, function(){
					$(this).css('color', 'inherit');
				}
			);
			$groups.click(function(e){
				e.stopPropagation();
				var $panel = $(this).next();
				var isVisible = $panel.css('display') != 'none';
				hideOpenMenus();
				if (!isVisible)
					$panel.css('left', $(this).offset().left).slideDown('fast');
			});
			$(document).click(function(e) {
				var $t = $(e.target);
				if ($t.parents().hasClass('jscolor'))
					return;
				if ($t.parents().hasClass('change-appearance-group-panel'))
					return;
				hideOpenMenus();
			});
		});
		<![CDATA[
		function validateRange(id,from,to) {
			var $f = $(id);
			var v = $f.val();
			if (!isInteger(v) || parseInt(v) < from || parseInt(v) > to) {
				$f.addClass('error-field').focus();
				throw new Error();
			}
		};
		function validateMixedCsv(id,from,to) {
			var $f = $(id);
			var v = $f.val();
			var parts = v.split(',');
			for (var i=0; i<parts.length; i++) {
				var v = parts[i];
				if (!isInteger(v) || parseInt(v) < from || parseInt(v) > to) {
					$f.addClass('error-field').focus();
					throw new Error();
				}
			}
		};
		function isInteger(s) {
		  return (s.toString().search(/^-?[0-9]+$/) == 0);
		}
		var schemes = [];
		function addColorScheme(name, values) {
			var index = schemes.length;
			schemes.push({
				name: name,
				values: values
			});
			var h = '<div id="scheme'+index+'" class="color-scheme-row">';
			h += '<b>'+name+'</b>';
			for (var i=values.length-1;i>=0;i--) {
				h += '<div class="color-scheme" style="background:#'+values[i]+'">&nbsp;</div>';
			}
			h += '</div>';
			$('#color-schemes-panel').append(h);
			var $scheme = $(Nabble.get('scheme'+index));
			$scheme.click(function() {
				loadColorScheme(name);
			});
			$scheme.hover(function() {
				$(this).css('background-color', '#777');
			}, function() {
				$(this).css('background-color', 'transparent');
			});
		}
		function loadColorScheme(name) {
			for (var i=0;i<schemes.length;i++) {
				if (schemes[i].name == name) {
					var values = schemes[i].values;
					Nabble.get('bg-color').color.fromString(values[0]);
					Nabble.get('light-bg-color').color.fromString(values[1]);
					Nabble.get('shaded-bg-color').color.fromString(values[2]);
					Nabble.get('dark-bg-color').color.fromString(values[3]);
					Nabble.get('highlight-bg-color').color.fromString(values[4]);
					Nabble.get('text-color').color.fromString(values[5]);
					Nabble.get('text-weak-color').color.fromString(values[6]);
					Nabble.get('title-color').color.fromString(values[7]);
					Nabble.get('link-color').color.fromString(values[8]);
					Nabble.get('link-visited-color').color.fromString(values[9]);
					Nabble.get('input-text-color').color.fromString(values[10]);
					Nabble.get('input-bg-color').color.fromString(values[11]);
					Nabble.get('light-border-color').color.fromString(values[12]);
					Nabble.get('medium-border-color').color.fromString(values[13]);
					Nabble.get('dark-border-color').color.fromString(values[14]);
					Nabble.get('info-bg-color').color.fromString(values[15]);
					Nabble.get('info-text-color').color.fromString(values[16]);
					Nabble.get('error-bg-color').color.fromString(values[17]);
					Nabble.get('error-text-color').color.fromString(values[18]);
					return;
				}
			}
		};
		]]>
		$(document).ready(function() {
			addColorScheme("<t>Default</t>", ["FFFFFF", "F2F2F2", "EEEEEE", "DDDDDD", "FFFF99", "000000", "666666", "333333", "0000EE", "551A8B", "000000", "FFFFFF", "EEEEEE", "CCCCCC", "666666", "FFFFCC", "000000", "FFFFCC", "000000"]);
			addColorScheme("Desert 1", ["faf9f5", "f6f3ed", "efebe0", "e7dcc1", "ffff66", "454d4b", "807379", "4057ae", "4057ae", "4089AE", "000000", "FFFFFF", "EBE7DA", "E0DBCA", "D4CFBC", "FFFFCC", "000000", "FFFFCC", "000000"]);
			addColorScheme("Desert 2", ["F2F1ED", "E7E4DE", "D9D5C8", "D9CCAC", "FFFF66", "323836", "665C61", "465FBC", "014885", "2F6480", "000000", "FFFFFF", "C9C6B8", "B8B2A1", "A19B89", "FAFAC6", "000000", "FAFAC6", "000000"]);
			addColorScheme("Darkness", ["000000", "191919", "333333", "666666", "545500", "FFFFFF", "CCCCCC", "EEEEEE", "FFCC66", "FFFFCC", "FFFFFF", "332D25", "333333", "666666", "CCCCCC", "631900", "FFFFFF", "631900", "FFFFFF"]);
			addColorScheme("Moonlight", ["0F1528", "151C33", "1A2237", "21366E", "001C72", "9DAAD9", "CCCCCC", "EEEEEE", "75ADF5", "C4C3DF", "FFFFFF", "1E354D", "263A52", "3A536B", "4E5D7D", "1A2237", "FFFFFF", "4A0D0D", "FFFFFF"]);
			addColorScheme("Moonlight 2", ["1E2E40", "24374D", "2E4863", "365373", "7A6F33", "E3F0FF", "83ADDE", "B8B85C", "AEE0F2", "8AD1C1", "000000", "334A5E", "2D445E", "3C5A7D", "466A94", "59591D", "000000", "4A2125", "000000"]);
			addColorScheme("Jungle", ["2D3D1E", "3C4A2F", "000000", "OE24OC", "787D2F", "D6E6D4", "B1B888", "C9C42E", "64C447", "8EB85D", "000000", "0B3811", "0C1F09", "19360D", "154511", "544E14", "FFFFFF", "4D2020", "FFFFFF"]);
			addColorScheme("Princess", ["EDDCFF", "DACAE8", "FFEDF2", "DEC1E3", "C1B8FF", "000000", "26233B", "363BD1", "5A236B", "4E3170", "000000", "F0D3F0", "F3E0F6", "BBA3C4", "947696", "ABB1EB", "000000", "B2DFDF", "000000"]);
			addColorScheme("Autumn", ["FFFDF3", "FAF3DC", "F5ECD3", "E8DDC2", "FFD996", "0D0D0D", "998262", "71180C", "8B2113", "85610F", "000000", "FFFFFF", "F7E5AE", "EDDBA7", "DBCB9B", "F1E27D", "000000", "963330", "FFFFFF"]);
			addColorScheme("Dark Gray", ["3D3D3D", "333333", "191919", "000000", "545500", "FFFFFF", "CCCCCC", "EEEEEE", "FFCC66", "FFFFCC", "EEEEEE", "222222", "333333", "666666", "CCCCCC", "631900", "FFFFFF", "631900", "FFFFFF"]);
		});
	</script>
</macro>

<macro name="change_appearance_body">
	<div id="change-appearance">
		<n.add_group name="Font" contents="[n.font_editor_panel/]" apply_call="applyFont()" restore_defaults_call="restoreFontDefaults()" width="25em"/>
		<n.add_group name="Color" contents="[n.color_editor_panel/]" apply_call="applyColor()" restore_defaults_call="restoreColorDefaults()" width="25em"/>
		<n.add_group name="Preferences" contents="[n.preferences_editor_panel/]" apply_call="applyPreferences()" restore_defaults_call="restorePreferencesDefaults()" width="30em"/>
		<n.add_group name="CSS" contents="[n.css_editor_panel/]" apply_call="applyCss()" restore_defaults_call="restoreCssDefaults()" width="30em"/>
		<button style="padding:0;margin-top:-.1em" onclick="closeFrame()"><t>Close</t></button>
	</div>
	<iframe id="preview-frame" name="preview" src="[n.base_url/]" allowTransparency="false" border="0"/>
</macro>

<macro name="add_group" parameters="name, contents, apply_call, restore_defaults_call, width">
	<span class="change-appearance-group rounded">
		<n.name/>
	</span>
	<div class="change-appearance-group-panel drop-shadow" style="width:[n.width/]">
		<a class="close-link" href="javascript:void(0)" onclick="hideOpenMenus()">&times;</a>
		<n.contents/>
		<div style="text-align:right;padding-top:.5em">
			<span id="error-message-[n.to_lower_case.name/]" class="error-message">Please fix error(s) above.</span>
			<button class="toolbar action-button" onclick="[n.restore_defaults_call/]">Restore Defaults</button>
			<button class="toolbar action-button" onclick="[n.apply_call/]">
				<img src="/images/success.png" style="vertical-align:middle"/>
				Apply
			</button>
		</div>
	</div>
</macro>

<macro name="font_editor_panel">
	<table>
		<tr>
			<td class="label-column">Font Size:</td>
			<td><input type="text" size="3" maxlength="3" id="font-size" name="font-size" />%</td>
		</tr>
		<tr>
			<td></td>
			<td><div class="small-description" style="margin-bottom:1em">Value between 70 and 140% (default is 84%)</div></td>
		</tr>
		<tr>
			<td class="label-column">Main Font:</td>
			<td>
				<input type="text" size="20" maxlength="20" id="main-font" name="font" />
				<button id="main-dropdown" class="toolbar" style="font-size:80%;vertical-align:middle"><b>Choose Font</b></button>
				<n.font_selector_panel id="main-font-selector" input_id="main-font"/>
				<n.custom_dropdown clickable_id="main-dropdown" panel_id="main-font-selector"/>
			</td>
		</tr>
		<tr>
			<td></td>
			<td><div class="small-description" style="margin-bottom:1em">Leave blank for default font.</div></td>
		</tr>
		<tr>
			<td class="label-column">Title Font:</td>
			<td>
				<input type="text" size="20" maxlength="20" id="title-font" name="font" />
				<button id="title-dropdown" class="toolbar" style="font-size:80%;vertical-align:middle"><b>Choose Font</b></button>
				<n.font_selector_panel id="title-font-selector" input_id="title-font"/>
				<n.custom_dropdown clickable_id="title-dropdown" panel_id="title-font-selector"/>
			</td>
		</tr>
		<tr>
			<td></td>
			<td><div class="small-description">Leave blank for default font.</div></td>
		</tr>
	</table>
</macro>

<macro name="font_selector_panel" parameters="id, input_id">
	<div id="[n.id/]" class="dropdown-box">
		<div class="sub-section-title">Basic Fonts</div>
		<div style="padding:0 .5em;line-height:1.8em">
			<n.basic_font_option input_id="[n.input_id/]" font="Sans-serif"/>
			<n.basic_font_option input_id="[n.input_id/]" font="Tahoma"/>
			<n.basic_font_option input_id="[n.input_id/]" font="Arial"/>
			<n.basic_font_option input_id="[n.input_id/]" font="Times"/>
			<n.basic_font_option input_id="[n.input_id/]" font="Courier New"/>
			<n.basic_font_option input_id="[n.input_id/]" font="Garamond"/>
			<n.basic_font_option input_id="[n.input_id/]" font="Georgia"/>
			<n.basic_font_option input_id="[n.input_id/]" font="Trebuchet MS"/>
			<n.basic_font_option input_id="[n.input_id/]" font="Verdana"/>
		</div>

		<div class="sub-section-title">
			Google Web Fonts
		</div>
		<div style="padding:0 .5em;line-height:1.8em">
			<n.google_font_option input_id="[n.input_id/]" font="Short Stack"/>
			<n.google_font_option input_id="[n.input_id/]" font="Open Sans"/>
			<n.google_font_option input_id="[n.input_id/]" font="Alice"/>
			<n.google_font_option input_id="[n.input_id/]" font="Questrial"/>
			<n.google_font_option input_id="[n.input_id/]" font="Rokkitt"/>
			<n.google_font_option input_id="[n.input_id/]" font="Varela Round"/>
			<n.google_font_option input_id="[n.input_id/]" font="Days One"/>
			<n.google_font_option input_id="[n.input_id/]" font="Copse"/>
			<n.google_font_option input_id="[n.input_id/]" font="Quattrocento"/>
			<n.google_font_option input_id="[n.input_id/]" font="Comfortaa"/>
			<n.google_font_option input_id="[n.input_id/]" font="Play"/>
			<n.google_font_option input_id="[n.input_id/]" font="Delius Swash Caps"/>
			<n.google_font_option input_id="[n.input_id/]" font="Lobster"/>
			<n.google_font_option input_id="[n.input_id/]" font="Kelly Slab"/>
		</div>
		<div class="small-description">
			You can use any Google Web Font available (<a href="http://www.google.com/webfonts" target="_blank" rel="nofollow">view fonts</a>).
			Just type the name of the font with the prefix "GWF=" (for example, try "GWF=Marvel").
		</div>
	</div>
</macro>

<macro name="preferences_editor_panel">
	<table>
		<tr>
			<td><input type="checkbox" id="show-search-box"/></td>
			<td class="label-column"><label for="show-search-box">Show search box</label></td>
			<td>
				<select id="search-box-alignment">
					<option value="left">Left</option>
					<option value="center">Center</option>
					<option value="right">Right</option>
				</select>
			</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td><input type="checkbox" id="show-app-title"/></td>
			<td class="label-column"><label for="show-app-title">Show app title</label></td>
			<td>
				<select id="app-title-alignment">
					<option value="left">Left</option>
					<option value="center">Center</option>
					<option value="right">Right</option>
				</select>
			</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td></td>
			<td class="label-column">Description alignment</td>
			<td>
				<select id="app-description-alignment">
					<option value="left">Left</option>
					<option value="center">Center</option>
					<option value="right">Right</option>
				</select>
			</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td></td>
			<td class="label-column">Page layout</td>
			<td>
				<select id="page-layout">
					<option value="wide">Wide</option>
					<option value="narrow">Narrow</option>
				</select>
			</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td colspan="5">
				<hr color="#555" style="margin:0 0 .3em"/>
			</td>
		</tr>
		<tr>
			<td colspan="5" class="section-title">
				Topics per page
			</td>
		</tr>
		<tr>
			<td></td>
			<td class="label-column">Forum</td>
			<td><input type="text" id="forum-topics-per-page" size="3"/></td>
			<td class="label-column">Blog</td>
			<td><input type="text" id="blog-topics-per-page" size="3"/></td>
		</tr>
		<tr>
			<td></td>
			<td class="label-column">Gallery</td>
			<td><input type="text" id="gallery-topics-per-page" size="3"/></td>
			<td class="label-column">Newspaper</td>
			<td><input type="text" id="news-topics-per-page" size="3"/></td>
		</tr>
		<tr>
			<td></td>
			<td class="label-column">Mixed</td>
			<td colspan="3">
				<input type="text" id="mixed-topics-per-page" size="10"/>
				<a href="[n.help.mixed_lengths.url/]" target="_blank">help article</a>
			</td>
		</tr>
		<tr>
			<td colspan="5">
				<hr color="#555" style="margin:0 0 .3em"/>
			</td>
		</tr>
		<tr>
			<td colspan="5" class="section-title">
				Classic topic page
			</td>
		</tr>
		<tr>
			<td></td>
			<td class="label-column">Picture size</td>
			<td colspan="3">
				<select id="picture-size-classic">
					<option value="big">Big</option>
					<option value="small">Small</option>
				</select>
			</td>
		</tr>
		<tr>
			<td></td>
			<td class="label-column">Posts per page</td>
			<td colspan="3">
				<input type="text" id="classic-posts-per-page" size="3"/>
			</td>
		</tr>
		<tr>
			<td colspan="5">
				<hr color="#555" style="margin:0 0 .3em"/>
			</td>
		</tr>
		<tr>
			<td colspan="5" class="section-title">
				Forum Format
			</td>
		</tr>
		<tr>
			<td style="vertical-align:top"><input type="radio" id="forum-format-topics" name="forum-format"/></td>
			<td colspan="4">
				<label for="forum-format-topics"><b>Topics</b></label>
				<div class="small-description">
					By selecting this format, your forum will show topics from all sub-forums in a flat list.
					This means you can browse topics without having to visit sub-forums.
					This format is only useful when you have sub-forums.
				</div>
			</td>
		</tr>
		<tr>
			<td style="vertical-align:top"><input type="radio" id="forum-format-standard" name="forum-format"/></td>
			<td colspan="4">
				<label for="forum-format-standard"><b>Standard</b></label>
				<div class="small-description">
					This format shows the list of topics on your forum front page.
					If you create a child forum, it will appear as a folder on top of the topics.
					Your forum may have multi-level sub-forums, but you only see topics and forums that are 1-level below your current forum.
				</div>
			</td>
		</tr>
	</table>
</macro>

<macro name="color_editor_panel">
	<div style="margin-bottom:.4em">
		<button id="color-schemes-button" class="toolbar" style="font-size:80%;vertical-align:middle">
			<img src="/images/colors.png" width="12" height="12" style="vertical-align:middle"/>
			<b>Color Schemes</b>
		</button>
		<div id="color-schemes-panel" class="dropdown-box"></div>
		<n.custom_dropdown clickable_id="color-schemes-button" panel_id="color-schemes-panel"/>
	</div>

	<table>
		<tr>
			<td class="label-column">Background</td>
			<td><input class="color" id="bg-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Light Background</td>
			<td><input class="color" id="light-bg-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Shaded Background</td>
			<td><input class="color" id="shaded-bg-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Dark Background</td>
			<td><input class="color" id="dark-bg-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Highlight Background</td>
			<td><input class="color" id="highlight-bg-color" size="6"/></td>
		</tr>
		<tr>
			<td colspan="2">
				<hr color="#555" style="margin:0 0 .3em"/>
			</td>
		</tr>
		<tr>
			<td class="label-column">Text</td>
			<td><input class="color" id="text-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Text (Weak Color)</td>
			<td><input class="color" id="text-weak-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Title</td>
			<td><input class="color" id="title-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Link</td>
			<td><input class="color" id="link-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Link Visited</td>
			<td><input class="color" id="link-visited-color" size="6"/></td>
		</tr>
		<tr>
			<td colspan="2">
				<hr color="#555" style="margin:0 0 .3em"/>
			</td>
		</tr>
		<tr>
			<td class="label-column">Input Text</td>
			<td><input class="color" id="input-text-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Input Background</td>
			<td><input class="color" id="input-bg-color" size="6"/></td>
		</tr>
		<tr>
			<td colspan="2">
				<hr color="#555" style="margin:0 0 .3em"/>
			</td>
		</tr>
		<tr>
			<td class="label-column">Light Border</td>
			<td><input class="color" id="light-border-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Medium Border</td>
			<td><input class="color" id="medium-border-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Dark Border</td>
			<td><input class="color" id="dark-border-color" size="6"/></td>
		</tr>
		<tr>
			<td colspan="2">
				<hr color="#555" style="margin:0 0 .3em"/>
			</td>
		</tr>
		<tr>
			<td class="label-column">Info Message Background</td>
			<td><input class="color" id="info-bg-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Info Message Text</td>
			<td><input class="color" id="info-text-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Error Message Background</td>
			<td><input class="color" id="error-bg-color" size="6"/></td>
		</tr>
		<tr>
			<td class="label-column">Error Message Text</td>
			<td><input class="color" id="error-text-color" size="6"/></td>
		</tr>
	</table>
</macro>

<macro name="css_editor_panel">
	<div style="margin:.2em .2em .4em;font-weight:bold">
		Enter your custom Cascading Stylesheet (CSS) code:
	</div>
	<textarea id="custom-css" style="width:98%;height:20em"></textarea>
</macro>

<macro name="basic_font_option" parameters="input_id,font">
	<span
		class="rounded option-button"
		onclick="$('#[n.input_id/]').val('[n.font/]')"
		style="font-family:'[n.font/]'"
	><n.font/></span>
</macro>

<macro name="google_font_option" parameters="input_id,font">
	<n.put_in_head.>
		<link href="http://fonts.googleapis.com/css?family=[n.encode_url.encode_text.font/]" rel="stylesheet" type="text/css"/>
	</n.put_in_head.>
	<span
		class="rounded option-button"
		onclick="$('#[n.input_id/]').val('GWF=[n.font/]')"
		style="font-family:'[n.font/]'"
	><n.font/></span>
</macro>

<macro name="save_font_config" requires="servlet">
	<n.if.visitor.can_edit.root_node>
		<then>
			<n.naml_configuration.>
				<n.set>
					<name>fontSize</name>
					<value><n.font_size_value/></value>
					<default>84</default>
					<naml>
						<n.tweak_for_stylesheets.>
							body, input, button, textarea, select {
								font-size: <n.font_size_value/>%;
							}
						</n.tweak_for_stylesheets.>
					</naml>
				</n.set>
				<n.set>
					<name>titleFontFamily</name>
					<value><n.title_font_value/></value>
					<default></default>
					<naml>
						<n.tweak_for_font_family. selector=".second-font, h1, h2, h3, h4, h5, h6">
							<n.title_font_value/>
						</n.tweak_for_font_family.>
					</naml>
				</n.set>
				<n.set>
					<name>mainFontFamily</name>
					<value><n.main_font_value/></value>
					<default></default>
					<naml>
						<n.tweak_for_font_family. selector="body, input, button, textarea, select">
							<n.main_font_value/>
						</n.tweak_for_font_family.>
					</naml>
				</n.set>
				<n.apply/>
			</n.naml_configuration.>
		</then>
	</n.if.visitor.can_edit.root_node>
</macro>

<macro name="save_color_config" requires="servlet">
	<n.if.visitor.can_edit.root_node>
		<then>
			<n.naml_configuration.>
				<n.set_color_tweak name="bgColor" value="[n.bg_color_value/]" default="FFFFFF" selector="html,#nabble,.nabble .no-bg-color" property="background-color" macro="bg_color"/>
				<n.set_color_tweak name="lightBgColor" value="[n.light_bg_color_value/]" default="F2F2F2" selector=".nabble .light-bg-color" property="background-color" macro="light_bg_color"/>
				<n.set_color_tweak name="shadedBgColor" value="[n.shaded_bg_color_value/]" default="EEEEEE" selector=".nabble .shaded-bg-color" property="background-color" macro="shaded_bg_color"/>
				<n.set_color_tweak name="darkBgColor" value="[n.dark_bg_color_value/]" default="DDDDDD" selector=".nabble .dark-bg-color" property="background-color" macro="dark_bg_color"/>
				<n.set_color_tweak name="highlightBgColor" value="[n.highlight_bg_color_value/]" default="FFFF99" selector=".nabble .highlight" property="background-color" macro="highlight_bg_color"/>
				<n.set_color_tweak name="textColor" value="[n.text_color_value/]" default="000000" selector=".nabble *" property="color" macro="text_color"/>
				<n.set_color_tweak name="textWeakColor" value="[n.text_weak_color_value/]" default="666666" selector=".nabble .weak-color" property="color" macro="text_weak_color"/>
				<n.set_color_tweak name="titleColor" value="[n.title_color_value/]" default="333333" selector=".nabble h1, .nabble h2, .nabble h3, .nabble h4, .nabble h5, .nabble h6" property="color" macro="title_color"/>
				<n.set_color_tweak name="linkColor" value="[n.link_color_value/]" default="0000EE" selector=".nabble a:link, .nabble a.not-visited-link" property="color" macro="link_color"/>
				<n.set_color_tweak name="linkVisitedColor" value="[n.link_visited_color_value/]" default="551A8B" selector=".nabble a:visited, .nabble a.visited-link" property="color" macro="link_visited_color"/>
				<n.set_color_tweak name="inputTextColor" value="[n.input_text_color_value/]" default="000000" selector=".nabble select, .nabble input, .nabble textarea" property="color" macro="input_text_color"/>
				<n.set_color_tweak name="inputBgColor" value="[n.input_bg_color_value/]" default="FFFFFF" selector=".nabble select, .nabble input, .nabble textarea" property="background-color" macro="input_bg_color"/>
				<n.set_color_tweak name="lightBorderColor" value="[n.light_border_color_value/]" default="EEEEEE" selector=".nabble .light-border-color" property="border-color" macro="light_border_color"/>
				<n.set_color_tweak name="mediumBorderColor" value="[n.medium_border_color_value/]" default="CCCCCC" selector=".nabble .medium-border-color" property="border-color" macro="medium_border_color"/>
				<n.set_color_tweak name="darkBorderColor" value="[n.dark_border_color_value/]" default="666666" selector=".nabble .dark-border-color" property="border-color" macro="dark_border_color"/>
				<n.set_color_tweak name="infoBgColor" value="[n.info_bg_color_value/]" default="FFFFCC" selector=".nabble .info-message, .nabble .info-message *" property="background-color" macro="info_bg_color"/>
				<n.set_color_tweak name="infoTextColor" value="[n.info_text_color_value/]" default="000000" selector=".nabble .info-message, .nabble .info-message *" property="color" macro="info_text_color"/>
				<n.set_color_tweak name="errorBgColor" value="[n.error_bg_color_value/]" default="FFFFCC" selector=".nabble .error-message, .nabble .error-message *" property="background-color" macro="error_bg_color"/>
				<n.set_color_tweak name="errorTextColor" value="[n.error_text_color_value/]" default="000000" selector=".nabble .error-message, .nabble .error-message *" property="color" macro="error_text_color"/>
				<n.apply/>
			</n.naml_configuration.>
		</then>
	</n.if.visitor.can_edit.root_node>
</macro>

<macro name="set_color_tweak" parameters="name, value, default, selector, property, macro" requires="naml_configuration">
	<n.set>
		<name><n.name/></name>
		<value><n.value/></value>
		<default><n.default/></default>
		<naml>
			<![CDATA[
			<override_macro name="]]><n.macro/><![CDATA[">
				]]><n.value/><![CDATA[
			</override_macro>
			<override_macro name="site_style" unindent="true">
				<n.overridden/>]]>
				<n.selector/> { <n.property/>: #<n.value/>; }
				<![CDATA[
			</override_macro>
			]]>
		</naml>
	</n.set>
</macro>

<macro name="save_preferences_config" requires="servlet">
	<n.if.visitor.can_edit.root_node>
		<then>
			<n.naml_configuration.>
				<n.set>
					<name>showSearchBox</name>
					<value><n.show_search_box_value/></value>
					<default>true</default>
					<naml>
						<n.tweak_for_stylesheets.>
							#search-box { display: none; }
						</n.tweak_for_stylesheets.>
					</naml>
				</n.set>
				<n.set>
					<name>searchBoxAlignment</name>
					<value><n.search_box_alignment_value/></value>
					<default>right</default>
					<naml>
						<n.tweak_for_stylesheets.>
							#search-box { text-align: <n.search_box_alignment_value/>; }
						</n.tweak_for_stylesheets.>
					</naml>
				</n.set>
				<n.set>
					<name>showAppTitle</name>
					<value><n.show_app_title_value/></value>
					<default>true</default>
					<naml>
						<n.tweak_for_stylesheets.>
							#forum-title { display: none; }
						</n.tweak_for_stylesheets.>
					</naml>
				</n.set>
				<n.set>
					<name>appTitleAlignment</name>
					<value><n.app_title_alignment_value/></value>
					<default>center</default>
					<naml>
						<n.tweak_for_stylesheets.>
							#forum-title {
								float: <n.app_title_alignment_value/>;
							}
						</n.tweak_for_stylesheets.>
					</naml>
				</n.set>
				<n.set>
					<name>appDescriptionAlignment</name>
					<value><n.app_description_alignment_value/></value>
					<default>center</default>
					<naml>
						<n.tweak_for_stylesheets.>
							#description-box {
								text-align: <n.app_description_alignment_value/>;
							}
						</n.tweak_for_stylesheets.>
					</naml>
				</n.set>
				<n.set>
					<name>pageLayout</name>
					<value><n.page_layout_value/></value>
					<default>wide</default>
					<naml>
						<![CDATA[
							<override_macro name="apply_app_namespace" dot_parameter="do">
								<n.narrow_app_namespace.do />
							</override_macro>

							<override_macro name="apply_workgroup_app_namespace" dot_parameter="do">
								<n.workgroup_narrow_app_namespace.do />
							</override_macro>
						]]>
					</naml>
				</n.set>
				<n.set>
					<name>pictureSizeClassic</name>
					<value><n.picture_size_classic_value/></value>
					<default>big</default>
					<naml>
						<![CDATA[
						<override_macro name="has_small_avatar">
							true
						</override_macro>
						]]>
					</naml>
				</n.set>
				<n.set>
					<name>classicPostsPerPage</name>
					<value><n.classic_posts_per_page_value/></value>
					<default>20</default>
					<naml>
						<![CDATA[
						<override_macro name="classic_rows_per_page">
							]]><n.classic_posts_per_page_value/><![CDATA[
						</override_macro>
						]]>
					</naml>
				</n.set>
				<n.set>
					<name>forumFormat</name>
					<value><n.forum_format_value/></value>
					<default>standard</default>
					<naml>
						<![CDATA[
						<override_macro name="call_view_forum">
							<n.call_view_topics/>
						</override_macro>
						]]>
					</naml>
				</n.set>
				<n.set_tweak_for_simple_value
					name="forumTopicsPerPage"
					value="[n.forum_topics_per_page_value/]"
					default="35"
					macro="forum_topics_per_page"
				/>
				<n.set_tweak_for_simple_value
					name="blogTopicsPerPage"
					value="[n.blog_topics_per_page_value/]"
					default="10"
					macro="blog_topics_per_page"
				/>
				<n.set_tweak_for_simple_value
					name="galleryTopicsPerPage"
					value="[n.gallery_topics_per_page_value/]"
					default="16"
					macro="gallery_topics_per_page"
				/>
				<n.set_tweak_for_simple_value
					name="newsTopicsPerPage"
					value="[n.news_topics_per_page_value/]"
					default="25"
					macro="news_topics_per_page"
				/>
				<n.apply/>
				<n.set_tweak_for_simple_value
					name="mixedTopicsPerPage"
					value="[n.mixed_topics_per_page_value/]"
					default="6"
					macro="mixed_topics_per_page"
				/>
				<n.apply/>
			</n.naml_configuration.>
		</then>
	</n.if.visitor.can_edit.root_node>
</macro>

<macro name="save_css_config" requires="servlet">
	<n.if.visitor.can_edit.root_node>
		<then>
			<n.naml_configuration.>
				<n.set>
					<name>customCss</name>
					<value><n.custom_css_value/></value>
					<default></default>
					<naml>
						<n.tweak_for_stylesheets.>
							<n.custom_css_value/>
						</n.tweak_for_stylesheets.>
					</naml>
				</n.set>
				<n.apply/>
			</n.naml_configuration.>
		</then>
	</n.if.visitor.can_edit.root_node>
</macro>

<macro name="set_tweak_for_simple_value" parameters="name, value, default, macro" requires="naml_configuration">
	<n.set>
		<name><n.name/></name>
		<value><n.value/></value>
		<default><n.default/></default>
		<naml>
			<![CDATA[
			<override_macro name="]]><n.macro/><![CDATA[">
				]]><n.value/><![CDATA[
			</override_macro>
			]]>
		</naml>
	</n.set>
</macro>

<macro name="tweak_for_stylesheets" dot_parameter="code">
	<![CDATA[
	<override_macro name="site_style">
		<n.overridden/>
		]]>
			<n.compress.code/>
		<![CDATA[
	</override_macro>
	]]>
</macro>

<macro name="tweak_for_font_family" dot_parameter="font" parameters="selector">
	<![CDATA[
	<override_macro name="nabble_stylesheets" unindent="true">
		<n.overridden/>
		]]>
		<n.google_font_link.font/>
		<style type="text/css">
			<n.selector/> {
				font-family: '<n.remove_gwf_prefix.font/>';
			}
		</style>
		<![CDATA[
	</override_macro>
	]]>
</macro>

<macro name="google_font_link" dot_parameter="font">
	<n.if.starts_with text="[n.font/]" prefix="GWF=">
		<then>
			<n.set_var. name="font_name">
				<n.encode_url.encode_text.substring text="[n.font/]" begin="4"/>
			</n.set_var.>
			<![CDATA[
			<link href='http://fonts.googleapis.com/css?family=]]><n.var name='font_name'/><![CDATA[' rel='stylesheet' type='text/css'/>
			]]>
		</then>
	</n.if.starts_with>
</macro>

<macro name="remove_gwf_prefix" dot_parameter="font">
	<n.if.starts_with text="[n.font/]" prefix="GWF=">
		<then.substring text="[n.font/]" begin="4"/>
		<else.font/>
	</n.if.starts_with>
</macro>

<macro name="font_size_value">
	<n.get_parameter name="fontSize"/>
</macro>

<macro name="main_font_value">
	<n.get_parameter name="mainFontFamily"/>
</macro>

<macro name="title_font_value">
	<n.get_parameter name="titleFontFamily"/>
</macro>

<macro name="show_search_box_value">
	<n.get_parameter name="showSearchBox"/>
</macro>

<macro name="search_box_alignment_value">
	<n.get_parameter name="searchBoxAlignment"/>
</macro>

<macro name="show_app_title_value">
	<n.get_parameter name="showAppTitle"/>
</macro>

<macro name="app_title_alignment_value">
	<n.get_parameter name="appTitleAlignment"/>
</macro>

<macro name="app_description_alignment_value">
	<n.get_parameter name="appDescriptionAlignment"/>
</macro>

<macro name="picture_size_classic_value">
	<n.get_parameter name="pictureSizeClassic"/>
</macro>

<macro name="classic_posts_per_page_value">
	<n.get_parameter name="classicPostsPerPage"/>
</macro>

<macro name="forum_format_value">
	<n.get_parameter name="forumFormat"/>
</macro>

<macro name="forum_topics_per_page_value">
	<n.get_parameter name="forumTopicsPerPage"/>
</macro>

<macro name="blog_topics_per_page_value">
	<n.get_parameter name="blogTopicsPerPage"/>
</macro>

<macro name="gallery_topics_per_page_value">
	<n.get_parameter name="galleryTopicsPerPage"/>
</macro>

<macro name="news_topics_per_page_value">
	<n.get_parameter name="newsTopicsPerPage"/>
</macro>

<macro name="mixed_topics_per_page_value">
	<n.get_parameter name="mixedTopicsPerPage"/>
</macro>

<macro name="custom_css_value">
	<n.get_parameter name="customCss"/>
</macro>

<macro name="page_layout_value">
	<n.get_parameter name="pageLayout"/>
</macro>

<macro name="bg_color_value">
	<n.get_parameter name="bgColor"/>
</macro>

<macro name="light_bg_color_value">
	<n.get_parameter name="lightBgColor"/>
</macro>

<macro name="shaded_bg_color_value">
	<n.get_parameter name="shadedBgColor"/>
</macro>

<macro name="dark_bg_color_value">
	<n.get_parameter name="darkBgColor"/>
</macro>

<macro name="highlight_bg_color_value">
	<n.get_parameter name="highlightBgColor"/>
</macro>

<macro name="text_color_value">
	<n.get_parameter name="textColor"/>
</macro>

<macro name="text_weak_color_value">
	<n.get_parameter name="textWeakColor"/>
</macro>

<macro name="title_color_value">
	<n.get_parameter name="titleColor"/>
</macro>

<macro name="link_color_value">
	<n.get_parameter name="linkColor"/>
</macro>

<macro name="link_visited_color_value">
	<n.get_parameter name="linkVisitedColor"/>
</macro>

<macro name="input_text_color_value">
	<n.get_parameter name="inputTextColor"/>
</macro>

<macro name="input_bg_color_value">
	<n.get_parameter name="inputBgColor"/>
</macro>

<macro name="light_border_color_value">
	<n.get_parameter name="lightBorderColor"/>
</macro>

<macro name="medium_border_color_value">
	<n.get_parameter name="mediumBorderColor"/>
</macro>

<macro name="dark_border_color_value">
	<n.get_parameter name="darkBorderColor"/>
</macro>

<macro name="info_bg_color_value">
	<n.get_parameter name="infoBgColor"/>
</macro>

<macro name="info_text_color_value">
	<n.get_parameter name="infoTextColor"/>
</macro>

<macro name="error_bg_color_value">
	<n.get_parameter name="errorBgColor"/>
</macro>

<macro name="error_text_color_value">
	<n.get_parameter name="errorTextColor"/>
</macro>

<macro name="chance_appearance_configurations">
    fontSize,
    mainFontFamily,
    titleFontFamily,
	bgColor,
	lightBgColor,
	shadedBgColor,
	darkBgColor,
	highlightBgColor,
	textColor,
	textWeakColor,
	titleColor,
	linkColor,
	linkVisitedColor,
	inputTextColor,
	inputBgColor,
	lightBorderColor,
	mediumBorderColor,
	darkBorderColor,
	infoBgColor,
	infoTextColor,
	errorBgColor,
	errorTextColor,
	showSearchBox,
	searchBoxAlignment,
	showAppTitle,
	appTitleAlignment,
	appDescriptionAlignment,
	pageLayout,
	forumTopicsPerPage,
	blogTopicsPerPage,
	newsTopicsPerPage,
	galleryTopicsPerPage,
	mixedTopicsPerPage,
	classicPostsPerPage,
	pictureSizeClassic,
	forumFormat,
	customCss
</macro>

Macros below define the default colors of Nabble and should be used by custom designs.
Color configurations override these macros to change the colors of custom designs.

<macro name="bg_color">FFFFFF</macro>
<macro name="light_bg_color">F2F2F2</macro>
<macro name="shaded_bg_color">EEEEEE</macro>
<macro name="dark_bg_color">DDDDDD</macro>
<macro name="highlight_bg_color">FFFF99</macro>
<macro name="text_color">000000</macro>
<macro name="text_weak_color">666666</macro>
<macro name="title_color">333333</macro>
<macro name="link_color">0000EE</macro>
<macro name="link_visited_color">551A8B</macro>
<macro name="input_text_color">000000</macro>
<macro name="input_bg_color">FFFFFF</macro>
<macro name="light_border_color">EEEEEE</macro>
<macro name="medium_border_color">CCCCCC</macro>
<macro name="dark_border_color">666666</macro>
<macro name="info_bg_color">FFFFCC</macro>
<macro name="info_text_color">000000</macro>
<macro name="error_bg_color">FFFFCC</macro>
<macro name="error_text_color">000000</macro>