guiderdoni.net

Bloc notes : spip, css, xhtml, web, standards, mac ...

Accueil > Spip > Comment faire une feuille de style en squelette

Articles de cette rubrique

Articles

publie le jeudi 17 juillet 2008 par Alexandra

Comment faire une feuille de style en squelette

Petit topo réalisé grâce à b_b et marcimat

1. Nommer sa feuille de style macss.css.html

2. Dans son squelette css mettre les balises SPIP suivantes :

#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
#HTTP_HEADER{Vary: Accept-Encoding}

Attention pour les css, il faut impérativement mettre de l’iso-latin. Tous les navigateurs ne savent en effet pas tous interpréter l’utf-8 dans les feuilles de style.

ou encore

#CACHE{24*7*3600}
#HTTP_HEADER{Content-Type: text/css;}

3. Dans le head de son squelette (inc_head.html pour la dist), l’appeler ainsi

[<link rel="stylesheet" href="(#URL_PAGE{macss.css}|direction_css)" type="text/css" media="projection, screen, tv" />]

L’avantage :

On peut mettre des filtres des boucles et des balises SPIP, bénéficier du cache etc...

- des filtres

body{
background:#ccc url([(#CHEMIN{img/masques/papier.png}|
image_sepia{#GET{couleur_dominante}}|
image_aplatir{jpg}|extraire_attribut{src})]);
}

- Une boucle dans la css

<BOUCLE_fonds_dep(RUBRIQUES){racine}>

.liste-articles li.dpt[(#ID_RUBRIQUE)]{
background: #fff url([(#LOGO_RUBRIQUE_SURVOL||image_sepia|
extraire_attribut{src})]) 98% 5px no-repeat;
}
</BOUCLE_fonds_dep>

- Jouer du #SET et du #GET

[(#SET{url_logo,[(#LOGO_SITE_SPIP||image_reduire{60,40}|
extraire_attribut{src}|sinon{[(#CHEMIN{img/bg_head_top.jpg})]})]})]

.sitelogo {
background:url(#GET{url_logo}) no-repeat center center;
}

Mettre sa css dans le corps d’un article

De la même manière on pourrait mettre dans ce squelette css une boucle qui appellerait le [(#TEXTE*)] d’un article. Et dans cet article mettre la css pour pouvoir l’éditer en ligne. Avec les crayons en plus que du bonheur !

#CACHE{3600*24*7*2}
#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}
<!-- DEBUT BOUCLE_macssidarticle20-->
<BOUCLE_macssidarticle20(ARTICLES){id_article=20}>
[(#TEXTE*)]
</BOUCLE_macssidarticle20>
<!-- FIN BOUCLE_macssidarticle20-->

L’étoile sur le #TEXTE* permet d’avoir le texte brut de la css sans aucun traitement propre et typo de SPIP.

Et dans l’article id=20 dans une rubrique cachée, mettre sa feuille de style qui devient éditable sans serveur ftp.

Références

Trois bons exemples de Marcimat et b_b valent mieux qu’un long discours

http://zone.spip.org/trac/spip-zone...

http://zone.spip.org/trac/spip-zone...

http://www.lespetitsdebrouillardsbr...

Une autre solution possible pour bénéficier du cache sur sa css

Un squelette css.html
Dans lequel on inclut une css normale

[(#REM) 7*24*3600 ]
#CACHE{0,cache-client}
#HTTP_HEADER{'Content-Type: text/css'}
[(#INCLURE{css/css.css}|compacte_css)]

Forum

Répondre à cet article

8 commentaires

Comment faire une feuille de style en squelette

Ah voilà enfin un bon article sur ce sujet ! Merci Alexandra !

> http://romy.tetue.net : http://romy.tetue.net

17 juillet 2008, par tetue - repondre message

Comment faire une feuille de style en squelette

bonne astuce, mais je bloque sur un truc

quand je mets le css dans l’article, je mets donc tout comme tu le dit, mais les balises #CHEMIN ne sont pas transformés :(

22 juillet 2008 - repondre message

je peux pas tester tout de suite, j’ai pas l’ordi qui va bien avec moi mais il me semble qu’il devrait trouver le #CHEMIN

22 juillet 2008, par Alexandra - repondre message

Comment faire une feuille de style en squelette

Pourquoi ne pas utiliser #CHARSET pour le charset ?

26 juillet 2008, par Olivier G. - repondre message

oui c’est preferable

26 juillet 2008, par Alexandra - repondre message

Comment faire une feuille de style en squelette

Salut alex,

Comme à chaque fois que j’en ait besoin je recherche comment on fait cette manip.

Ton article est maintenant vraiment super bien référencé, nous en révions tu l’a fait, merci

ALEX ! PRESIDENTE !

23 mars 2009, par achille - repondre message

lol achille

23 mars 2009, par Alexandra - repondre message

Comment faire une feuille de style en squelette

Dans le cas des feuilles de style en squelette, il faut éviter de nommer les id CSS en commençant par une majuscule.

Exemple : #Nomdel_id

Sinon Spip tente d’interpréter ce qu’il croit être une de ses balises et tronque le nom lors du parsing.

Résultat : omdel_id

et évidemment le style incriminé ne fonctionne plus.

J’ai quand même galéré un bon quart d’heure avant de comprendre ce qui se passait.

Merci, pour ce tutorial très utile.
La feuille de style en squelette, couplée au plugin "Couleur de rubrique", allège beaucoup l’écriture des CSS.

20 mai 2009, par Léon - repondre message
2005-2017 - Contenu en GPL http://www.guiderdoni.net - Site réalisé avec SPIP 
rechercher - plan du site - prive - alexandra.guiderdoni@gmail.com
CSS - XHTML - squelette