[Réglé] Changer la couleur des liens uniquement à certains endroits

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.3

Modérateur : Équipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !
Répondre
nexosenz
Roi des posts
Roi des posts
Messages : 648
Enregistré le : 13 avr. 2011 à 18:29
Localisation : Bordeaux / Villepinte / Cognac
Contact :

Changer la couleur des liens uniquement à certains endroits

Message par nexosenz »

Hello,

Bon allez je demande car je n'y arrive pas malgré avoir lu et testé plein de chose ... Je travail sur la mise en place d'une version sombre de mon thème et je dois évidement faire des ajustement à droite a gauche

J'essaye désespérément de changer le css de .postlink, .poslink:visited et .postlink:hover uniquement à certain endroit, sans les modifier partout ailleurs dans le thème.

Par exemple, comment lier ce CSS uniquement au bloc d'annonce (ext board annoucement) ou juste aux blocs de regles de chaque forum ?

Je pensais y arriver en plaçant #phpbb_announcement devant la class mais visiblement j'ai pas du tout compris :

Code : Tout sélectionner

#phpbb_announcement .postlink, .postlink:visited {
    border-bottom-color: #000000;
    color: #000000;
}

#phpbb_announcement .postlink:hover {
    color: #1b3045;
    border-bottom: 1px solid #1b3045;
}
et idem pour les blocs de regle dans les forums

Merci
300Cpassion.com - L'univers de la 300C en quelques clics ...
Avatar du membre
varchar
Posteur habitué
Posteur habitué
Messages : 275
Enregistré le : 26 janv. 2023 à 00:29

Changer la couleur des liens uniquement à certains endroits

Message par varchar »

Vous pouvez le faire par l'ajout d'une div
Par exemple vous voulez mettre le lien de la FAQ en orange, ouvrez le fichier navbar_header.html

Trouvez:

Code : Tout sélectionner

              <a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">
				<i class="icon fa-question-circle fa-fw" aria-hidden="true"></i><span>{L_FAQ}</span>
			</a>
			
Remplacez par:

Code : Tout sélectionner

		<div class="faqlink">
			<a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">
				<i class="icon fa-question-circle fa-fw" aria-hidden="true"></i><span>{L_FAQ}</span>
			</a>
		</div>
Enregistrez

Ajoutez ceci dans votre fichier css:

Code : Tout sélectionner

.faqlink a {
    border-bottom-color: #ff7f00;
    color: #ff7f00;
}
Enregistrez et purgez le cache
Fondateur du CPOR
Comité de Promotion de l’Outil de Recherche
nexosenz
Roi des posts
Roi des posts
Messages : 648
Enregistré le : 13 avr. 2011 à 18:29
Localisation : Bordeaux / Villepinte / Cognac
Contact :

Changer la couleur des liens uniquement à certains endroits

Message par nexosenz »

il n'est donc pas possible de le faire uniquement et directement en CSS ? (bien plus simple pour moi pour la gestion de différents thèmes)
300Cpassion.com - L'univers de la 300C en quelques clics ...
Avatar du membre
varchar
Posteur habitué
Posteur habitué
Messages : 275
Enregistré le : 26 janv. 2023 à 00:29

Changer la couleur des liens uniquement à certains endroits

Message par varchar »

Avez-vous essayé en modifiant votre code ainsi:

Code : Tout sélectionner

#phpbb_announcement .postlink a, .postlink a:visited {
    border-bottom-color: #000000;
    color: #000000;
}

#phpbb_announcement .postlink a:hover {
    color: #1b3045;
    border-bottom: 1px solid #1b3045;
}
Fondateur du CPOR
Comité de Promotion de l’Outil de Recherche
nexosenz
Roi des posts
Roi des posts
Messages : 648
Enregistré le : 13 avr. 2011 à 18:29
Localisation : Bordeaux / Villepinte / Cognac
Contact :

Changer la couleur des liens uniquement à certains endroits

Message par nexosenz »

