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

 

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

[%|loc%]When not using css_url parameters, sympa deliver a dynamic CSS which is created using a template name css.tt2. Usually this template is comming from Sympa distribution tar. Using this CSS is not a good solution because for each clic, Sympa fcgi server is requested twice. If you use  css_url parameters the style sheet are delivered by your http server. When you install a new Sympa version and start it at the first time, the different CSS files are installed in the directory specified by css_path parameter. 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%] 


[% IF css_result %]
<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><br /><br />
[% END %]
[% IF css_path %]
<ul>
<li>[%|loc%]The css_path parameter is defined, value is[%END%] <strong>[% css_path %]</strong> </li>
<li>[%|loc%]the current definition for css location (css_url parameter) is[%END%] <a target="test" href="[% css_url %]">[% css_url %] </a><strong>[% css_warning %]</strong>.</li>

</ul><br />

	<form action="[% path_cgi %]" method="post">
	<fieldset>
	<input type="hidden" name="action" value="skinsedit" />
        <input type="hidden" name="installcss" value="1" />
        <input class="MainMenuLinks" type="submit" name="action_skinsedit" value="[%|loc%]install static css[%END%]" />
	</fieldset>
	</form>

[% ELSE %]

[%|loc(cssurl)%]Currently you have not defined the css_path parameter. <strong>You should edit the robot.conf configuration file </strong> (or if not using virtual robot, the sympa.conf file). Setting this parameter allows you to use this page to install static CSS and <strong>make sympa faster</strong>. Don't forget to set parameter css_url, it must be the URL for the directory where css are stored (current value is <a target="test" href="%1">%1</a>).[%END%]

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

[%|loc%]If you are not using css_path and css_url parameters, colors are defined in the robot.conf configuration file. Otherwise, colors are defined in the static CSS. Colors can be changed on your current session using the following color editor. When finished, you may copy the result a new CCS static file. The target is specified by css_path parameter.[%END%]
[% IF css_path %]([% css_path %])[% END %]
[%|loc%]
Be careful: the CSS file is overwritten using css.tt2 template, usually this file is comming from Sympa distribution so your CSS customization may be erased when doing this.[% END %]
</p>
<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 choosen, you may save them in a new static CSS.
[%END%]
</p>

<form action="[% path_cgi %]" method="post">
<fieldset>
<ol><li>[%|loc%] pick the color you want to test. [%END%]
<input type="text" 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">
[% 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" 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 summary="[%|loc%]This table display every colors used in Sympa, with their hexadecimal code [%END%]" id="color_table">
<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')" align="center">&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]one out of two lines in tables, alternated with color_14.[%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');" align="center" >&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]main navigation tabs;[%END%]</LI><LI>[%|loc%]most of the buttons;[%END%]</LI><LI>[%|loc%]border colors in the online help.[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_2</td>
     <td>[% color_2 %]</td>
     <td style="background-color: [% color_2 %];cursor: pointer ;" onclick="chooseColorNumber('color_2');"  align="center">&nbsp;</td>
     <td>[%|loc%]font and border color of:[%END%]<UL><LI>[%|loc%]almost everything. Exceptions for borders are &lt;TD/&gt; borders; exceptions for fonts are links, buttons and some titles.[%END%]</LI></UL></td>
</tr>
<tr>
     <td>color_3</td>
     <td>[% color_3 %]</td>
     <td style="background-color: [% color_3 %];cursor: pointer ;" onclick="chooseColorNumber('color_3')"  align="center">&nbsp;</td>
     <td>[%|loc%]unused[%END%]</td>
</tr>
<tr>
     <td>color_4</td>
     <td>[% color_4 %]</td>
     <td style="background-color: [% color_4 %];cursor: pointer ;" onclick="chooseColorNumber('color_4')" align="center" >&nbsp;</td>
     <td>[%|loc%]font color of:[%END%]<UL><LI>[%|loc%]titles;[%END%]</LI><LI>[%|loc%]hovered links.[%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')"  align="center">&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]all the main interface boxes.[%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')"  align="center">&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]buttons;[%END%]</LI><LI>[%|loc%]navigation tabs;[%END%]</LI><LI>[%|loc%]active option, if you have several buttons representing an alternative.[%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')"  align="center">&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]error messages.[%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')"  align="center">&nbsp;</td>
     <td>[%|loc%]font and border color of:[%END%]<UL><LI>[%|loc%]hovered links;[%END%]</LI><LI>[%|loc%]navigation tabs;[%END%]</LI><LI>[%|loc%]buttons;[%END%]</LI></UL>[%|loc%]background color of hovered buttons.[%END%]</td>
</tr>
<tr>
     <td>color_9</td>
     <td>[% color_9 %]</td>
     <td style="background-color: [% color_9 %];cursor: pointer ;" onclick="chooseColorNumber('color_9')"  align="center">&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]main page;[%END%]</LI><LI>[%|loc%]table headers;[%END%]</LI><LI>[%|loc%]buttons.[%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')"  align="center">&nbsp;</td>
     <td>[%|loc%]border color for forms.[%END%]</td>
</tr>
<tr>
     <td>color_11</td>
     <td>[% color_11 %]</td>
     <td style="background-color: [% color_11 %];cursor: pointer ;" onclick="chooseColorNumber('color_11')"  align="center">&nbsp;</td>
     <td>[%|loc%]border color that can be used to isolate some forms.[%END%]</td>
</tr>
<tr>
     <td>color_12</td>
     <td>[% color_12 %]</td>
     <td style="background-color: [% color_12 %];cursor: pointer ;" onclick="chooseColorNumber('color_12');" align="center" >&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]top box;[%END%]</LI><LI>[%|loc%]footer box;[%END%]</LI><LI>[%|loc%]online help buttons;[%END%]</LI></UL>[%|loc%]border color of:[%END%]<UL><LI>[%|loc%]tables;[%END%]</LI><LI>[%|loc%]side menu areas.[%END%]</LI></td>
</tr>
<tr>
     <td>color_13</td>
     <td>[% color_13 %]</td>
     <td style="background-color: [% color_13 %];cursor: pointer ;" onclick="chooseColorNumber('color_13')" align="center" >&nbsp;</td>
     <td>[%|loc%]background color of:[%END%]<UL><LI>[%|loc%]editable form areas (text areas, selection lists, etc.).[%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')"  align="center">&nbsp;</td>
     <td>[%|loc%]Default background color of the tables.[%END%]</td>
</tr>
<tr>
     <td>color_15</td>
     <td>[% color_15 %]</td>
     <td style="background-color: [% color_15 %];cursor: pointer ;" onclick="chooseColorNumber('color_15')" align="center">&nbsp;</td>
     <td>[%|loc%]unused[%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 />
<a class="actionMenuLinks" href="http://jigsaw.w3.org/css-validator/check?uri=referer">[%|loc%]W3C CSS validation tools[%END%]</a>
<br /><br />
<!-- end skinsedit.tt2 -->
