Faire apparaître/disparaître une boite (widget)

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

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

Résolu Faire apparaître/disparaître une boite (widget)

Message par Leelewine Sam 6 Nov 2010 - 12:02

Bonjour !

Sachez que le début de mon message est "pareil" à chacune de mes questions, c'est pour donner le plus de renseignement possible ^^

Tout d'abord, mon forum se trouve sous phpBB2 et moi je suis sous Mozilla. Je débute dans la modification de template, CSS ect...

J'ai réussit à créer une boite Widget sur le côté droit de ma bannière (une boîte fixe), mettre ma ChatBox à la verticale, sur la gauche du forum.. mais il y a certaine chose que j'aimerais modifier mais je sais pas ou et comment.

J'ai plusieurs questions mais c'est des choses différentes, donc je ferais un topic à la fois mais tous seront dans la modification de template et du CSS.

Ma question :

Comment faire pour avoir une boite (widget) sur l'un des côtés de mon forum (le gauche), ou il suffit de cliquer sur l'icone (que j'aurais créer) "Widget" pour faire apparaitre le contenu. C'est comme "masquer le contenu" et dès qu'on clique dessus, paff tout réaparait.

Et si possible "sur le côté gauche de la bannière"

Actuellement sur mon forum j'ai 1 boite fixe (widget), je vais surement en créer une seconde du côté droite (en dessous de l'autre), mais je voudrais avoir à gauche un widget 'à masquer/desmasquer" avec une vidéo à l'intérieur...

Je sais que c'est possible car sur ce forum, c'est ce qu'il y a : ICI mais sachez que je veux pas faire pareil. Surtout que pour ma part, c'est juste pour mettre " AMV du moment" (donc des vidéo qui changeront de temps en temps)


Voici une capture de mon forum : ICI

Pouvez-vous m'aider ???? merci d'avance !!!


Dernière édition par Leelewine le Mer 10 Nov 2010 - 19:36, édité 1 fois
Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Adam_sfp Dim 7 Nov 2010 - 9:51

Bonjour

Peut être regarder du coté slide panel via goggle.

Un exemple et source ICI

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Leelewine Dim 7 Nov 2010 - 11:13

Ca pourrait être ce que je cherche mais je comprend pas l'anglais. Je vois très bien les codes ect... mais vu que je sais pas si ce qu'il est inscrit c'est exactement ce que je veux, je touche pas à mon CSS ou j'ajoute pas leurs codes.

Dans le début du lien, il est inscrit :


Vertical sliding panel and open/close trigger button on the left with absolute positioning

Vertical, bouton open/close - gauche fixe, (enfin qui reste sa place sans défilé lorsqu'on utile la souris - pas comme la ChatBox verticale) c'est ce que je comprend. Je pense que c'est ce que je veux. Mais il manque des mots dans cette phrase que je comprends pas, donc est-ce que je comprend dans le "bon sens" ?

En regardant les codes, je comprend certaine chose mais pas tout.

Si je suis ce qui est noter et que je modifie pour avoir un Widget avec une Vidéo dedans, il faut que crée un code sur une page HTLM (je sais même pas à quoi ça sert), pour ensuite allé dans le CSS ?

Mais pour le HTLM comme sur l'exemple, je sais pas ce que c'est ou à quoi ça sert. Jusqu'a maintenant, j'ai déjà modifier des templates et mon CSS pour avoir : un widget, des barre de catégorie personnalisé ect..

Quelqu'un pour m'aidé à comprendre en français comme faire ? (sans que je tripote partout, toute seule et que je fais une bêtise ^^)

Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Adam_sfp Dim 7 Nov 2010 - 14:55

Bonjour

Je vous rassure je comprend pas tout non plus... Wink

Vous pouvez essayez ceci

Dans votre template overall_header

recherchez <head> et collez juste derrière
Code:
<link rel="stylesheet" href="http://sd-1.archive-host.com/membres/up/37821634957680146/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
   $(".trigger").click(function(){
      $(".panel").toggle("fast");
      $(this).toggleClass("active");
      return false;
   });
});
</script>

validez et publiez

Ensuite dans votre widget déjà existant collez ceci

Code:
<div class="panel">
<object width="100%" height="200"><param name="movie" value="http://www.youtube.com/v/O7vT7IFN02I?fs=1&amp&autoplay=1&color1=0x2b405b&
    color2=0x6b8ab6&border=1;hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/O7vT7IFN02I?fs=1&amp&autoplay=1&color1=0x2b405b&
    color2=0x6b8ab6&border=1;hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="250"></embed></object>
