Design particulier

[sarki]

Re : Design particulier

Hello,
Je mets ici la procédure pour créer un fichier CSS que je t'ai indiqué dans l'autre forum, cela peut servir à d'autres

Avec le template Protostar comme de nombreux autres templates, il est possible de créer un fichier CSS personnalisé qui est lu en dernier de sorte que ses styles aient priorité sur les autres, cela permet par exemple de modifier les styles par défaut du template.

Dans ton cas, il serait donc possible de créer ce fichier et d'y mettre la partie CSS de ton code (celle encadrée entre les balises "styles") comme le suggère plus haut Lomart, cela éviterait de devoir activer dans le profil JCE la prise en charge des CSS dans la zone de l'éditeur.

Pourquoi il vaut mieux charger un fichier CSS ?
Quand tu ajoutes du CSS dans la partie rédaction, le code est chargé à chaque affichage de la page, alors que lorsqu'il est dans un fichier .css il est mis dans le cache du navigateur et n'a ainsi pas besoin d'être chargé à chaque fois.
Dans ton cas, ce n'est pas très important car ce code n'est pas très long.

Je t'explique quand-même le processus, car comme je le dit plus haut, créer ce fichier permet de modifier les styles par défaut du template, comme par exemple de supprimer la petite ligne de couleur bleue (par défaut) qui est en haut de page.
Je te propose cet exemple comme exercice

Le principe est de créer dans le dossier "templates/protostar/css" un fichier nommé "user.css". A savoir que le nom de ce fichier est propre au template Protostar, en général il se nomme plutôt "custom.css".
Il est possible de créer ce fichier depuis l'administration du site, mais il faut pour cela que le dossier "css" du template soit en droit d'écriture ; tu peux le vérifier par "Système -> Informations système -> Permissions des dossiers", si le dossier "Template" n'est pas indiqué "Modifiable", il faut alors avec un logiciel FTP appliquer au dossier "css" le droit CHMOD 777 (ce chiffre peut parfois changer selon l'hébergeur).
Si tu as un droit d'écriture sur ce dossier, suis les étapes suivantes et n'hésite pas à regarder les captures plus bas qui te résume le processus...

1. Clique sur "Extensions -> Templates -> Templates", puis sur "Protostar Détails et fichiers", cela affiche la liste des dossiers du template.
   Clique ensuite sur le bouton en haut nommé "Nouveau fichier", cela ouvre une fenêtre popup (voir captures ci-dessous).
2. Clique à gauche sur le dossier "css".
3. Dans le champ "Nom du fichier", indique "user", puis choisis dans la liste déroulante l'extension "css" et clique sur "Créer".
4. Une fois ce fichier créé, il te faut l'éditer.
   Clique à gauche sur le dossier "css" pour afficher son contenu puis sur le fichier "user.css", cela ajoute deux boutons dans la barre des boutons : "Enregistrer" et "Enregistrer & Fermer".
5. Dans la zone d'édition qui s'affiche à droite, colle le code suivant puis clique sur "Enregistrer & Fermer", tu pourras constater qu'il n'y a plus de barre bleue en haut de page.
   

   body.site {
      border-top: none;
   }

Liste des dossiers du template

La fenêtre popup de création de fichier


Pour ton cas, sur le même principe, il te faudrait coller la partie CSS de ton code en éditant ce fichier user.css
Voilà, j'espère que cela te sera utile un jour, sinon ce le sera sans doute pour quelqu'un d'autre

[ndubau]

Re : Design particulier

Bonjour Sarki
Merci de ce long et fort pédagogique développement sur la manière de créer ce css personnalisé ; je n'en attendais pas moins de ta part ! Je n'ai fait que le survoler et le mettrait en oeuvre bientôt pour testes
Cependant j'ai osé pendant le we inclure le code de lomart dans le css d'origine du template (ayant préservé l'original bien entendu).
Mais je me pose la question suivante : en l'incluant dans chaque article qui le requérait je pouvais jouer sur la taille, l'espacement... et autres propriétés des blocs.
Si ce code est chargé une fois via le css du template; je ne pourrai plus jouer sur ces éléments non ? Et cela serait alors un peu pénalisant (pour moi).
Cordialement
Noël

[lomart]

Re : Design particulier

Si ce code est chargé une fois via le css du template; je ne pourrai plus jouer sur ces éléments non ? Et cela serait alors un peu pénalisant (pour moi).

Eh oui, c'est pour cela que je laissais le choix
Ensuite, il est possible d'avoir les 2 :
- les règles générales dans le fichier CSS
- les adaptations pour l'article entre des balises style
comme cela, on a un rendu peut-être pas parfait mais c'est un départ

[ndubau]

Re : Design particulier

Eh oui, c'est pour cela que je laissais le choix
Ensuite, il est possible d'avoir les 2 :
- les règles générales dans le fichier CSS
- les adaptations pour l'article entre des balises style
comme cela, on a un rendu peut-être pas parfait mais c'est un départ

Merci de confirmer ce que je pressentais ! A mon tour de faire les choix en fonction de vos avis conjugués !
Cordialement et bonne semaine
Noël
Pas mis en résolu. mais cela ne saurait tarder !