Problème avec apparence d'un widget

[Fleurine]

Bonjour!

J'ai un petit soucis avec l'apparence d'un widget météo sur le coté pour les RP ^^' J'ai essayé plein de choses différentes, mais rien ne fonctionne. En plus il y a une pub qui s'affcihe en plein dessus   Bref, y aurait il une personne pour m'aider?
Sachez que j'ai essayé ce tuto: https://forum.forumactif.com/t311396-mettre-un-widget-a-lexterieur-du-cadre-interne-a-droite-du-forum-vers-le-fond 
CSS du widget sous hide




Code du widget sous hide:

captures d'écran:

Résultat souhaité ^^:

Mon forum est: http://pension-hinata.forumactif.org/

Merci d'avance <3

[Fleurine]

up

[Fleurine]

Up

[Fleurine]

Up

[Fleurine]

up

J'aimerais bien avoir un panneau latéral s'il vous plait. Ou je pourrais mettre la météo. Merci ^^

[Fleurine]

up

[Tech]

Bonjour,

Pourquoi ne pas passer par les templates ou via un script du genre :

Code:

$(function(){
  $('body').before("<div class='meteolateral'><br></br><center><div class='titremétéo'>La météo à Hinata</div><br></br><div class='météo'> Météo du mois de septembre</div><img border='1' alt='Hinata!' src='http://i75.servimg.com/u/f75/17/56/10/87/sunshi10.png' /><br></br>- 15° le matin, 26° le midi, 23° le soir -<br></br>Il y a comme un air d'été qui plane au dessus de Hinata!<center></div></div></div>");
});

Après, il suffit de rajouter un CSS du genre :

Code:

.meteolateral {
position: fixed;
right: 7px;
}

Cordialement.

[Fleurine]

Bonjour et merci pour cette réponse!
j'ai mis le script dans javascript>afficher sur toutes les pages et rajouté votre CSS.
Cependant rien ne s’affiche. Est ce normal?

J'ai essayé du coup de le décaler encore plus à droite avec différentes valeurs de px pour voir si il n’était pas caché derrière le forum, mais non ^^
Ensuite, je me suis demandais si je ne devais pas faire la boite: donc j'ai rajouté un width et heigth; mais rien ne m'est apparu. Pourquoi?

[Tech]

Bonjour,

Votre forum renvoi une erreur js :

Horodatage : 6/09/2013 10:54:14
Erreur : SyntaxError: missing ) after argument list
Fichier Source : http://pension-hinata.forumactif.org/-h1.htm
Ligne : 1, Colonne : 60
Code Source :
11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.co

Il y a une erreur dans le script de la chatbox latérale.

Cordialement.

[Fleurine]

Merci, mais que dois je faire? ^^'
Je vous envoie le celle-ci pour que vous puissiez m'aider?

Code de la box:

Javascript sur toutes les pages:

Désolée de vous embêter, mais je ne sais pas du tout ce que je dois répondre suite à votre message. C'est pour cela que je me permet de vous renvoyer les codes que j'ai actuellement.  
J'espère que vous saurez me répondre

 <== Je rigole bien sur  

[Fleurine]

Bonjour!

J'ai utilisé ce code, mais n'arrive pas à y mettre ma météo... Quelqu'un pourrait il m'aider?
Comment faire pour changer le fond de ma boite et arrondir les bords. Un CSS serait la bienvenue mais je ne sais pas si ça se fait

[Tech]

Bonjour,

Pour la chatbox latérale, il y a ce tutoriel : https://forum.forumactif.com/t309533-creer-un-panneau-lateral-coulissant (regardez le 2ème point avec la chatbox).

Je vous conseille de remplacer votre code actuel par celui du tutoriel.

Cordialement.

[Fleurine]

Désolée mais je l'ai lu je ne sais pas combien de fois et je n'y arrive pas. J'avais déjà utilisé ces codes mais cela ne fonctionne pas. Je suis allé dans la barre de recherche et suis tombée sur de nombreux tuto mais n'y arrive pas.

Je ne voulais pas un panneau qui se ferme enfaite. je me suis mal exprimé, je voudrais un bloc sur le coté de mon forum. Il y actuellement mais je souhaiterais modifier sa mise en forme pourriez vous m'aider?

[Tech]

On parle de quoi là ? La chatbox ou votre panneau météo ?

Cordialement.

[Fleurine]

On parle du panneau à droite... Vous êtes allés sur mon forum pour voir? Parce que je ne peux pas être plus claire. Si vous aviez été voir vous auriez constatez que j'ai déjà une chatbox à gauche et que à droite il y a un panneau avec écrit météo.

je vous remet l'adresse de mon forum même si elle est écrit plus haut pour que vous alliez voir ce que je veux dire.
http://pension-hinata.forumactif.org/

Maintenant que vous avez vu la boite, serait il possible que vous me disiez comment faire pour arrondir les bords? Je ne sais pas comment faire. J'ai regardé de nombreux tuto et ne trouve pas.

Il me semble qu'il faut donner une classe afin de pouvoir faire des modification en CSS mais je ne sais pas le faire.
J'ai tenté de mettre le code avec le CSS que vous m'avez donnés mais cela ne fonctionne pas. J'ai tenté plusieurs choses.

