Impossible de gérer l'apparence (css) de l'avatar dans la chatbox sous awesomebb?

[Feu Ardent]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : non défini
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonjour,

J'essaie de changer l'apparence de l'avatar dans la chatbox sur awesomebb. Mais il semblerait que le css de base ne permette pas de forcer d'autres variables pour cette classe ci, je me demandais donc si quelqu'un avait pas une petite astuce pour résoudre ce problème?

Code:

#chatbox .cb-avatar{border: 2px solid red!important; box-shadow: 0px 0px 0px black!important;}

Merci d'avance pour votre aide!

[Toryudo]

Bonjour !
Dans la logique des règles de priorité du CSS, effectivement, si on définit plusieurs fois des propriétés (border par exemple) sur #chatbox .cb-avatar et qu'une propriété en surcharge une autre, c'est celle écrite en dernier gagne. Si on ajoute "!important", alors c'est celle qui écrit "!important" en dernier qui gagne aussi.
Quand on regarde dans quel ordre sont ajoutées les feuilles CSS, la feuille de la chatbox arrive après la feuille personnalisée, du coup, en effet, son border définit en "!important" remplace votre border à tous les coups.

La solution alors, c'est d'être plus précis qu'elle, et on peut le faire de différentes manières :

Code:

#chatbox span.cb-avatar{border: 2px solid red!important; box-shadow: 0px 0px 0px black!important;}

Code:

#chatbox .user-msg .cb-avatar{border: 2px solid red!important; box-shadow: 0px 0px 0px black!important;}

Code:

.chat-messages #chatbox .cb-avatar{border: 2px solid red!important; box-shadow: 0px 0px 0px black!important;}

N'importe laquelle de ces trois solutions fonctionne, parce qu'elles sont plus précises que la sélection #chatbox .cb-avatar : elles repassent donc prioritaires.

[Feu Ardent]

@Toryudo: Merci à toi pour cette réponse rapide et cette résolution express! J'ai dû passer 1 heure à chercher comment résoudre ça, ça semble si simple maintenant que je me sens un peu bête ... Haha.

J'ai un autre soucis similaire, je me demandais si une solution similaire ne fonctionnerait pas ici?

J'essaie d'harmoniser la police de ma chatbox à celle du forum. Ça fonctionne parfaitement sous Chrome mais étrangement sous Safari bien que la police apparaît bien dans les options CSS je ne vois que Times New Roman à la place. Je ne sais pas si tu as une solution pour ce type de problèmes?

Merci beaucoup à toi!

résultat désiré/chrome:

https://i.imgur.com/iT5JJas.png

résultat safari:

https://i.imgur.com/0QEerTW.png

CSS pour la police:

Code:

a.chat-title, .memberlist-padding b, .memberlist-username, button.followBtn.unfollow, #notif-menu .contentText, #notif-view-all a, #no-notifications, .main-menu-headline, header .button, .friends-foes-list a, .block-content label span, .form-buttons .btn, #tabs ul, .tabs ul, a.groupeqeel span, .padding-qeel b, .padding-qeel strong, bhvs span, .pagination, .btn-default, .cb_connect_button span, #chatbox_members ul, .chatbox_channels_title, span.chatbox-username.chatbox-message-username, .chatbox p span.msg span[style="color:red"] strong, .chatbox p span.msg span[style="color:green"] strong, .cb_connect_name, a.topic-title, .forum-lastpost-author, .forum-sujmess, .forum-soufo a, .paminicadre strong, .paminicadre.navigation, .paminititre, .patitre, .paliens a, .block-header, .action-bar, #page-footer a, #forum-statistics a, .forum-statistics a, #main-menu, #main-user-menu, #header-user, #header-notif, #search-main input, #logo-text, #logo-text h1
{font-family: "tuppence", serif; font-weight: 500; font-style: normal;}

[Toryudo]

Alors, je n'ai pas Safari et je ne connais pas l'adresse de votre forum, donc à l'aveugle, je pense que 4 choses peuvent jouer :
- comment est importée cette font-family "tuppence" ?
- quelle est l'extension du fichier de la font ?
- quel est le numéro de version du navigateur ?
- si vous êtes sur un Mac, quelle est la version du système ?

Potentiellement, Safari n'arrive pas à lire le fichier de la font à cause de son format (là où Chrome n'aurait aucun problème), c'est l'idée qui me vient à l'esprit.
Mais il me faudrait le maximum d'info pour en être sûr !

[Feu Ardent]

Hello @"Toryudo" et merci pour la réponse rapide!

Le soucis ne semble pas être une erreur de lecture parce que la police s'affiche bel et bien sur tout le reste du forum, c'est uniquement sur la chatbox qu'elle ne veut décidément pas s'afficher. Je vais essayer de recueillir toutes ces informations que tu as précisées dans la journée mais je tenais à ajouter cette information au cas où elle serait utile!

Mais j'avais essayé d'importer la police via fiche CSS et je crois que là elle est liée dans le template overall_header, je suppose que le soucis doit venir de là?

Merci à toi  

EDIT: Du coup il semble bien que ce soit un soucis de lecture de police, mais dans le sens où il ne semble pas possible de lier une police externe à la chatbox Je me demande s'il y a une astuce pour réussir à faire appel à une police externe dans la chatbox?

Voilà les codes que j'ai:

Code:

<link rel="stylesheet" href="https://use.typekit.net/lqm0dza.css">

Code:

<style>
  @import url("https://use.typekit.net/lqm0dza.css");
</style>

[Toryudo]

Hm, à la limite, vous pouvez tenter de mettre le contenu du fichier https://use.typekit.net/lqm0dza.css directement dans la feuille de CSS personnalisée (au début si possible) ? Si ça marche pour le border, ça devrait aussi marcher pour les fonts. Si ça ne marche pas, j'écrirai un code JavaScript qui injectera la feuille CSS directement dans la chatbox.

[Feu Ardent]

@"Toryudo", ça fonctionne à merveille, merci à toi! Je suis infiniment reconnaissant !