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

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

styles pre-definis dans le choix des couleurs (javascript) + callback sur les paginations ajax de breves

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