[RÉGLÉ] Modification de Template

[Remi45]

Bonjour

Je débute sur JOOMLA et je voudrais modifier le Template que j'utilise (Protostar) de manière à ce que tous mes articles aient le même style
Par exemple la balise h1 doit être centrée avec le texte de couleur bleu

h1 {
text-align: center:
color: #3366ff;
}

J'ai vu qu'on pouvait modifier le fichier template.css mais malheureusement j'ai du mal à savoir où modifier les balises.

Exemple j'ai la balise lique je souhaite modifier J'ai bien trouvé dans le template.css la balise li mais elle s'appique à toutes les listes et du coup ça me modifie des choses que je ne veux pas

Pour résumer je voudrais savoir:

1. Ou trouver dans le template.css les balises spécifiques qui sont appliqué aux articles si elle existes
2. Si ces balise ne sont pas présente comment les créer
3. Ou sinon comment appliquer un fichier de style personnel aux .articles

Merci pour toute aide

Rémi

[lomart]

Bonjour et bienvenue sur le forum,

Pour modifier le template du template Protostar, il ne faut jamais modifier le fichier original, mais mettre ses ajouts dans un fichier user.css dans le dossier templates/protostar/css.

Pour identifier le sélecteur (p, li, ...) auquel affecter les nouvelles propriétés, il faut utiliser un inspecteur de code. Exemple de doc pour Firefox https://developer.mozilla.org/fr/docs/Outils/Inspecteur
Comme indiqué dans la doc, il permet de simuler une modification pour contrôler son action.

Avoir un outil n'est pas tout, il faut aussi savoir comment l'utiliser. Le CSS est un langage avec des règles qu'il faut connaitre pour le manipuler. Pour les sélecteurs, vous avez ce tuto : https://developer.mozilla.org/fr/doc...%c3%a9lecteurs

[Eddy.vh]

Bonjour.

Il ne faut jamais modifier les fichiers originaux de Joomla! ni de son template par défaut.
Les modifications seraient perdues à la première mise à jour.
Protostar accepte un fichiers "de surcharge", il doit se nommer user.css ou custom.css à tester ou attendre la confirmation d'un utilisateur de Protostar.

Les css apportées dans ce fichier auront priorités sur les originales puis qu'il est chargé après tous les fichiers css du template.

[Remi45]

Tout d'abord désolé pour ma réponse tardive mais j'ai été extrèmement occupé ces derniers temps

Effectivement il faut ajouter le fichier user.css

J'ai donc crée la classe suivante dans user.css

.maclasse {
color:#006600;
}
h1.maclasse{
text-align:center;
}

Dans mon article j'ai mis

<div class="maclasse">
<h1>Mon Titre</h1>
</div>

Mais ça ne marche pas

Quand je regarde avec l'inspecteur il semble que la règle h1 specifique à ma classe ne soit pas prise en compte

[lomart]

Bonjour,

C'est normal que ça ne marche pas !

Le CSS devrait être :

 /*pour aligner tout le contenu du bloc maclasse */
.maclasse {  
   text-align:center;
}
/*pour mettre en rouge toutes les balises h1 qui sont dans un bloc maclasse*/
.maclasse h1{
  color:#006600;
}

[Remi45]

J'avais essayé ça aussi et ça n'avait pas marché mais j'ai du faire une erreur quelque part car en reprenant cette syntaxe ça fonctionne

J'ai trouvé une alternative qui est

#articlemod {
color:#006600;
}
#articlemod h1 {
text-align:center;
}

Et dans mon article j'ai mis

<div id="articlemod">
<h1>Mon Titre</h1>
</div>

Merci pour le coup de main