<object width="100%" height="250"><param name="movie" value="http://www.youtube.com/v/zCwWlZq0qGY?fs=1&amp&color1=0x2b405b&
    color2=0x0B0B0B&border=1;hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zCwWlZq0qGY?fs=1&amp&color1=0x2b405b&
    color2=0x0B0B0B&border=1;hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="250"></embed></object>
</div>

<div style="clear:both;"></div>
<a class="trigger" href="#">VIDEOS</a>

*j'ai mis le code de 2 vidéos youtube entre <div class="panel"> et </div>

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Leelewine Lun 8 Nov 2010 - 10:27

Merci pour votre aide mais ça ne marche pas.

Enfin si, quand je place votre code en modifiant le widget avec le lien de ma vidéo, ça donne ceci :

extrait 01 et extrait 02

La vidéo est bien là, on peut l'ouvrir/fermer à volonté mais elle n'est pas dans mon Widget. Donc ce n'est pas encore ce que je veux.

J'ai pensé à quelques chose. Comme ce que je souhaite c'est avoir l'effet comme ma ChatBox verticle, le "truc" doit être là sous mes yeux mais je trouve pas la solution...

Je m'explique.

J'ai repris le code de ma Box verticale, c'est à dire ceci :

Code:
<table style="position: fixed; bottom: 50px; left: 0px; z-index: 10000;"><tbody><tr><td>

<iframe src="/chatbox/chatbox.forum?" id="objet" style="width: 580px; height: 310px; display: none;" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

</td><td style="vertical-align: bottom;"><img src="http://nsa20.casimages.com/img/2010/11/07/101107101624364682.png" onclick="document.getElementById('objet').style.display=(this.src=='http://nsa20.casimages.com/img/2010/11/07/101107101624364682.png')?'block':'none';this.src=(this.src=='http://nsa20.casimages.com/img/2010/11/07/101107101624364682.png')?'http://nsa19.casimages.com/img/2010/11/07/101107101813894607.png':'http://nsa20.casimages.com/img/2010/11/07/101107101624364682.png';"></td></tr></tbody></table>

Comme je veux avoir cette effet, je pense que l'astuce vient de ce code. J'ai donc créer deux boutons pour mon widget.

Vu qu'a l'intérieur de veux placer une vidéo, j'ai créer deux boutons ayant un rapport avec ça :

Bouton ouvrir : ICI
Bouton fermer : ICI

Voici les étapes que j'ai réalisé (en sachant que le final n'est pas correct à 100%):

- Copier le code placé sur ma PA pour avoir la chatbox verticale, sur word
- Créer deux boutons "ouvrir/fermer" que j'ai remplacé dans le code copier sur word
- J'ai modifier la 1ere lignes du code pour avoir : "position: absolute; top: 30px; left: 10px"
- J'ai mis en dessous de cette ligne le code de ma vidéo (dont la taille a été redimensionné avec youtube)
- j'ai enregistrer.


Au final, j'ai ce code là :

Code:

<table style="position: absolute; top: 30px; left: 10px; z-index: 10000;"><tbody><tr><td>
<object width="200" height="175"><param name="movie" value="http://www.youtube.com/v/r-OZPtiaNJE?fs=1&hl=fr_FR&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/r-OZPtiaNJE?fs=1&hl=fr_FR&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="175"></embed></object>

</td><td style="vertical-align: top;"><img src="http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png" onclick="document.getElementById('objet').style.display=(this.src==http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png')?'block':'none';this.src=(this.src==http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png')?'http://nsa20.casimages.com/img/2010/11/07/101107124238560906.png':'http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png';"></td></tr></tbody></table>

Au final :

- la vidéo se trouve là ou je veux
- le bouton "ouvrir" est bien placé
- le widget (je l'appel aisni même si je sais pas si c'est vraiment le nom adéquat) est fixe (ne bouge pas comme la box)


LES problèmes :

- Je n'ai aucune apparence de Widget (contour, cadre...) = pas obligatoire mais j'aimerais l'avoir
- La vidéo est visible sans cliquer sur "ouvrir" et on ne voit aucun bouton "fermer".


-------------------


Si je veux avoir un Widget je dois d'abord modifier le template puis le CSS (comme inscrit sur votre tuto) MAIS si je veux l'effet de la ChatBox, je peux placé le code du template, c'est à dire les <DIV... sur la PA ? puis après ajouté dans le CSS les codes avec couleurs ect... ??


