source: spip-zone/_plugins_/top_bando/fonds/cfg_top_bando.html @ 47799

Last change on this file since 47799 was 47799, checked in by cy_altern@…, 10 years ago

passage a l'utilisation du plugin jQueryUI pour gerer les differentes version de jQuery en fonction des versions de SPIP

File size: 42.7 KB
Line 
1<!-- titre=<:topbando:titre_top_bando:> -->
2<!-- icone=plugin-32.png-->
3<!-- boite=<:topbando:configuration_top_bando:> -->
4
5[(#PLUGIN{autorite}|oui)
6<!-- autoriser=webmestre -->
7<!-- refus=Seuls les webmestres du site sont autoris&#233;s &#224;
8modifier les param&#232;tres. Pour en savoir plus,
9voir <a href="http://www.spip-contrib.net/-Autorite-">la documentation</a>. -->
10]
11[(#PLUGIN{autorite}|non)
12<!-- autoriser=0minirezo -->
13<!-- refus=Seuls les administrateurs du site sont autoris&#233;s &#224;
14modifier ces param&#232;tres.  -->
15]
16
17<!-- descriptif=
18<h4><:topbando:descriptif_configuration:></h4>
19-->
20
21<!-- head=
22       
23        <style type="text/css">
24        table.def td{padding-left:1em; padding-right:1em;}
25  .previsu_titre:hover, .previsu_logo:hover, .oeil_voir:hover { cursor: pointer; }
26  #bando_logo, #bando_titre { border: solid 1px #DDD; }
27        </style>
28
29-->
30#CACHE{0}
31<!--
32[(#SET{largeur_entete,[(#ENV{largeur_entete}|=={100%}|?{[(#LOGO_SITE_SPIP_SURVOL||largeur|sinon{2000})],[(#ENV{largeur_entete,[(#LOGO_SITE_SPIP_SURVOL||largeur|sinon{2000})]})]})]})]<br>let: #GET{largeur_entete}
33[(#REM) attention! la y'a une mauvaise bidouille entre hauteur bandeau et hauteur entete tant que les  sont confondus...!!!]
34[(#SET{hauteur_entete,[(#ENV{hauteur_bando,[(#LOGO_SITE_SPIP_SURVOL||hauteur|sinon{200})]})]})]<br>het: #GET{hauteur_entete}
35
36[(#SET{largeur_bando,[(#LOGO_SITE_SPIP_SURVOL||largeur|sinon{[(#GET{largeur_entete})]})]})]<br>lb: #GET{largeur_bando}
37[(#SET{hauteur_bando,[(#LOGO_SITE_SPIP_SURVOL||hauteur|sinon{[(#GET{hauteur_entete})]})]})]<br>hb: #GET{hauteur_bando}
38
39
40[(#SET{fact_reduc, [(#GET{largeur_bando}|>={[(#GET{largeur_entete})]}|?{[(#VAL{500}|div{[(#GET{largeur_bando})]})],[(#VAL{500}|div{[(#GET{largeur_entete})]})]})]})]<br>fact: #GET{fact_reduc}
41
42[(#SET{largeur_entete_reduite,[(#GET{largeur_entete}|mult{[(#GET{fact_reduc})]})]})]<br>ler: #GET{largeur_entete_reduite}
43[(#SET{hauteur_bando_reduite,[(#GET{hauteur_bando}|mult{[(#GET{fact_reduc})]})]})]<br>hbr: #GET{hauteur_bando_reduite}
44[(#SET{hauteur_entete_reduite,[(#GET{hauteur_entete}|mult{[(#GET{fact_reduc})]})]})]<br>her: #GET{hauteur_entete_reduite}
45
46[(#SET{hauteur_recadre,[(#ENV{hauteur_bando,240}|mult{[(#GET{hauteur_bando_reduite})]}|div{[(#GET{hauteur_bando})]}|round)]})]<br>hrec: #GET{hauteur_recadre}
47[(#SET{topcentrer,[(#GET{hauteur_bando_reduite}|moins{[(#GET{hauteur_recadre})]}|div{2}|round)]})]<br>topcentrer: #GET{topcentrer}
48[(#SET{top,[(#ENV{calage_top_recadrage,centrer}|=={centrer}|?{[(#GET{topcentrer})],[(#ENV{calage_top_recadrage}|mult{[(#GET{fact_reduc})]})]})]})]<br>top: #GET{top}
49
50[(#SET{hauteur_logo,[(#ENV{redimensionner_logo}|=={oui}|?{[(#ENV{hauteur_logo,[(#GET{hauteur_entete})]})],[(#GET{hauteur_entete})]})]})]<br>hl: #GET{hauteur_logo}
51[(#SET{proportion_logo,[(#LOGO_SITE_SPIP||largeur|div{[(#LOGO_SITE_SPIP||hauteur)]})]})]<br>pl: #GET{proportion_logo}
52[(#SET{largeur_logo,[(#GET{hauteur_logo}|mult{[(#GET{proportion_logo})]}|round)]})]<br>ll: #GET{largeur_logo}
53[(#SET{hauteur_logo_reduite,[(#GET{hauteur_logo}|mult{[(#GET{fact_reduc})]}|round)]})]<br>hlr: #GET{hauteur_logo_reduite}
54[(#SET{largeur_logo_reduite,[(#GET{largeur_logo}|mult{[(#GET{fact_reduc})]}|round)]})]<br>llr: #GET{largeur_logo_reduite}
55
56[(#SET{taille_police_reduite, [(#ENV{taille_police}|mult{[(#GET{fact_reduc})]})]})]<br>tpr: #GET{taille_police_reduite}
57[(#SET{largeur_titre_reduite, [(#ENV{largeur_titre}|mult{[(#GET{fact_reduc})]})]})]<br>ltr: #GET{largeur_titre_reduite}
58[(#SET{marge_sup_titre_reduite, [(#ENV{marge_sup_titre}|mult{[(#GET{fact_reduc})]})]})]<br>mstr: #GET{marge_sup_titre_reduite}
59
60[(#SET{titre,[(#ENV{titre_bando}|=={titre_spip}|?{[(#NOM_SITE_SPIP)],[(#ENV{complement_nom_site})]})]})]
61-->
62<script type='text/javascript' src='#CHEMIN{prive/javascript/async_upload.js}'></script>
63[(#VAL**|affiche_upload)]
64
65<script language="JavaScript" type="text/javascript">
66    function initialiser_params(){
67        if (jQuery("#bando_non").attr("checked") == true)
68                jQuery(".details_bando").hide();
69        if (jQuery("#logo_non").attr("checked") == true)
70                jQuery(".details_logo").hide();
71        if (jQuery("#redimensionner_logo_non").attr("checked") == true)
72            jQuery("#voir_redimensionner_logo").hide();
73        if (jQuery("#titre_non").attr("checked") == true)
74                jQuery(".details_titre").hide();
75        if (jQuery("#toutes_bordures_identiques_non").attr("checked") == true)
76                jQuery(".details_bordures").hide();
77        if (jQuery("#fond_transparent_oui").attr("checked") == true) 
78                jQuery(".details_couleur_fond").hide();
79       
80    }
81   
82  // retourne 3 objets donnant parametres du bando (les dimensions sont *reduites a l'echelle*)
83  // this.hBando = hauteur en px 
84  // this.H = calage horizontal pour background-image (left/center/right)
85  // this.V = valeur de top en px pour background-image
86    function calages(){
87        var hbando = parseInt(jQuery("#hauteur_bando").val() * [(#GET{fact_reduc})]);
88        var btop = jQuery("#calage_top_recadrage").val();
89        if (parseInt(btop) != NaN)
90                this.V = btop * [(#GET{fact_reduc})];
91        if (btop == "centrer") 
92                this.V = ([(#GET{hauteur_bando_reduite})] - hbando) / 2;
93        this.H = jQuery("input[name='calage_horizontal_bando']:checked").val();
94        this.hBando = hbando;
95    }
96   
97  // gere l'affichage des bordures selon la config
98    function gerer_bordures(){
99        if (jQuery("input[name='toutes_bordures_identiques']:checked").val() == 'oui') {
100                jQuery("#voir_bordure_unique").show();
101            jQuery(".details_bordures").hide();
102            var bstyle = jQuery("#style_bordure_unique").val();
103            var bcoul = jQuery("#couleur_bordure_unique").val();
104            var bep = (parseInt(jQuery("#epaisseur_bordure_unique").val()) * [(#GET{fact_reduc})]) + 'px';
105            jQuery("#bando_logo, #bando_titre").css({'border': bstyle + ' ' + bcoul + ' ' + bep});
106        }
107        else {
108                jQuery("#voir_bordure_unique").hide();
109            jQuery(".details_bordures").show();
110            Tb = ['top','right','bottom','left'];
111            for (i in Tb){
112                var bstyle = jQuery("#style_bordure_" + Tb[i]).val();
113                var bcoul = jQuery("#couleur_bordure_" + Tb[i]).val();
114                var bep = (parseInt(jQuery("#epaisseur_bordure_" + Tb[i]).val()) * [(#GET{fact_reduc})]) + 'px';
115                jQuery("#bando_logo, #bando_titre").css('border-' + Tb[i], bstyle + ' ' + bcoul + ' ' + bep);
116            }
117        }
118    }
119       
120    jQuery(document).ready(function(){
121     // initialisations
122        initialiser_params();
123        gerer_bordures();
124        calages();
125       
126     // bloc bando   
127        jQuery("input[name='utiliser_bando']").change(function(){
128            if (jQuery("input[name='utiliser_bando']:checked").val() == 'oui') {
129                jQuery("#bando, #bando_logo, #bando_titre").css({'background-image': 'url([(#LOGO_SITE_SPIP_SURVOL||image_reduire{500,0}|extraire_attribut{src})])'});
130                jQuery(".details_bando").show();
131            }
132            else {
133                jQuery("#bando, #bando_logo, #bando_titre").css({'background-image': 'none'});
134                jQuery(".details_bando").hide();
135            }
136        });
137        jQuery("#hauteur_bando").change(function(){
138            dims = new calages;
139            jQuery("#recadre, #bando_logo, #bando_titre").css({height: dims.hBando + "px"});
140            if (jQuery("#redimensionner_logo_non").attr("checked") == true){
141                var ll = Math.round(dims.hBando * [(#GET{proportion_logo})]);
142                jQuery("#img_logo, #img_logo_titre").css({'height': dims.hBando + "px", 'width': ll + 'px'});
143            }
144            jQuery("#recadre").css({top: dims.V + "px"});
145            jQuery("#bando_logo, #bando_titre").css({'background-position' : dims.H + ' -'+ dims.V + "px"});
146        });
147        jQuery("#calage_top_recadrage").change(function(){
148            dims = new calages;
149            jQuery("#recadre").css({top: dims.V + "px"});
150            jQuery("#bando_logo, #bando_titre").css({'background-position': dims.H + ' -' + dims.V + 'px'});
151        });
152        jQuery("input[name='calage_horizontal_bando']").change(function(){
153            dims = new calages;
154            jQuery("#bando_logo, #bando_titre").css({'background-position': dims.H + ' -' + dims.V + 'px'});
155        });
156       
157    // bloc logo
158        jQuery("input[name='utiliser_logo']").change(function(){
159            if (jQuery("input[name='utiliser_logo']:checked").val() == 'oui') {
160                jQuery("#img_logo, #img_logo_titre").css({'display': 'inline'});
161                jQuery(".details_logo").show();
162            }
163            else {
164                jQuery("#img_logo, #img_logo_titre").css({'display': 'none'});
165                jQuery(".details_logo").hide();
166            }
167        });
168        jQuery("input[name='place_logo']").change(function(){ 
169                var cote = jQuery("input[name='place_logo']:checked").val();
170            jQuery("#img_logo, #img_logo_titre").css({'float': cote});
171            var dh = Math.round(parseInt(jQuery("#marge_laterale_logo").val()) * [(#GET{fact_reduc})]);
172            var db = Math.round(parseInt(jQuery("#marge_laterale_logo_bord").val()) * [(#GET{fact_reduc})]);
173            var cote_txt = (cote == 'right' ? 'left' : 'right'); 
174            jQuery("#img_logo, #img_logo_titre").css('margin-' + cote_txt, dh + 'px');
175            jQuery("#img_logo, #img_logo_titre").css('margin-' + cote, db + 'px');
176        });
177        jQuery("input[name='redimensionner_logo']").change(function(){
178            if (jQuery("#redimensionner_logo_non").attr("checked") == true){
179                jQuery("#voir_redimensionner_logo").hide();
180                var hl = parseInt(jQuery("#bando_logo").css("height"));
181                var ll = Math.round(hl * [(#GET{proportion_logo})]);
182                jQuery("#img_logo, #img_logo_titre").css({'height': hl + 'px', 'width': ll + 'px', 'margin-top': 0});
183//                jQuery("#img_logo").css({ 'border': 'none' });
184            }
185            else {
186                jQuery("#voir_redimensionner_logo").show();
187                var hl = Math.round(parseInt(jQuery("#hauteur_logo").val()) * [(#GET{fact_reduc})]);
188                var ll = Math.round(hl * [(#GET{proportion_logo})]);
189                var dv = Math.round(parseInt(jQuery("#marge_sup_logo").val()) * [(#GET{fact_reduc})]);
190                jQuery("#img_logo, #img_logo_titre").css({'height': hl + 'px', 'width': ll + 'px', 'margin-top': dv + 'px'});
191//                jQuery("#img_logo").css({ 'border': 'dashed #ff0 2px;' });
192            }
193        });
194        jQuery("#hauteur_logo").change(function(){
195            var hl = Math.round(parseInt(jQuery(this).val()) * [(#GET{fact_reduc})]);
196            var ll = Math.round(hl * [(#GET{proportion_logo})]);
197            jQuery("#img_logo, #img_logo_titre").css({'height': hl + 'px', 'width': ll + 'px'});
198        });
199        jQuery("#marge_sup_logo").change(function(){
200            var dv = Math.round(parseInt(jQuery(this).val()) * [(#GET{fact_reduc})]);
201            jQuery("#img_logo, #img_logo_titre").css({'margin-top': dv + 'px'});
202        });
203        jQuery("#marge_laterale_logo").change(function(){
204            var dh = Math.round(parseInt(jQuery(this).val()) * [(#GET{fact_reduc})]);
205            var cote_marge = (jQuery("input[name='place_logo']:checked").val() == 'right' ? 'left' : 'right'); 
206            jQuery("#img_logo, #img_logo_titre").css('margin-' + cote_marge, dh + 'px');
207        });       
208        jQuery("#marge_laterale_logo_bord").change(function(){
209            var db = Math.round(parseInt(jQuery(this).val()) * [(#GET{fact_reduc})]);
210            var cote_marge = jQuery("input[name='place_logo']:checked").val(); 
211            jQuery("#img_logo, #img_logo_titre").css('margin-' + cote_marge, db + 'px');
212        });       
213       
214    // bloc couleurs
215        jQuery("input[name='fond_transparent']").change(function(){
216            if (jQuery("input[name='fond_transparent']:checked").val() == 'oui') {
217                jQuery(".details_couleur_fond").hide();
218                jQuery("#bando, #bando_logo, #bando_titre").css('background-color', 'transparent');
219            }
220            else {
221                jQuery(".details_couleur_fond").show();
222                var coul = jQuery("#couleur_principale").val();
223                jQuery("#bando, #bando_logo, #bando_titre").css('background-color', coul);
224            }
225        });
226        jQuery("#couleur_principale").blur( function(){
227                var coul = jQuery(this).val();
228            jQuery("#bando, #bando_logo, #bando_titre").css({'background-color': coul});
229        });
230        jQuery("#couleur_principale_texte").blur( function(){ 
231                var coul = jQuery(this).val();
232            jQuery("#bando, #bando_logo, #bando_titre").css({'color': coul});
233        });
234       
235    // les bordures
236        jQuery("input[name='toutes_bordures_identiques'], .change_bordures").change(gerer_bordures);
237       
238    // bloc titre
239        jQuery("input[name='afficher_titre']").change(function(){
240            if (jQuery("input[name='afficher_titre']:checked").val() == 'oui') 
241                jQuery(".details_titre").show();
242            else jQuery(".details_titre").hide();
243        });
244        jQuery("input[name='emplacement_titre']").change(function(){
245            var cote = jQuery("input[name='emplacement_titre']:checked").val();
246            jQuery("#nom_site_spip").css({'float': cote});
247        });
248        jQuery("#taille_police").change( function(){ 
249                var taille = Math.round(parseInt(jQuery(this).val()) * [(#GET{fact_reduc})]);
250            jQuery("#bando_titre").css({'font-size': taille  +'px'});
251        });
252        jQuery("input[name='alignement_titre']").change(function(){
253            var cote = jQuery("input[name='alignement_titre']:checked").val();
254            jQuery("#bando_titre").css({'text-align': cote});
255        });
256        jQuery("input[name='titre_bando']").change(function(){
257            if (jQuery("input[name='titre_bando']:checked").val() == 'titre_spip') 
258                jQuery("#nom_site_spip").text("[(#NOM_SITE_SPIP)]");
259            else jQuery("#nom_site_spip").text(jQuery("#complement_nom_site").val());
260        });
261        jQuery("#largeur_titre").change( function(){ 
262                var taille = Math.round(parseInt(jQuery(this).val()) * [(#GET{fact_reduc})]);
263            jQuery("#nom_site_spip").css({'width': taille  +'px'});
264        });
265        jQuery("#marge_sup_titre").change( function(){ 
266                var taille = Math.round(parseInt(jQuery(this).val()) * [(#GET{fact_reduc})]);
267            jQuery("#nom_site_spip").css({'padding-top': taille  +'px'});
268        });
269        jQuery("#complement_nom_site").change( function(){ 
270            if (jQuery("#titre_autre").attr("checked") == true) 
271                jQuery("#nom_site_spip").text(jQuery(this).val());
272        });
273        jQuery("input[name='utiliser_image_typo']").change(function(){
274            if (jQuery("input[name='utiliser_image_typo']:checked").val() == 'oui') 
275                jQuery("#voir_justification_titre").hide();
276            else jQuery("#voir_justification_titre").show();
277        });
278       
279       
280    // les previsu avec largeur ecran
281        jQuery(".previsu_logo").click(function(){ 
282            jQuery("#bando_logo").css({'width': jQuery(this).attr('title')}); 
283            jQuery(".previsu_logo").css({'background-color': '#FFFFFF'});
284            jQuery(this).css({'background-color': '#777777'});
285        });
286        jQuery(".previsu_titre").click(function(){ 
287            jQuery("#bando_titre").css({'width': jQuery(this).attr('title')}); 
288            jQuery(".previsu_titre").css({'background-color': '#FFFFFF'});
289            jQuery(this).css({'background-color': '#777777'});
290        });
291       
292    // le gadget oeil
293        jQuery("input.declenche_oeil").keyup(function() {
294                var id_ec = jQuery(this).attr("id") + "_oeil";
295            jQuery("#" + id_ec).attr("src", "[(#CHEMIN{images/oeil_f.gif})]");
296        });
297        jQuery("input.declenche_oeil").blur(function() {
298                var id_ec = jQuery(this).attr("id") + "_oeil";
299            jQuery("#" + id_ec).attr("src", "[(#CHEMIN{images/oeil_o.gif})]");
300        });
301       
302    // les redims bando et logo en WYSIWYG avec UI
303        function go_recadre(){
304            var hbando = jQuery("#recadre").css("height");
305            hbando = Math.round(parseInt(hbando.substring(0,(hbando.length - 2))) / [(#GET{fact_reduc})]);
306            var topbando = jQuery("#recadre").css("top");
307            topbando = Math.round(parseInt(topbando.substring(0,(topbando.length - 2))) / [(#GET{fact_reduc})]);
308            jQuery("#hauteur_bando").val(hbando);
309            jQuery("#calage_top_recadrage").val(topbando);
310            jQuery("#hauteur_bando").trigger('change');
311        }
312        function go_recadre_logo(){
313            var hlogo = jQuery("#img_logo").css("height");
314            hlogo = Math.round(parseInt(hlogo.substring(0,(hlogo.length - 2))) / [(#GET{fact_reduc})]);
315            jQuery("#hauteur_logo").val(hlogo);
316            jQuery("#hauteur_logo").trigger('change');
317        }
318        jQuery("#recadre").resizable({ containment: 'parent', 
319                                       handles: 'n, s',
320                                       stop: function(){ go_recadre(); }
321                                  });
322/* vraiment pas convaincant le resizable sur le logo...                                 
323        jQuery("#img_logo").resizable({ containment: 'parent',
324                                        aspectRatio: true,
325                                        stop: function(){ go_recadre_logo(); }
326                                     });
327//        jQuery("#img_logo").draggable({ containment: 'parent'}); // draggable semble bogue en jQuery 1.2.6...
328*/
329    });
330</script>
331
332<form method="post" action="#SELF"><div>[(#ENV{_cfg_}|form_hidden)]</div>
333
334[(#REM) ------------------------- DIMENSIONS EN-TETE --------------------------]
335[(#REM) restons simples pour l'instant...
336<fieldset>
337    <legend><:topbando:dimensions_entete:></legend>
338    <p>
339        <label><strong><:topbando:hauteur_entete:> :</strong></label>
340        <input type="text" name="hauteur_entete" value="[(#ENV{hauteur_entete,200})]" style="width: 80px" id="hauteur_entete" />
341        <br/><strong><:topbando:largeur_entete:> :</strong>
342        <br/><input type="radio" name="largeur_entete" value="100%" [(#ENV{largeur_entete}|=={100%}|oui) checked="checked"] id="largeur_entete_100"/> 
343        <label>100%</label>
344        <br /><input type="radio" name="largeur_entete" value="autre" [(#ENV{largeur_entete}|=={100%}|non) checked="checked"] id="largeur_entete_autre"/>
345        <label><:topbando:largeur_en_pixels:></label>:
346        <input type="text" name="largeur_perso_entete" value="[(#ENV{largeur_perso_entete,740})]" style="width: 80px" id="largeur_perso_entete" />
347    </p>
348</fieldset>
349]
350[(#REM) --------------------------- BANDEAU EN-TETE -------------------------- ]
351<fieldset>
352    <legend><:topbando:bando_entete:></legend>
353    <p>
354        <strong><:topbando:utiliser_bando:> :</strong>
355        <label><:topbando:oui:></label>
356        <input type="radio" name="utiliser_bando" value="oui" [(#ENV{utiliser_bando}|=={oui}|oui) checked="checked"] id="bando_oui"/> 
357        &nbsp;&nbsp;&nbsp;<input type="radio" name="utiliser_bando" value="non" [(#ENV{utiliser_bando}|=={oui}|non) checked="checked"] id="bando_non"/>
358        <label><:topbando:non:></label>
359    </p>
360    <p class="details_bando">
361        <strong><:topbando:calage_horizontal_image_bando:> :</strong>
362        <label><:topbando:gauche:></label>
363        <input type="radio" name="calage_horizontal_bando" value="left" [(#ENV{calage_horizontal_bando}|=={left}|oui) checked="checked"] id="calage_left"/> 
364        &nbsp;&nbsp;&nbsp;<input type="radio" name="calage_horizontal_bando" value="center" [(#ENV{calage_horizontal_bando}|=={center}|oui) checked="checked"] id="calage_center"/>
365        <label><:topbando:centre:></label>
366        &nbsp;&nbsp;&nbsp;<input type="radio" name="calage_horizontal_bando" value="right" [(#ENV{calage_horizontal_bando}|=={right}|oui) checked="checked"] id="calage_right"/>
367        <label><:topbando:droite:></label>       
368        <br/><small><:topbando:explication_calage_horizontal:></small>     
369    </p>
370    <p class="details_bando">
371        <label><:topbando:calage_top_recadrage:> :</label>
372        <input type="text" name="calage_top_recadrage" value="[(#ENV{calage_top_recadrage,centrer})]" style="width: 80px" class="declenche_oeil" id="calage_top_recadrage" />
373        [<img id="calage_top_recadrage_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
374        <br/><small><:topbando:explication_calage_top:></small>
375    </p>
376    <p>
377        <label><strong><:topbando:hauteur_bando:></strong> :</label>
378        <input type="text" name="hauteur_bando" id="hauteur_bando" value="[(#ENV{hauteur_bando,200})]" style="width: 80px" class="declenche_oeil" /> 
379        [<img id="hauteur_bando_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
380        <br/><small><:topbando:utilisez_le_cadre_rouge_pour_redimensionner:></small>
381    </p>
382
383    <div id="bando" style="background: [(#ENV{utiliser_bando}|=={oui}|oui) url([(#LOGO_SITE_SPIP_SURVOL||image_reduire{500,0}|extraire_attribut{src})]) ]
384                          no-repeat center [(#ENV{fond_transparent}|=={oui}|?{'transparent',[(#ENV{couleur_principale,#FFFFFF})]})];
385                          width: 500px;
386                          height: #GET{hauteur_bando_reduite}px;">
387<!--
388            <div id="entete" style="border: solid 2px #0F0;
389                                     position: relative;
390                                     width: [(#GET{largeur_entete_reduite}|moins{4})]px;
391                                     height: #GET{hauteur_entete_reduite}px;
392                                     top: #GET{top}px;
393                                     float: left;
394                                     ">
395            </div>
396-->           
397        <div id="recadre" style="border: dashed 2px #F00;
398                                 position: relative;
399                                 width: 496px;
400                                 height: #GET{hauteur_recadre}px;
401                                 top: #GET{top}px;
402                                 ">
403        </div>
404    </div>
405</fieldset>
406
407[(#REM) --------------------------- LOGO EN-TETE ----------------------------- ]
408<fieldset>
409    <legend><:topbando:logo_entete:></legend>
410    <p>
411        <strong><:topbando:utiliser_logo:> :</strong>
412        <label><:topbando:oui:></label>
413        <input type="radio" name="utiliser_logo" value="oui" [(#ENV{utiliser_logo}|=={oui}|oui) checked="checked"] id="logo_oui"/> 
414        &nbsp;&nbsp;&nbsp;<input type="radio" name="utiliser_logo" value="non" [(#ENV{utiliser_logo}|=={oui}|non) checked="checked"] id="logo_non"/>
415        <label><:topbando:non:></label>
416    </p>
417    <p class="details_logo">
418        <strong><:topbando:place_logo:> :</strong>
419        <label><:topbando:gauche:></label>
420        <input type="radio" name="place_logo" value="left" [(#ENV{place_logo}|=={right}|non) checked="checked"] id="logo_g"/> 
421        &nbsp;&nbsp;&nbsp;<input type="radio" name="place_logo" value="right" [(#ENV{place_logo}|=={right}|oui) checked="checked"] id="logo_d"/>
422        <label><:topbando:droite:></label>
423        <br/><label><:topbando:marge_laterale_logo_cote_texte:></label>: <input type="text" name="marge_laterale_logo" style="width: 40px;" value="[(#ENV{marge_laterale_logo,10})]" class="declenche_oeil" id="marge_laterale_logo" />px
424        [<img id="marge_laterale_logo_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
425        <br/><label><:topbando:marge_laterale_logo_cote_bord:></label>: <input type="text" name="marge_laterale_logo_bord" style="width: 40px;" value="[(#ENV{marge_laterale_logo_bord,0})]" class="declenche_oeil" id="marge_laterale_logo_bord" />px
426        [<img id="marge_laterale_logo_bord_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
427        <br/><small><:topbando:explication_2_marges_laterales_logo:></small>
428    </p>
429    <p class="details_logo">
430        <strong><:topbando:taille_logo:> :</strong>
431        <label><:topbando:adaptation_automatique_hauteur_bandeau:></label>
432        <input type="radio" name="redimensionner_logo" value="non" [(#ENV{redimensionner_logo}|=={oui}|non) checked="checked"] id='redimensionner_logo_non'/> 
433        &nbsp;&nbsp;&nbsp;<input type="radio" name="redimensionner_logo" value="oui" [(#ENV{redimensionner_logo}|=={oui}|oui) checked="checked"] id='redimensionner_logo_oui'/>
434        <label><:topbando:taille_logo_imposee:></label>
435    </p>
436    <p class="details_logo" id="voir_redimensionner_logo">
437        <label><:topbando:hauteur_logo:> :</label>
438        <input type="text" name="hauteur_logo" id="hauteur_logo" value="[(#ENV{hauteur_logo,[(#LOGO_SITE_SPIP||hauteur)]})]" style="width: 80px" class="declenche_oeil" />px
439        [<img id="hauteur_logo_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
440        &nbsp;&nbsp;&nbsp;<label><:topbando:marge_superieure_logo:></label>: <input type="text" name="marge_sup_logo" style="width: 40px;" value="[(#ENV{marge_sup_logo,10})]" class="declenche_oeil" id="marge_sup_logo" />px
441        [<img id="marge_sup_logo_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
442        <br/><small><:topbando:explication_redimensionnement_proportionnel:></small>
443    </p>
444<!--
445        <div id="entete_logo" style="border: solid 2px #0F0;
446                                 position: relative;
447                                 width: 496px;
448                                 height: #GET{hauteur_entete_reduite}px;
449                                 float: left;
450                                 overflow: hidden;
451                                 ">
452        </div>
453-->       
454    [(#SET{Tb, #ARRAY{1,top,2,right,3,bottom,4,left}})]
455    [(#SET{strB, ''})]
456    <BOUCLE_bordures(POUR){tableau #GET{Tb}}>
457        [(#SET{strB, [(#GET{strB}) ]border-#VALEUR: [(#ENV{style_bordure_#VALEUR}) ][(#ENV{couleur_bordure_#VALEUR}) ][(#ENV{epaisseur_bordure_#VALEUR})px]; })]
458    </BOUCLE_bordures>
459    <div class="details_logo" id="bando_logo" style="background: [(#ENV{utiliser_bando}|=={oui}|oui) url([(#LOGO_SITE_SPIP_SURVOL||image_reduire{500,0}|extraire_attribut{src})]) ]
460                            [(#ENV{calage_horizontal_bando})] -[(#GET{top})]px [(#ENV{fond_transparent}|=={oui}|?{'transparent',[(#ENV{couleur_principale,#FFFFFF})]})] no-repeat;
461                            width: 500px;
462                            height: #GET{hauteur_recadre}px;
463                            [(#ENV{toutes_bordures_identiques}|=={oui}|?{
464                                border: [(#ENV{style_bordure_unique})] [(#ENV{couleur_bordure_unique})] [(#ENV{epaisseur_bordure_unique})px];
465                                ,
466                                [(#GET{strB})]
467                            })]">
468     
469        [<img src="(#LOGO_SITE_SPIP||image_reduire{0,[(#GET{hauteur_logo_reduite})]}|extraire_attribut{src})" alt="logo_site"
470          style="float: [(#ENV{place_logo,left})];
471                         [margin-[(#ENV{place_logo}|=={right}|?{'left','right'})]: (#ENV{marge_laterale_logo}|mult{[(#GET{fact_reduc})]})px;]
472                 [margin-[(#ENV{place_logo})]: (#ENV{marge_laterale_logo_bord}|mult{[(#GET{fact_reduc})]})px;]
473                 [(#ENV{redimensionner_logo}|=={oui}|oui) [margin-top: (#ENV{marge_sup_logo}|mult{[(#GET{fact_reduc})]})px;]]
474                 [(#REM) ENV{redimensionner_logo}|=={oui}|oui) border: dashed #ff0 2px;]
475                 [(#ENV{utiliser_logo}|=={non}|oui)display: none;]" 
476          id="img_logo"/>]
477     
478    </div>
479    <p class="details_logo">
480        <strong><:topbando:previsualisation_largeur_ecran:></strong>:
481        <span class="previsu_logo" title="500px">[[(#GET{largeur_bando})] pixels]</span>
482        <span class="previsu_logo" title="[(#VAL{800}|mult{[(#GET{fact_reduc})]})]px">[800 pixels]</span>
483        <span class="previsu_logo" title="[(#VAL{1024}|mult{[(#GET{fact_reduc})]})]px">[1024 pixels]</span>
484        <span class="previsu_logo" title="[(#VAL{1280}|mult{[(#GET{fact_reduc})]})]px">[1280 pixels]</span>
485        <span class="previsu_logo" title="[(#VAL{1600}|mult{[(#GET{fact_reduc})]})]px">[1600 pixels]</span>
486        <span class="previsu_logo" title="[(#VAL{1920}|mult{[(#GET{fact_reduc})]})]px">[1920 pixels]</span>
487        <span class="previsu_logo" title="[(#VAL{2048}|mult{[(#GET{fact_reduc})]})]px">[2048 pixels]</span>
488    </p>     
489</fieldset>
490   
491[(#REM) ------------------------ COULEURS ------------------------------------ ]
492<fieldset>
493    <legend><:topbando:choix_teinte_generale:></legend>
494    <p>
495                        <strong><:topbando:fond_bandeau:> :</strong>
496        <label><:topbando:fond_transparent:></label>
497        <input type="radio" name="fond_transparent" value="oui" [(#ENV{fond_transparent}|=={oui}|oui) checked="checked"] id='fond_transparent_oui'/> 
498        &nbsp;&nbsp;&nbsp;<input type="radio" name="fond_transparent" value="non" [(#ENV{fond_transparent}|=={oui}|non) checked="checked"] id='fond_transparent_non'/>
499        <label><:topbando:fond_colore:></label>
500       
501    </p>
502    <p class="details_couleur_fond">
503        <strong><:topbando:couleur_principale:></strong>
504        <input type="text" name="couleur_principale" class="palette" id="couleur_principale" 
505            value="[(#ENV{couleur_principale,#FFFFFF})]" style="width: 80px" class="declenche_oeil"/>
506        [<img id="couleur_principale_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
507    </p>
508    <p>
509        <strong><:topbando:couleur_texte:></strong>
510        <input type="text" name="couleur_principale_texte" class="palette" id="couleur_principale_texte" 
511            value="[(#ENV{couleur_principale_texte,#000000})]" style="width: 80px" class="declenche_oeil" />
512        [<img id="couleur_principale_texte_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
513        <br/><small><:topbando:explication_palette:></small>
514    </p>
515</fieldset>
516   
517[(#REM) ------------------------ BORDURES ------------------------------------ ]
518<fieldset>
519    <legend><:topbando:bordures_bandeau:></legend>
520    <p>
521        <strong><:topbando:toutes_bordures_identiques:>: </strong>
522        <label><:topbando:oui:></label>
523        <input type="radio" name="toutes_bordures_identiques" value="oui" [(#ENV{toutes_bordures_identiques}|=={non}|non) checked="checked"] id='toutes_bordures_identiques_oui' /> 
524        &nbsp;&nbsp;&nbsp;<input type="radio" name="toutes_bordures_identiques" value="non" [(#ENV{toutes_bordures_identiques}|=={non}|oui) checked="checked"] id='toutes_bordures_identiques_non' />
525        <label><:topbando:non:></label>
526        [(#SET{Tbordures, #ARRAY{<:topbando:toutes_bordures:>,unique,<:topbando:haut:>,top,<:topbando:droite:>,right,<:topbando:bas:>,bottom,<:topbando:gauche:>,left}})]
527        [(#SET{Tep, #ARRAY{<:topbando:aucune:>,none,<:topbando:plein:>,solid,<:topbando:tirets:>,dashed,<:topbando:pointilles:>,dotted}})]
528
529        <BOUCLE_b(POUR){tableau #GET{Tbordures}}>
530          <p id="voir_bordure_#VALEUR"[(#VALEUR|!={unique}|oui) class="details_bordures"]><strong>#CLE :</strong> 
531            <br/><:topbando:style:>: <select name="style_bordure_#VALEUR" class="change_bordures declenche_oeil" id="style_bordure_#VALEUR">
532            <BOUCLE_ep(POUR){tableau #GET{Tep}}>
533                <option value="#VALEUR"[ (#ENV{style_bordure_#_b:VALEUR}|=={#VALEUR}|oui)selected="selected"]>#CLE</option>
534            </BOUCLE_ep>
535            </select>
536                &nbsp;&nbsp;&nbsp;<:topbando:couleur:>:
537            <input type="text" name="couleur_bordure_#VALEUR" class="change_bordures palette" id="couleur_bordure_#VALEUR" 
538            value="[(#ENV{couleur_bordure_#VALEUR,#000000})]" style="width: 80px" class="change_bordures"/>[(#ENV{couleur_bordure_#VALEUR})]
539            &nbsp;&nbsp;&nbsp;<:topbando:epaisseur:>:
540            <input type="text" name="epaisseur_bordure_#VALEUR" class="change_bordures" id="epaisseur_bordure_#VALEUR" 
541            value="[(#ENV{epaisseur_bordure_#VALEUR,1})]" style="width: 40px"/>px
542                [<img id="style_bordure_#VALEUR_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
543          </p>
544        </BOUCLE_b>
545    </p>
546   
547   
548</fieldset>
549
550[(#REM)------------------------ TITRE SITE ----------------------------------- ]
551<fieldset>
552  <legend><:topbando:titre_site:></legend>
553    <p>
554        <strong><:topbando:afficher_titre:> :</strong>
555        <label><:topbando:oui:></label>
556        <input type="radio" name="afficher_titre" value="oui" [(#ENV{afficher_titre}|=={oui}|oui) checked="checked"] id='titre_oui' /> 
557        &nbsp;&nbsp;&nbsp;<input type="radio" name="afficher_titre" value="non" [(#ENV{afficher_titre}|=={oui}|non) checked="checked"] id='titre_non' />
558        <label><:topbando:non:></label>
559    </p>
560          <div class="details_titre">
561    <p>
562        <strong><:topbando:emplacement_titre:></strong>:
563        <label><:topbando:gauche:></label>
564        <input type="radio" name="emplacement_titre" value="left" [(#ENV{emplacement_titre}|=={left}|oui) checked="checked"]/>
565        &nbsp;&nbsp;&nbsp;<input type="radio" name="emplacement_titre" value="none" [(#ENV{emplacement_titre}|=={none}|oui) checked="checked"]/>
566        <label><:topbando:centre:></label>
567        &nbsp;&nbsp;&nbsp;<input type="radio" name="emplacement_titre" value="right" [(#ENV{emplacement_titre}|=={right}|oui) checked="checked"]/>
568        <label><:topbando:droite:></label>
569    </p>
570    <p>
571                <strong><:topbando:titre_bando:>:</strong>
572        <br /><input type="radio" name="titre_bando" value="titre_spip" [(#ENV{titre_bando}|=={titre_spip}|oui) checked="checked"] id="titre_spip"/> 
573        <label><:topbando:utiliser_titre_spip:></label>
574        <br /><input type="radio" name="titre_bando" value="autre" [(#ENV{titre_bando}|=={titre_spip}|non) checked="checked"] id="titre_autre" />
575        <label><:topbando:utiliser_autre_titre:></label>:
576                        <input type="text" name="complement_nom_site" value="#ENV{complement_nom_site}" size="50" class="fondl" class="declenche_oeil" id="complement_nom_site" />
577        [<img id="complement_nom_site_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
578    </p>
579    <p>
580        <strong><:topbando:taille_police:></strong>: <input type="text" name="taille_police" style="width: 40px;" value="[(#ENV{taille_police,40})]" class="declenche_oeil" id="taille_police" />px
581        [<img id="taille_police_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
582    </p>
583    <p id="voir_justification_titre">
584        <strong><:topbando:justification_titre:></strong>:
585        <label><:topbando:gauche:></label>
586        <input type="radio" name="alignement_titre" value="left" [(#ENV{alignement_titre}|=={left}|oui) checked="checked"]/>
587        &nbsp;&nbsp;&nbsp;<input type="radio" name="alignement_titre" value="center" [(#ENV{alignement_titre}|=={center}|oui) checked="checked"]/>
588        <label><:topbando:centre:></label>
589        &nbsp;&nbsp;&nbsp;<input type="radio" name="alignement_titre" value="right" [(#ENV{alignement_titre}|=={right}|oui) checked="checked"]/>
590        <label><:topbando:droite:></label>
591    </p>
592    <p>
593        <strong><:topbando:marge_superieure_titre:></strong>: <input type="text" name="marge_sup_titre" style="width: 40px;" value="[(#ENV{marge_sup_titre,40})]" class="declenche_oeil" id="marge_sup_titre" />px
594        [<img id="marge_sup_titre_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
595    </p>
596    <p>
597        <strong><:topbando:largeur_max_titre:></strong>: <input type="text" name="largeur_titre" style="width: 40px;" value="[(#ENV{largeur_titre,740})]" class="declenche_oeil" id="largeur_titre" />px
598        [<img id="largeur_titre_oeil" src="(#CHEMIN{images/oeil_o.gif})" alt="<:topbando:visualiser:>" class="oeil_voir"/>]
599    </p>
600[(#PLUGIN{choix_police}|oui)
601                <p>
602        <strong><:topbando:utiliser_image_typo:></strong>:
603        <label><:topbando:oui:></label>
604        <input type="radio" name="utiliser_image_typo" value="oui" [(#ENV{utiliser_image_typo}|=={non}|non) checked="checked"] id="image_typo_oui"/> 
605        &nbsp;&nbsp;&nbsp;<input type="radio" name="utiliser_image_typo" value="non" [(#ENV{utiliser_image_typo}|=={non}|oui) checked="checked"] id="image_typo_non"/>
606        <label><:topbando:non:></label> 
607        <br/>(<:topbando:pas_de_previsu_instantanee_des_images_typo:>!)
608    </p>
609]   
610        <div id="bando_titre" style="background: [(#ENV{utiliser_bando}|=={oui}|oui) url([(#LOGO_SITE_SPIP_SURVOL||image_reduire{500,0}|extraire_attribut{src})]) ]
611                                     [(#ENV{calage_horizontal_bando})] -[(#GET{top})]px [(#ENV{fond_transparent}|=={oui}|?{'transparent',[(#ENV{couleur_principale,#FFFFFF})]})] no-repeat;
612                                     width: 500px;
613                                     height: #GET{hauteur_recadre}px;
614                                     font-size: #GET{taille_police_reduite}px;
615                                     text-align: #ENV{alignement_titre};
616                                     color: #ENV{couleur_principale_texte};
617                                     [(#ENV{toutes_bordures_identiques}|=={oui}|?{
618                                                border: [(#ENV{style_bordure_unique})] [(#ENV{couleur_bordure_unique})] [(#ENV{epaisseur_bordure_unique})px];
619                                                ,
620                                                [(#GET{strB})]
621                                         })]">
622
623            [<img src="(#LOGO_SITE_SPIP||image_reduire{0,[(#GET{hauteur_logo_reduite})]}|extraire_attribut{src})" alt="logo_site"
624                  style="float: [(#ENV{place_logo,left})];
625                                 [margin-[(#ENV{place_logo}|=={right}|?{'left','right'})]: (#ENV{marge_laterale_logo}|mult{[(#GET{fact_reduc})]})px;]
626                         [margin-[(#ENV{place_logo})]: (#ENV{marge_laterale_logo_bord}|mult{[(#GET{fact_reduc})]})px;]
627                         [(#ENV{redimensionner_logo}|=={oui}|oui) [margin-top: (#ENV{marge_sup_logo}|mult{[(#GET{fact_reduc})]})px;]]
628                         [(#ENV{utiliser_logo}|=={non}|oui)display: none;]" 
629                  id="img_logo_titre"/>]
630
631            [(#PLUGIN{choix_police}|?{
632                [(#ENV{utiliser_image_typo}|=={oui}|?{
633                    [<strong id="nom_site_spip" style="margin-right: auto;
634                                                       margin-left:auto;
635                                                       display: block;
636                                                       [float: (#ENV{emplacement_titre});]
637                                                       [width: (#GET{largeur_titre_reduite})px;]
638                                                       [padding-top: (#GET{marge_sup_titre_reduite})px;]
639                                                       ">(#MODELE{typo}{texte=[(#GET{titre})],
640                                                                        couleur=[(#ENV{couleur_principale_texte,#000000})],
641                                                                        taille=[(#GET{taille_police_reduite})],
642                                                                        largeur=[(#GET{largeur_titre_reduite})]
643                                                                        })</strong>]
644                    ,
645                    [<strong id="nom_site_spip" style="margin-right: auto;
646                                                       margin-left:auto;
647                                                       display: block;
648                                                       [color: (#ENV{couleur_principale_texte});]
649                                                       [float: (#ENV{emplacement_titre});]
650                                                       [width: (#GET{largeur_titre_reduite})px;]
651                                                       [padding-top: (#GET{marge_sup_titre_reduite})px;]
652                                                       ">(#GET{titre})</strong>]
653                })]
654                ,
655                [<strong id="nom_site_spip" style="margin-right: auto;
656                                                   margin-left:auto;
657                                                   display: block;
658                                                   [float: (#ENV{emplacement_titre});]
659                                                   [width: (#GET{largeur_titre_reduite})px;]
660                                                   [padding-top: (#GET{marge_sup_titre_reduite})px;]
661                                                   ">(#GET{titre})</strong>]
662            })]
663        </div>
664        <p>
665            <strong><:topbando:previsualisation_largeur_ecran:></strong>:
666            <span class="previsu_titre" title="500px">[[(#GET{largeur_bando})] pixels]</span>
667            <span class="previsu_titre" title="[(#VAL{800}|mult{[(#GET{fact_reduc})]})]px">[800 pixels]</span>
668            <span class="previsu_titre" title="[(#VAL{1024}|mult{[(#GET{fact_reduc})]})]px">[1024 pixels]</span>
669            <span class="previsu_titre" title="[(#VAL{1280}|mult{[(#GET{fact_reduc})]})]px">[1280 pixels]</span>
670            <span class="previsu_titre" title="[(#VAL{1600}|mult{[(#GET{fact_reduc})]})]px">[1600 pixels]</span>
671            <span class="previsu_titre" title="[(#VAL{1920}|mult{[(#GET{fact_reduc})]})]px">[1920 pixels]</span>
672            <span class="previsu_titre" title="[(#VAL{2048}|mult{[(#GET{fact_reduc})]})]px">[2048 pixels]</span>
673        </p>     
674
675    </div><!-- fin details -->
676   
677</fieldset>
678
679[(#REM)------------------------ MENU DES LANGUES ----------------------------- ]
680<fieldset>
681  <legend><:topbando:menu_langues:></legend>
682    <p>
683        <strong><:topbando:afficher_menu_langues:> :</strong>
684        <label><:topbando:oui:></label>
685        <input type="radio" name="afficher_langues" value="oui" [(#ENV{afficher_langues}|=={oui}|oui) checked="checked"] id='afficher_langues_oui' /> 
686        &nbsp;&nbsp;&nbsp;<input type="radio" name="afficher_langues" value="non" [(#ENV{afficher_langues}|=={oui}|non) checked="checked"] id='afficher_langues_non' />
687        <label><:topbando:non:></label>
688    </p>
689</fieldset>
690
691
692
693[(#REM) ------------------------ BOUTON OK ----------------------------------- ]
694<div>
695<input style="float:#LANG_RIGHT;" type="submit" name="_cfg_ok" value="<:OK:>" class="fondo" />
696<input type="reset" value="<:Reset:>" class="fondo" />
697<!--
698<input type="submit" name="_cfg_delete" value="<:Supprimer:>" class="fondo" />
699-->
700</div>
701
702</form>
703
Note: See TracBrowser for help on using the repository browser.