Emplacement correct des règles CSS sur un site

Général
1

Bonjour à toutes et à tous,

Sur un site en SPIP 3.1.3 [23214], je vais devoir coller pas mal
d'articles sous formes de blocs dépliés comme dans l'exemple ci-dessous.

Exemple avec blocs dépliés :
http://spip.le-pingouin-masque.org/une-reformulation-des-items-du,3.html

J'ai fait des règles CSS qui me conviennent pour ce type d'articles. Le
problème ? Je les colle directement dans l'article ce qui est bien
évidemment une très mauvaise utilisation du CSS.

Le type de règle dans un article sont de la forme comme ci-dessous - bon
c'est très laid certes :-), c'est cependant la seule solution que j'ai
trouvée au niveau HTML-CSS qui correspondent à ce que je veux.) -

-----

<bloc>
<p style="margin-top:3%;"> Titre I </p>
    <div
style="margin-left:3%;margin-bottom:1%;margin-top:1%;line-height:1.2;">
        <visible>
        <p style="color:blue ;margin-bottom:1%;"> Titre I-1 </p>
        -* Blabla 1
        -* Blabla2
        </visible>
    </div>
</bloc>

-----

Je voulais pour faire propre, et surtout pratique, mettre ces règles
dans un fichier CSS valable pour tout le site (en surcharge) sans doute
sur les balises <bloc> et <visible> (mais en même temps, j'ai été obligé
de mettre un <div> !).

En gros :

- Je ne sais pas où mettre le fichier CSS dans SPIP et comment le nommer.

- Je ne sais plus comment fonctionnent les classes en CSS (mais je peux
retrouver).

En souhaitant une agréable journée et/ou nuit à tout le mode et en vous
remerciant par avance.

Bonne année 2017 par ailleurs que je souhaite l'année la plus libre de
tous les temps :slight_smile:

Fabrice Houpeaux

2

SPIP prévoit l'utilisation d'un fichier perso.css (à créer dans squelettes/css) dans lequel vous pourrez mettre vos déclarations css permettant d'obtenir la présentation souhaitée

voir la doc
http://www.spip.net/fr_article2331.html

3

Le couteau suisse fait ça avec des blocs dépliables, outil "Raccourcis
typographiques"

Patrick

=========

"Fabrice Houpeaux" <fabrice.houpeaux@gmail.com> a écrit dans le message de
news: 21c1346d-7d48-f5dd-4ab0-f7d1f3d441a5@gmail.com...
Bonjour à toutes et à tous,

Sur un site en SPIP 3.1.3 [23214], je vais devoir coller pas mal
d'articles sous formes de blocs dépliés comme dans l'exemple ci-dessous.

Exemple avec blocs dépliés :
http://spip.le-pingouin-masque.org/une-reformulation-des-items-du,3.html

J'ai fait des règles CSS qui me conviennent pour ce type d'articles. Le
problème ? Je les colle directement dans l'article ce qui est bien
évidemment une très mauvaise utilisation du CSS.

Le type de règle dans un article sont de la forme comme ci-dessous - bon
c'est très laid certes :-), c'est cependant la seule solution que j'ai
trouvée au niveau HTML-CSS qui correspondent à ce que je veux.) -

-----

<bloc>
<p style="margin-top:3%;"> Titre I </p>
    <div
style="margin-left:3%;margin-bottom:1%;margin-top:1%;line-height:1.2;">
        <visible>
        <p style="color:blue ;margin-bottom:1%;"> Titre I-1 </p>
        -* Blabla 1
        -* Blabla2
        </visible>
    </div>
</bloc>

-----

Je voulais pour faire propre, et surtout pratique, mettre ces règles
dans un fichier CSS valable pour tout le site (en surcharge) sans doute
sur les balises <bloc> et <visible> (mais en même temps, j'ai été obligé
de mettre un <div> !).

En gros :

- Je ne sais pas où mettre le fichier CSS dans SPIP et comment le nommer.

- Je ne sais plus comment fonctionnent les classes en CSS (mais je peux
retrouver).

En souhaitant une agréable journée et/ou nuit à tout le mode et en vous
remerciant par avance.

Bonne année 2017 par ailleurs que je souhaite l'année la plus libre de
tous les temps :slight_smile:

Fabrice Houpeaux

---
L'absence de virus dans ce courrier electronique a ete verifiee par le logiciel antivirus Avast.
https://www.avast.com/antivirus

4

Le 06/01/17 à 11:08, Patrick a écrit :

Le couteau suisse fait ça avec des blocs dépliables, outil "Raccourcis
typographiques"

Je crois que a demande de Fabrice portait non pas sur comment faire des blocs dépliables mais comment enlever les déclarations de style présentes dans le html pour les intégrer dans une feuille de style

5

Oui c'est bien cela : où mettre le feuille de style ?

Fabrice Houpeaux,

Le 06/01/17 à 11:08, Patrick a écrit :

Le couteau suisse fait ça avec des blocs dépliables, outil "Raccourcis
typographiques"

