Boucle dans feuille de style

Josh · Janvier 18, 2006, 3:56

Bonjour,

Je crois avoir déjà lu qu'il est possible de mettre une boucle ou tout au
moins une variable Spip dans une feuille de style externe...
J'en aurais besoin pour afficher le #LOGO_RUBRIQUE en background mais je ne
sais pas comment m'y prendre...

Je suppose que ça ce n'est pas très bon , n'est-ce pas ? (d'ailleurs ça ne
marche pas ;°) :

background: #fff url(#LOGO_RUBRIQUE) top no-repeat;

Olivier_GENDRIN · Janvier 18, 2006, 4:25

Bonjour,

Je crois avoir déjà lu qu'il est possible de mettre une
boucle ou tout au moins une variable Spip dans une feuille de
style externe...
J'en aurais besoin pour afficher le #LOGO_RUBRIQUE en
background mais je ne sais pas comment m'y prendre...

Je suppose que ça ce n'est pas très bon , n'est-ce pas ?
(d'ailleurs ça ne marche pas ;°) :

background: #fff url(#LOGO_RUBRIQUE) top no-repeat;

Je ne crois pas que changer la feuille de style pendant la navigation soit
très pertinent.

Cependant, tu peux peut-être déclarer un squelette en tant que feuille de
style ? Essaie d'ajouter dans son .php3 header("Content-Type: text/css");,
et dis nous si ça fonctionne. Sinon, je sais que Jacques Pyrat a une modif
du noyau qui permet de faire des couples .php3/.css.

homere · Janvier 18, 2006, 7:00

Josh a écrit :

Je crois avoir déjà lu qu'il est possible de mettre une boucle ou tout au
moins une variable Spip dans une feuille de style externe...

Est-ce que tu penses à ça <http://www.spip-contrib.net/Comment-faire-un-squelette-facile> ("Pour aller plus loin : Des variables dans la feuille de style") ?

Josh · Janvier 19, 2006, 8:31

Je ne crois pas que changer la feuille de style pendant la navigation soit
très pertinent.

Je n'ai jamais dis que je voulais changer la feuille de style pendant la
navigation.Je voudrais simplement que la couleur du background qui soutient
le titre dans la page article.php3 change en fonction de la rubrique. Pour
cela la seule façon que j'ai de faire c'est de mettre le background en tant
que logo de rubrique et ensuite de faire appel à lui. Cependant, comme tout
mes backgrounds sont dans ma feuille de style pour pouvoir être placé,
comment intégrer cette variable ?

FX1 · Janvier 19, 2006, 9:22

Josh a écrit :

Bonjour,

Je crois avoir déjà lu qu'il est possible de mettre une boucle ou tout au
moins une variable Spip dans une feuille de style externe...
J'en aurais besoin pour afficher le #LOGO_RUBRIQUE en background mais je ne
sais pas comment m'y prendre...

Je suppose que ça ce n'est pas très bon , n'est-ce pas ? (d'ailleurs ça ne
marche pas ;°) :

background: #fff url(#LOGO_RUBRIQUE) top no-repeat;

Aie, non c'est pas très bon, à moins que ta feuille de style soit un squelette (mais pour un changement, c'est pas très utile).

La solution la moins chiante reste d'utiliser les css :

1. tu encadres ton image dans un élément mère, genre div
<div class="newlogo">#LOGO_RUBRIQUE</div>

2. dans ta feuille de style tu définis le style div.newlogo img { }

3. tu crées autant de styles que de rubriques

4. tu crées des boucles pour afficher le logo avec la bonne classe ou tu fais un script php pour remplir dynamiquement le nom de la classe.

et voilà le travail !

Sinon...

LOGO_RUBRIQUE génère une balise complète <img>, c'est cela le hic. sinon il suffirait de définir une classe différente et de l'ajouter en attribut de ta balise IMG.

Il me semble à une époque avoir vu une balise genre #IMG pour récupérer juste l'url, ce qui serait le top pour faire ce que tu veux.

