Problème avec apparence d'un widget

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec apparence d'un widget

Message par Fleurine le Jeu 29 Aoû 2013 - 13:06

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 Mad  Bref, y aurait il une personne pour m'aider? cheers
Sachez que j'ai essayé ce tuto: http://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


Dernière édition par Fleurine le Dim 8 Sep 2013 - 20:42, édité 1 fois

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Ven 30 Aoû 2013 - 13:19

up

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Dim 1 Sep 2013 - 11:47

Up

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Lun 2 Sep 2013 - 19:45

Up

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Mar 3 Sep 2013 - 21:22

up

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

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Mer 4 Sep 2013 - 15:41

up

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Tech le Jeu 5 Sep 2013 - 18:40

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.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21119
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Ven 6 Sep 2013 - 0:53

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?

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Tech le Ven 6 Sep 2013 - 10:55

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.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21119
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Ven 6 Sep 2013 - 15:18

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. Embarassed 
J'espère que vous saurez me répondre

Baston <== Je rigole bien sur Mouais Yes


Dernière édition par Fleurine le Sam 7 Sep 2013 - 19:07, édité 1 fois

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Sam 7 Sep 2013 - 14:02

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


Dernière édition par Fleurine le Sam 7 Sep 2013 - 19:08, édité 1 fois

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Tech le Sam 7 Sep 2013 - 14:12

Bonjour,

Pour la chatbox latérale, il y a ce tutoriel : http://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.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21119
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Sam 7 Sep 2013 - 14:16

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?

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Tech le Sam 7 Sep 2013 - 14:22

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

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21119
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Sam 7 Sep 2013 - 14:48

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.

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Tech le Sam 7 Sep 2013 - 14:53

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.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21119
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Sam 7 Sep 2013 - 19:06

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.::pourtoi::

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Tech le Dim 8 Sep 2013 - 12:51

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.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21119
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Dim 8 Sep 2013 - 19:46

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  Laughing   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?Hein 


En tout cas, merci de m'aider! ::pourtoi:: 


Dernière édition par Fleurine le Dim 8 Sep 2013 - 20:11, édité 1 fois

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Tech le Dim 8 Sep 2013 - 20:01

Vous avez oublié le . devant titremeteo.

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

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21119
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Dim 8 Sep 2013 - 20:14

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

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Tech le Dim 8 Sep 2013 - 20:29

Code:
    position: relative;
    top: -15px;
Smile

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21119
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec apparence d'un widget

Message par Fleurine le Dim 8 Sep 2013 - 20:42

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 ::fete:: Yes 

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum