skinsedit.tt2

<!-- $Id: skinsedit.tt2 5649 2009-04-07 14:33:38Z serge.aumont -->

<h2>[%|loc%]Cascading Style Sheet[%END%]</h2>

[% IF css_result %]
<p><strong>[%|loc%]static css installation succeed. Reload the current page and/or check sympa logs to be sure that static css a really in use.[%END%]</strong></p>
[% END %]

<h2>[%|loc%]Colors[%END%]</h2>

<p>
[%|loc%]Use the color editor in order to change defined colors. First select the color you want to change and pick a color,then apply it using the test button. The new color is not really installed but it is used only for your own session. When happy with the different colors you chosen, you may save them in a new static CSS.
[%END%]
</p>

<p>
[%|loc%]
Be careful: the CSS file is overwritten using css.tt2 template, usually this file is coming from Sympa distribution so your CSS customization may be erased when doing this.[% END %]
[%|loc%]So if you want to preserve some site customization from being overwriten when starting a new sympa version, css_path and css_url should not point to the same directory.[%END%]
</p>

<form action="[% path_cgi %]" method="post">
<fieldset>
<ol><li>[%|loc%] pick the color you want to test. [%END%]
<input type="text" id="custom_color_value" name="custom_color_value" class="color" value="[% custom_color_value %]">
<input type="hidden" name="editcolors" value="1">
<input type="hidden" name="action" value="skinsedit">
</li>

<li>[%|loc%]Select the parameter you want to change: [%END%]
<select id="custom_color_number" name="custom_color_number">
<option value=""></option>
[% FOREACH col IN ['color_0' 'color_1' 'color_2' 'color_3''color_4' 'color_5' 'color_6' 'color_7' 'color_8''color_9' 'color_10' 'color_11' 'color_12' 'color_13' 'color_14' 'color_15'] %]
<option value="[%col%]" [% IF col == custom_color_number %]selected="selected"[% END %]>[%col%]</option>
[% END %]
</select>

</li>
<li>
<input class="MainMenuLinks disableIfEmpty"
  data-selector="#custom_color_number, #custom_color_value"
  type="submit" name="subaction_test"
  value="[%|loc%]test this color in my session[%END%]" />
<input class="MainMenuLinks" type="submit" name="subaction_reset" value="[%|loc%]reset colors in my session[%END%]" />
<input class="MainMenuLinks" type="submit" name="subaction_install" value="[%|loc%]Install my session colors in a new static CSS[%END%]" />
</li>
</ol>

</fieldset> 
</form>

<h3>[%|loc%]Color chart[%END%]</h3>

<p>[%|loc%]Please note that these indications don't cover the exact usage of each color parameter, as it would be far too long to describe. What lies in this table should however give you a correct snapshot of what the color parameters are used for. For more details on rendering, feel free to try changing the colors in your session to see how well all that works.[%END%]</p>

