Définir Largeur de mon script

[Nikolerigolo]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://pccf.forumactif.com

Description du problème

Code:

<script type="text/javascript" src="//cdn.jsdelivr.net/discord-widget/latest/discord-widget.min.js">
</script>
<script type="text/javascript">
discordWidget.init({
  serverId: '323545104474439701',
  title: 'Discord PCCF',
  join: true,
  alphabetical: false,
  theme: 'dark',
  hideChannels: ['Channel Name 1', 'Channel Name 2'],
  showAllUsers: true,
  allUsersDefaultState: true,
  showNick: false
});
discordWidget.render();
</script>
<div class="discord-widget"></div>

Quelle est l'astuce pour gérer la largeur de ce script ?

Une largeur de 300px serait idéale.

Merci!

PS : Aux modérateurs : C'est un autre problème que mon sujet précédent. Ce n'est pas lié. Ce n'est pas un doublon.

[Adam_sfp]

Bonjour

Ce script à un CSS associé en récupérant la partie qui vous intéresse vous pouvez normalement gérer pas mal de choses comme les couleurs ,tailles etc et en ajouter.

Code:

.discord-widget {
    background: #2a2a2a;
    color: #aaa;
    text-align: left;
    padding: 15px;
    margin: 4px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    border: 3px solid #2461b2;
    border-width: 0;
    border-top-width: 3px;
    box-sizing: border-box;
}

Il faudrait donc essayer d'ajouter une largeur au css avec par exemple

Code:


    width: 500px;


Cdt.

*
https://fiddle.jshell.net/adam_sfp/3f5xu986/
Vous pouvez faire vos réglages dans ce fiddle en haut à droite dans le css pour voir le résultat cliquez sur run pour sauvegardez cliquez update. C'est pratique avant de basculer le code sur votre forum.

[Nikolerigolo]

Ok! merci ! Je vais regarder ça! Je reviens pour "Résolu" ou pour avoir des conseils car je ne suis pas vraiment grand connaisseur ..... 

Merci Beaucoup en tout cas !!

[Nikolerigolo]

Je n'ai pas de CSS associé ... Je colle votre code dans mon CSS et je modifie les valeurs ? 
Je précise que ce code est intégré au module Annonce de mon forum.

[Adam_sfp]

Je n'ai pas de CSS associé ... Je colle votre code dans mon CSS et je modifie les valeurs ? 
Je précise que ce code est intégré au module Annonce de mon forum.

Oui c'est ça vous prenez le code que je vous ai mis et vous le mettez dans le CSS *j'ai édité mon premier post faites vos essais dans le fiddle vous pouvez tout tenter ;-) le code original sera toujours la..

[Nikolerigolo]

Mais ouiii Champion !!! C'est ça !! 

[Nikolerigolo]

Alors, là, je bloque .... 

Je voudrais modifier la hauteur, pas de souci, MAIS les informations, dans la boite, sorte de cette boite ... Je voudrais avoir une barre sur la droite pour faire coulisser les infos ... 

Possible ? Comment ?


Et je ne peux que modifier la taille de la boite et sa largeur .. les couleurs, etc .. ça ne bouge pas, quoi que je fasse ..  

[Adam_sfp]

Bonjour

Vous voulez faire beaucoup de choses d'un seul coup  
Pour les modifications dans le CSS  pas prise en compte :le code donné plus haut correspond au CSS de base utilisé par le script.
Pour prendre le dessus il faut ajouter  

Code:

!important;

dans vos modifications.
Comme ceci exemple avec la couleur:

Code:

background:grey !important;

Cela n'est pas nécessaire pour une propriété que vous ajoutez comme le

Code:

width:

Si vous ne connaissez pas tous les codes présent dans le CSS
Faites 1 seule modification à la fois dans le fiddle regarder sur quoi cela agit.

N'hésitez pas non plus à faire une recherche via google pour les propriétés CSS   et faire quelques tests avant de revenir à la charge dans 5 minutes

[Nikolerigolo]

Je te remercie énormément pour ton aide!! 

Je te laisse tranquille maintenant!!