Créer un compte
Connexion

Top liste/siteModule de commentairesNews (Nouvelles)Livre d'orVotes (Module de notation)SondagesTchat AjaxCompteur Global gratuit sans inscriptionCompteur de visites sans inscriptionInfos de ses visiteurs
Vous êtes ici: Support du Web > Forum > Notre site > Suggestions pour le site > Pour le service de livres d'or

Pour le service de livres d'or

Pour créer et répondre aux sujets, vous devez être connecté.
Ce sujet est résolu.
Pages: 1
Auteur Message
Spitfire 95
23/10/2010 à 12:31:31
Spitfire 95
Membre
 Bonjour.
Est-il ou sera-t-il possible de changer de thème du livre d'or grave à du javascript ?
Je veux dire choisir le thème rouge, bleu, vert... en changeant une variable, mais que les messages restent.

En fait, si ce n'est pas possible, ce n'est pas grâce tant que je peux changer les couleurs du livre d'or avec du code. J'ai fait ça :
<div style="background-color:rgba(255,255,255,0.6);"><script type="text/javascript" src="http://services.supportduweb.com/livredor/405.js"></script></div>
<script type="text/javascript">
divs = document.getElementsByTagName('div');
for(var i=0; i<divs.length; i++)
    { if(divs[i].className=="message_ls_405" || divs[i].className=="livredor_405" || divs[i].className=="msg_405" || divs[i].className=="pages_ls_405" || divs[i].className=="bloc_msg_405")
         { divs[i].background="rgba(255,255,255,0.8)";}
    }
document.getElementById('livredor_p_aff_405').style.background="rgba(255,255,255,0.8)";</script> Comme vous pouvez le constater, j'ai mis toutes les variables que j'ai pu trouver (j'exagère, que celle qui pouvaient avoir un impact) sur la couleur de fond du livre. J'aimerais, pour qu'il s'accorde bien avec mon thème, mettre du rgba, mais la zone d'affichage des messages reste blanche... et les inputs, je n'ai aps essayé mais je devrait y parvenir. Quand au captcha, c'est le même système, donc pareil.

Pour résumer : Comment mettre le livre d'or en transparence et changer le thème ?

Merci.
ybouane
23/10/2010 à 17:21:41
ybouane
Admin
 Bonjour,
Tu devra utiliser du CSS, j'ai rendu à peu près tout transparent:
<script type="text/javascript" src="http://services.supportduweb.com/livredor/405.js"></script>
<style type="text/css">
.livredor_405
{
        background:rgba(255,255,255,0.6);
        padding:15px;
        border:0px;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
}
#livredor_405_code_img
{
        margin-top:3px;
        padding:3px;
        background:#ffffff;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
}
.bloc_msg_405, .message_ls_405
{
        background:none;
}
.msg_405, .pages_ls_405
{
        background-color:transparent;
}
.head_msg_405
{
        background-color:rgba(255,0,0,0.5);

}
.msgs_alls_405
{
        background-color:rgba(255,255,255,0.5);
        padding:3px;
        border:0px;
        background:;
        border-radius:9px;
        -moz-border-radius:9px;
        -webkit-border-radius:9px;
}
</style> Pour le captcha, c'est une image blanche, donc il n'y a pas vraiment un moyen pour rendre son arrière plan transparent. Par contre, j'y ai ajouter des coins arrondis. c'est un peu plus beau.
Il ne te reste plus qu'à ajuster les couleurs et les niveaux de transparence.

Cordialement :)
Image
Spitfire 95
24/10/2010 à 09:36:10
Spitfire 95
Membre
 Merci, ça fonctionne... mais W3C pas content. Il ne veut pas de feuille de style dans le <body>.
Comment dois-je faire pour le rendre valide ?

Pour l'image, il est possible de la rendre transparente : http://www.w3schools.com/Css/css_image_transparency.asp

Merci.
ybouane
24/10/2010 à 18:12:30
ybouane
Admin
 Bonjour,
Alors, tu peux mettre la feuille de style dans head, ça ne changera rien au fonctionnement et ce sera valide.
Et pour la transparence, je parlais de l'arrière plan de l'image et non de l'image elle même. Car si tu diminue trop l'opacité des lettres, l'image ne serait plus lisible.
Peut-être qu'à 80% ça serait assez lisible:
#livredor_405_code_img
{
        opacity:0.8;
        margin-top:3px;
        padding:3px;
        background:#ffffff;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
}
Cordialement :)
Image
Spitfire 95
24/10/2010 à 19:55:08
Spitfire 95
Membre
 J'ai mis 60 % et ça s'affiche pas trop mal.

Pour la CSS, aussi étrange que cela puisse paraître, dans le <head>, ça ne fonctionne qu'à moitié. Le fond est bien transparent, l'image aussi, les champs aussi... mais pas la partie inférieur avec les messages :
Image
Je rappelle que mon site est valide HTML 4.01 Tr et CSS3.

Merci.
ybouane
28/10/2010 à 02:52:12
ybouane
Admin
 Bonjour,
Le problème, c'est que le script du tchat a lui aussi une feuille de style css, et si elle est mise après la tienne, elle remplacera tes valeurs. Il faut donc appeler ton style css après celui par défaut.
Donc essaye en faisant ça:
<script type="text/javascript" src="http://services.supportduweb.com/livredor/405.js"></script>
<script type="text/javascript" id="designtchat">
var css = document.createElement('link');
css.href = 'livredor.css';
css.rel = 'stylesheet';
css.type = 'text/css';
css.media = 'all';
document.getElementById('designtchat').parentNode.insertBefore(css,document.getElementById('designtchat'));
</script> Il te suffira donc de créer un fichier livredor.css qui contiendra ton code css.
Ça devrait fonctionner.

Cordialement :)
Image
Spitfire 95
28/10/2010 à 09:47:54
Spitfire 95
Membre
 Ça fonctionne, merci. Mais pour le W3C, id est interdit sur la balise script, donc j'ai mis <div id='designtchat'></div> avant le js de style et après le js d'importation du livre.
Merci.
Pages: 1