Créer et modifier les feuilles de style d'un site SPIP

Aller à : Navigation, rechercher
(Positionnement des blocs dans une page html)
(Utiliser la balise #EXPOSE en lien avec une une feuille de style)
Ligne 253 : Ligne 253 :
  
  
== Utiliser la balise #EXPOSE en lien avec une une feuille de style ==
+
== Utiliser la balise #EXPOSE en lien avec une feuille de style ==
  
 +
La balise Spip #EXPOSE permet de mettre en évidence, dans un menu ou dans une liste, l’objet principal de la page où l’on se trouve (voir http://www.spip.net/fr_article2319.html).
  
La balise #EXPOSE permet de mettre en évidence, dans un menu ou dans une liste, l’objet principal de la page où l’on se trouve (voir www.spip.net/fr_article2319.html).
+
SPIP remplace automatiquement la balise #EXPOSE par "''on''" si l’objet correspond au contexte ; sinon la balise est simplement ignorée.
  
SPIP remplace automatiquement la balise #EXPOSE par "on" si l’objet correspond au contexte ; sinon la balise est simplement ignorée.
+
Il suffit donc de créer dans la feuille de style un style "on" pour qu’il s’applique quand l’objet correspond au contexte.  
  
Il suffit donc de créer dans la feuille de style un style "on" pour qu’il s’applique quand l’objet correspond au contexte. Par exemple, si l’on veut obtenir, dans chaque page affichant un article du site, que les liens vers les articles de la rubrique en cours soient de couleur bleue, sauf le lien vers l’article affiché dans la page, qui sera en caractères gras et de couleur rouge :
+
===Exemple===
 +
Dans chaque page affichant un article du site, l’on veut que les liens vers les articles de la rubrique en cours soient de couleur bleue, sauf le lien vers l’article affiché dans la page, qui sera en caractères gras et de couleur rouge.
  
http://www.generationcyb.net/IMG/png/1109063.png
+
====Première écriture====
 +
On écrit dans la page html :
  
dans la page html, et
+
http://www.generationcyb.net/IMG/png/1109063.png
  
a color : blue ;
+
et dans la feuille de style :
a.on color : red ; font-weight : bold ;
+
<code>a color : blue ;
dans la feuille de style.
+
a.on color : red ; font-weight : bold ; </code>
  
On peut aussi écrire
+
====Une alternative====
#EXPOSExxx,yyy
+
On peut aussi écrire <code>#EXPOSExxx,yyy </code>, afin d’afficher "xxx" pour l’objet correspondant au contexte, et "yyy" pour les autres.
, afin d’afficher "xxx" pour l’objet correspondant au contexte, et "yyy" pour les autres.
+
  
 
Ainsi, si l’on crée dans le squelette :
 
Ainsi, si l’on crée dans le squelette :
Ligne 278 : Ligne 280 :
 
http://www.generationcyb.net/IMG/png/1109064.png
 
http://www.generationcyb.net/IMG/png/1109064.png
  
cela aura pour résultat d’afficher le titre des articles de la rubrique en cours avc un lien hypertexte pointant vers chacun, sauf pour l’article affiché sur la page en cours.
+
cela aura pour résultat d’afficher le titre des articles de la rubrique en cours avec un lien hypertexte pointant vers chacun, sauf pour l’article affiché sur la page en cours.
  
 
Voir aussi : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
 
Voir aussi : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
  
 
Mis en ligne le mardi 12 septembre 2006 sur http://www.generationcyb.net.
 
Mis en ligne le mardi 12 septembre 2006 sur http://www.generationcyb.net.

Version du 16 août 2008 à 16:07

Outils personnels
Espaces de noms
Variantes
Actions
Navigation
Boîte à outils
Imprimer / exporter