[RÉGLÉ] Comment retrouver mon suffixe CSS dans la feuille de style

[alva75]

Bonjour a tous,

Avant tout je souhaite m'excuser si le problème a déjà été abordé auparavant, j'ai pourtant chercher sur les forums mais j'ai pas trouvé ce que je souhaite.

Alors j'ai besoin de changer la couleur de mon lien de menu, donc dans l'administration, jai ajouter un nom au style CSS du lien, comme j'ai pu le voir dans les différents tutos pour personnaliser un module.

Ensuite quand j'affiche la page, je clique sur examiner l’élément et aucun problème puisque il apparait bien mon suffixe sur le lien de menu entre les balises "a class". Problème çà affiche la partie html, dans le petit carrée des règles ça n'affiche pas sur quel ligne de la feuille de style se trouve ma Class personnalisé. Il apparait uniquement Inline, et ensuite les généraux comme le montre le screen ci dessous. Alors que moi je ne souhaite changer que un seul lien de menu celui que j'ai personnalisé.


Je cherche depuis des jours déjà sur les lignes du template mais je n'arrive pas a le retrouver au milieu de toutes ces lignes.

Alors je fait appel a vous afin de m'aider a trouvé la solution qui je suis sur doit être vraiment toute simple.

Merci a vous

[Casper17]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Salut,

tu as un lien vers ton site ??

[alva75]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Salut,

tu as un lien vers ton site ??

Bonjour et merci,
non pas encore je le construit en local pour le moment

[Casper17]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

A sa complique les choses...
clique sur template.css c'est la où se trouve la feuille de style si je ne me trompe pas.
ce que tu affiches c'est la partie HTML

[lomart]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Bonsoir,

La couleur rose du lien est définie par programmation directement dans le code HTML.
Il faudrait faire une copie d'écran de ce code HTML pour voir ce qu'il est possible de faire.
Ce code est généré par quelle extension ? Il est peut-être possible d'agir sur les paramètres de cette extension, module ou plugin.

[alva75]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Bonsoir,

La couleur rose du lien est définie par programmation directement dans le code HTML.
Il faudrait faire une copie d'écran de ce code HTML pour voir ce qu'il est possible de faire.
Ce code est généré par quelle extension ? Il est peut-être possible d'agir sur les paramètres de cette extension, module ou plugin.

Bonjour, oui effectivement la couleur rose apparait sur le html, mais il indique bien que c'est dans la feuille de style CSS a la ligne 2846, pour ça aucun problème si je modifie la couleur ici, cela modifie bien la couleur de mon menu, mais aussi la couleur des autres menus, ce que je ne souhaite pas justement. C'est pour ça que j'ai été dans l'administration, et que donné un style CSS a mon lien de menu que j'ai nommé "lienperso", afin de ne modifier uniquement que ce menu précis.
J'ai également fait la même démarche avec le module de menu que j'ai nommé menu perso.



Donc afin de trouver sur quelle ligne se trouve ce que je souhaite modifier dans ma feuille CSS, je visualise mon site, je clic droit sur l’élément que je souhaite modifier et je clique sur examiner l’élément, et la en bas a gauche, il me dit sur quelle ligne de la feuille de style je peux modifier l’élément. Je l'ai fait pour d'autres modules et ça a très bien marché, mais ça donné des paramètres généraux, et moi je veux que ce menu la ai une couleur différente des autres, d’où ma démarche.
Cependant lui seul n'apparait pas la ligne sur que ou il se trouve sur la feuille de style, il y a juste élément et inline comme vous pouvez le voir sur ma capture d'écran ou j'ai mit le html complet comme demandé:



La dessus tout apparait bien en html comme vous pouvez le voir, j'ai bien comme prévu en surbrillance
" a class="lienperso" comme je l'ai nommé,
et le tout inséré dans le menu:
class="nav menuperso"

Seulement comme je dit, je n'ai aucune information sur quelle ligne de ma feuille de style CSS je peux en modifier les paramètres.
Pourtant dans cette fenêtre, si je clique sur:
élément inline, et que je lui ajoute "color xxx" cela fonctionne, sauf que comme ce n'est pas un éditeur ce ne sauvegarde pas.