Voici une capture de mon forum avec la vidéo à gauche et à droite un widget personalisé. Pourquoi avoir cette vidéo dans un Widget ? Tout simplement parce que la vidéo ne m'appartient pas, je veux mettre le lien de la personne qui l'a fait sur youtube ect... donc je voudrais mettre un texte/lien sous la vidéo (ou au dessus, peu importe).

Capture : ICI

Si ça peut vous aidez, voici le code complet de ma PA :

Code:
<table style="position: fixed; bottom: 50px; left: 0px; z-index: 10000;"><tbody><tr><td>

<iframe src="/chatbox/chatbox.forum?" id="objet" style="width: 580px; height: 310px; display: none;" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

</td><td style="vertical-align: bottom;"><img src="http://nsa20.casimages.com/img/2010/11/07/101107101624364682.png" onclick="document.getElementById('objet').style.display=(this.src=='http://nsa20.casimages.com/img/2010/11/07/101107101624364682.png')?'block':'none';this.src=(this.src=='http://nsa20.casimages.com/img/2010/11/07/101107101624364682.png')?'http://nsa19.casimages.com/img/2010/11/07/101107101813894607.png':'http://nsa20.casimages.com/img/2010/11/07/101107101624364682.png';"></td></tr></tbody></table>


<table style="position: absolute; top: 30px; left: 10px; z-index: 10000;"><tbody><tr><td>
<object width="200" height="175"><param name="movie" value="http://www.youtube.com/v/r-OZPtiaNJE?fs=1&hl=fr_FR&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/r-OZPtiaNJE?fs=1&hl=fr_FR&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="175"></embed></object>

</td><td style="vertical-align: top;"><img src="http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png" onclick="document.getElementById('objet').style.display=(this.src==http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png')?'block':'none';this.src=(this.src==http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png')?'http://nsa20.casimages.com/img/2010/11/07/101107124238560906.png':'http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png';"></td></tr></tbody></table>



Pouvez-vous m'aider ? M'éclairer sur la façon de réglé mon problème ? Avez-vous une idée à me soumettre ?

Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Adam_sfp Lun 8 Nov 2010 - 13:56

Bonjour

Pas tout compris dans votre demande... Confused
le slide proposé plus haut n'a pas besoin de widget..

et vous pouvez changez les boutons et position via le CSS
https://sd-1.archive-host.com/membres/up/37821634957680146/style.css

Cordialement.

Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Leelewine Lun 8 Nov 2010 - 17:05

Re bonjour !!

En fait, je me suis embrouillé toute seule. Dans la réponse ou vous m'avez donné le code à mettre dans le template, vous avez noté ceci :

Ensuite dans votre widget déjà existant collez ceci


Et j'ai cru qu'il fallait créer un autre widget et mettre le code dans le contenu... Mais oublions mon idée ^^

--------------

J'ai refais vos indications et avec le code du CSS que vous m'avez donné, je vois que je peux le personnalisé mais je comprend pas tout.

Après avoir essayé de personnalisé (en essayant de comprendre les codes), voici ce que ça donne : extrait 01 extrait 02

Il y a 3 choses que j'aimerais changer :

- Supprimer le fond de l'onglet pour qu'il soit transparent et que l'ont voit Uniquement le bouton
- agrandir cette onglet pour qu'on voit mon bouton entièrement (il fait 89px X 100px)
- Et si possible retirer le "lien" VIDEO (dans le template peut être ?)


Edit :

Dans les commentaires du site que tu m'as donné (page que j'ai demandé à Google de traduire même si c'est pas parfait), il y a un membre qui donne le lien de son site avec le widget personnalisé à 100% : http://www.dizajn.vg

On peut donc modifier le bouton (par le mien), retirer le texte par contre je sais pas si on peut rendre le bouton transparent. Ca au pire c'est rien, je referais d'autre bouton ^^

Savez-vous comment faire ça ?
Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Adam_sfp Lun 8 Nov 2010 - 19:28

Bonjour

A votre place je commencerai par mettre en place le slide de départ.
Ensuite faire les modifications une par une en essayant de comprendre l'influence des différents paramètres..
Il faut faire des essais vous êtes sur la bonne voie... Wink

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Leelewine Lun 8 Nov 2010 - 21:30

Ok ok merci pour votre aide !!