<table  id="color_table" class="responsive">
<caption>[%|loc%]This table displays every color used in Sympa, with their hexadecimal code [%END%]</caption>
<tr id="color_table_title">
<th>[%|loc%]parameter[%END%]</th>
<th>[%|loc%]parameter value[%END%]</th>
<th>[%|loc%]color lookup[%END%]</th>
<th>[%|loc%]parameter usage[%END%]</th>
</tr>
<tr>
     <td>color_0</td>
     <td>[% color_0 %]</td>
     <td style="background-color: [% color_0 %]; cursor: pointer;" onclick="chooseColorNumber('color_0','[% color_0 %]')" align="center">&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]Text background color[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_1</td>
     <td>[% color_1 %]</td>
     <td style="background-color: [% color_1 %]; cursor: pointer;" onclick="chooseColorNumber('color_1','[% color_1 %]');" align="center" >&nbsp;</td>
     <td>[%|loc%]Miscelaneous texts font color[% END %]</td>
</tr>
<tr>
     <td>color_2</td>
     <td>[% color_2 %]</td>
     <td style="background-color: [% color_2 %]; cursor: pointer;" onclick="chooseColorNumber('color_2','[% color_2 %]');"  align="center">&nbsp;</td>
     <td>[%|loc%]Titles and buttons color[% END %]</td>
</tr>
<tr>
     <td>color_3</td>
     <td>[% color_3 %]</td>
     <td style="background-color: [% color_3 %]; cursor: pointer;" onclick="chooseColorNumber('color_3','[% color_3 %]')"  align="center">&nbsp;</td>
     <td>[%|loc%]Main texts font color[%END%]</td>
</tr>
<tr>
     <td>color_4</td>
     <td>[% color_4 %]</td>
     <td style="background-color: [% color_4 %]; cursor: pointer;" onclick="chooseColorNumber('color_4','[% color_4 %]')" align="center" >&nbsp;</td>
     <td>[%|loc%]font color of:[%END%]<UL>
		<LI>[%|loc%]form labels;[%END%]</LI>
		<LI>[%|loc%]side menu titles;[%END%]</LI>
		<LI>[%|loc%]text areas in forms.[%END%]</LI>
	 </UL></td>
</tr>
<tr>
     <td>color_5</td>
     <td>[% color_5 %]</td>
     <td style="background-color: [% color_5 %]; cursor: pointer;" onclick="chooseColorNumber('color_5','[% color_5 %]')"  align="center">&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]HTTP links[%END%]</LI><LI>[%|loc%]hovered buttons[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_6</td>
     <td>[% color_6 %]</td>
     <td style="background-color: [% color_6 %]; cursor: pointer;" onclick="chooseColorNumber('color_6','[% color_6 %]')"  align="center">&nbsp;</td>
     <td><UL><LI>[%|loc%]text color of hovered links;[%END%]</LI><LI>[%|loc%]background color of buttons.[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_7</td>
     <td>[% color_7 %]</td>
     <td style="background-color: [% color_7 %]; cursor: pointer;" onclick="chooseColorNumber('color_7','[% color_7 %]')"  align="center">&nbsp;</td>
     <td>[%|loc%]text color of:[%END%]<UL><LI>[%|loc%]navigation links and buttons[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_8</td>
     <td>[% color_8 %]</td>
     <td style="background-color: [% color_8 %]; cursor: pointer;" onclick="chooseColorNumber('color_8','[% color_8 %]')"  align="center">&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]tables;[%END%]</LI><LI>[%|loc%]notice messages.[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_9</td>
     <td>[% color_9 %]</td>
     <td style="background-color: [% color_9 %]; cursor: pointer;" onclick="chooseColorNumber('color_9','[% color_9 %]')"  align="center">&nbsp;</td>
     <td>[%|loc%]border color of:[%END%]<UL><LI>[%|loc%]tables;[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_10</td>
     <td>[% color_10 %]</td>
     <td style="background-color: [% color_10 %]; cursor: pointer;" onclick="chooseColorNumber('color_10','[% color_10 %]')"  align="center">&nbsp;</td>
     <td>[%|loc%]background color of list configuration edition navigation edition links.[%END%]</td>
</tr>
<tr>
     <td>color_11</td>
     <td>[% color_11 %]</td>
     <td style="background-color: [% color_11 %]; cursor: pointer;" onclick="chooseColorNumber('color_11','[% color_11 %]')"  align="center">&nbsp;</td>
     <td>[%|loc%]background color of <b>current</b> list configuration edition navigation eidtion links.[%END%]</td>
</tr>
<tr>
     <td>color_12</td>
     <td>[% color_12 %]</td>
     <td style="background-color: [% color_12 %]; cursor: pointer;" onclick="chooseColorNumber('color_12','[% color_12 %]');" align="center" >&nbsp;</td>
     <td><UL><LI>[%|loc%]border color of form elements;[%END%]</LI><LI>[%|loc%]background color of disabled form elements[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_13</td>
     <td>[% color_13 %]</td>
     <td style="background-color: [% color_13 %]; cursor: pointer;" onclick="chooseColorNumber('color_13','[% color_13 %]')" align="center" >&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]invalid form elements[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_14</td>
     <td>[% color_14 %]</td>
     <td style="background-color: [% color_14 %]; cursor: pointer;" onclick="chooseColorNumber('color_14','[% color_14 %]')"  align="center">&nbsp;</td>
     <td>[%|loc%]Background color of ins and mark elements.[%END%]</td>
</tr>
<tr>
     <td>color_15</td>
     <td>[% color_15 %]</td>
     <td style="background-color: [% color_15 %]; cursor: pointer;" onclick="chooseColorNumber('color_15','[% color_15 %]')" align="center">&nbsp;</td>
     <td>[%|loc%]Selected text background color[%END%]</td>
</tr>
<tr>
     <td>dark_color</td>
     <td>[% dark_color %]</td>
     <td style="background-color: [% dark_color %];" >&nbsp;</td>
     <td>[%|loc%]deprecated[%END%]</td>
</tr>
<tr>
     <td>light_color</td>
     <td>[% light_color %]</td>
     <td style="background-color: [% light_color %];" >&nbsp;</td>
     <td>[%|loc%]deprecated[%END%]</td>
</tr>
<tr>
     <td>text_color</td>
     <td>[% text_color %]</td>
     <td style="background-color: [% text_color %];" >&nbsp;</td>
     <td>[%|loc%]deprecated[%END%]</td>
</tr>
<tr>
     <td>bg_color</td>
     <td>[% bg_color %]</td>
     <td style="background-color: [% bg_color %];" >&nbsp;</td>
     <td>[%|loc%]deprecated[%END%]</td>
</tr>
<tr>
     <td>selected_color</td>
     <td>[% selected_color %]</td>
     <td style="background-color: [% selected_color %];" >&nbsp;</td>
     <td>[%|loc%]deprecated[%END%]</td>
</tr>
<tr>
     <td>shaded_color</td>
     <td>[% shaded_color %]</td>
     <td style="background-color: [% shaded_color %];" >&nbsp;</td>
     <td>[%|loc%]deprecated[%END%]</td>
</tr>

</table>

<br /><br />
<!-- end skinsedit.tt2 -->