Donc je ne sait plus comment faire, si vous avez une autre méthode pour retrouver mon style CSS personnalisé dans la feuille de style je suis tout oui.

Svp aidez moi je suis désespéré çà fait des jours que je bloque la dessus alors que j'ai pratiquement terminé le site en entier merci.

[Casper17]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Si je ne me trompe pas (on me reprendra si c'est le cas), la ligne à modifier est dans ton fichier template.css que tu trouveras et pourras surcharger dans les substitutions de ce template dans joomla à la ligne concernée.
Attention il faudra peut être que tu créés le css de ta classe perso depuis le début mais rien de complèxe.

[alva75]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Si je ne me trompe pas (on me reprendra si c'est le cas), la ligne à modifier est dans ton fichier template.css que tu trouveras et pourras surcharger dans les substitutions de ce template dans joomla à la ligne concernée.
Attention il faudra peut être que tu créés le css de ta classe perso depuis le début mais rien de complèxe.

Oui c'est exactement cela, je sais que je doit le changer dans template CSS.
Mais sur quel ligne se trouve ma classe perso ? C'est ca en fait ma question...
Pourquoi créer le CSS de ma classe perso depuis le début ? J'ai pas compris.

[lomart]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

La ligne à modifier est dans le fichier HTML, c'est la raison de la mention inline à la place de template.css
Il est inutile de chercher la ligne à modifier, elle n'existe pas.
2 solutions:
- faire un override de la partie présentation du module/composant à l'origine de la ligne HTML
- créer une règle CSS de plus grande priorité que le style inline

Les copies d'écran sont illisibles. Il faut se mettre en mode avancé (comme pour le premier message)

[Casper17]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

La ligne à modifier est dans le fichier HTML, c'est la raison de la mention inline à la place de template.css
Il est inutile de chercher la ligne à modifier, elle n'existe pas.
2 solutions:
- faire un override de la partie présentation du module/composant à l'origine de la ligne HTML
- créer une règle CSS de plus grande priorité que le style inline

Les copies d'écran sont illisibles. Il faut se mettre en mode avancé (comme pour le premier message)

j'étais donc dans le vrai =)

[alva75]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

La ligne à modifier est dans le fichier HTML, c'est la raison de la mention inline à la place de template.css
Il est inutile de chercher la ligne à modifier, elle n'existe pas.
2 solutions:
- faire un override de la partie présentation du module/composant à l'origine de la ligne HTML
- créer une règle CSS de plus grande priorité que le style inline

Les copies d'écran sont illisibles. Il faut se mettre en mode avancé (comme pour le premier message)

Encore une fois je vous remercie a tous d'avoir prit le temps de me répondre.
Je comprend mieux ce que tu me dit, pour l'override ca me semble un peu compliqué de reprendre le template afin d'en faire un dérivé pour mon lien de menu. Si encore c'était moi qui avait cree la feuille de style CSS jen serait peut être capable mais la comme ça, cela me semble compliqué.
Par contre la deuxieme solution je ne l'ai pas bien comprise.
Auriez vous l'amabilité de m'expliquer comment faire ?

Merci

[Casper17]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Encore une fois je vous remercie a tous d'avoir prit le temps de me répondre.
Je comprend mieux ce que tu me dit, pour l'override ca me semble un peu compliqué de reprendre le template afin d'en faire un dérivé pour mon lien de menu. Si encore c'était moi qui avait cree la feuille de style CSS jen serait peut être capable mais la comme ça, cela me semble compliqué.
Par contre la deuxieme solution je ne l'ai pas bien comprise.
Auriez vous l'amabilité de m'expliquer comment faire ?

Encore une fois si je ne me trompe pas tu as juste a rajouter quelques ligne de CSS dans template.css
comme expliqué ci dessous :

Appliquer un style : class et id

Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu).
Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise (c'est la technique que je vous ai présentée un peu plus tôt) mais, comme je vous l'ai dit, ce n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe).

Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :

l'attribut class ;
l'attribut id.
Que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence que je vous dévoilerai plus bas.
Pour le moment, et pour faire simple, on ne va s'intéresser qu'à l'attribut class.

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc.

<h1 class=""> </h1>
<p class=""> </p>
<img class="" />

Oui mais que met-on comme valeur à l'attribut class ?
En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, du moment que le nom commence par une lettre.

Par exemple, je vais associer la classe introduction à mon premier paragraphe (ligne 12) :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p class="introduction">Bonjour et bienvenue sur mon site !</p>
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
    </body>
</html>

Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom : introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : « Je veux que seules les balises qui ont comme nom 'introduction' soient affichées en bleu ».

Pour faire cela en CSS, indiquez le nom de votre classe en commençant par un point, comme ci-dessous :

.introduction
{
    color: blue;
}

Source openclassroom

[alva75]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Ah merci beaucoup, je vais essayer ca en rentrant chez moi et je vous tiendrais au courant.
Merci beaucoup à voys en tout cas d'avoir prit le temps de vous pencher sur mon probleme.

[lomart]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Encore une fois si je ne me trompe pas tu as juste a rajouter quelques ligne de CSS dans template.css

Tu lui renvoies un extrait de la règle générale comme on peut la lire dans tous les cours.
Mais son problème est qu'il faut surcharger un style inline. Ce qui implique de créer une classe qui n'existe sans doute pas, vu que le style est donné par une ligne du style :
<a style="color:#e082db" href="...">lien</a>
Il faut connaitre les lignes autour pour voir s'il est possible de créer une règle qui surpasse le style inline sans modifier les autres lignes, dans le genre :
#item123 a[style] {color:red !important;}

pour l'override ca me semble un peu compliqué de reprendre le template afin d'en faire un dérivé pour mon lien de menu.

Ce n'est pas une surcharge du template mais de l'extension/module qui génère le code HTML
Il faut une copie d'écran de la totalité de l'inspecteur de code (HTML et CSS) dans le contexte de la copie du premier message
S'il s'agit d'un module menu. Quel est-il ?

[Casper17]

Re : Comment retrouver mon suffixe CSS dans la feuille de style

Tu lui renvoies un extrait de la règle générale comme on peut la lire dans tous les cours.
Mais son problème est qu'il faut surcharger un style inline. Ce qui implique de créer une classe qui n'existe sans doute pas, vu que le style est donné par une ligne du style :
<a style="color:#e082db" href="...">lien</a>
Il faut connaitre les lignes autour pour voir s'il est possible de créer une règle qui surpasse le style inline sans modifier les autres lignes, dans le genre :
#item123 a[style] {color:red !important;}



Ce n'est pas une surcharge du template mais de l'extension/module qui génère le code HTML
Il faut une copie d'écran de la totalité de l'inspecteur de code (HTML et CSS) dans le contexte de la copie du premier message
S'il s'agit d'un module menu. Quel est-il ?

il a écrit ceci :

Bonjour a tous,

Avant tout je souhaite m'excuser si le problème a déjà été abordé auparavant, j'ai pourtant chercher sur les forums mais j'ai pas trouvé ce que je souhaite.

Alors j'ai besoin de changer la couleur de mon lien de menu, donc dans l'administration, jai ajouter un nom au style CSS du lien, comme j'ai pu le voir dans les différents tutos pour personnaliser un module.
Ensuite quand j'affiche la page, je clique sur examiner l’élément et aucun problème puisque il apparait bien mon suffixe sur le lien de menu entre les balises "a class". Problème çà affiche la partie html, dans le petit carrée des règles ça n'affiche pas sur quel ligne de la feuille de style se trouve ma Class personnalisé. Il apparait uniquement Inline, et ensuite les généraux comme le montre le screen ci dessous. Alors que moi je ne souhaite changer que un seul lien de menu celui que j'ai personnalisé.

il a créé une class perso pour son lien, donc il peut gérer le style du lien avec non ?