Sinon, tu as la possibilité de créer un filtre qui va changer le code généré quand tu mettras [(#LOGO_RUBRIQUE|monfiltrepourchangerlacss)].

tu as aussi la possibilité de changer la feuille de style utilisée en passant une variable d'environnement dans l'url, comme indiqué plus bas.

FX

Josh · Janvier 19, 2006, 9:37

FX wrote:

1. tu encadres ton image dans un élément mère, genre div
<div class="newlogo">#LOGO_RUBRIQUE</div>

2. dans ta feuille de style tu définis le style div.newlogo img { }

3. tu crées autant de styles que de rubriques

Jusque là tout va bien

4. tu crées des boucles pour afficher le logo avec la bonne classe ou tu

fais un script php pour remplir dynamiquement le nom de la classe.

Heu là je suis plus trop, quelles boucles ? Quel script php ? Je ne suis pas
programmeur (et c'est pour ça que j'aime Spip)

Sinon, tu as la possibilité de créer un filtre qui va changer le code

généré quand tu mettras [(#LOGO_RUBRIQUE|monfiltrepourchangerlacss)].

tu as aussi la possibilité de changer la feuille de style utilisée en

passant une variable d'environnement dans l'url, comme indiqué plus bas.

Oulala, je commence à regretter d'avoir posé la question !

FX1 · Janvier 19, 2006, 9:50

Je reprends

1. à la place de #LOGO_RUBRIQUE, tu mets [<img scr="(#LOGO_RUBRIQUE|fichier) border=0 alt="#TITRE" class="#TITRE_logo">

2. tu crées dans ta feuille de style un style .<lenomdetarubrique>_logo {}

et c'est tout.

FX

7f4d35d9aa7aea301baf · Janvier 19, 2006, 9:50

Josh a écrit :

Je ne crois pas que changer la feuille de style pendant la navigation soit
très pertinent.

Je n'ai jamais dis que je voulais changer la feuille de style pendant la
navigation.Je voudrais simplement que la couleur du background qui soutient
le titre dans la page article.php3 change en fonction de la rubrique. Pour
cela la seule façon que j'ai de faire c'est de mettre le background en tant
que logo de rubrique et ensuite de faire appel à lui. Cependant, comme tout
mes backgrounds sont dans ma feuille de style pour pouvoir être placé,
comment intégrer cette variable ?

Bonjour,

Pourquoi ne pas utiliser un mot clé sur la rubrique faisant partie d'un groupe, par exemple _couleur.

Alors tu peux faire

<BOUCLE_article(ARTICLES) {id_article}>
   <BOUCLE_couleur(MOTS) {type=_couleur} {id_rubrique} {0,1}>
     <h1 style="background-color:#_couleur:TITRE;">
   </BOUCLE_couleur>"
     <h1>
   <//B_couleur>
   #TITRE</h1>
</BOUCLE_article>

Claude

FX1 · Janvier 19, 2006, 9:55

Pourquoi ne pas utiliser un mot clé sur la rubrique faisant partie d'un groupe, par exemple _couleur.

Alors tu peux faire

<BOUCLE_article(ARTICLES) {id_article}>
   <BOUCLE_couleur(MOTS) {type=_couleur} {id_rubrique} {0,1}>
     <h1 style="background-color:#_couleur:TITRE;">
   </BOUCLE_couleur>"
     <h1>
   <//B_couleur>
   #TITRE</h1>
</BOUCLE_article>

C'est propre ca aussi, merci. Mais bon, trop de mots clé tuent le mot clé, je préfère passer par les rubriques autant que je peux pour justement n'utiliser les mots clé que quand c'est vraiment nécessaire.

Pour m'être retrouvé bloqué quelquefois pour exploiter une arbo qui n'exploitait pas assez les rubriques... :s

FX

FX1 · Janvier 19, 2006, 9:57

FX a écrit :

Je reprends

1. à la place de #LOGO_RUBRIQUE, tu mets [<img scr="(#LOGO_RUBRIQUE|fichier) border=0 alt="#TITRE" class="#TITRE_logo">

J'ai oublié le ] à la fin, soit
[<img
> scr="(#LOGO_RUBRIQUE|fichier) border=0 alt="#TITRE" class="#TITRE_logo">]

J'en profite pour remercier Jean-Rémy Duboc sans qui je n'aurais pas pu exprimer le fond de mon idée.

FX

Olivier_GENDRIN · Janvier 19, 2006, 10:57

La solution la moins chiante reste d'utiliser les css :

1. tu encadres ton image dans un élément mère, genre div
<div class="newlogo">#LOGO_RUBRIQUE</div>

Et pourquoi pas [(#LOGO_ARTICLE||inserer_attribut{class,newlogo})] ? (cf.
SPIP 1.8.2 - SPIP).

karim_belkacem · Janvier 19, 2006, 11:18

salut, une solution efficace, du moins que j’utilise souvent, c’est d’appeller un style avec le #ID de lobjet appelle (rubrique, article, breve, site)…

Exemple : je veux un fond (couleur gris) different dans les bloc de mes rubriques presentant mon menu generale, mon menu a 3 rubriques avec des #ID_RUBRIQUE 1,2,3.

ma boucle :

<BOUCLE-menu_general(RUBRIQUES) {racine}{par num titre}>

[(#TITRE|supprimer_numero)]

mes styles css :

.menu1 { background-color: #CCC; }
.menu2 { background-color: #999; }

.menu3 { background-color: #666; }

tu peux mettre aussi des images et si tu changes de couleur pas besoin de recalculer le cache

@plus

Le 19/01/06, Olivier GENDRIN <o.gendrin@novactive.com> a écrit :

La solution la moins chiante reste d’utiliser les css :

tu encadres ton image dans un élément mère, genre div

#LOGO_RUBRIQUE

Et pourquoi pas [(#LOGO_ARTICLE||inserer_attribut{class,newlogo})] ? (cf.
http://www.spip.net/fr_article3173.html) ).

liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
irc://irc.freenode.net/spip
FAQ : http://www.spip-contrib.net/spikini/FaQ

fb92dda8d0c6dd83baa1 · Janvier 19, 2006, 11:24

Bonjour (et bonne année karim )

Le 19 janv. 06 à 12:18, karim belkacem a écrit :

salut, une solution efficace, du moins que j'utilise souvent, c'est d'appeller un style avec le #ID de lobjet appelle (rubrique, article, breve, site)...

[...]
ma boucle :
<BOUCLE-menu_general(RUBRIQUES) {racine}{par num titre}>
<div class="menu#ID_RUBRIQUE">[(#TITRE|supprimer_numero)]</div>
</BOUCLE-menu_general>

mes styles css :

.menu1 { background-color: #CCC; }
.menu2 { background-color: #999; }
.menu3 { background-color: #666; }

tu peux mettre aussi des images et si tu changes de couleur pas besoin de recalculer le cache

Je trouve ça très bien mais il ne faut pas oublier que si on veut limiter le temps de chargement des css il vaut mieux :
une css appelée dans tous avec les éléments communs à tous et appelée ensuite, une css avec les éléments propres à la rubrique dédiée.

mes 2 cents (+5 euros pour le memento spip )
--
philippe

karim_belkacem · Janvier 19, 2006, 11:31

si on veut limiter le temps de chargement des css il vaut mieux :
une css appelée dans tous avec les éléments communs à tous et appelée
ensuite, une css avec les éléments propres à la rubrique dédiée.

oui, alors la, ami philippe, tu chipotes, car pour d’une css te ralentisse ton affichage, il faut vraiment qu’elles soient mal foutues ou extremenent charger, la solution vient peut etre du modem utilise lol

mes 2 cents (+5 euros pour le memento spip )

Si c’est pour la bonne cause, j’adhere

@plus

Josh · Janvier 20, 2006, 10:50

salut, une solution efficace, du moins que j'utilise souvent, c'est
d'appeller un style avec le #ID de lobjet appelle (rubrique, article,
breve, site)...

Exemple : je veux un fond (couleur gris) different dans les bloc de mes
rubriques presentant mon menu generale, mon menu a 3 rubriques avec des
#ID_RUBRIQUE 1,2,3.

ma boucle :

<BOUCLE-menu_general(RUBRIQUES) {racine}{par num titre}>
<div class="menu#ID_RUBRIQUE">[(#TITRE|supprimer_numero)]</div>
</BOUCLE-menu_general>

mes styles css :

.menu1 { background-color: #CCC; }
.menu2 { background-color: #999; }
.menu3 { background-color: #666; }

tu peux mettre aussi des images et si tu changes de couleur pas besoin
de recalculer le cache

ça c'est une réponse comme je les aime : simple et pratique, y a pas mieux.
MErci du fond du coeur !

J-R_DUBOC · Janvier 20, 2006, 12:21

> <BOUCLE-menu_general(RUBRIQUES) {racine}{par num titre}>
> <div class="menu#ID_RUBRIQUE">[(#TITRE|supprimer_numero)]</div>
> </BOUCLE-menu_general>
>
> mes styles css :
>
> .menu1 { background-color: #CCC; }
> .menu2 { background-color: #999; }
> .menu3 { background-color: #666; }

ça c'est une réponse comme je les aime : simple et pratique, y a pas mieux.
MErci du fond du coeur !

Oui, c'est pas mal du tout. Bien joué.
toutefois, pour contrer les diffcultés si jamais les rubriques
changent d'ID (qui a dit "plantage total de la base de données ?" ),
je conseillerais d'utiliser les mots-clés.

On 20/01/06, Josh <mail.ronan@no-log.org> wrote:

> salut, une solution efficace, du moins que j'utilise souvent, c'est
> d'appeller un style avec le #ID de lobjet appelle (rubrique, article,
> breve, site)...
>
> Exemple : je veux un fond (couleur gris) different dans les bloc de mes
> rubriques presentant mon menu generale, mon menu a 3 rubriques avec des
> #ID_RUBRIQUE 1,2,3.
>
> ma boucle :
>
> <BOUCLE-menu_general(RUBRIQUES) {racine}{par num titre}>
> <div class="menu#ID_RUBRIQUE">[(#TITRE|supprimer_numero)]</div>
> </BOUCLE-menu_general>
>
> mes styles css :
>
> .menu1 { background-color: #CCC; }
> .menu2 { background-color: #999; }
> .menu3 { background-color: #666; }
>
> tu peux mettre aussi des images et si tu changes de couleur pas besoin
> de recalculer le cache

ça c'est une réponse comme je les aime : simple et pratique, y a pas mieux.
MErci du fond du coeur !

_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
irc://irc.freenode.net/spip
FAQ : http://www.spip-contrib.net/spikini/FaQ

--
Jean-Rémy Duboc
jr.duboc@gmail.com
+33 (0) 06.08.49.51.93
Fax: +33 3-5935-0089

3c0af06c74bdab2d0dda · Janvier 23, 2006, 4:52

J-R DUBOC a écrit :

<BOUCLE-menu_general(RUBRIQUES) {racine}{par num titre}>
<div class="menu#ID_RUBRIQUE">[(#TITRE|supprimer_numero)]</div>
</BOUCLE-menu_general>

mes styles css :

.menu1 { background-color: #CCC; }
.menu2 { background-color: #999; }
.menu3 { background-color: #666; }

ça c'est une réponse comme je les aime : simple et pratique, y a pas mieux.
MErci du fond du coeur !

Oui, c'est pas mal du tout. Bien joué.
toutefois, pour contrer les diffcultés si jamais les rubriques
changent d'ID (qui a dit "plantage total de la base de données ?" ),
je conseillerais d'utiliser les mots-clés.

D'autant plus qu'on n'a pas forcément un style par rubrique, par exemple si on a un style par secteur et le même pour les sous-rubriques, on va pas s'em....er à créer un style par rubrique.

On 20/01/06, Josh <mail.ronan@no-log.org> wrote:

salut, une solution efficace, du moins que j'utilise souvent, c'est
d'appeller un style avec le #ID de lobjet appelle (rubrique, article,
breve, site)...

Exemple : je veux un fond (couleur gris) different dans les bloc de mes
rubriques presentant mon menu generale, mon menu a 3 rubriques avec des
#ID_RUBRIQUE 1,2,3.

ma boucle :

<BOUCLE-menu_general(RUBRIQUES) {racine}{par num titre}>
<div class="menu#ID_RUBRIQUE">[(#TITRE|supprimer_numero)]</div>
</BOUCLE-menu_general>

mes styles css :

.menu1 { background-color: #CCC; }
.menu2 { background-color: #999; }
.menu3 { background-color: #666; }

tu peux mettre aussi des images et si tu changes de couleur pas besoin
de recalculer le cache

ça c'est une réponse comme je les aime : simple et pratique, y a pas mieux.
MErci du fond du coeur !