comparison 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
comparison
equal deleted inserted replaced
-1:000000000000 0:7ecd1a4ef557
1 <macro name="change_appearance" requires="servlet">
2 <n.if.not.visitor.can_edit.root_node>
3 <then>
4 <n.login.><t>Only authorized users can proceed in this area.</t></n.login.>
5 </then>
6 </n.if.not.visitor.can_edit.root_node>
7
8 <n.nabble_html>
9 <do>
10 <n.embedding_redirection_js/>
11 <n.change_appearance_body/>
12 </do>
13 <output>
14 <![CDATA[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">]]>
15 <html>
16 <head>
17 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
18 <title>Change appearance of <n.root_node.subject/></title>
19 <link rel="stylesheet" href="/nabble.css?v=[n.css_version/]" type="text/css" />
20 <n.change_appearance_stylesheet/>
21 <n.nabble_javascript_libraries/>
22 <script type="text/javascript" src="/util/jscolor/jscolor.js"></script>
23 <script type="text/javascript">
24 jscolor.dir = '/images/jscolor/';
25 </script>
26 <n.change_appearance_js/>
27 <n.html_head_content/>
28 </head>
29 <body>
30 <n.html_body_content/>
31 </body>
32 </html>
33 </output>
34 </n.nabble_html>
35 </macro>
36
37 <macro name="change_appearance_stylesheet">
38 <style type="text/css">
39 body {
40 margin:0;
41 padding:0;
42 overflow:hidden;
43 }
44 #change-appearance {
45 padding:.8em;
46 font: normal 1em 'Open Sans', Verdana, sans-serif;
47 color: #EEE;
48 text-shadow: 1px 1px 0 #000;
49 background: url('gradients/v30_DDDDDD88_CCCCCC00') #000 repeat-x;
50 }
51 #preview-frame {
52 position:absolute;
53 width:100%;
54 }
55 span.change-appearance-group {
56 background: url("gradients/v30_FFFFFF65_DDDDDD00") repeat-x scroll 0 0 #222222;
57 font-weight:bold;
58 padding: .2em .4em;
59 border-color: #333 #555 #888;
60 border-width:2px;
61 border-style: solid;
62 margin-right:.7em;
63 cursor: pointer;
64 white-space:nowrap;
65 }
66 div.change-appearance-group-panel {
67 background-color: #000;
68 border: 2px solid #888;
69 width:30em;
70 padding:.5em;
71 margin-top:.3em;
72 position:absolute;
73 z-index:1000;
74 display:none;
75 }
76 .weak-color {
77 color: #bbb;
78 }
79 td.label-column {
80 white-space:nowrap;
81 font-weight:bold;
82 }
83 div.sub-section-title {
84 font-size:80%;
85 margin:.3em 0 .1em;
86 padding:.2em .3em;
87 border-bottom:1px solid #777;
88 }
89 span.option-button {
90 background:#444;
91 padding:.2em .4em;
92 color:#dd0;
93 margin:0 .3em .3em 0;
94 white-space:nowrap;
95 cursor:pointer;
96 }
97 div.dropdown-box {
98 width:20em;
99 padding: .3em;
100 background:#000;
101 border:2px solid #777;
102 display:none;
103 -moz-box-shadow: 2px 2px 10px #FFFFFF;
104 -webkit-box-shadow: 2px 2px 10px #FFFFFF;
105 box-shadow: 2px 2px 10px #FFFFFF;
106 }
107 .section-title {
108 font-weight:bold;
109 color: #dd0;
110 }
111 .small-description {
112 font-size:80%;
113 padding:.3em 0;
114 color:#ddd;
115 }
116 table {
117 border-spacing:0;
118 width:100%;
119 }
120 table td {
121 padding:0;
122 }
123 .error-message {
124 color:red;
125 font-weight:bold;
126 display:none;
127 }
128 .error-field { border: 3px solid red; }
129 a:link { color:#78F; }
130 a:visited { color:#76D; }
131 a.close-link {
132 font-size:200%;
133 position:absolute;
134 right:10px;
135 top:0;
136 text-decoration:none;
137 color:white;
138 }
139 div.color-scheme-row {
140 clear:both;
141 cursor:pointer;
142 margin-bottom:.2em;
143 }
144 div.color-scheme {
145 width:8px;
146 float:right;
147 font-size:80%;
148 margin-top:2px;
149 }
150 </style>
151 </macro>
152
153 <macro name="change_appearance_js">
154 <script type="text/javascript">
155 window.isChangeAppearance = true; /* see dropdown.naml */
156 var selectedFont = '#ADE';
157 function layout() {
158 var $frm = $('#preview-frame');
159 var $w = $(window);
160 var $tbar = $('#change-appearance');
161 $frm.height($w.height()-$tbar.height()-30);
162 $frm.css('top', $tbar.height()+20);
163 };
164 function closeFrame() {
165 location = '/';
166 };
167 function hideOpenMenus() {
168 $('span.change-appearance-group').next().slideUp('fast');
169 };
170
171 var font_list = [];
172 var color_list = [];
173 var preferences_list = [];
174 var css_list = [];
175 function addField(list, id, initial, def, type) {
176 list.push({
177 'id': id,
178 'initial': initial,
179 'default': def,
180 'type': type
181 });
182 };
183 <![CDATA[
184 function setFieldValues0(list, source) {
185 for (var i=0; i < list.length; i++) {
186 var o = list[i];
187 var value = o[source];
188 if (o.type == 'checkbox')
189 checkboxValue('#'+o.id, value);
190 else if (o.type == 'radio')
191 $('#'+o.id+value).attr('checked', true);
192 else if (o.type == 'color') {
193 var input = document.getElementById(o.id);
194 if (input.color)
195 input.color.fromString(value);
196 else
197 $(input).val(value);
198 } else
199 $('#'+o.id).val(value);
200 }
201 };
202 ]]>
203 function setFieldValues() {
204 addField(font_list, 'font-size', '<n.javascript_string_encode.naml_configuration.get_value name="fontSize" default="84"/>', '84');
205 addField(font_list, 'main-font', '<n.javascript_string_encode.naml_configuration.get_value name="mainFontFamily" default=""/>', '');
206 addField(font_list, 'title-font', '<n.javascript_string_encode.naml_configuration.get_value name="titleFontFamily" default=""/>', '');
207 setFieldValues0(font_list, 'initial');
208
209 addField(color_list, 'bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="bgColor" default="FFFFFF"/>', 'FFFFFF', 'color');
210 addField(color_list, 'light-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="lightBgColor" default="F2F2F2"/>', 'F2F2F2', 'color');
211 addField(color_list, 'shaded-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="shadedBgColor" default="EEEEEE"/>', 'EEEEEE', 'color');
212 addField(color_list, 'dark-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="darkBgColor" default="DDDDDD"/>', 'DDDDDD', 'color');
213 addField(color_list, 'highlight-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="highlightBgColor" default="FFFF99"/>', 'FFFF99', 'color');
214 addField(color_list, 'text-color', '<n.javascript_string_encode.naml_configuration.get_value name="textColor" default="000000"/>', '000000', 'color');
215 addField(color_list, 'text-weak-color', '<n.javascript_string_encode.naml_configuration.get_value name="textWeakColor" default="666666"/>', '666666', 'color');
216 addField(color_list, 'title-color', '<n.javascript_string_encode.naml_configuration.get_value name="titleColor" default="333333"/>', '333333', 'color');
217 addField(color_list, 'link-color', '<n.javascript_string_encode.naml_configuration.get_value name="linkColor" default="0000EE"/>', '0000EE', 'color');
218 addField(color_list, 'link-visited-color', '<n.javascript_string_encode.naml_configuration.get_value name="linkVisitedColor" default="551A8B"/>', '551A8B', 'color');
219 addField(color_list, 'input-text-color', '<n.javascript_string_encode.naml_configuration.get_value name="inputTextColor" default="000000"/>', '000000', 'color');
220 addField(color_list, 'input-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="inputBgColor" default="FFFFFF"/>', 'FFFFFF', 'color');
221 addField(color_list, 'light-border-color', '<n.javascript_string_encode.naml_configuration.get_value name="lightBorderColor" default="EEEEEE"/>', 'EEEEEE', 'color');
222 addField(color_list, 'medium-border-color', '<n.javascript_string_encode.naml_configuration.get_value name="mediumBorderColor" default="CCCCCC"/>', 'CCCCCC', 'color');
223 addField(color_list, 'dark-border-color', '<n.javascript_string_encode.naml_configuration.get_value name="darkBorderColor" default="666666"/>', '666666', 'color');
224 addField(color_list, 'info-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="infoBgColor" default="FFFFCC"/>', 'FFFFCC', 'color');
225 addField(color_list, 'info-text-color', '<n.javascript_string_encode.naml_configuration.get_value name="infoTextColor" default="000000"/>', '000000', 'color');
226 addField(color_list, 'error-bg-color', '<n.javascript_string_encode.naml_configuration.get_value name="errorBgColor" default="FFFFCC"/>', 'FFFFCC', 'color');
227 addField(color_list, 'error-text-color', '<n.javascript_string_encode.naml_configuration.get_value name="errorTextColor" default="000000"/>', '000000', 'color');
228 setFieldValues0(color_list, 'initial');
229
230 addField(preferences_list, 'show-search-box', '<n.javascript_string_encode.naml_configuration.get_value name="showSearchBox" default="true"/>', 'true', 'checkbox');
231 addField(preferences_list, 'search-box-alignment', '<n.javascript_string_encode.naml_configuration.get_value name="searchBoxAlignment" default="right"/>', 'right');
232 addField(preferences_list, 'show-app-title', '<n.javascript_string_encode.naml_configuration.get_value name="showAppTitle" default="true"/>', 'true', 'checkbox');
233 addField(preferences_list, 'app-title-alignment', '<n.javascript_string_encode.naml_configuration.get_value name="appTitleAlignment" default="center"/>', 'center');
234 addField(preferences_list, 'app-description-alignment', '<n.javascript_string_encode.naml_configuration.get_value name="appDescriptionAlignment" default="center"/>', 'center');
235 addField(preferences_list, 'page-layout', '<n.javascript_string_encode.naml_configuration.get_value name="pageLayout" default="wide"/>', 'wide');
236 addField(preferences_list, 'forum-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="forumTopicsPerPage" default="35"/>', '35');
237 addField(preferences_list, 'blog-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="blogTopicsPerPage" default="10"/>', '10');
238 addField(preferences_list, 'news-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="newsTopicsPerPage" default="25"/>', '25');
239 addField(preferences_list, 'gallery-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="galleryTopicsPerPage" default="16"/>', '16');
240 addField(preferences_list, 'mixed-topics-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="mixedTopicsPerPage" default="6"/>', '6');
241 addField(preferences_list, 'classic-posts-per-page', '<n.javascript_string_encode.naml_configuration.get_value name="classicPostsPerPage" default="20"/>', '20');
242 addField(preferences_list, 'picture-size-classic', '<n.javascript_string_encode.naml_configuration.get_value name="pictureSizeClassic" default="big"/>', 'big');
243 addField(preferences_list, 'forum-format-', '<n.javascript_string_encode.naml_configuration.get_value name="forumFormat" default="standard"/>', 'standard', 'radio');
244 setFieldValues0(preferences_list, 'initial');
245
246 addField(css_list, 'custom-css', '<n.javascript_string_encode.naml_configuration.get_value name="customCss" default=""/>', '');
247 setFieldValues0(css_list, 'initial');
248 };
249
250 function confirmRestore() {
251 return confirm('Do you really want to restore the default values and lose your changes?');
252 };
253
254 function restoreFontDefaults() {
255 if (confirmRestore()) {
256 setFieldValues0(font_list, 'default');
257 applyFont();
258 }
259 };
260
261 function applyFont() {
262 try {
263 clearValidation();
264 validateRange('#font-size', 70, 140);
265 } catch(err) {
266 showErrorMessage('font');
267 return;
268 }
269 var fontSize = $('#font-size').val();
270 var mainFont = $('#main-font').val();
271 var titleFont = $('#title-font').val();
272 var params = {};
273 params['macro'] = 'save_font_config';
274 params['fontSize'] = fontSize;
275 params['mainFontFamily'] = mainFont;
276 params['titleFontFamily'] = titleFont;
277 apply(params);
278 };
279 function checkboxValue(selector, value) {
280 if (value) $(selector).attr('checked', true);
281 else $(selector).removeAttr('checked');
282 };
283
284 function restoreColorDefaults() {
285 if (confirmRestore()) {
286 setFieldValues0(color_list, 'default');
287 applyColor();
288 }
289 };
290
291 function applyColor() {
292 var params = {};
293 params['macro'] = 'save_color_config';
294 params['bgColor'] = $('#bg-color').val();
295 params['lightBgColor'] = $('#light-bg-color').val();
296 params['shadedBgColor'] = $('#shaded-bg-color').val();
297 params['darkBgColor'] = $('#dark-bg-color').val();
298 params['highlightBgColor'] = $('#highlight-bg-color').val();
299 params['textColor'] = $('#text-color').val();
300 params['textWeakColor'] = $('#text-weak-color').val();
301 params['titleColor'] = $('#title-color').val();
302 params['linkColor'] = $('#link-color').val();
303 params['linkVisitedColor'] = $('#link-visited-color').val();
304 params['inputTextColor'] = $('#input-text-color').val();
305 params['inputBgColor'] = $('#input-bg-color').val();
306 params['lightBorderColor'] = $('#light-border-color').val();
307 params['mediumBorderColor'] = $('#medium-border-color').val();
308 params['darkBorderColor'] = $('#dark-border-color').val();
309 params['infoBgColor'] = $('#info-bg-color').val();
310 params['infoTextColor'] = $('#info-text-color').val();
311 params['errorBgColor'] = $('#error-bg-color').val();
312 params['errorTextColor'] = $('#error-text-color').val();
313 apply(params);
314 };
315
316 function applyPreferences() {
317 try {
318 clearValidation();
319 validateRange('#forum-topics-per-page', 1, 100);
320 validateRange('#blog-topics-per-page', 1, 100);
321 validateRange('#gallery-topics-per-page', 1, 100);
322 validateRange('#news-topics-per-page', 1, 100);
323 validateRange('#classic-posts-per-page', 1, 100);
324 validateMixedCsv('#mixed-topics-per-page', 1, 20);
325 } catch(err) {
326 showErrorMessage('preferences');
327 return;
328 }
329 var showSearchBox = $('#show-search-box').is(':checked');
330 var searchBoxAlignment = $('#search-box-alignment').val();
331 var showAppTitle = $('#show-app-title').is(':checked');
332 var appTitleAlignment = $('#app-title-alignment').val();
333 var appDescriptionAlignment = $('#app-description-alignment').val();
334 var pageLayout = $('#page-layout').val();
335 var forumTopicsPerPage = $('#forum-topics-per-page').val();
336 var blogTopicsPerPage = $('#blog-topics-per-page').val();
337 var galleryTopicsPerPage = $('#gallery-topics-per-page').val();
338 var newsTopicsPerPage = $('#news-topics-per-page').val();
339 var mixedTopicsPerPage = $('#mixed-topics-per-page').val();
340 var pictureSizeClassic = $('#picture-size-classic').val();
341 var classicPostsPerPage = $('#classic-posts-per-page').val();
342 var forumFormat = $('#forum-format-standard').is(':checked')?'standard':'topics';
343 var params = {};
344 params['macro'] = 'save_preferences_config';
345 params['showSearchBox'] = showSearchBox;
346 params['searchBoxAlignment'] = searchBoxAlignment;
347 params['showAppTitle'] = showAppTitle;
348 params['appTitleAlignment'] = appTitleAlignment;
349 params['appDescriptionAlignment'] = appDescriptionAlignment;
350 params['pageLayout'] = pageLayout;
351 params['forumTopicsPerPage'] = forumTopicsPerPage;
352 params['blogTopicsPerPage'] = blogTopicsPerPage;
353 params['galleryTopicsPerPage'] = galleryTopicsPerPage;
354 params['newsTopicsPerPage'] = newsTopicsPerPage;
355 params['mixedTopicsPerPage'] = mixedTopicsPerPage;
356 params['pictureSizeClassic'] = pictureSizeClassic;
357 params['classicPostsPerPage'] = classicPostsPerPage;
358 params['forumFormat'] = forumFormat;
359 apply(params);
360 };
361 function restorePreferencesDefaults() {
362 if (confirmRestore()) {
363 setFieldValues0(preferences_list, 'default');
364 updateUI();
365 applyPreferences();
366 }
367 };
368 function applyCss() {
369 var customCss = $('#custom-css').val();
370 var params = {};
371 params['macro'] = 'save_css_config';
372 params['customCss'] = customCss;
373 apply(params);
374 };
375 function restoreCssDefaults() {
376 if (confirmRestore()) {
377 setFieldValues0(css_list, 'default');
378 applyCss();
379 }
380 };
381 function apply(params) {
382 hideOpenMenus();
383 window.preview.notice('<t>Loading...</t>');
384 $('.error-message').hide();
385 clearValidation();
386 $.post("/template/NamlServlet.jtp", params,
387 function(data) {
388 window.preview.location = '/';
389 }
390 );
391 };
392 function showErrorMessage(group) {
393 $('#error-message-'+group).show();
394 };
395 function clearValidation() {
396 $('.error-field').removeClass('error-field');
397 };
398 function updateUI() {
399 checkboxEnable('#show-search-box', '#search-box-alignment');
400 checkboxEnable('#show-app-title', '#app-title-alignment');
401 };
402 function checkboxEnable(checkbox, control) {
403 var checked = $(checkbox).is(':checked');
404 var $control = $(control);
405 if (checked) $control.removeAttr('disabled');
406 else $control.attr('disabled', true);
407 };
408 function setEventHandlers() {
409 $('#show-search-box').change(updateUI);
410 $('#show-app-title').change(updateUI);
411 };
412 $(document).ready(function() {
413 layout();
414 $(window).resize(layout);
415 setEventHandlers();
416 setFieldValues();
417 updateUI();
418 var $groups = $('span.change-appearance-group');
419 $groups.hover(function(){
420 $(this).css('color', selectedFont);
421 }, function(){
422 $(this).css('color', 'inherit');
423 }
424 );
425 $groups.click(function(e){
426 e.stopPropagation();
427 var $panel = $(this).next();
428 var isVisible = $panel.css('display') != 'none';
429 hideOpenMenus();
430 if (!isVisible)
431 $panel.css('left', $(this).offset().left).slideDown('fast');
432 });
433 $(document).click(function(e) {
434 var $t = $(e.target);
435 if ($t.parents().hasClass('jscolor'))
436 return;
437 if ($t.parents().hasClass('change-appearance-group-panel'))
438 return;
439 hideOpenMenus();
440 });
441 });
442 <![CDATA[
443 function validateRange(id,from,to) {
444 var $f = $(id);
445 var v = $f.val();
446 if (!isInteger(v) || parseInt(v) < from || parseInt(v) > to) {
447 $f.addClass('error-field').focus();
448 throw new Error();
449 }
450 };
451 function validateMixedCsv(id,from,to) {
452 var $f = $(id);
453 var v = $f.val();
454 var parts = v.split(',');
455 for (var i=0; i<parts.length; i++) {
456 var v = parts[i];
457 if (!isInteger(v) || parseInt(v) < from || parseInt(v) > to) {
458 $f.addClass('error-field').focus();
459 throw new Error();
460 }
461 }
462 };
463 function isInteger(s) {
464 return (s.toString().search(/^-?[0-9]+$/) == 0);
465 }
466 var schemes = [];
467 function addColorScheme(name, values) {
468 var index = schemes.length;
469 schemes.push({
470 name: name,
471 values: values
472 });
473 var h = '<div id="scheme'+index+'" class="color-scheme-row">';
474 h += '<b>'+name+'</b>';
475 for (var i=values.length-1;i>=0;i--) {
476 h += '<div class="color-scheme" style="background:#'+values[i]+'">&nbsp;</div>';
477 }
478 h += '</div>';
479 $('#color-schemes-panel').append(h);
480 var $scheme = $(Nabble.get('scheme'+index));
481 $scheme.click(function() {
482 loadColorScheme(name);
483 });
484 $scheme.hover(function() {
485 $(this).css('background-color', '#777');
486 }, function() {
487 $(this).css('background-color', 'transparent');
488 });
489 }
490 function loadColorScheme(name) {
491 for (var i=0;i<schemes.length;i++) {
492 if (schemes[i].name == name) {
493 var values = schemes[i].values;
494 Nabble.get('bg-color').color.fromString(values[0]);
495 Nabble.get('light-bg-color').color.fromString(values[1]);
496 Nabble.get('shaded-bg-color').color.fromString(values[2]);
497 Nabble.get('dark-bg-color').color.fromString(values[3]);
498 Nabble.get('highlight-bg-color').color.fromString(values[4]);
499 Nabble.get('text-color').color.fromString(values[5]);
500 Nabble.get('text-weak-color').color.fromString(values[6]);
501 Nabble.get('title-color').color.fromString(values[7]);
502 Nabble.get('link-color').color.fromString(values[8]);
503 Nabble.get('link-visited-color').color.fromString(values[9]);
504 Nabble.get('input-text-color').color.fromString(values[10]);
505 Nabble.get('input-bg-color').color.fromString(values[11]);
506 Nabble.get('light-border-color').color.fromString(values[12]);
507 Nabble.get('medium-border-color').color.fromString(values[13]);
508 Nabble.get('dark-border-color').color.fromString(values[14]);
509 Nabble.get('info-bg-color').color.fromString(values[15]);
510 Nabble.get('info-text-color').color.fromString(values[16]);
511 Nabble.get('error-bg-color').color.fromString(values[17]);
512 Nabble.get('error-text-color').color.fromString(values[18]);
513 return;
514 }
515 }
516 };
517 ]]>
518 $(document).ready(function() {
519 addColorScheme("<t>Default</t>", ["FFFFFF", "F2F2F2", "EEEEEE", "DDDDDD", "FFFF99", "000000", "666666", "333333", "0000EE", "551A8B", "000000", "FFFFFF", "EEEEEE", "CCCCCC", "666666", "FFFFCC", "000000", "FFFFCC", "000000"]);
520 addColorScheme("Desert 1", ["faf9f5", "f6f3ed", "efebe0", "e7dcc1", "ffff66", "454d4b", "807379", "4057ae", "4057ae", "4089AE", "000000", "FFFFFF", "EBE7DA", "E0DBCA", "D4CFBC", "FFFFCC", "000000", "FFFFCC", "000000"]);
521 addColorScheme("Desert 2", ["F2F1ED", "E7E4DE", "D9D5C8", "D9CCAC", "FFFF66", "323836", "665C61", "465FBC", "014885", "2F6480", "000000", "FFFFFF", "C9C6B8", "B8B2A1", "A19B89", "FAFAC6", "000000", "FAFAC6", "000000"]);
522 addColorScheme("Darkness", ["000000", "191919", "333333", "666666", "545500", "FFFFFF", "CCCCCC", "EEEEEE", "FFCC66", "FFFFCC", "FFFFFF", "332D25", "333333", "666666", "CCCCCC", "631900", "FFFFFF", "631900", "FFFFFF"]);
523 addColorScheme("Moonlight", ["0F1528", "151C33", "1A2237", "21366E", "001C72", "9DAAD9", "CCCCCC", "EEEEEE", "75ADF5", "C4C3DF", "FFFFFF", "1E354D", "263A52", "3A536B", "4E5D7D", "1A2237", "FFFFFF", "4A0D0D", "FFFFFF"]);
524 addColorScheme("Moonlight 2", ["1E2E40", "24374D", "2E4863", "365373", "7A6F33", "E3F0FF", "83ADDE", "B8B85C", "AEE0F2", "8AD1C1", "000000", "334A5E", "2D445E", "3C5A7D", "466A94", "59591D", "000000", "4A2125", "000000"]);
525 addColorScheme("Jungle", ["2D3D1E", "3C4A2F", "000000", "OE24OC", "787D2F", "D6E6D4", "B1B888", "C9C42E", "64C447", "8EB85D", "000000", "0B3811", "0C1F09", "19360D", "154511", "544E14", "FFFFFF", "4D2020", "FFFFFF"]);
526 addColorScheme("Princess", ["EDDCFF", "DACAE8", "FFEDF2", "DEC1E3", "C1B8FF", "000000", "26233B", "363BD1", "5A236B", "4E3170", "000000", "F0D3F0", "F3E0F6", "BBA3C4", "947696", "ABB1EB", "000000", "B2DFDF", "000000"]);
527 addColorScheme("Autumn", ["FFFDF3", "FAF3DC", "F5ECD3", "E8DDC2", "FFD996", "0D0D0D", "998262", "71180C", "8B2113", "85610F", "000000", "FFFFFF", "F7E5AE", "EDDBA7", "DBCB9B", "F1E27D", "000000", "963330", "FFFFFF"]);
528 addColorScheme("Dark Gray", ["3D3D3D", "333333", "191919", "000000", "545500", "FFFFFF", "CCCCCC", "EEEEEE", "FFCC66", "FFFFCC", "EEEEEE", "222222", "333333", "666666", "CCCCCC", "631900", "FFFFFF", "631900", "FFFFFF"]);
529 });
530 </script>
531 </macro>
532
533 <macro name="change_appearance_body">
534 <div id="change-appearance">
535 <n.add_group name="Font" contents="[n.font_editor_panel/]" apply_call="applyFont()" restore_defaults_call="restoreFontDefaults()" width="25em"/>
536 <n.add_group name="Color" contents="[n.color_editor_panel/]" apply_call="applyColor()" restore_defaults_call="restoreColorDefaults()" width="25em"/>
537 <n.add_group name="Preferences" contents="[n.preferences_editor_panel/]" apply_call="applyPreferences()" restore_defaults_call="restorePreferencesDefaults()" width="30em"/>
538 <n.add_group name="CSS" contents="[n.css_editor_panel/]" apply_call="applyCss()" restore_defaults_call="restoreCssDefaults()" width="30em"/>
539 <button style="padding:0;margin-top:-.1em" onclick="closeFrame()"><t>Close</t></button>
540 </div>
541 <iframe id="preview-frame" name="preview" src="/" allowTransparency="false" border="0"/>
542 </macro>
543
544 <macro name="add_group" parameters="name, contents, apply_call, restore_defaults_call, width">
545 <span class="change-appearance-group rounded">
546 <n.name/>
547 </span>
548 <div class="change-appearance-group-panel drop-shadow" style="width:[n.width/]">
549 <a class="close-link" href="javascript:void(0)" onclick="hideOpenMenus()">&times;</a>
550 <n.contents/>
551 <div style="text-align:right;padding-top:.5em">
552 <span id="error-message-[n.to_lower_case.name/]" class="error-message">Please fix error(s) above.</span>
553 <button class="toolbar action-button" onclick="[n.restore_defaults_call/]">Restore Defaults</button>
554 <button class="toolbar action-button" onclick="[n.apply_call/]">
555 <img src="/images/success.png" style="vertical-align:middle"/>
556 Apply
557 </button>
558 </div>
559 </div>
560 </macro>
561
562 <macro name="font_editor_panel">
563 <table>
564 <tr>
565 <td class="label-column">Font Size:</td>
566 <td><input type="text" size="3" maxlength="3" id="font-size" name="font-size" />%</td>
567 </tr>
568 <tr>
569 <td></td>
570 <td><div class="small-description" style="margin-bottom:1em">Value between 70 and 140% (default is 84%)</div></td>
571 </tr>
572 <tr>
573 <td class="label-column">Main Font:</td>
574 <td>
575 <input type="text" size="20" maxlength="20" id="main-font" name="font" />
576 <button id="main-dropdown" class="toolbar" style="font-size:80%;vertical-align:middle"><b>Choose Font</b></button>
577 <n.font_selector_panel id="main-font-selector" input_id="main-font"/>
578 <n.custom_dropdown clickable_id="main-dropdown" panel_id="main-font-selector"/>
579 </td>
580 </tr>
581 <tr>
582 <td></td>
583 <td><div class="small-description" style="margin-bottom:1em">Leave blank for default font.</div></td>
584 </tr>
585 <tr>
586 <td class="label-column">Title Font:</td>
587 <td>
588 <input type="text" size="20" maxlength="20" id="title-font" name="font" />
589 <button id="title-dropdown" class="toolbar" style="font-size:80%;vertical-align:middle"><b>Choose Font</b></button>
590 <n.font_selector_panel id="title-font-selector" input_id="title-font"/>
591 <n.custom_dropdown clickable_id="title-dropdown" panel_id="title-font-selector"/>
592 </td>
593 </tr>
594 <tr>
595 <td></td>
596 <td><div class="small-description">Leave blank for default font.</div></td>
597 </tr>
598 </table>
599 </macro>
600
601 <macro name="font_selector_panel" parameters="id, input_id">
602 <div id="[n.id/]" class="dropdown-box">
603 <div class="sub-section-title">Basic Fonts</div>
604 <div style="padding:0 .5em;line-height:1.8em">
605 <n.basic_font_option input_id="[n.input_id/]" font="Sans-serif"/>
606 <n.basic_font_option input_id="[n.input_id/]" font="Tahoma"/>
607 <n.basic_font_option input_id="[n.input_id/]" font="Arial"/>
608 <n.basic_font_option input_id="[n.input_id/]" font="Times"/>
609 <n.basic_font_option input_id="[n.input_id/]" font="Courier New"/>
610 <n.basic_font_option input_id="[n.input_id/]" font="Garamond"/>
611 <n.basic_font_option input_id="[n.input_id/]" font="Georgia"/>
612 <n.basic_font_option input_id="[n.input_id/]" font="Trebuchet MS"/>
613 <n.basic_font_option input_id="[n.input_id/]" font="Verdana"/>
614 </div>
615
616 <div class="sub-section-title">
617 Google Web Fonts
618 </div>
619 <div style="padding:0 .5em;line-height:1.8em">
620 <n.google_font_option input_id="[n.input_id/]" font="Short Stack"/>
621 <n.google_font_option input_id="[n.input_id/]" font="Open Sans"/>
622 <n.google_font_option input_id="[n.input_id/]" font="Alice"/>
623 <n.google_font_option input_id="[n.input_id/]" font="Questrial"/>
624 <n.google_font_option input_id="[n.input_id/]" font="Rokkitt"/>
625 <n.google_font_option input_id="[n.input_id/]" font="Varela Round"/>
626 <n.google_font_option input_id="[n.input_id/]" font="Days One"/>
627 <n.google_font_option input_id="[n.input_id/]" font="Copse"/>
628 <n.google_font_option input_id="[n.input_id/]" font="Quattrocento"/>
629 <n.google_font_option input_id="[n.input_id/]" font="Comfortaa"/>
630 <n.google_font_option input_id="[n.input_id/]" font="Play"/>
631 <n.google_font_option input_id="[n.input_id/]" font="Delius Swash Caps"/>
632 <n.google_font_option input_id="[n.input_id/]" font="Lobster"/>
633 <n.google_font_option input_id="[n.input_id/]" font="Kelly Slab"/>
634 </div>
635 <div class="small-description">
636 You can use any Google Web Font available (<a href="http://www.google.com/webfonts" target="_blank" rel="nofollow">view fonts</a>).
637 Just type the name of the font with the prefix "GWF=" (for example, try "GWF=Marvel").
638 </div>
639 </div>
640 </macro>
641
642 <macro name="preferences_editor_panel">
643 <table>
644 <tr>
645 <td><input type="checkbox" id="show-search-box"/></td>
646 <td class="label-column"><label for="show-search-box">Show search box</label></td>
647 <td>
648 <select id="search-box-alignment">
649 <option value="left">Left</option>
650 <option value="center">Center</option>
651 <option value="right">Right</option>
652 </select>
653 </td>
654 <td colspan="2"></td>
655 </tr>
656 <tr>
657 <td><input type="checkbox" id="show-app-title"/></td>
658 <td class="label-column"><label for="show-app-title">Show app title</label></td>
659 <td>
660 <select id="app-title-alignment">
661 <option value="left">Left</option>
662 <option value="center">Center</option>
663 <option value="right">Right</option>
664 </select>
665 </td>
666 <td colspan="2"></td>
667 </tr>
668 <tr>
669 <td></td>
670 <td class="label-column">Description alignment</td>
671 <td>
672 <select id="app-description-alignment">
673 <option value="left">Left</option>
674 <option value="center">Center</option>
675 <option value="right">Right</option>
676 </select>
677 </td>
678 <td colspan="2"></td>
679 </tr>
680 <tr>
681 <td></td>
682 <td class="label-column">Page layout</td>
683 <td>
684 <select id="page-layout">
685 <option value="wide">Wide</option>
686 <option value="narrow">Narrow</option>
687 </select>
688 </td>
689 <td colspan="2"></td>
690 </tr>
691 <tr>
692 <td colspan="5">
693 <hr color="#555" style="margin:0 0 .3em"/>
694 </td>
695 </tr>
696 <tr>
697 <td colspan="5" class="section-title">
698 Topics per page
699 </td>
700 </tr>
701 <tr>
702 <td></td>
703 <td class="label-column">Forum</td>
704 <td><input type="text" id="forum-topics-per-page" size="3"/></td>
705 <td class="label-column">Blog</td>
706 <td><input type="text" id="blog-topics-per-page" size="3"/></td>
707 </tr>
708 <tr>
709 <td></td>
710 <td class="label-column">Gallery</td>
711 <td><input type="text" id="gallery-topics-per-page" size="3"/></td>
712 <td class="label-column">Newspaper</td>
713 <td><input type="text" id="news-topics-per-page" size="3"/></td>
714 </tr>
715 <tr>
716 <td></td>
717 <td class="label-column">Mixed</td>
718 <td colspan="3">
719 <input type="text" id="mixed-topics-per-page" size="10"/>
720 <a href="[n.help.mixed_lengths.url/]" target="_blank">help article</a>
721 </td>
722 </tr>
723 <tr>
724 <td colspan="5">
725 <hr color="#555" style="margin:0 0 .3em"/>
726 </td>
727 </tr>
728 <tr>
729 <td colspan="5" class="section-title">
730 Classic topic page
731 </td>
732 </tr>
733 <tr>
734 <td></td>
735 <td class="label-column">Picture size</td>
736 <td colspan="3">
737 <select id="picture-size-classic">
738 <option value="big">Big</option>
739 <option value="small">Small</option>
740 </select>
741 </td>
742 </tr>
743 <tr>
744 <td></td>
745 <td class="label-column">Posts per page</td>
746 <td colspan="3">
747 <input type="text" id="classic-posts-per-page" size="3"/>
748 </td>
749 </tr>
750 <tr>
751 <td colspan="5">
752 <hr color="#555" style="margin:0 0 .3em"/>
753 </td>
754 </tr>
755 <tr>
756 <td colspan="5" class="section-title">
757 Forum Format
758 </td>
759 </tr>
760 <tr>
761 <td style="vertical-align:top"><input type="radio" id="forum-format-topics" name="forum-format"/></td>
762 <td colspan="4">
763 <label for="forum-format-topics"><b>Topics</b></label>
764 <div class="small-description">
765 By selecting this format, your forum will show topics from all sub-forums in a flat list.
766 This means you can browse topics without having to visit sub-forums.
767 This format is only useful when you have sub-forums.
768 </div>
769 </td>
770 </tr>
771 <tr>
772 <td style="vertical-align:top"><input type="radio" id="forum-format-standard" name="forum-format"/></td>
773 <td colspan="4">
774 <label for="forum-format-standard"><b>Standard</b></label>
775 <div class="small-description">
776 This format shows the list of topics on your forum front page.
777 If you create a child forum, it will appear as a folder on top of the topics.
778 Your forum may have multi-level sub-forums, but you only see topics and forums that are 1-level below your current forum.
779 </div>
780 </td>
781 </tr>
782 </table>
783 </macro>
784
785 <macro name="color_editor_panel">
786 <div style="margin-bottom:.4em">
787 <button id="color-schemes-button" class="toolbar" style="font-size:80%;vertical-align:middle">
788 <img src="/images/colors.png" width="12" height="12" style="vertical-align:middle"/>
789 <b>Color Schemes</b>
790 </button>
791 <div id="color-schemes-panel" class="dropdown-box"></div>
792 <n.custom_dropdown clickable_id="color-schemes-button" panel_id="color-schemes-panel"/>
793 </div>
794
795 <table>
796 <tr>
797 <td class="label-column">Background</td>
798 <td><input class="color" id="bg-color" size="6"/></td>
799 </tr>
800 <tr>
801 <td class="label-column">Light Background</td>
802 <td><input class="color" id="light-bg-color" size="6"/></td>
803 </tr>
804 <tr>
805 <td class="label-column">Shaded Background</td>
806 <td><input class="color" id="shaded-bg-color" size="6"/></td>
807 </tr>
808 <tr>
809 <td class="label-column">Dark Background</td>
810 <td><input class="color" id="dark-bg-color" size="6"/></td>
811 </tr>
812 <tr>
813 <td class="label-column">Highlight Background</td>
814 <td><input class="color" id="highlight-bg-color" size="6"/></td>
815 </tr>
816 <tr>
817 <td colspan="2">
818 <hr color="#555" style="margin:0 0 .3em"/>
819 </td>
820 </tr>
821 <tr>
822 <td class="label-column">Text</td>
823 <td><input class="color" id="text-color" size="6"/></td>
824 </tr>
825 <tr>
826 <td class="label-column">Text (Weak Color)</td>
827 <td><input class="color" id="text-weak-color" size="6"/></td>
828 </tr>
829 <tr>
830 <td class="label-column">Title</td>
831 <td><input class="color" id="title-color" size="6"/></td>
832 </tr>
833 <tr>
834 <td class="label-column">Link</td>
835 <td><input class="color" id="link-color" size="6"/></td>
836 </tr>
837 <tr>
838 <td class="label-column">Link Visited</td>
839 <td><input class="color" id="link-visited-color" size="6"/></td>
840 </tr>
841 <tr>
842 <td colspan="2">
843 <hr color="#555" style="margin:0 0 .3em"/>
844 </td>
845 </tr>
846 <tr>
847 <td class="label-column">Input Text</td>
848 <td><input class="color" id="input-text-color" size="6"/></td>
849 </tr>
850 <tr>
851 <td class="label-column">Input Background</td>
852 <td><input class="color" id="input-bg-color" size="6"/></td>
853 </tr>
854 <tr>
855 <td colspan="2">
856 <hr color="#555" style="margin:0 0 .3em"/>
857 </td>
858 </tr>
859 <tr>
860 <td class="label-column">Light Border</td>
861 <td><input class="color" id="light-border-color" size="6"/></td>
862 </tr>
863 <tr>
864 <td class="label-column">Medium Border</td>
865 <td><input class="color" id="medium-border-color" size="6"/></td>
866 </tr>
867 <tr>
868 <td class="label-column">Dark Border</td>
869 <td><input class="color" id="dark-border-color" size="6"/></td>
870 </tr>
871 <tr>
872 <td colspan="2">
873 <hr color="#555" style="margin:0 0 .3em"/>
874 </td>
875 </tr>
876 <tr>
877 <td class="label-column">Info Message Background</td>
878 <td><input class="color" id="info-bg-color" size="6"/></td>
879 </tr>
880 <tr>
881 <td class="label-column">Info Message Text</td>
882 <td><input class="color" id="info-text-color" size="6"/></td>
883 </tr>
884 <tr>
885 <td class="label-column">Error Message Background</td>
886 <td><input class="color" id="error-bg-color" size="6"/></td>
887 </tr>
888 <tr>
889 <td class="label-column">Error Message Text</td>
890 <td><input class="color" id="error-text-color" size="6"/></td>
891 </tr>
892 </table>
893 </macro>
894
895 <macro name="css_editor_panel">
896 <div style="margin:.2em .2em .4em;font-weight:bold">
897 Enter your custom Cascading Stylesheet (CSS) code:
898 </div>
899 <textarea id="custom-css" style="width:98%;height:20em"></textarea>
900 </macro>
901
902 <macro name="basic_font_option" parameters="input_id,font">
903 <span
904 class="rounded option-button"
905 onclick="$('#[n.input_id/]').val('[n.font/]')"
906 style="font-family:'[n.font/]'"
907 ><n.font/></span>
908 </macro>
909
910 <macro name="google_font_option" parameters="input_id,font">
911 <n.put_in_head.>
912 <link href="http://fonts.googleapis.com/css?family=[n.encode_url.encode_text.font/]" rel="stylesheet" type="text/css"/>
913 </n.put_in_head.>
914 <span
915 class="rounded option-button"
916 onclick="$('#[n.input_id/]').val('GWF=[n.font/]')"
917 style="font-family:'[n.font/]'"
918 ><n.font/></span>
919 </macro>
920
921 <macro name="save_font_config" requires="servlet">
922 <n.if.visitor.can_edit.root_node>
923 <then>
924 <n.naml_configuration.>
925 <n.set>
926 <name>fontSize</name>
927 <value><n.font_size_value/></value>
928 <default>84</default>
929 <naml>
930 <n.tweak_for_stylesheets.>
931 body, input, button, textarea, select {
932 font-size: <n.font_size_value/>%;
933 }
934 </n.tweak_for_stylesheets.>
935 </naml>
936 </n.set>
937 <n.set>
938 <name>titleFontFamily</name>
939 <value><n.title_font_value/></value>
940 <default></default>
941 <naml>
942 <n.tweak_for_font_family. selector=".second-font, h1, h2, h3, h4, h5, h6">
943 <n.title_font_value/>
944 </n.tweak_for_font_family.>
945 </naml>
946 </n.set>
947 <n.set>
948 <name>mainFontFamily</name>
949 <value><n.main_font_value/></value>
950 <default></default>
951 <naml>
952 <n.tweak_for_font_family. selector="body, input, button, textarea, select">
953 <n.main_font_value/>
954 </n.tweak_for_font_family.>
955 </naml>
956 </n.set>
957 <n.apply/>
958 </n.naml_configuration.>
959 </then>
960 </n.if.visitor.can_edit.root_node>
961 </macro>
962
963 <macro name="save_color_config" requires="servlet">
964 <n.if.visitor.can_edit.root_node>
965 <then>
966 <n.naml_configuration.>
967 <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"/>
968 <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"/>
969 <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"/>
970 <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"/>
971 <n.set_color_tweak name="highlightBgColor" value="[n.highlight_bg_color_value/]" default="FFFF99" selector=".nabble .highlight" property="background-color" macro="highlight_bg_color"/>
972 <n.set_color_tweak name="textColor" value="[n.text_color_value/]" default="000000" selector=".nabble *" property="color" macro="text_color"/>
973 <n.set_color_tweak name="textWeakColor" value="[n.text_weak_color_value/]" default="666666" selector=".nabble .weak-color" property="color" macro="text_weak_color"/>
974 <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"/>
975 <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"/>
976 <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"/>
977 <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"/>
978 <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"/>
979 <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"/>
980 <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"/>
981 <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"/>
982 <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"/>
983 <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"/>
984 <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"/>
985 <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"/>
986 <n.apply/>
987 </n.naml_configuration.>
988 </then>
989 </n.if.visitor.can_edit.root_node>
990 </macro>
991
992 <macro name="set_color_tweak" parameters="name, value, default, selector, property, macro" requires="naml_configuration">
993 <n.set>
994 <name><n.name/></name>
995 <value><n.value/></value>
996 <default><n.default/></default>
997 <naml>
998 <![CDATA[
999 <override_macro name="]]><n.macro/><![CDATA[">
1000 ]]><n.value/><![CDATA[
1001 </override_macro>
1002 <override_macro name="site_style" unindent="true">
1003 <n.overridden/>]]>
1004 <n.selector/> { <n.property/>: #<n.value/>; }
1005 <![CDATA[
1006 </override_macro>
1007 ]]>
1008 </naml>
1009 </n.set>
1010 </macro>
1011
1012 <macro name="save_preferences_config" requires="servlet">
1013 <n.if.visitor.can_edit.root_node>
1014 <then>
1015 <n.naml_configuration.>
1016 <n.set>
1017 <name>showSearchBox</name>
1018 <value><n.show_search_box_value/></value>
1019 <default>true</default>
1020 <naml>
1021 <n.tweak_for_stylesheets.>
1022 #search-box { display: none; }
1023 </n.tweak_for_stylesheets.>
1024 </naml>
1025 </n.set>
1026 <n.set>
1027 <name>searchBoxAlignment</name>
1028 <value><n.search_box_alignment_value/></value>
1029 <default>right</default>
1030 <naml>
1031 <n.tweak_for_stylesheets.>
1032 #search-box { text-align: <n.search_box_alignment_value/>; }
1033 </n.tweak_for_stylesheets.>
1034 </naml>
1035 </n.set>
1036 <n.set>
1037 <name>showAppTitle</name>
1038 <value><n.show_app_title_value/></value>
1039 <default>true</default>
1040 <naml>
1041 <n.tweak_for_stylesheets.>
1042 #forum-title { display: none; }
1043 </n.tweak_for_stylesheets.>
1044 </naml>
1045 </n.set>
1046 <n.set>
1047 <name>appTitleAlignment</name>
1048 <value><n.app_title_alignment_value/></value>
1049 <default>center</default>
1050 <naml>
1051 <n.tweak_for_stylesheets.>
1052 #forum-title {
1053 float: <n.app_title_alignment_value/>;
1054 }
1055 </n.tweak_for_stylesheets.>
1056 </naml>
1057 </n.set>
1058 <n.set>
1059 <name>appDescriptionAlignment</name>
1060 <value><n.app_description_alignment_value/></value>
1061 <default>center</default>
1062 <naml>
1063 <n.tweak_for_stylesheets.>
1064 #description-box {
1065 text-align: <n.app_description_alignment_value/>;
1066 }
1067 </n.tweak_for_stylesheets.>
1068 </naml>
1069 </n.set>
1070 <n.set>
1071 <name>pageLayout</name>
1072 <value><n.page_layout_value/></value>
1073 <default>wide</default>
1074 <naml>
1075 <![CDATA[
1076 <override_macro name="apply_app_namespace" dot_parameter="do">
1077 <n.narrow_app_namespace.do />
1078 </override_macro>
1079
1080 <override_macro name="apply_workgroup_app_namespace" dot_parameter="do">
1081 <n.workgroup_narrow_app_namespace.do />
1082 </override_macro>
1083 ]]>
1084 </naml>
1085 </n.set>
1086 <n.set>
1087 <name>pictureSizeClassic</name>
1088 <value><n.picture_size_classic_value/></value>
1089 <default>big</default>
1090 <naml>
1091 <![CDATA[
1092 <override_macro name="has_small_avatar">
1093 true
1094 </override_macro>
1095 ]]>
1096 </naml>
1097 </n.set>
1098 <n.set>
1099 <name>classicPostsPerPage</name>
1100 <value><n.classic_posts_per_page_value/></value>
1101 <default>20</default>
1102 <naml>
1103 <![CDATA[
1104 <override_macro name="classic_rows_per_page">
1105 ]]><n.classic_posts_per_page_value/><![CDATA[
1106 </override_macro>
1107 ]]>
1108 </naml>
1109 </n.set>
1110 <n.set>
1111 <name>forumFormat</name>
1112 <value><n.forum_format_value/></value>
1113 <default>standard</default>
1114 <naml>
1115 <![CDATA[
1116 <override_macro name="call_view_forum">
1117 <n.call_view_topics/>
1118 </override_macro>
1119 ]]>
1120 </naml>
1121 </n.set>
1122 <n.set_tweak_for_simple_value
1123 name="forumTopicsPerPage"
1124 value="[n.forum_topics_per_page_value/]"
1125 default="35"
1126 macro="forum_topics_per_page"
1127 />
1128 <n.set_tweak_for_simple_value
1129 name="blogTopicsPerPage"
1130 value="[n.blog_topics_per_page_value/]"
1131 default="10"
1132 macro="blog_topics_per_page"
1133 />
1134 <n.set_tweak_for_simple_value
1135 name="galleryTopicsPerPage"
1136 value="[n.gallery_topics_per_page_value/]"
1137 default="16"
1138 macro="gallery_topics_per_page"
1139 />
1140 <n.set_tweak_for_simple_value
1141 name="newsTopicsPerPage"
1142 value="[n.news_topics_per_page_value/]"
1143 default="25"
1144 macro="news_topics_per_page"
1145 />
1146 <n.apply/>
1147 <n.set_tweak_for_simple_value
1148 name="mixedTopicsPerPage"
1149 value="[n.mixed_topics_per_page_value/]"
1150 default="6"
1151 macro="mixed_topics_per_page"
1152 />
1153 <n.apply/>
1154 </n.naml_configuration.>
1155 </then>
1156 </n.if.visitor.can_edit.root_node>
1157 </macro>
1158
1159 <macro name="save_css_config" requires="servlet">
1160 <n.if.visitor.can_edit.root_node>
1161 <then>
1162 <n.naml_configuration.>
1163 <n.set>
1164 <name>customCss</name>
1165 <value><n.custom_css_value/></value>
1166 <default></default>
1167 <naml>
1168 <n.tweak_for_stylesheets.>
1169 <n.custom_css_value/>
1170 </n.tweak_for_stylesheets.>
1171 </naml>
1172 </n.set>
1173 <n.apply/>
1174 </n.naml_configuration.>
1175 </then>
1176 </n.if.visitor.can_edit.root_node>
1177 </macro>
1178
1179 <macro name="set_tweak_for_simple_value" parameters="name, value, default, macro" requires="naml_configuration">
1180 <n.set>
1181 <name><n.name/></name>
1182 <value><n.value/></value>
1183 <default><n.default/></default>
1184 <naml>
1185 <![CDATA[
1186 <override_macro name="]]><n.macro/><![CDATA[">
1187 ]]><n.value/><![CDATA[
1188 </override_macro>
1189 ]]>
1190 </naml>
1191 </n.set>
1192 </macro>
1193
1194 <macro name="tweak_for_stylesheets" dot_parameter="code">
1195 <![CDATA[
1196 <override_macro name="site_style">
1197 <n.overridden/>
1198 ]]>
1199 <n.compress.code/>
1200 <![CDATA[
1201 </override_macro>
1202 ]]>
1203 </macro>
1204
1205 <macro name="tweak_for_font_family" dot_parameter="font" parameters="selector">
1206 <![CDATA[
1207 <override_macro name="nabble_stylesheets" unindent="true">
1208 <n.overridden/>
1209 ]]>
1210 <n.google_font_link.font/>
1211 <style type="text/css">
1212 <n.selector/> {
1213 font-family: '<n.remove_gwf_prefix.font/>';
1214 }
1215 </style>
1216 <![CDATA[
1217 </override_macro>
1218 ]]>
1219 </macro>
1220
1221 <macro name="google_font_link" dot_parameter="font">
1222 <n.if.starts_with text="[n.font/]" prefix="GWF=">
1223 <then>
1224 <n.set_var. name="font_name">
1225 <n.encode_url.encode_text.substring text="[n.font/]" begin="4"/>
1226 </n.set_var.>
1227 <![CDATA[
1228 <link href='http://fonts.googleapis.com/css?family=]]><n.var name='font_name'/><![CDATA[' rel='stylesheet' type='text/css'/>
1229 ]]>
1230 </then>
1231 </n.if.starts_with>
1232 </macro>
1233
1234 <macro name="remove_gwf_prefix" dot_parameter="font">
1235 <n.if.starts_with text="[n.font/]" prefix="GWF=">
1236 <then.substring text="[n.font/]" begin="4"/>
1237 <else.font/>
1238 </n.if.starts_with>
1239 </macro>
1240
1241 <macro name="font_size_value">
1242 <n.get_parameter name="fontSize"/>
1243 </macro>
1244
1245 <macro name="main_font_value">
1246 <n.get_parameter name="mainFontFamily"/>
1247 </macro>
1248
1249 <macro name="title_font_value">
1250 <n.get_parameter name="titleFontFamily"/>
1251 </macro>
1252
1253 <macro name="show_search_box_value">
1254 <n.get_parameter name="showSearchBox"/>
1255 </macro>
1256
1257 <macro name="search_box_alignment_value">
1258 <n.get_parameter name="searchBoxAlignment"/>
1259 </macro>
1260
1261 <macro name="show_app_title_value">
1262 <n.get_parameter name="showAppTitle"/>
1263 </macro>
1264
1265 <macro name="app_title_alignment_value">
1266 <n.get_parameter name="appTitleAlignment"/>
1267 </macro>
1268
1269 <macro name="app_description_alignment_value">
1270 <n.get_parameter name="appDescriptionAlignment"/>
1271 </macro>
1272
1273 <macro name="picture_size_classic_value">
1274 <n.get_parameter name="pictureSizeClassic"/>
1275 </macro>
1276
1277 <macro name="classic_posts_per_page_value">
1278 <n.get_parameter name="classicPostsPerPage"/>
1279 </macro>
1280
1281 <macro name="forum_format_value">
1282 <n.get_parameter name="forumFormat"/>
1283 </macro>
1284
1285 <macro name="forum_topics_per_page_value">
1286 <n.get_parameter name="forumTopicsPerPage"/>
1287 </macro>
1288
1289 <macro name="blog_topics_per_page_value">
1290 <n.get_parameter name="blogTopicsPerPage"/>
1291 </macro>
1292
1293 <macro name="gallery_topics_per_page_value">
1294 <n.get_parameter name="galleryTopicsPerPage"/>
1295 </macro>
1296
1297 <macro name="news_topics_per_page_value">
1298 <n.get_parameter name="newsTopicsPerPage"/>
1299 </macro>
1300
1301 <macro name="mixed_topics_per_page_value">
1302 <n.get_parameter name="mixedTopicsPerPage"/>
1303 </macro>
1304
1305 <macro name="custom_css_value">
1306 <n.get_parameter name="customCss"/>
1307 </macro>
1308
1309 <macro name="page_layout_value">
1310 <n.get_parameter name="pageLayout"/>
1311 </macro>
1312
1313 <macro name="bg_color_value">
1314 <n.get_parameter name="bgColor"/>
1315 </macro>
1316
1317 <macro name="light_bg_color_value">
1318 <n.get_parameter name="lightBgColor"/>
1319 </macro>
1320
1321 <macro name="shaded_bg_color_value">
1322 <n.get_parameter name="shadedBgColor"/>
1323 </macro>
1324
1325 <macro name="dark_bg_color_value">
1326 <n.get_parameter name="darkBgColor"/>
1327 </macro>
1328
1329 <macro name="highlight_bg_color_value">
1330 <n.get_parameter name="highlightBgColor"/>
1331 </macro>
1332
1333 <macro name="text_color_value">
1334 <n.get_parameter name="textColor"/>
1335 </macro>
1336
1337 <macro name="text_weak_color_value">
1338 <n.get_parameter name="textWeakColor"/>
1339 </macro>
1340
1341 <macro name="title_color_value">
1342 <n.get_parameter name="titleColor"/>
1343 </macro>
1344
1345 <macro name="link_color_value">
1346 <n.get_parameter name="linkColor"/>
1347 </macro>
1348
1349 <macro name="link_visited_color_value">
1350 <n.get_parameter name="linkVisitedColor"/>
1351 </macro>
1352
1353 <macro name="input_text_color_value">
1354 <n.get_parameter name="inputTextColor"/>
1355 </macro>
1356
1357 <macro name="input_bg_color_value">
1358 <n.get_parameter name="inputBgColor"/>
1359 </macro>
1360
1361 <macro name="light_border_color_value">
1362 <n.get_parameter name="lightBorderColor"/>
1363 </macro>
1364
1365 <macro name="medium_border_color_value">
1366 <n.get_parameter name="mediumBorderColor"/>
1367 </macro>
1368
1369 <macro name="dark_border_color_value">
1370 <n.get_parameter name="darkBorderColor"/>
1371 </macro>
1372
1373 <macro name="info_bg_color_value">
1374 <n.get_parameter name="infoBgColor"/>
1375 </macro>
1376
1377 <macro name="info_text_color_value">
1378 <n.get_parameter name="infoTextColor"/>
1379 </macro>
1380
1381 <macro name="error_bg_color_value">
1382 <n.get_parameter name="errorBgColor"/>
1383 </macro>
1384
1385 <macro name="error_text_color_value">
1386 <n.get_parameter name="errorTextColor"/>
1387 </macro>
1388
1389 <macro name="chance_appearance_configurations">
1390 fontSize,
1391 mainFontFamily,
1392 titleFontFamily,
1393 bgColor,
1394 lightBgColor,
1395 shadedBgColor,
1396 darkBgColor,
1397 highlightBgColor,
1398 textColor,
1399 textWeakColor,
1400 titleColor,
1401 linkColor,
1402 linkVisitedColor,
1403 inputTextColor,
1404 inputBgColor,
1405 lightBorderColor,
1406 mediumBorderColor,
1407 darkBorderColor,
1408 infoBgColor,
1409 infoTextColor,
1410 errorBgColor,
1411 errorTextColor,
1412 showSearchBox,
1413 searchBoxAlignment,
1414 showAppTitle,
1415 appTitleAlignment,
1416 appDescriptionAlignment,
1417 pageLayout,
1418 forumTopicsPerPage,
1419 blogTopicsPerPage,
1420 newsTopicsPerPage,
1421 galleryTopicsPerPage,
1422 mixedTopicsPerPage,
1423 classicPostsPerPage,
1424 pictureSizeClassic,
1425 forumFormat,
1426 customCss
1427 </macro>
1428
1429 Macros below define the default colors of Nabble and should be used by custom designs.
1430 Color configurations override these macros to change the colors of custom designs.
1431
1432 <macro name="bg_color">FFFFFF</macro>
1433 <macro name="light_bg_color">F2F2F2</macro>
1434 <macro name="shaded_bg_color">EEEEEE</macro>
1435 <macro name="dark_bg_color">DDDDDD</macro>
1436 <macro name="highlight_bg_color">FFFF99</macro>
1437 <macro name="text_color">000000</macro>
1438 <macro name="text_weak_color">666666</macro>
1439 <macro name="title_color">333333</macro>
1440 <macro name="link_color">0000EE</macro>
1441 <macro name="link_visited_color">551A8B</macro>
1442 <macro name="input_text_color">000000</macro>
1443 <macro name="input_bg_color">FFFFFF</macro>
1444 <macro name="light_border_color">EEEEEE</macro>
1445 <macro name="medium_border_color">CCCCCC</macro>
1446 <macro name="dark_border_color">666666</macro>
1447 <macro name="info_bg_color">FFFFCC</macro>
1448 <macro name="info_text_color">000000</macro>
1449 <macro name="error_bg_color">FFFFCC</macro>
1450 <macro name="error_text_color">000000</macro>
1451