Mettre des cadres autour des titres des sous-forums

[Naywayz]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Je voulais savoir comment il était possible de mettre un cadre autour des titres des sous-forums comme indiqué dans l'image.

Merci d'avance

[MlleAlys]

Bonjour,
Je poste pour voir l'adresse du forum.
Vous souhaitez un cadre autour de l'ensemble des sous-forum c'est bien ça ? (pas un cadre pour chaque lien)

Edit : il me semble que vous avez déjà un cadre autour des sous-forums ?

[Naywayz]

Bonsoir,

Non, je voudrais un cadre pour chaque lien comme sur l'image que j'ai posté (liens qui sont en réalité des sous-forums de la catégorie). Je voudrais pouvoir leur donner un cadre comme sur le screen (qui s'illumine quand le curseur passe dessus) et qui gardent leur couleur d'origine lorsqu'ils ne sont pas visités.

PS: c'est le mauvais lien, c'est un ancien forum dont je n'ai plus l'intérêt (je vais modifier le lien).
PS2: apparemment, je ne peux pas modifier. Mais cela ne devrait pas changer grand chose, je pense.

Merci

[MlleAlys]

Ah oui pardon, c'est tellement sombre sur sombre que je n'avais pas vu les cadres autour des liens...

Et si, il se peut que le changement de forum change le code à vous fournir, s'ils n'ont pas la même structure ; et comme apparemment sur ce vieux forum vous aviez le templates des catégories modifié, c'est certainement le cas ?
Vous devriez pouvoir modifier le lien de votre premier message en éditant celui-ci,
Vous devriez également modifier le lien indiqué dans votre profil en éditant les informations de votre profil,
Ou au moins fournir le lien de votre nouveau forum dans votre prochain message.

Sur ce vieux forum, voici un code pour un cadre autour des sous-forums :

Code:

.forumlinkstyle a {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  background: red;
  color: beige;
  border: 1px solid black;
  border-radius: 4px;
  box-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
  padding: 1px 3px;
  margin: 2px 5px;
}

".forumlinkstyle a" est le sélecteur qui vise les liens des sous-forums, c'est cette partie qu'il faudra sans doute changer pour appliquer le code sur votre nouveau forum.

Puis leur mise en forme :

- display: inline-block;  pour que chaque lien soit considéré comme un bloc, placés les uns à côté des autres
- white-space: nowrap; pour ne pas que les blocs se retrouvent coupés en revenant à la ligne
- vertical-align: middle; pour que les blocs soient à la même hauteur

J'ai listé ensuite un certain nombre de propriétés dont vous pourriez avoir envie :
- background: red;  la couleur de fond
- color: beige; la couleur du texte des liens
- border: 1px solid black;  l'épaisseur et la couleur de la bordure
- border-radius: 4px;  l'arrondi dans les coins
- box-shadow: 1px 1px 1px rgb(0 0 0 / 50%);  petit effet d'ombre
- padding: 1px 3px;  pour écarter le texte du bord du cadre (espace vertical et horizontal)
- margin: 2px 5px;  pour écarter les cadres les uns des autres (marge verticale et horizontale)

Vous pouvez garder les propriétés qui vous conviennent, modifier les valeurs de celles que vous souhaitez, supprimer celles qui ne vous intéressent pas.

[Naywayz]

Oui, voilà le lien, donc :

//

Le tout est en chantier et je fais pas mal d'essais, mais, effectivement, j'ai 3 fichiers qui ont été modifiés (index_box, overall_footer_end, topics_list_box).

[MlleAlys]

Merci,
Ici vos sous-forums n'ont pas de sélecteur particulier, le plus simple serait de refaire une petite modif dans votre template index_box pour leur en ajouter un :

Localisez dans votre template Index_box les variables suivantes :

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

Elles correspondent à l'affichage des sous-forums.
On va les encadrer d'un bloc avec une class (dont on pourra ensuite se servir dans le css) ainsi :

Code:

<div class="ss-forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>

- enregistrez le template
- publiez le template
=> normalement, l'affichage sur le forum n'a pas changé.
Mais on peut à présent utiliser le code css avec le sélecteur qu'on vient de mettre dans le template :

Code:

.ss-forums a {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  background: red;
  color: beige;
  border: 1px solid black;
  border-radius: 4px;
  box-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
  padding: 1px 3px;
  margin: 2px 5px;
}

EDIT : et si par exemple vous souhaitez modifier la couleur de fond au survol des liens :

Code:

.ss-forums a:hover {
  background: green;
  color: yellow;
}

[Naywayz]

Génial, vous êtes incroyable !

Un grand merci