non plus, meme résultat qu'avec ma version. L'ensemble des liens postés sont modifiés, et le hover n'est pas pris en compte. Tout les liens postés passent en #000000
300Cpassion.com - L'univers de la 300C en quelques clics ...
Avatar du membre
Sylveretour
Maître des floodeurs
Maître des floodeurs
Messages : 2138
Enregistré le : 21 nov. 2017 à 18:24
Localisation : West Coast
Contact :

Changer la couleur des liens uniquement à certains endroits

Message par Sylveretour »

Bonjour,

L'id que tu indique n'est pas bon, c'est phpbb_announcement_1
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 28280
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Changer la couleur des liens uniquement à certains endroits

Message par cabot »

Hello,

Pourquoi vouloir utiliser l'ID (qui de toute façon ne correspond pas) pour construire ton sélecteur, alors que tu as une classe disponible ?
Inutile d'ajouter de la spécificité pour rien.

Code : Tout sélectionner

.phpbb_announcement .postlink,
.phpbb_announcement .postlink:visited {
    border-bottom-color: #000000;
    color: #000000;
}

.phpbb_announcement .postlink:hover {
    color: #1b3045;
    border-bottom: 1px solid #1b3045;
}
Mais si tu créés un style sombre, tu n'as pas besoin de redéclarer la couleur sur .phpbb_announcement .postlink puisque tu devrais déjà l'avoir fait sur .postlink. Non ?
nexosenz
Roi des posts
Roi des posts
Messages : 648
Enregistré le : 13 avr. 2011 à 18:29
Localisation : Bordeaux / Villepinte / Cognac
Contact :

Changer la couleur des liens uniquement à certains endroits

Message par nexosenz »

Pourquoi vouloir utiliser l'ID (qui de toute façon ne correspond pas) pour construire ton sélecteur, alors que tu as une classe disponible ?
Parce que j'avais essayé avec la classe directement, mais ca ne fonctionnait pas ... Mais j'avais fait une erreur idiote dont je me suis rendu compte immédiatement en voyant ta solution (qui fonctionne 👍).

j'avais fait : .phpbb_announcement .postlink, .postlink:visited { en pensant que le second .postlink serait aussi associé.
Mais si tu créés un style sombre, tu n'as pas besoin de redéclarer la couleur sur .phpbb_announcement .postlink puisque tu devrais déjà l'avoir fait sur .postlink. Non ?
Oui mais Non :lol: Je t'explique comment j'ai monté mon bazare. Comme ca si ma logique est débile ou tordu tu vas pouvoir m'arrêter de suite. Assis toi :

Je voulais proposer une déclinaison sombre de mon theme, ainsi qu'une autre couleur.

Mais je ne voulais pas m'amuser à copier coller mes modifs dans chacun, ainsi que de creer de nouveaux dossiers dans les style de mes ext.
Mes nouveaux themes sont donc uniquement des "enfants".

Prosilver (inactif)
---- Proflat (inactif)
--------- Proflat_perso (inactif)
----------------- Theme_bleu (actif)
----------------- Theme_bleu_sombre (actif)
----------------- Theme_rouge (actif)
----------------- Theme_rouge_sombre (actif)

Mes 4 couleurs n'etant que des déclinaisons de CSS (déclinaison de couleur proflat + version darkside pour le sombre), sans aucun template ni de modif perso.

L'objet de ce sujet, étant de réaliser quelques retouches nécessaire directement sur les versions sombres, car la couleur de fond de phpbb_announcement est commune partout et ca ne rendait pas foufou.

Ca fonctionne plutot bien. Juste la couleur des groupes que je ne peux pas changer en fonction du theme qui ne rendent pas bien en sombre, mais c'est un autre sujet.
300Cpassion.com - L'univers de la 300C en quelques clics ...
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 28280
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Changer la couleur des liens uniquement à certains endroits

Message par cabot »

Sinon tu peux gruger et imposer la transparence sur la couleur de fond de l'annonce en utilisant le format hex8. Comme ça elle affichera la couleur de fond du parent (.wrap) et les liens devraient être visibles. 8)