Je crois que a demande de Fabrice portait non pas sur comment faire
des blocs dépliables mais comment enlever les déclarations de style
présentes dans le html pour les intégrer dans une feuille de style

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Archives : https://www.mail-archive.com/spip@rezo.net/maillist.html

Infos : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

6

Le 2017-01-06 16:15, Fabrice Houpeaux a écrit :

Oui c'est bien cela : où mettre le feuille de style ?

Fabrice Houpeaux,

Le 06/01/17 à 11:08, Patrick a écrit :

Le couteau suisse fait ça avec des blocs dépliables, outil "Raccourcis
typographiques"

Je crois que a demande de Fabrice portait non pas sur comment faire
des blocs dépliables mais comment enlever les déclarations de style
présentes dans le html pour les intégrer dans une feuille de style

Bonjour

La réponse a déjà été donnée : squelettes/css/perso.css

Il faut donc créer à la racine du site un répertoire squelettes, un sous répertoire css et y mettre sa feuille de style intitulée perso.css
Tout ce qui est mis dans le répertoire squelettes surcharge les squelettes par défaut. Donc de la même façon si par exemple on veut ajouter des boucles sur la page d'accueil du site, il suffit de faire une copie de la page squelettes-dist/sommaire.html dans squelettes/sommaire.html et d'y faire ses modifications. Ce qu'il y a dans le répertoire squelettes est toujours prioritaire sur la dist.

pw

7

Le 06/01/2017 à 11:37, p.weber@free.fr a écrit :

Le 2017-01-06 16:15, Fabrice Houpeaux a écrit :

Oui c'est bien cela : où mettre le feuille de style ?

Fabrice Houpeaux,

Le 06/01/17 à 11:08, Patrick a écrit :

Le couteau suisse fait ça avec des blocs dépliables, outil "Raccourcis
typographiques"

Je crois que a demande de Fabrice portait non pas sur comment faire
des blocs dépliables mais comment enlever les déclarations de style
présentes dans le html pour les intégrer dans une feuille de style

Bonjour

La réponse a déjà été donnée : squelettes/css/perso.css

Il faut donc créer à la racine du site un répertoire squelettes, un
sous répertoire css et y mettre sa feuille de style intitulée perso.css
Tout ce qui est mis dans le répertoire squelettes surcharge les
squelettes par défaut. Donc de la même façon si par exemple on veut
ajouter des boucles sur la page d'accueil du site, il suffit de faire
une copie de la page squelettes-dist/sommaire.html dans
squelettes/sommaire.html et d'y faire ses modifications. Ce qu'il y a
dans le répertoire squelettes est toujours prioritaire sur la dist.

pw

Merci bien pour ces informations.

Fabrice

8

Bonsoir à toutes et à tous

1. J'ai bien créé httpdocs/spip/squelettes/css/perso.css (mon site est
dans un sous répertoire "spip" mais normalement dans le ".htaccess",
c'est ok).

2. Dans le "perso.css", J'ai mis des règles simples pour tester, par
exemple avec une class : .deplie3 { color: blue; margin-bottom: 1%; }

3. J'ai fait un test dans un article en mettant : <p class="deplie3">
Bonjour </p>

4. Cela ne prend pas en compte le css "perso.css", j'ai fait différents
tests (droits sur les dossiers, fichiers, règles css différentes, code
source de la page, ...).

5. J'ai bien lu cet article conseillé et bien fait :

Je ne comprends pas pourquoi le perso.css n'est pas pris en compte.
Merci par avance d'un éventuel coup de main.

Fabrice

Bonjour

La réponse a déjà été donnée : squelettes/css/perso.css

Il faut donc créer à la racine du site un répertoire squelettes, un
sous répertoire css et y mettre sa feuille de style intitulée perso.css
Tout ce qui est mis dans le répertoire squelettes surcharge les
squelettes par défaut. Donc de la même façon si par exemple on veut
ajouter des boucles sur la page d'accueil du site, il suffit de faire
une copie de la page squelettes-dist/sommaire.html dans
squelettes/sommaire.html et d'y faire ses modifications. Ce qu'il y a
dans le répertoire squelettes est toujours prioritaire sur la dist.

pw

9

Bonjour,

Le 09/01/2017 à 01:21, Fabrice Houpeaux a écrit :

1. J'ai bien créé httpdocs/spip/squelettes/css/perso.css (mon site est
dans un sous répertoire "spip" mais normalement dans le ".htaccess",
c'est ok).

Dans certains cas, le perso.css doit être directement dans squelettes/, ça dépend des distrib ou plugins.

CM

10

Le 09/01/17 à 01:21, Fabrice Houpeaux a écrit :

Bonsoir à toutes et à tous

1. J'ai bien créé httpdocs/spip/squelettes/css/perso.css (mon site est
dans un sous répertoire "spip" mais normalement dans le ".htaccess",
c'est ok).

2. Dans le "perso.css", J'ai mis des règles simples pour tester, par
exemple avec une class : .deplie3 { color: blue; margin-bottom: 1%; }