Aide moi s'il vous plait et ne m'envoyés plus sur des tutos car j'en essayés de nombreux en allant sur google et en faisant des recherches sur forumactif. je passe des heures devant mon ordinateur à chercher sans trouver.

[Tech]

Remplacez votre JS par :

Code:

        jQuery(document).ready(function() { jQuery('body').append('<table class="meteopanel"><tr><td>
             
                  <center>MÉTÉO</center>
       
       
            </table>'); } );

et ajoutez ce CSS à votre forum :

Code:

.meteopanel {
    background-color: #FFFFFF;
    border-radius: 15px;
    bottom: 50px;
    height: 200px;
    position: fixed;
    right: 50px;
    width: 200px;
    z-index: 10000;
}

Cordialement.

[Fleurine]

Merci beaucoup de votre aide. C'est déjà beaucoup mieux! Cela m'a vraiment aidé.

Le résultat est presque parfait! Mais j'ai encore besoin de vos services. Comment dois je faire pour avoir un résultat qui ressemblerait à peut près à celui-ci?

capture d'écran:

Il me semble qu'il faut donner une classe au titre, non? J'ai essayé de modifier un peut le code mais je doit vous avouer que j'ai du mal. Je rejoute des <br></br> pour les espaces mais n'arrive pas à écrire les températures. Désolée de vous déranger pour si peut, mais j'aime bien quand le résultat est comme je le souhaite =]

CODE SOUS HIDE

J'ai donc essayé:

CODE SOUS HIDE

Malheureusement, lorsque je valide ce code, ma boite disparait! Ha ha (^^)' et je ne sais pas ce que j'ai pu faire de faux. Ce serait vraiment gentil si pouviez encore me donner un petit coup de pouce.

[Tech]

Bonjour,

Si on reprend la structure du code de base c'est comme ça :

Code:

jQuery(document).ready(function() { jQuery('body').append('texte'); } );

On voit notamment que le texte est entouré de (' ... ') qui délimite en quelque sorte ce texte.

Dans votre texte, vous avez mis des ' ce qui donne l'impression au code que celui est fini (d'ailleurs regardez la coloration syntaxique de votre code, elle est anormale) et rouvert peu après avec une autre '

Donc il faut échapper les ' comme ceci : \' pour dire au code que celui n'est pas fini.

Le plus simple pour ce cas est quand même de modifier les ' en " et les " en '
Voici donc le bon code :

Code:

jQuery(document).ready(function () {
    jQuery('body').append("<table class='meteopanel'><tr><td>
<center><span class='titremeteo'>PRÉVISIONS MÉTÉO</span>

<br /><br />9 au 22 septembre
<br /><br /><img src='http://i75.servimg.com/u/f75/17/56/10/87/soleil12.gif' /></center>
<br /><br /> 15° le matin, 25° le midi et 23° le soir.
<br /><br /> C'est bientôt le début de l'automne!</center></table>");
});

J'aimerais aussi préciser que la balise img en HTML ne fonctionne pas comme ceci :

Code:

<img src="..."</img>

mais comme ceci :

Code:

<img src="..." />

et que la balise br c'est comme ceci : <br /> et pas ceci : </br>

Cordialement.

[Fleurine]

Hey! Merci de tes réponses qui m'aident!

Alors, j'ai bien compris ce que tu m'as expliqué. c'est gentil de t'être pris le temps pour moi. Je ne m'y connaissais pas du tout en javascript, mais grâce à toi, ça me parle déjà un peu plus     Par contre j'ai toujours un petit soucis. je n'arrive pas à modifier le titre "Prévision météo" avec le CSS. j'ai vu que tu lui as donné un classe. J'ai du coup fait un teste avec le CSS mais cela ne répond pas. Ais je oublié quelque chose? 

En tout cas, merci de m'aider!  

[Tech]

Vous avez oublié le . devant titremeteo.

Pour une class, on doit mettre .class
Pour une id, c'est #id

Cordialement.

[Fleurine]

Alors, nous y sommes presque! Voilà mon code CSS:

Code:

.titremeteo {
color: rgb(0, 129, 161);
font-size: 15px;
margin-top: -15px;
text-align: center;
text-shadow: 2px 2px 1px rgb(159, 225, 242);
}

.meteopanel {
  background-color: #FFFFFF;
  border-radius: 15px;
  bottom: 300px;
  height: 200px;
  width: 200px;  
  position: fixed;
  right: 50px;
  z-index: 999;

text-align: center;
font-size: 11px;  
  
  border-bottom: 5px solid #D5F1F5;
  border-left: 5px solid #D5F1F5;
  border-right: 5px solid #D5F1F5;
  border-top: 5px solid #D5F1F5;  
 -moz-box-shadow: 1px 1px 20px #FFFFFF;/* lumiere autour des cadres*/
  -webkit-box-shadow: 1px 1px 20px #FFFFFF;
  box-shadow: 1px 1px 20px #FFFFFF;    
}


Je voudrais mettre le titre de la boite au même endroit que celui-ci:

capture d'écran:

Lorsque je mes mon

Code:

margin-top: -15px;


rien ne se fait :S

[Tech]

Code:

    position: relative;
    top: -15px;

Cordialement.

[Fleurine]

Merci beaucoup! Vus êtes vraiment un ange! Je vous apprécie beaucoup =]
Merci de votre coup de pouce. je sais que cela a pris du temps mais vous avez donné le sourire à quelqu'un