Annonce et chat

[jeanluc1974]

Bonjour je viens de personnalisé mon "Qui est en ligne ?" grace à Macema
Donc j'aimerais savoir s'il est possible de rendre le fonds de l'annonce transparent et de modifier le contour du chat pour qu'il soit assorti au forum ?

Adresse du forum : www.clan-oss.com

Merci pour votre aide...

[SoraNoHime]

Re-bonsoir ^^

Pour les annonces, avez-vous modifié le template overall_header déjà ?

pour la chatbox, merci de consulter ce sujet : https://forum.forumactif.com/t260270-installation-de-la-chatbox?highlight=chatbox

Ps : normalement c'est un problème un sujet.

Cordialement.

[jeanluc1974]

Merci pour votre réponse, non je n'ai pas modifié le template

Désolé, je ferais attention la prochaine fois

[SoraNoHime]

Repérez ceci dans le template overall_header (à la fin pratiquement)

<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->

C'est ce qui concerne les annonces. Supprimez les parties en rouge pour la rendre ransparente.

Cordialement.

[jeanluc1974]

En fait je me suis trompé, je croyais que c'était un cadre annonce et en fait c'est le cadre "Message sur la page d'accueil"

[SoraNoHime]

^^ cela arrive, remettez les parties en rouge dans ce cas. on change de template alors et on retourne dans l'index_body ^^

Repérez :

<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>
<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

supprimez les parties en rouge.

Bonne journée

[jeanluc1974]

Merci ça marche très bien, par contre pour le chat tu penses que je peux changer le contour

[SoraNoHime]

Je ne connais pas bien le chat. Mais dans le lien que je vous ai passé il y a des astuces à la fin pour personnaliser.

peut-etre un truc si cela marche, je vous laisse tester. par contre vous utilisez la chatbox du haut ou du bas de l'index ?

[jeanluc1974]

En haut....

[SoraNoHime]

Nous allons tester alors. Dans le template index_body, repérez :

Code:

{CHATBOX_TOP}

changez le ainsi :

Code:

<div class="designcb">{CHATBOX_TOP}</div>

puis dans la css essayez :

Code:

.designcb .forumline {
border : 3px double #ff00ff;
}

si cela ne marche pas essayez ceci aussi :

Code:

.designcb .forumline {
border : 3px double #ff00ff!important;
}

personnalisez bien sur à votre gout

[jeanluc1974]

J'ai fais sur mon forum



Ça à rajouter un cadre rose mais j'aimerais mettre un cadre comme au dessus mon cadre match !!!

[SoraNoHime]

Avec une image ? on peut voir pour, au moins on sait que le code fonctionne pour la couleur, et certainement ensuite pour les arrondis, même s'il faudra arrondir certainement d'autres parties (header & footer de la chatbox)

Essayez ceci sinon :

Code:

.designcb .forumline {
        border : 2px double #ffffff;
    -moz-box-shadow: 0px 0px 8px 2px #ff00ff;
    -webkit-box-shadow: 0px 0px 8px 2px #ff00ff;
    box-shadow: 0px 0px 8px 2px #ff00ff;
    -moz-border-radius: 30px ;
    -webkit-border-radius:30px;
    -khtml-border-radius:30px;
    border-radius:30px;
        }

Couleurs à personnaliser bien sur.

[jeanluc1974]

Le cadre autour fonctionne en arrondi
Mais pas le chat non.

[jeanluc1974]

Bon je m'absente du week end on se contactera lundi, merci et bon week end à tous

[SoraNoHime]

Que voulez-vous dire par pas le chat... ?

Cordialement.

[jeanluc1974]

Re bonjour je suis rentrer de week end

En fait le cadre extérieur est arrondi mais le Chat reste rectangulaire et se place sur le cadre extérieur.

Merci...

[SoraNoHime]

Essayons ceci mais je ne garantie rien ^^

dans la css mettez :

Code:

#chatbox_header, .catBottom #chatbox_header {
  -khtml-border-radius-topleft: 30px;
  -khtml-border-radius-topright: 30px;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-topright: 30px;
  -webkit-border-top-left-radius: 30px;
  -webkit-border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
#chatbox_footer {
  -khtml-border-radius-bottomleft: 30px;
  -khtml-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 30px;
  -moz-border-radius-bottomright: 30px;
  -webkit-border-bottom-left-radius: 30px;
  -webkit-border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

[jeanluc1974]

Il ne se passe rien

[SoraNoHime]

mince, j'espérais...

