Mercurial Hosting > nabble
diff src/nabble/view/naml/change_appearance.naml @ 0:7ecd1a4ef557
add content
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Thu, 21 Mar 2019 19:15:52 -0600 |
| parents | |
| children | 2e504670a010 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/nabble/view/naml/change_appearance.naml Thu Mar 21 19:15:52 2019 -0600 @@ -0,0 +1,1451 @@ +<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="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> +