3. J'ai fait un test dans un article en mettant : <p class="deplie3">
Bonjour </p>

4. Cela ne prend pas en compte le css "perso.css", j'ai fait différents
tests (droits sur les dossiers, fichiers, règles css différentes, code
source de la page, ...).

5. J'ai bien lu cet article conseillé et bien fait :
Mettez-y votre style ! - SPIP

Je ne comprends pas pourquoi le perso.css n'est pas pris en compte.
Merci par avance d'un éventuel coup de main.

Est-ce que le fichier perso.css est bien chargé ? (regarder dans le head de la page)

11

Bonjour,

Merci de cette réponse. Cela ne change rien cependant.

Fabrice

Dans certains cas, le perso.css doit être directement dans
squelettes/, ça dépend des distrib ou plugins.

CM
_

12

Le 09/01/2017 à 10:56, Fabrice Houpeaux a écrit :

Merci de cette réponse. Cela ne change rien cependant.

Il faudrait tester quels css sont chargés : bouton d'administration "Squelettes et CSS". La liste des CSS s'affiche par transparence et en passant ta souris dessus, l'URL complète qui doit s'afficher dans la barre d'infos du navigateur (enfin chez moi ça marche comme ça).

CM

13

Bonjour,

1. Non justement, le fichier "perso.css" n'est pas chargé quand je
regarde le <head> du code source de la page d'un article test.
D'ailleurs, sauf erreur, je ne vois aucun des fichiers css qui sont
déclarés dans la configuration de base de spip (dans squelettes-dist /
inclure / head.html), je précise que toutes les balises <link> sont
comprises dans des crochets : [<link rel="stylesheet"
href="(#CHEMIN{css/spip.css}|direction_css)" type="text/css" />]

2. La plupart des fichiers css qui sont chargés sont des fichiers de
/plugins-dists ou /plugins/auto.

3. Je précise que j'utilise les plugins d'eva-web dont un des plugins
installe tout un squelette dans plugins/auto/evasquelettes et non dans
/squelettes... Peut-être que cela prend le dessus sur tout le reste.

Fabrice

Bonsoir à toutes et à tous

1. J'ai bien créé httpdocs/spip/squelettes/css/perso.css (mon site est
dans un sous répertoire "spip" mais normalement dans le ".htaccess",
c'est ok).

Est-ce que le fichier perso.css est bien chargé ? (regarder dans le
head de la page)

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Archives : https://www.mail-archive.com/spip@rezo.net/maillist.html

Infos : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

14

«bouton d'administration "Squelettes et CSS"» : où accédez-vous à ces
boutons ou comment paramétrez-vous l'accès à ces boutons ? J'ai essayé
via le couteau suisse, je ne vois pas.

Fabrice

Le 09/01/2017 à 10:56, Fabrice Houpeaux a écrit :

Merci de cette réponse. Cela ne change rien cependant.

Il faudrait tester quels css sont chargés : bouton d'administration
"Squelettes et CSS". La liste des CSS s'affiche par transparence et en
passant ta souris dessus, l'URL complète qui doit s'afficher dans la
barre d'infos du navigateur (enfin chez moi ça marche comme ça).

CM
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Archives : https://www.mail-archive.com/spip@rezo.net/maillist.html

Infos : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

15

Le 09/01/2017 à 11:49, Fabrice Houpeaux a écrit :

«bouton d'administration "Squelettes et CSS"» : où accédez-vous à ces
boutons ou comment paramétrez-vous l'accès à ces boutons ? J'ai essayé
via le couteau suisse, je ne vois pas.

Rien à voir avec le Couteau suisse, c'est de base dans SPIP. Dans ta page d'accueil de l'espace privé, il faut activer le Cookie de correspondance (en haut à gauche).

16

Le 09/01/17 à 11:34, Fabrice Houpeaux a écrit :

Bonjour,

1. Non justement, le fichier "perso.css" n'est pas chargé quand je
regarde le <head> du code source de la page d'un article test.
D'ailleurs, sauf erreur, je ne vois aucun des fichiers css qui sont
déclarés dans la configuration de base de spip (dans squelettes-dist /
inclure / head.html), je précise que toutes les balises <link> sont
comprises dans des crochets : [<link rel="stylesheet"
href="(#CHEMIN{css/spip.css}|direction_css)" type="text/css" />]

2. La plupart des fichiers css qui sont chargés sont des fichiers de
/plugins-dists ou /plugins/auto.

3. Je précise que j'utilise les plugins d'eva-web dont un des plugins
installe tout un squelette dans plugins/auto/evasquelettes et non dans
/squelettes... Peut-être que cela prend le dessus sur tout le reste.

Alors, pour tenter de mieux cerner le chemin emprunté et quels fichiers sont en jeu, as-tu essayé de rajouter "?var_mode=inclure" (ou &var_mode=inclure" selon le contexte) à la fin de l'url ?
Cela te perettra de voir quel fichier appelle les feuilles de style et d'y rajouter la tienne le cas échéant. Attention à bien respecter le chemin (path) dans l'appel à ta feuille de style.