Je fais faire des tests plus poussés de mon coté et voir ce que cela donne. Il me faudrait toute la css concernant la chatbox si vous en avez en plus de ce que j'ai donné en premier.

[jeanluc1974]

Non rien de plus concernant le chat dans mon CSS, merci

[SoraNoHime]

Je progresse mais il me manque encore un point :

Code:


        .designcb .forumline {
                border : 2px double #ffffff;
            -moz-box-shadow: 0px 0px 8px 2px #ff00ff;
            -webkit-box-shadow: 0px 0px 8px 2px #ff00ff;
            box-shadow: 0px 0px 8px 2px #ff00ff;
            -moz-border-radius: 30px ;
            -webkit-border-radius:30px;
            -khtml-border-radius:30px;
            border-radius:30px;
                }



        .designcb #frame_chatbox {
          -khtml-border-radius-topleft: 30px;
          -khtml-border-radius-topright: 30px;
          -moz-border-radius-topleft: 30px;
          -moz-border-radius-topright: 30px;
          -webkit-border-top-left-radius: 30px;
          -webkit-border-top-right-radius: 30px;
          border-top-left-radius: 30px;
          border-top-right-radius: 30px;
        }

pouvez-vous une fois ce code mis dans votre css me rendre un screen du résultat.

Cordialement.

[jeanluc1974]

Voici le résultat :



Merci...

[SoraNoHime]

j'aurai mis le temps mais ceci fonctionne :

Code:

              .designcb .forumline {
                        border : 2px double #ffffff;
                    -moz-box-shadow: 0px 0px 8px 2px #ff00ff;
                    -webkit-box-shadow: 0px 0px 8px 2px #ff00ff;
                    box-shadow: 0px 0px 8px 2px #ff00ff;
                    -moz-border-radius: 30px ;
                    -webkit-border-radius:30px;
                    -khtml-border-radius:30px;
                    border-radius:30px;
                        }
               
       
                .designcb #frame_chatbox, .designcb .forumline .row1  {
                    -moz-border-radius: 30px ;
                    -webkit-border-radius:30px;
                    -khtml-border-radius:30px;
                    border-radius:30px;
                }

J'attends confirmation de votre coté.

Cordialement.

[jeanluc1974]

Nickel ça fonctionne, par contre est ce qu'il est possible de décaler les textes du chat et de la mettre transparente

[SoraNoHime]

Si vous la mettez transparente, elle le sera aussi en pleine page par contre.

Je vous invite à revoir le lien que e vous avez donné au début. Personnaliser en mettant dans les codes des endroits voulus :

Code:

background-color : transparent;

Une fois cela effectué, dites moi s'il reste des modifications à apporter.

Cordialement.

[jeanluc1974]

Je vous remercie énormément c'est impeccable, par contre j'ai juste un petit soucis avec le "En ligne" du chat qui est devenu énorme :lol!:

[SoraNoHime]

Puis-je avoir ce que vous avez mis comme code pour la chatbox ?

[jeanluc1974]

Voici tout mon CSS

Code:

body{
background-color: #2E3337;
background-position: top center;
background-repeat: no-repeat;
}
.bodyline{
background-color: #;
background-image: url('http://nsa28.casimages.com/img/2011/08/29/11082905443014433.png');
background-repeat: no-repeat;
padding:5px;
margin:-10px;
}

#i_logo{
padding-bottom: 15px;
}

.mainmenu{
 /position: relative;
}

#page-body{
background-color: #;
background-image: url('http://nsa28.casimages.com/img/2011/08/29/110829054634399880.png');
background-repeat: repeat-y;
min-hight: 60px;
width:1200px ;
margin:10px;
padding: 50px 0px 50px 0px;
margin-top: -36px;
}

#page-footer{
background-color: #;
background-image: url('http://nsa27.casimages.com/img/2011/08/29/110829063946649472.png');
background-position: bottom;
background-repeat: no-repeat;
height: 380px;
width: 1200px;
margin:0px;
padding:10px;
margin-top: -38px;
}

#page-footer ul.linklist{
display: block !important;
width: 1200px;
padding-left: 130px;
}

.three-col{
background-color: #;
max-width: 1000px;
width: 1000px;
margin-left: 90px;
padding-bottom: 5px;
padding-top: 5px;
}

a.button1, input.button1, a.button2, input.button2, button.button2 {
background-image: url("http://nsa27.casimages.com/img/2011/08/29/110829100952263752.jpg");
background-repeat: repeat;
background-position: top left;
border: 3px double #000;
}