Alors normalement tu peux pas car l'input qui reçoit la valeur de couleur est limité à 6 caractères, mais... cette limite n'est imposée que par HTML.
Pour la changer :
  • soit en modifiant le fichier ext/phpbb/boardannouncements/adm/style/settings_add_edit.html
    Trouver :

    Code : Tout sélectionner

    <input name="board_announcements_bgcolor" type="text" id="board_announcements_bgcolor" value="{{ BOARD_ANNOUNCEMENTS_BGCOLOR }}" size="6" maxlength="6" {% if BOARD_ANNOUNCEMENTS_BGCOLOR %}style="border-right:20px solid #{{ BOARD_ANNOUNCEMENTS_BGCOLOR }}"{% endif %}>
    Remplacer 6 par 8 sur l'attribut maxlength="6"
  • soit, si tu ne veux pas modifier le fichier, remplacer cette valeur directement depuis l'inspecteur du navigateur avant de saisir une valeur hex8 dans le champ et de valider le formulaire.
    Image
Et paf, en utilisant le format hex8, tu peux avoir la transparence. Il suffit d'ajouter les deux derniers caractères à la couleur hex6 pour retourner le pourcentage du canal alpha.
Par exemple, #ffffff00 est un blanc transparent et #ffffffff est un blanc tout blanc.
Il va de soi que ça fonctionne avec toutes les couleurs hex.
La liste qui va bien :

Code : Tout sélectionner

100% -> FF
99% -> FC
98% -> FA
97% -> F7
96% -> F5
95% -> F2
94% -> F0
93% -> ED
92% -> EB
91% -> E8
90% -> E6
89% -> E3
88% -> E0
87% -> DE
86% -> DB
85% -> D9
84% -> D6
83% -> D4
82% -> D1
81% -> CF
80% -> CC
79% -> C9
78% -> C7
77% -> C4
76% -> C2
75% -> BF
74% -> BD
73% -> BA
72% -> B8
71% -> B5
70% -> B3
69% -> B0
68% -> AD
67% -> AB
66% -> A8
65% -> A6
64% -> A3
63% -> A1
62% -> 9E
61% -> 9C
60% -> 99
59% -> 96
58% -> 94
57% -> 91
56% -> 8F
55% -> 8C
54% -> 8A
53% -> 87
52% -> 85
51% -> 82
50% -> 80
49% -> 7D
48% -> 7A
47% -> 78
46% -> 75
45% -> 73
44% -> 70
43% -> 6E
42% -> 6B
41% -> 69
40% -> 66
39% -> 63
38% -> 61
37% -> 5E
36% -> 5C
35% -> 59
34% -> 57
33% -> 54
32% -> 52
31% -> 4F
30% -> 4D
29% -> 4A
28% -> 47
27% -> 45
26% -> 42
25% -> 40
24% -> 3D
23% -> 3B
22% -> 38
21% -> 36
20% -> 33
19% -> 30
18% -> 2E
17% -> 2B
16% -> 29
15% -> 26
14% -> 24
13% -> 21
12% -> 1F
11% -> 1C
10% -> 1A
9% -> 17
8% -> 14
7% -> 12
6% -> 0F
5% -> 0D
4% -> 0A
3% -> 08
2% -> 05
1% -> 03
0% -> 00
nexosenz
Roi des posts
Roi des posts
Messages : 648
Enregistré le : 13 avr. 2011 à 18:29
Localisation : Bordeaux / Villepinte / Cognac
Contact :

Changer la couleur des liens uniquement à certains endroits

Message par nexosenz »

Hello,

Je ne connaissais pas du tout cette possibilité 8) C'est très pratique.

Image
Image

Image
Image

Ca va m'aider pour établir mes couleur sur mon theme sombre perso. Je vais l'intégrer aussi à mes cadre des "regle de forum" où j'ai la meme problématique.

Impec. Merci pour le cours :D
300Cpassion.com - L'univers de la 300C en quelques clics ...
Répondre

Retourner vers « [3.3.x] Modifications et recherche de styles »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 0 invité