Je vais chercher encore !

Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Leelewine Mar 9 Nov 2010 - 19:18

Désolé pour le double réponse mais j'aurais encore besoin d'un petit coup de pouce et pour le même sujet !

Tout d'abord, voici le code de mon CSS en ce qui concerne le slide que Adam_sfp m'a montré.

Code:
a:focus {
outline: none;
}

img {
border: none;
}

.panel { /* interieur texte et video */
position: absolute;
top: 50px;
left: 0;
display: none;
background: #5B5C61;
border: 3px solid #BABCCB;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 200px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=95);
opacity: .95;
}

.panel p{
margin: 0;
padding: 0px 0 15px 0;
color: #5B5C61;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #5B5C61;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #5B5C61;
}

a.trigger{ /* premier lien ouvrir */
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#BABCCB;
padding: 40px 40px 40px 5px;
font-weight: 200;
background: url(http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png) 85% 55% no-repeat;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{ /* second lien ouvrir */
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#BABCCB;
padding: 40px 40px 40px 5px;
font-weight: 200;
background: url(http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png) 85% 55% no-repeat;
border:1px solid #BABCCB;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger { /* dernier lien fermer */
background: url(http://nsa20.casimages.com/img/2010/11/07/101107124238560906.png) 85% 55% no-repeat;
}

J'ai enfin su modifier la structure et rendre le slide transparent comme voulu mais un cadre persiste. J'ai fais de nombreux essai en modifiant "ligne par ligne", en supprimant des info, en ajoutant d'autre à certain endroit mais le cadre reste là.

Voici une capture : ICI

Je ne trouve pas la solution. Peut être faut-il modifier quelques chose dans le template "overall_header" ? Mais je sais pas comment et quoi.

Le slide actuel est exactement comme je le voulais sauf pour le cadre qui se tape l'incruste...


--------------------

J'ai une seconde question par rapport au contenu du slide. A l'intérieur j'ai noter "AMV du moment" dans un cadre double, mais est-il possible d'arrondir les coins ? Si oui, comment ?

Je sais que pour arrondis les coins du forum, titre de sous forum... c'est dans le CSS mais là, le contenu du slide ce place dans le template... alors comment transformer un code de CSS en code comme <div> ?
Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Adam_sfp Mar 9 Nov 2010 - 19:40

Bonsoir
Et en enlevant border:1px solid #BABCCB; dans votre CSS?

Cordialement.


Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Leelewine Mar 9 Nov 2010 - 20:21

Bonsoir !!!

Alors j'ai retirer ce que vous avez indiquer, un des deux cadres a disparu.

Avant il y avait un cadre gris foncé en tant normal et un gris clair lorsqu'on passe la souris.

Là, le cadre gris clair (avec le passage de la souris) a disparu. Il en reste un a faire partir. Mais il n'y a plus de ligne avec border 1px...

Edit : voici une capture : ici
Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Adam_sfp Mar 9 Nov 2010 - 20:56

Bonsoir

Doucement mais surement.. Wink
Etrange quand je teste sur une page Html je n'est plus le cadre...
Votre CCS est hébergé ou rajouté dans votre feuille de style?

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Leelewine Mer 10 Nov 2010 - 12:03

Euh... je sais pas ce que vous voulez dire.

Moi j'ai juste modifier le feuille CSS du forum pour avoir divers application, comme personalisé le widget qui se trouve en haut à droite de mon forum ect...

Voici mon CSS complet :

Code:
a:focus {
outline: none;
}

img {
border: none;
}

.panel { /* interieur texte et video */
position: absolute;
top: 50px;
left: 0;
display: none;
background: #5B5C61;
border: 3px solid #BABCCB;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 200px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=95);
opacity: .95;
}

.panel p{
margin: 0;
padding: 0px 0 15px 0;
color: #5B5C61;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #5B5C61;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #5B5C61;
}

a.trigger{ /* premier lien ouvrir */
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#BABCCB;
padding: 40px 40px 40px 5px;
font-weight: 200;
background: url(http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png) 85% 55% no-repeat;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{ /* second lien ouvrir */
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#BABCCB;
padding: 40px 40px 40px 5px;
font-weight: 200;
background: url(http://nsa20.casimages.com/img/2010/11/07/101107114117246665.png) 85% 55% no-repeat;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger { /* dernier lien fermer */
background: url(http://nsa20.casimages.com/img/2010/11/07/101107124238560906.png) 85% 55% no-repeat;
}




a.mainmenu
{
border-style: none!important;
}

a.forumlink {
  -moz-border-radius: 4px 4px 4px 4px;
  background-color:#6c6d70;
  border:3px double;
  color:#FAFAFA;
  display:block;
  margin:auto;
  text-align:center;
  text-decoration:none;
  width:95%;
}

.forumline {
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  border: 8px solid #BCBECC;
}

.boite{
position: absolute; /* position de boite */
top: 30px; /* position à partir du haut */
right: 10px; /* position à partir de la droite */
width: 125px; /* largueur de la boite */
background-color: #5A5961; /* couleur de fond */
padding: 8px; /* marge intérieure */
-moz-border-radius:6px; /* coins arrondis */
-webkit-border-radius:6px; /* coins arrondis */
border-radius:6px; /* coins arrondis */
}

.titre{
background-color: #BCBECC; /* couleur de fond */
color:#5B5C61; /* couleur de la police */
font-weight:bold; /* épaisseur de la police en gras */
font-size:11px; /* taille de la police */
text-align : center; /* alignement du texte */
padding: 6px; /* marge intérieur */
margin-bottom: 5px; /* marge extérieure pour moi 5px en bas */
-moz-border-radius:6px; /* coins arrondis */
-webkit-border-radius:6px; /* coins arrondis */
border-radius:6px; /* coins arrondis */
}

.cadre{
text-align: left; /* alignement du texte */
color:#fffcfc; /* couleur du texte */
font-size:11px; /* taille du texte */
background-color: #706f6f; /* couleur du fond */
padding: 6px; /* marge intérieur */
-moz-border-radius:6px; /* coins arrondis */
-webkit-border-radius:6px; /* coins arrondis */
border-radius:6px; /* coins arrondis */
}


.cadreavatar {
border : 4px solid ivory;
-moz-border-radius: 3px 3px 3px 3px;
}

body {
  background-color: #000000;
  background-repeat:no-repeat
}

a.mainmenu{
font-size: 11px;
color: #ffffff;
font-variant: small-caps;
background-color: #;
text-decoration: none;
border: 2px dotted #2A5157;
-moz-border-radius: 3px;
}
a.mainmenu:hover{
font-size: 11px;
color: #ffffff;
font-variant: small-caps;
background-color: #;
text-decoration: none;
border: 2px dotted #2A5157;
-moz-border-radius: 3px;
}

.postdetails.poster-profile textarea { width: 200px;}

.statistiques{
border:0px;
background-image: url("http://i12.servimg.com/u/f12/09/02/44/64/quiest10.jpg");
background-repeat: no-repeat;
background-position: center;
height:270px;}

.groupes{
background-color:#;border: 2px #2A5157 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}

Je n'ai rien héberger donc je sais pas ce que je dois répondre...
Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Adam_sfp Mer 10 Nov 2010 - 12:29

Bonjour
Malheureusement je n'y connais pas grand chose en CSS...
Avez vous essayé en hébergeant le CSS concernant le slide?
et en le mettant ensuite dans votre code

<link rel="stylesheet" href="https://sd-1.archive-host.com/membres/up/37821634957680146/style.css" type="text/css" media="screen" />
en mettant bien sur le votre à la place...

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Leelewine Mer 10 Nov 2010 - 14:34

Ben je voudrais bien l'héberger mais je sais pas comment on fait.

Y'a un endroit pour héberger le CSS?

Je peux essayé de remplacer le CSS que tu m'as donné par le mien, mais je connais pas la procédure pour copier mon CSS dans le pc pour ensuite l'héberger...

Savez-vous comment on fait ?
Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Adam_sfp Mer 10 Nov 2010 - 19:05

Bonsoir

Vous pouvez préparer votre CSS sur un fichier texte avec wordpad par exemple et ensuite l'enregistrer avec l'extension CSS.
Pour l'héberger vous pouvez le faire chez archive host.

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître/disparaître une boite (widget)

Message par Leelewine Mer 10 Nov 2010 - 19:28

Je vais essayé ça et je vous dis quoi !

Edit : ça marche !!! je n'ai plus aucun cadre, tout et parfait !!!

Merci beaucoup Adam !!! grace à toi j'ai un slide génial !! Merciiiiiiiii !!!
Leelewine

Leelewine
*

Messages : 42
Inscrit(e) le : 02/09/2006

http://...
Leelewine a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

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