a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
background-image: url("http://nsa27.casimages.com/img/2011/08/29/110829100952263752.jpg");
background-repeat: repeat;
background-position: top left;
border: 3px double #000;
}

th{
height: 30px;
}

input.liteoption {
background-color : #000;
background-image: url("http://nsa27.casimages.com/img/2011/08/29/110829100952263752.jpg");
background-position: top;
font-weight : bold;
color: #000;
}

input.liteoption:hover {
background-color : #000;
background-image: url('http://nsa27.casimages.com/img/2011/08/29/110829100952263752.jpg');
background-position: top;
font-weight : bold;
color: #000;
}

input.mainoption {
background-color : #000;
background-image: url("http://nsa27.casimages.com/img/2011/08/29/110829100952263752.jpg");
background-position: top;
font-weight : bold;
color: #000;
}

input.mainoption:hover {
background-color : #000;
background-image: url('http://nsa27.casimages.com/img/2011/08/29/110829100952263752.jpg');
background-position: top;
font-weight : bold;
color : #000;
}

#fa_ticker_block
{
width:1000px;
margin:110px;
}

        .qeelfond {
        background-image: url("http://nsa22.casimages.com/img/2011/10/11/111011014424769045.png");
        background-repeat: no-repeat;
        background-position: top center;
        width: 1030px;
        height : 567px
        }
       
                .stats {
                margin-left : 20px;
                margin-right : 20px;
                margin-bottom : 15px;
        margin-top : 20px;
                }
             
                .online {
        padding : 5px;
        margin-top : 20px;
                margin-left : 35px;
                margin-right : 20px;
                margin-bottom : 30px;
        height : 200px;
        overflow : auto;
                }
             
                .groupes {
        padding : 5px;
        margin-top : 35px;
                margin-left : -35px;
                margin-right : 25px;
                margin-bottom : 30px;
        height : 200px;
        overflow : auto;
                }
             
                .histo {
        padding : 5px;
        overflow : auto;
        height : 45px;
                margin-left : 25px;
                margin-right : 20px;
                margin-bottom : 38px;
                }
             
                .hb {
        height : 45px;
        padding : 5px;
        overflow : auto;
                margin-left : 25px;
                margin-right : 20px;
                margin-bottom : 38px;
                }
       
        .trans .row1 {
        background-color : transparent;
        }

.stats span.gensmall {
font-size:11px;
color: #D9E3FF;
font-weight: bold;
}

.online span.gensmall {
font-size:11px;
color: #D9E3FF;
font-weight: bold;
}

.groupes span.gensmall {
font-size:12px;
font-weight: bold;
}

.histo span.gensmall {
font-size:11px;
color: #D9E3FF;
font-weight: bold;
}

.hb span.gensmall {
font-size:11px;
color: #D9E3FF;
font-weight: bold;
}

                              .designcb .forumline {
                                border : 2px double #000000;
                            -moz-border-radius: 10px ;
                            -webkit-border-radius:10px;
                            -khtml-border-radius:30px;
                            border-radius:10px;
                                }
                     
             
                        .designcb #frame_chatbox, .designcb .forumline .row1  {
                            -moz-border-radius: 10px ;
                            -webkit-border-radius:10px;
                            -khtml-border-radius:10px;
                            border-radius:10px;
                        }

              th, .catHead, .secondarytitle{   
              -moz-border-radius-topleft: 10px;
              -moz-border-radius-topright: 10px;
              -webkit-border-top-right-radius: 10px;
              -webkit-border-top-left-radius: 10px;
              border-top-right-radius: 10px;
              border-top-left-radius: 10px;}
        .catBottom{
              -moz-border-radius-bottomleft: 10px;
              -moz-border-radius-bottomright: 10px;
              -webkit-border-bottom-right-radius: 10px;
              -webkit-border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
              border-bottom-left-radius: 10px;}
       
       
        td.row1, td.row2, td.row3, td.row3Right{
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;}

                  .forumline {
                                border : 2px double #000000;
                            -moz-border-radius: 10px ;
                            -webkit-border-radius:10px;
                            -khtml-border-radius:10px;
                            border-radius:10px;
                                }

[SoraNoHime]

Code:

                .online {
        padding : 5px;
        margin-top : 20px;
                margin-left : 35px;
                margin-right : 20px;
                margin-bottom : 30px;
        height : 200px;
        overflow : auto;
                }

Le soucis vient de ce code. A quoi vous sert-il ailleurs sur le forum ?

[jeanluc1974]

En fait il me sert pour le "qui est en ligne" que l'on a fait ensemble