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

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

import/export avec ieconfig, début de menu déroulant pour des styles prédéfinies, etc.

File size: 15.6 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                               
151                        </li>
152                       
153                </ul>
154               
155                <legend><:scolaspip:choix_couleur:></legend>
156               
157                <p><:scolaspip:styles_predefinis:></p>
158                <select id="style_scolaspip">
159                        <option></option>
160                        <option value="1">Scolaspip 2012</option>
161                        <option value="2">ScolaSpip 2008</option>
162                        <option value="3">Rouge</option>
163                        <option value="4">Vert</option>
164                        <option value="5">Bleu</option>
165                </select>
166               
167                <p><:scolaspip:couleur_aide:></p>
168       
169                <ul>
170<!-- Backgrounds 5 possible + 1 survol -->                     
171                        <li>
172                                <label for="bodyfond"><:scolaspip:background_legend:></label>
173                                <input type="text" name="bodyfond" id="bodyfond" value="#ENV{bodyfond, #dddddd}" size="7" class="palette" />
174                                <p><:scolaspip:background_texte:></p>
175                        </li>
176                        <li>
177                                <label for="bandeau" ><:scolaspip:couleur_fond_bandeau_legend:></label>
178                                <input type="text" name="bandeau" id="bandeau" value="#ENV{bandeau, #4b4b4b}" size="7" class="palette"  />
179                                <p><:scolaspip:couleur_fond_bandeau_texte:></p>
180                        </li>
181                        <li>
182                                <label for="barre" ><:scolaspip:couleur_barre_legend:></label>
183                                <input type="text" name="barre" id="barre" value="#ENV{barre, #c4c4c4}" size="7" class="palette"  />
184                                <p><:scolaspip:couleur_barre_texte:></p>
185                        </li>
186                        <li>
187                                <label for="barreover" ><:scolaspip:couleur_barre_hover_legend:></label>
188                                <input type="text" name="barreover" id="barreover" value="#ENV{barreover, #dddddd}" size="7" class="palette"  />
189                                <p><:scolaspip:couleur_barre_hover_texte:></p>
190                        </li>
191                        <li>
192                                <label for="menufond"><:scolaspip:couleur_fond_menu_legend:></label>
193                                <input type="text" name="menufond" id="menufond" value="#ENV{menufond, #F2E19D}" size="7" class="palette"  />
194                                <p><:scolaspip:couleur_fond_menu_texte:></p>
195                        </li>
196                        <li style="border-bottom: 1px solid #ddd;">
197                                <label for="calfond"><:scolaspip:couleur_cal_legend:></label>
198                                <input type="text" name="calfond" id="calfond" value="#ENV{calfond, #edd6b5}" size="7" class="palette"  />
199                                <p><:scolaspip:couleur_cal_texte:></p>
200                                </li>
201<!-- Bordures -->
202                        <li style="border-bottom: 1px solid #ddd;">
203                                <label for="couleurbordure"><:scolaspip:couleur_bordure_legend:></label>
204                                <input type="text" name="couleurbordure"  id="couleurbordure" value="#ENV{couleurbordure, #ffcc00;}" size="7" class="palette"  />
205                                <p><:scolaspip:couleur_bordure_texte:></p>
206                        </li>
207<!-- Liens 3 types avec survol, soit 6 -->
208                        <li>
209                                <label for="liens"><:scolaspip:couleur_liens_legend:></label>
210                                <input type="text" name="liens" id="liens" value="#ENV{liens, #cc6600}" size="7" class="palette"  />
211                                <p><:scolaspip:couleur_liens_texte:></p>
212                        </li>
213                        <li>
214                                <label for="liensover" ><:scolaspip:couleur_liens_over_legend:></label>
215                                <input type="text" name="liensover" id="liensover" value="#ENV{liensover, #A85503}" size="7" class="palette"  />
216                                <p><:scolaspip:couleur_liens_over_texte:></p>
217                        </li>
218                        <li>
219                                <label for="liensmenuhorizontal"><:scolaspip:couleur_liens_menu_haut_legend:></label>
220                                <input type="text" name="liensmenuhorizontal" id="liensmenuhorizontal" value="#ENV{liensmenuhorizontal, #333333}" size="7" class="palette"  />
221                                <p><:scolaspip:couleur_liens_menu_haut_texte:></p>
222                        </li>
223                        <li>                           
224                                <label for="menurollover"><:scolaspip:liens_rollover_legend:></label>
225                                <input type="text" name="menurollover" id="menurollover" value="#ENV{menurollover, #000000}" size="7" class="palette"  />
226                                <p><:scolaspip:liens_rollover_texte:></p>
227                        </li>
228                        <li>
229                                <label for="liensmenugauche"><:scolaspip:couleur_liens_menu_legend:></label>
230                                <input type="text" name="liensmenugauche" id="liensmenugauche" value="#ENV{liensmenugauche, #A85503}" size="7" class="palette"  />
231                                <p><:scolaspip:couleur_liens_menu_texte:></p>
232                        </li>
233                        <li style="border-bottom: 1px solid #ddd;">
234                                <label for="liensmenugauchehover"><:scolaspip:couleur_liens_menu_hover_legend:></label>
235                                <input type="text" name="liensmenugauchehover" id="liensmenugauchehover" value="#ENV{liensmenugauchehover, #666666}" size="7" class="palette"  />
236                                <p><:scolaspip:couleur_liens_menu_hover_texte:></p>
237                        </li>
238<!-- couleurs polices  -->                     
239                        <li>
240                                <label for="couleurs_bandeau"><:scolaspip:couleurs_bandeau_legend:></label>
241                                <input type="text" name="couleurs_bandeau" id="couleurs_bandeau" value="#ENV{couleurs_bandeau, #ffffff}" size="7" class="palette"  />
242                                <p><:scolaspip:couleurs_bandeau_texte:></p>
243                        </li>
244                        <li style="border-bottom: 1px solid #ddd;">
245                                <label for="couleurs_intertitres"><:scolaspip:couleurs_intertitres_legend:></label>
246                                <input type="text" name="couleurs_intertitres" id="couleurs_intertitres" value="#ENV{couleurs_intertitres, #333333}" size="7" class="palette"  />
247                                <p><:scolaspip:couleurs_intertitres_texte:></p>
248                        </li>
249<!-- Survol sur li  -->                 
250                        <li style="border-bottom: 1px solid #ddd;">
251                                <label for="liover"><:scolaspip:couleur_li_over_legend:></label>
252                                <input type="text" name="liover" id="liover" value="#ENV{liover, #efefef}" size="7" class="palette"  />
253                                <p><:scolaspip:couleur_li_over_texte:></p>
254                        </li>
255<!-- background des cartouche ses forums -->                   
256                        <li>
257                                <label for="btcom1"><:scolaspip:boite_forum1:></label>
258                                <input type="text" name="btcom1" id="btcom1" value="#ENV{btcom1, #DDDDDD}" size="7" class="palette"  />
259                                <p><:scolaspip:boite_forum1_texte:></p>
260                        </li>
261                        <li>
262                                <label for="btcom2"><:scolaspip:boite_forum2:></label>
263                                <input type="text" name="btcom2" id="btcom2" value="#ENV{btcom2, #EEEEEE}" size="7" class="palette"  />
264                                <p><:scolaspip:boite_forum2_texte:></p>
265                        </li>
266                        <li>
267                                <label for="btcom3"><:scolaspip:boite_forum3:></label>
268                                <input type="text" name="btcom3" id="btcom3" value="#ENV{btcom3, #F4F4F4}" size="7" class="palette"  />
269                                <p><:scolaspip:boite_forum3_texte:></p>
270                        </li>
271                        <li>
272                                <label for="btcom4"><:scolaspip:boite_forum4:></label>
273                                <input type="text" name="btcom4" id="btcom4" value="#ENV{btcom4, #DDDDDD}" size="7" class="palette"  />
274                                <p><:scolaspip:boite_forum4_texte:></p>
275                        </li>
276                        <li style="border-bottom: 1px solid #ddd;">
277                                <label for="btcom5"><:scolaspip:boite_forum5:></label>
278                                <input type="text" name="btcom5" id="btcom5" value="#ENV{btcom5, #EEEEEE}" size="7" class="palette"  />
279                                <p><:scolaspip:boite_forum5_texte:></p>
280                        </li>
281                </ul>
282        </fieldset>
283        <fieldset>
284                <legend><:scolaspip:perso_css_legend:></legend>
285                <ul>
286                        <li>
287                                <label class="gauche" for="police_titres"><:scolaspip:perso_css:></label>
288                                <textarea name="persocss">#ENV{persocss, ''}</textarea>
289                        </li>
290                </ul>
291        </fieldset>
292        <p><:scolaspip:cache_couleur:></p>
293        <p class="boutons">
294                <input style="display:none;" type="submit" name="enregistrer" class="submit" value="<:bouton_valider:>" />
295                <input type="submit" name="reinit" class="submit" value="<:scolaspip:reset:>" />
296                <input type="submit" name="enregistrer" class="submit" value="<:bouton_valider:>" />
297        </p>
298        [(#BOITE_OUVRIR{[<:scolaspip:export_import:>(#CHEMIN_IMAGE{ieconfig-24.png}|balise_img{'',cadre-icone})],simple})]
299                <p><:scolaspip:export_import_config:></p>
300        #BOITE_FERMER   
301</div></form>
302
303
304<style type="text/css">
305        fieldset li p{font-size:0.9em;}
306        .formulaire_spip li label.gauche{width: 300px;}
307        .formulaire_spip li .choix{display:inline;}
308        .formulaire_spip li.sur2lignes .choix{display:block;text-align:right;padding-right:5em;}
309        .formulaire_spip li.sur2lignes label.gauche{width: 200px;}
310        #export_configuration{height: 8em;}
311</style>
312
313<script type="text/javascript">
314//ScolaSpip Origine
315
316jQuery(function() {
317        var couleurs = new Array();
318        couleurs[1] = {
319                'bodyfond':'#dddddd',
320                'bandeau':'#4b4b4b',
321                'barre':'#c4c4c4',
322                'barreover':'#dddddd',
323                'menufond':'#F2E19D',
324                'calfond':'#edd6b5',
325                'menurollover':'#000000',
326                'couleurbordure':'#ffcc00',
327                'liens':'#cc6600',
328                'liensover':'#A85503',
329                'liensmenugauche':'#A85503',
330                'liensmenugauchehover':'#666666',
331                'liensmenuhorizontal':'#333333',
332                'liover':'#efefef',
333                'btcom1':'#DDDDDD',
334                'btcom2':'#EEEEEE',
335                'btcom3':'#F4F4F4',
336                'btcom4':'#DDDDDD',
337                'btcom5':'#EEEEEE',
338                'couleurs_bandeau':'#ffffff',
339                'couleurs_intertitres':'#333333'
340        };
341
342        jQuery("#style_scolaspip").change(function(){
343                jeu_de_couleurs = couleurs[jQuery(this).val()];
344                jQuery.each(jeu_de_couleurs, function(index, value) {
345                        // a debugguer
346                        //jQuery("#".index).attr("value",value);
347                });
348        });
349});
350</script>
351
Note: See TracBrowser for help on using the repository browser.