source: spip-zone/_squelettes_/scolaspip/trunk/formulaires/configurer_scolaspip_couleurs.html @ 60000

Last change on this file since 60000 was 60000, checked in by johan.pustoch@…, 8 years ago

on revient a une largeur de 960 par defaut (compat avec la version precedente)

File size: 16.9 KB
Line 
1<p><:scolaspip:utilise_theme:></p>
2<p><:scolaspip:utilise_theme2:></p>
3
4<div class="formulaire_spip formulaire_configurer formulaire_#FORM">
5
6[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
7[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
8
9<form method="post" action="#ENV{action}"><div>
10        #ACTION_FORMULAIRE{#ENV{action}}
11
12        <fieldset>
13                <legend><:scolaspip:couleurs_legend:></legend>
14                <ul>
15                        <li>
16                                <label class="gauche"><:scolaspip:utilise_css:></label>
17                                <div class="choix">
18                                        <label for="css_scolaspip1"><:item_oui:></label>
19                                        <input type="radio" name="css_scolaspip" id="css_scolaspip1" value="oui"  [(#ENV{css_scolaspip, oui}|=={oui}|?{checked="checked"})] />
20                                </div>
21                                <div class="choix">
22                                        <label for="css_scolaspip2"><:item_non:></label>
23                                        <input type="radio" name="css_scolaspip" id="css_scolaspip2" value="non"  [(#ENV{css_scolaspip, non}|=={non}|?{checked="checked"})] />
24                                </div>
25                        </li>
26                        <li id="personnalisation_des_couleurs">
27                                <label class="gauche"><:scolaspip:couleurs_texte:></label>
28                                <div class="choix">
29                                        <label for="couleurs1"><:item_oui:></label>
30                                        <input type="radio" name="couleurs" id="couleurs1" value="oui" onclick="$('#choix_des_couleurs').show('fast');if($('#css_scolaspip2').attr('checked')=='checked'){$('#css_scolaspip1').attr('checked','checked')}" [(#ENV{couleurs, oui}|=={oui}|?{checked="checked"})] />
31                                </div>
32                                <div class="choix">
33                                        <label for="couleurs2"><:item_non:></label>
34                                        <input type="radio" name="couleurs" id="couleurs2" value="non" onclick="$('#choix_des_couleurs').hide('fast');" [(#ENV{couleurs, non}|=={non}|?{checked="checked"})] />
35                                </div>
36                        </li>
37                </ul>
38        </fieldset>
39       
40        <fieldset id="choix_des_couleurs" style="[(#ENV{couleurs, non}|=={non}|?{"display:none"})];">
41                <legend><:scolaspip:choix_disposition:></legend>
42                <ul>
43                        <li class="sur2lignes">
44                                <label class="gauche"><:scolaspip:type_bandeau:></label>
45                                <div class="choix">
46                                        <label for="image_bandeaunon"><:scolaspip:logo_2:></label>
47                                        <input type="radio" id="image_bandeaunon" name="image_bandeau" value="non" [(#ENV{image_bandeau, non}|=={non}|?{checked="checked"})] />
48                                </div>
49                                <div class="choix">
50                                        <label for="image_bandeauoui" ><:scolaspip:logo_1:></label>
51                                        <input type="radio" id="image_bandeauoui" name="image_bandeau" value="oui" [(#ENV{image_bandeau, oui}|=={oui}|?{checked="checked"})] />
52                                </div>
53                        </li>
54                        <li class="aide"><:scolaspip:explication_titre_slogan:></li>
55                        <li>
56                                <label class="gauche"><:scolaspip:bandeau_elargi:></label>
57                                <div class="choix">
58                                        <label for="bandeau_largeoui"><:item_oui:></label>
59                                        <input type="radio" name="bandeau_large" id="bandeau_largeoui" value="100%"  [(#ENV{bandeau_large, oui}|=={100%}|?{checked="checked"})] />
60                                </div>
61                                <div class="choix">
62                                        <label for="bandeau_largenon"><:item_non:></label>
63                                        <input type="radio" name="bandeau_large" id="bandeau_largenon" value="960px"  [(#ENV{bandeau_large, non}|=={960px}|?{checked="checked"})] />
64                                </div>
65                        </li>
66                        <li>
67                                <label class="gauche"><:scolaspip:arrondi_legend:></label>
68                                <div class="choix">
69                                        <label for="arrondioui"><:item_oui:></label>
70                                        <input type="radio" name="arrondi" id="arrondioui" value="oui"  [(#ENV{arrondi, oui}|=={oui}|?{checked="checked"})] />
71                                </div>
72                                <div class="choix">
73                                        <label for="arrondinon"><:item_non:></label>
74                                        <input type="radio" name="arrondi" id="arrondinon" value="non"  [(#ENV{arrondi, non}|=={non}|?{checked="checked"})] />
75                                </div>
76                        </li>
77                        <li>
78                                <label class="gauche"><:scolaspip:activ_degrad:></label>
79                                <div class="choix">
80                                        <label for="degradesoui"><:item_oui:></label>
81                                        <input type="radio" name="degrades" id="degradesoui" value="oui"  [(#ENV{degrades, oui}|=={oui}|?{checked="checked"})] />
82                                </div>
83                                <div class="choix">
84                                        <label for="degradesnon"><:item_non:></label>
85                                        <input type="radio" name="degrades" id="degradesnon" value="non"  [(#ENV{degrades, non}|=={non}|?{checked="checked"})] />
86                                </div>
87                        </li>
88                        <li>
89                                <label class="gauche"><:scolaspip:fondcadre_legend:></label>
90                                <div class="choix">
91                                        <label for="fondcadreuni"><:scolaspip:uni:></label>
92                                        <input type="radio" name="fondcadre" id="fondcadreuni" value="uni"  [(#ENV{fondcadre, uni}|=={uni}|?{checked="checked"})] />
93                                </div>
94                                <div class="choix">
95                                        <label for="fondcadredegrade"><:scolaspip:degrade:></label>
96                                        <input type="radio" name="fondcadre" id="fondcadredegrade" value="degrade"  [(#ENV{fondcadre, degrade}|=={degrade}|?{checked="checked"})] />
97                                </div>
98                                <div class="choix">
99                                        <label for="fondcadrehachure"><:scolaspip:hachure:></label>
100                                        <input type="radio" name="fondcadre" id="fondcadrehachure" value="hachure"  [(#ENV{fondcadre, hachure}|=={hachure}|?{checked="checked"})] />
101                                </div>
102                        </li>
103                        <li>
104                                <label class="gauche"><:scolaspip:position_menu:></label>
105                                <div class="choix">
106                                        <label for="position_menugauche"><:scolaspip:gauche:></label>
107                                        <input type="radio" id="position_menugauche" name="position_menu" value="gauche" [(#ENV{position_menu, oui}|=={gauche}|?{checked="checked"})] />
108                                </div>
109                                <div class="choix">
110                                        <label for="position_menudroite"><:scolaspip:droite:></label>
111                                        <input type="radio" id="position_menudroite" name="position_menu" value="droite" [(#ENV{position_menu, droite}|=={droite}|?{checked="checked"})] />
112                                </div>
113                        </li>
114                </ul>
115        </fieldset>
116       
117        <fieldset>     
118                <legend><:scolaspip:choix_police:></legend>
119                <ul>
120                        <li>
121                                <label class="gauche" for="police_contenu"><:scolaspip:police_contenu:></label>
122                                <div class="choix">
123                                        <select name="police_contenu" >
124                                                <option value="Verdana" [(#ENV{police_contenu, Verdana}|=={Verdana}|?{selected="selected"})]>Verdana</option>
125                                                <option value="Lucida" [(#ENV{police_contenu, Lucida}|=={Lucida}|?{selected="selected"})]>Lucida</option>
126                                                <option value="Arial" [(#ENV{police_contenu, Arial}|=={Arial}|?{selected="selected"})]>Arial</option>
127                                                <option value="Trebuchet" [(#ENV{police_contenu, Trebuchet}|=={Trebuchet}|?{selected="selected"})]>Trebuchet</option>
128                                                <option value="Impact" [(#ENV{police_contenu, Impact}|=={Impact}|?{selected="selected"})]>Impact</option>
129                                        </select>
130                                </div>
131                                <label class="gauche" for="police_titres"><:scolaspip:police_titres:></label>
132                                <div class="choix">
133                                        <select name="police_titres" >
134                                                <option value="Verdana" [(#ENV{police_titres, Verdana}|=={Verdana}|?{selected="selected"})]>Verdana</option>
135                                                <option value="Lucida" [(#ENV{police_titres, Lucida}|=={Lucida}|?{selected="selected"})]>Lucida</option>
136                                                <option value="Arial" [(#ENV{police_titres, Arial}|=={Arial}|?{selected="selected"})]>Arial</option>
137                                                <option value="Trebuchet" [(#ENV{police_titres, Trebuchet}|=={Trebuchet}|?{selected="selected"})]>Trebuchet</option>
138                                                <option value="Impact" [(#ENV{police_titres, Impact}|=={Impact}|?{selected="selected"})]>Impact</option>
139                                                <option value="Times" [(#ENV{police_titres, Times}|=={Times}|?{selected="selected"})]>Times</option>
140                                                <option value="Georgia" [(#ENV{police_titres, Georgia}|=={Georgia}|?{selected="selected"})]>Georgia</option>
141                                                <option value="Baskerville" [(#ENV{police_titres, Baskerville}|=={Baskerville}|?{selected="selected"})]>Baskerville</option>
142                                                <option value="Andale" [(#ENV{police_titres, Andale}|=={Andale}|?{selected="selected"})]>Andale</option>
143                                                <option value="Courier" [(#ENV{police_titres, Courier}|=={Courier}|?{selected="selected"})]>Courier</option>
144                                        </select>
145                                </div>
146                        </li>
147                </ul>
148        </fieldset>
149       
150        <fieldset>     
151                <legend><:scolaspip:choix_couleur:></legend>
152                <p><:scolaspip:couleur_aide:></p>
153                <ul>
154                        <li>
155                                <label for="style_scolaspip"><:scolaspip:styles_predefinis:></label>
156                                <select id="style_scolaspip">
157                                        <option value="0"></option>
158                                        <option value="1">Scolaspip par défaut</option>
159                                        <option value="2">Gris et rouge</option>
160                                        <option value="3">Rouge</option>
161                                </select>
162                        </li>
163<!-- Backgrounds 5 possible + 1 survol -->                     
164                        <li>
165                                <label for="bodyfond"><:scolaspip:background_legend:></label>
166                                <input type="text" name="bodyfond" id="bodyfond" value="#ENV{bodyfond, #dddddd}" size="7" class="palette" />
167                                <p><:scolaspip:background_texte:></p>
168                        </li>
169                        <li>
170                                <label for="bandeau" ><:scolaspip:couleur_fond_bandeau_legend:></label>
171                                <input type="text" name="bandeau" id="bandeau" value="#ENV{bandeau, #4b4b4b}" size="7" class="palette"  />
172                                <p><:scolaspip:couleur_fond_bandeau_texte:></p>
173                        </li>
174                        <li>
175                                <label for="barre" ><:scolaspip:couleur_barre_legend:></label>
176                                <input type="text" name="barre" id="barre" value="#ENV{barre, #c4c4c4}" size="7" class="palette"  />
177                                <p><:scolaspip:couleur_barre_texte:></p>
178                        </li>
179                        <li>
180                                <label for="barreover" ><:scolaspip:couleur_barre_over_legend:></label>
181                                <input type="text" name="barreover" id="barreover" value="#ENV{barreover, #dddddd}" size="7" class="palette"  />
182                                <p><:scolaspip:couleur_barre_over_texte:></p>
183                        </li>
184                        <li>
185                                <label for="menufond"><:scolaspip:couleur_fond_menu_legend:></label>
186                                <input type="text" name="menufond" id="menufond" value="#ENV{menufond, #F2E19D}" size="7" class="palette"  />
187                                <p><:scolaspip:couleur_fond_menu_texte:></p>
188                        </li>
189                        <li style="border-bottom: 1px solid #ddd;">
190                                <label for="calfond"><:scolaspip:couleur_cal_legend:></label>
191                                <input type="text" name="calfond" id="calfond" value="#ENV{calfond, #edd6b5}" size="7" class="palette"  />
192                                <p><:scolaspip:couleur_cal_texte:></p>
193                                </li>
194<!-- Bordures -->
195                        <li style="border-bottom: 1px solid #ddd;">
196                                <label for="couleurbordure"><:scolaspip:couleur_bordure_legend:></label>
197                                <input type="text" name="couleurbordure"  id="couleurbordure" value="#ENV{couleurbordure, #ffcc00;}" size="7" class="palette"  />
198                                <p><:scolaspip:couleur_bordure_texte:></p>
199                        </li>
200<!-- Liens 3 types avec survol, soit 6 -->
201                        <li>
202                                <label for="liens"><:scolaspip:couleur_liens_legend:></label>
203                                <input type="text" name="liens" id="liens" value="#ENV{liens, #cc6600}" size="7" class="palette"  />
204                                <p><:scolaspip:couleur_liens_texte:></p>
205                        </li>
206                        <li>
207                                <label for="liensover" ><:scolaspip:couleur_liens_over_legend:></label>
208                                <input type="text" name="liensover" id="liensover" value="#ENV{liensover, #A85503}" size="7" class="palette"  />
209                                <p><:scolaspip:couleur_liens_over_texte:></p>
210                        </li>
211                        <li>
212                                <label for="liensmenuhorizontal"><:scolaspip:couleur_liens_menu_haut_legend:></label>
213                                <input type="text" name="liensmenuhorizontal" id="liensmenuhorizontal" value="#ENV{liensmenuhorizontal, #333333}" size="7" class="palette"  />
214                                <p><:scolaspip:couleur_liens_menu_haut_texte:></p>
215                        </li>
216                        <li>                           
217                                <label for="menurollover"><:scolaspip:liens_rollover_legend:></label>
218                                <input type="text" name="menurollover" id="menurollover" value="#ENV{menurollover, #000000}" size="7" class="palette"  />
219                                <p><:scolaspip:liens_rollover_texte:></p>
220                        </li>
221                        <li>
222                                <label for="liensmenugauche"><:scolaspip:couleur_liens_menu_legend:></label>
223                                <input type="text" name="liensmenugauche" id="liensmenugauche" value="#ENV{liensmenugauche, #A85503}" size="7" class="palette"  />
224                                <p><:scolaspip:couleur_liens_menu_texte:></p>
225                        </li>
226                        <li style="border-bottom: 1px solid #ddd;">
227                                <label for="liensmenugauchehover"><:scolaspip:couleur_liens_menu_over_legend:></label>
228                                <input type="text" name="liensmenugauchehover" id="liensmenugauchehover" value="#ENV{liensmenugauchehover, #666666}" size="7" class="palette"  />
229                                <p><:scolaspip:couleur_liens_menu_over_texte:></p>
230                        </li>
231<!-- couleurs polices  -->                     
232                        <li>
233                                <label for="couleurs_bandeau"><:scolaspip:couleurs_bandeau_legend:></label>
234                                <input type="text" name="couleurs_bandeau" id="couleurs_bandeau" value="#ENV{couleurs_bandeau, #ffffff}" size="7" class="palette"  />
235                                <p><:scolaspip:couleurs_bandeau_texte:></p>
236                        </li>
237                        <li style="border-bottom: 1px solid #ddd;">
238                                <label for="couleurs_intertitres"><:scolaspip:couleurs_intertitres_legend:></label>
239                                <input type="text" name="couleurs_intertitres" id="couleurs_intertitres" value="#ENV{couleurs_intertitres, #333333}" size="7" class="palette"  />
240                                <p><:scolaspip:couleurs_intertitres_texte:></p>
241                        </li>
242<!-- Survol sur li  -->                 
243                        <li style="border-bottom: 1px solid #ddd;">
244                                <label for="liover"><:scolaspip:couleur_li_over_legend:></label>
245                                <input type="text" name="liover" id="liover" value="#ENV{liover, #efefef}" size="7" class="palette"  />
246                                <p><:scolaspip:couleur_li_over_texte:></p>
247                        </li>
248<!-- background des cartouche ses forums -->                   
249                        <li>
250                                <label for="btcom1"><:scolaspip:boite_forum1:></label>
251                                <input type="text" name="btcom1" id="btcom1" value="#ENV{btcom1, #DDDDDD}" size="7" class="palette"  />
252                                <p><:scolaspip:boite_forum1_texte:></p>
253                        </li>
254                        <li>
255                                <label for="btcom2"><:scolaspip:boite_forum2:></label>
256                                <input type="text" name="btcom2" id="btcom2" value="#ENV{btcom2, #EEEEEE}" size="7" class="palette"  />
257                                <p><:scolaspip:boite_forum2_texte:></p>
258                        </li>
259                        <li>
260                                <label for="btcom3"><:scolaspip:boite_forum3:></label>
261                                <input type="text" name="btcom3" id="btcom3" value="#ENV{btcom3, #F4F4F4}" size="7" class="palette"  />
262                                <p><:scolaspip:boite_forum3_texte:></p>
263                        </li>
264                        <li>
265                                <label for="btcom4"><:scolaspip:boite_forum4:></label>
266                                <input type="text" name="btcom4" id="btcom4" value="#ENV{btcom4, #DDDDDD}" size="7" class="palette"  />
267                                <p><:scolaspip:boite_forum4_texte:></p>
268                        </li>
269                        <li style="border-bottom: 1px solid #ddd;">
270                                <label for="btcom5"><:scolaspip:boite_forum5:></label>
271                                <input type="text" name="btcom5" id="btcom5" value="#ENV{btcom5, #EEEEEE}" size="7" class="palette"  />
272                                <p><:scolaspip:boite_forum5_texte:></p>
273                        </li>
274                </ul>
275        </fieldset>
276        <fieldset>
277                <legend><:scolaspip:perso_css_legend:></legend>
278                <ul>
279                        <li>
280                                <label class="gauche" for="police_titres"><:scolaspip:perso_css:></label>
281                                <textarea name="persocss">#ENV{persocss, ''}</textarea>
282                        </li>
283                </ul>
284        </fieldset>
285        <p><:scolaspip:cache_couleur:></p>
286        <p class="boutons">
287                <input style="display:none;" type="submit" name="enregistrer" class="submit" value="<:bouton_valider:>" />
288                <input type="submit" name="reinit" class="submit" value="<:scolaspip:reset:>" onclick='return confirm("<:scolaspip:reinitialisation:>");'/>
289                <input type="submit" name="enregistrer" class="submit" value="<:bouton_valider:>" />
290        </p>
291        [(#BOITE_OUVRIR{<:scolaspip:export_import:>,info})]
292                <p><:scolaspip:export_import_config:></p>
293        #BOITE_FERMER   
294</div></form>
295
296</div>
297
298<style type="text/css">
299        fieldset li.aide{font-size:0.9em;padding-top:0;padding-left:1em;}
300        .formulaire_spip li label.gauche{width: 300px;}
301        .formulaire_spip li .choix{display:inline;}
302        .formulaire_spip li.sur2lignes .choix{display:block;text-align:right;padding-right:5em;}
303        .formulaire_spip li.sur2lignes label.gauche{width: 200px;}
304        #export_configuration{height: 8em;}
305</style>
306
307<script type="text/javascript">
308$(document).ready(function() {
309        var couleurs = new Array();
310        couleurs[1] = { // Par défaut
311                'bodyfond':'#dddddd',
312                'bandeau':'#4b4b4b',
313                'barre':'#c4c4c4',
314                'barreover':'#dddddd',
315                'menufond':'#F2E19D',
316                'calfond':'#edd6b5',
317                'menurollover':'#000000',
318                'couleurbordure':'#ffcc00',
319                'liens':'#cc6600',
320                'liensover':'#A85503',
321                'liensmenugauche':'#A85503',
322                'liensmenugauchehover':'#666666',
323                'liensmenuhorizontal':'#333333',
324                'liover':'#efefef',
325                'btcom1':'#DDDDDD',
326                'btcom2':'#EEEEEE',
327                'btcom3':'#F4F4F4',
328                'btcom4':'#DDDDDD',
329                'btcom5':'#EEEEEE',
330                'couleurs_bandeau':'#ffffff',
331                'couleurs_intertitres':'#333333'
332        };
333        couleurs[2] = { // Gris et Rouge
334                'bodyfond':'#ffffff',
335                'bandeau':'#333333',
336                'barre':'#c4c4c4',
337                'barreover':'#dddddd',
338                'menufond':'#ffffff',
339                'calfond':'#ffffff',
340                'menurollover':'#000000',
341                'couleurbordure':'#aa0000',
342                'liens':'#aa0000',
343                'liensover':'#ff5d00',
344                'liensmenugauche':'#aa0000',
345                'liensmenugauchehover':'#ff5d00',
346                'liensmenuhorizontal':'#333333',
347                'liover':'#efefef',
348                'btcom1':'#DDDDDD',
349                'btcom2':'#EEEEEE',
350                'btcom3':'#F4F4F4',
351                'btcom4':'#DDDDDD',
352                'btcom5':'#EEEEEE',
353                'couleurs_bandeau':'#dddddd',
354                'couleurs_intertitres':'#780808'
355        };
356        couleurs[3] = { // Rouge et gris
357                'bodyfond':'#eeeeee',
358                'bandeau':'#eeeeee',
359                'barre':'#cc0000',
360                'barreover':'#000000',
361                'menufond':'#ffffff',
362                'calfond':'#ffffff',
363                'menurollover':'#dddddd',
364                'couleurbordure':'#aa0000',
365                'liens':'#aa0000',
366                'liensover':'#ff5d00',
367                'liensmenugauche':'#aa0000',
368                'liensmenugauchehover':'#ff5d00',
369                'liensmenuhorizontal':'#ffffff',
370                'liover':'#eeeeee',
371                'btcom1':'#DDDDDD',
372                'btcom2':'#EEEEEE',
373                'btcom3':'#F4F4F4',
374                'btcom4':'#DDDDDD',
375                'btcom5':'#EEEEEE',
376                'couleurs_bandeau':'#dd0000',
377                'couleurs_intertitres':'#666666'
378        };
379        jQuery("#style_scolaspip").change(function(){
380                if (jQuery(this).val()==0) return;
381                jeu_de_couleurs = couleurs[jQuery(this).val()];
382                jQuery.each(jeu_de_couleurs, function(index, value) {
383                        element = jQuery("#"+index);
384                        if (element.hasClass("palette")) {
385                                element.attr("value",value);
386                                element.css({'background':value});
387                        }
388                });
389        });
390});
391</script>
392
Note: See TracBrowser for help on using the repository browser.