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.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 = '/';
};
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) {
hideOpenMenus();
window.preview.notice('<t>Loading...</t>');
$('.error-message').hide();
clearValidation();
$.post("/template/NamlServlet.jtp", params,
function(data) {
window.preview.location = '/';
}
);
};
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]+'"> </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="/" 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()">×</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="https://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='https://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>