Comment intégrer une image dans un code CSS?

[Invité]

Détails techniques

Version du forum : PunBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.diamant-mandarin-evo.com/

Description du problème

Bonjour,

Je voudrais mettre un smiley dans un texte de bienvenu de la chatbox.

Savez-vous comment l'on intégre une image dans un code SCC, svp?

Merci

[MlleAlys]

bonjour,
C'est code "CSS" comme "Cascading Style Sheet" ("feuille de style en cascade") et non "scc" ^^
Quel code avez vous utilisé pour modifier le titre de votre cb ? Avez vous essayé d'y insérer l'image via le code html de base suivant ?

Code:

<img src="URL DE L'IMAGE" />

[Invité]

Oups, ok CSS

Le code java pour changer le titre:

Changer titre chatbox.

Code:

$(window).load(function() {
  var chatbox_script = function() {
    $("a.chat-title").text("TAVERNE");
  };
  var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
});

Message d'acceuil automatique lors de la conexion à la chatbox

Le code CSS :

Code:

#chatbox.recently-connected:after {
  font-family: "trebuchet ms", serif;
  font-size: 1.5em; line-height:1.5em; font-weight: bold; color: #3cb828;
  box-shadow:0 0 5px #AED581; display:block; background: #F1F8E9; margin:auto;
  width:58%; margin:1.5% auto; padding:1%; white-space: pre;text-align: center;
  content: "Bienvenue à la Taverne du forum! Commande une bière, on arrive";
}

C'est après le texte "Bienvenue à la Taverne du forum! Commande une bière, on arrive" ci-dessus, que je voudrais ajouter un smiley.


Le code java associé :

Code:

$(window).load(function() {
  var chatbox_script = function() {
    $('#chatbox_option_co').click(function(){
      $('#chatbox').addClass('recently-connected');
      setTimeout(function(){ $('#chatbox').removeClass('recently-connected') }, 15000)
    })
  };
  var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
});

Le code que vous me conseillez ne fonctionne pas dans la feuille de style, le message d'erreur suivant s'incrit:

Votre CSS a bien été mis à jour.
Remarque :
Les balises html génèrent des erreurs dans les feuilles de style.
Une correction vient donc d'être effectuée afin de supprimer les balises html que vous avez placées dans la feuille de style.

[MlleAlys]

ah oui pardon, j'étais restée sur le titre !

Ici on peut mettre l'image en fond, remplacez par exemple votre code css par le suivant :

Code:

#chatbox.recently-connected:after {
  background: #F1F8E9 url(http://2img.net/i/fa/i/smiles/icon_cool.gif) no-repeat 90% center;
  box-shadow: 0 0 5px #AED581;
  color: #3cb828;
  content: "Bienvenue à la Taverne du forum! Commande une bière, on arrive !";
  display: block;
  font-family: "trebuchet ms", serif;
  font-size: 1.5em;
  font-weight: 700;
  line-height: normal;
  padding: 10px;
  text-align: center;
  margin: 5px 20px 20px 20px;
}

C'est la ligne
background: #F1F8E9 url(https://2img.net/i/fa/i/smiles/icon_cool.gif) no-repeat 90% center;
qui nous intéresse ici :
#F1F8E9 pour la couleur de fond
url(https://2img.net/i/fa/i/smiles/icon_cool.gif) l'image de fond, ici l'url du smiley
no-repeat pour que l'image de fond (ici le smiley) n'apparaisse qu'une fois sans être répétée
90% c'est la position de l'image vers la droite
center pour la position de l'image centrée verticalement

Vous pouvez bien sûr modifier les valeurs, notamment mettre l'image du smiley qui vous intéresse, et modifier 90% pour la positionner à l'endroit où vous souhaitez.

[Invité]

Ce code fonctionne bien.

Par contre MlleAlys selon la taille de l'écran, le smiley va dans le texte..

Il n'y aurait pas une simple astuce pour le mettre derriere le texte?

Y à t'il aussi un code pour changer la couleur de fond de la chatbox stp?

[MlleAlys]

Essayez ainsi :

Code:

#chatbox.recently-connected:after {
  background: #F1F8E9 url(http://2img.net/i/fa/i/smiles/icon_cool.gif) no-repeat right 10px center;
  box-shadow: 0 0 5px #AED581;
  color: #3cb828;
  content: "Bienvenue à la Taverne du forum! Commande une bière, on arrive !";
  display: block;
  font-family: "trebuchet ms", serif;
  font-size: 1.5em;
  font-weight: 700;
  line-height: normal;
  padding: 10px 25px 10px 10px;
  text-align: center;
  margin: 5px 20px 20px 20px;
}

ici avec "right 10px" le smiley devrait à 10px du bord droit, et comme on a mis une marge de 25px à droite avec la ligne padding: 10px 25px 10px 10px; ça ne devrait pas passer sous le texte ^^

Pour la oculeur de fond :

Code:

/*fond partie chat*/
#chatbox {
  background: yellow;
}
/*fond partie membres*/
#chatbox_members {
  background: red;
}
/*fond titres partie membres*/
#chatbox_members .member-title {
  background: orange;
}
/*fonds lignes partie chat*/
.chatbox_row_2 {
  background: blue;
}
.chatbox_row_1 {
  background: purple;
}

je ne sais pas de quel fond vous parlez, gardez celui qui vous intéresse ^^

[Invité]

Super!!

Tout fonctionne. Merci! bonne fin de soirée.

Résolu