[PHPBB2] Fenetres en haut du forum

[christ77000]

• Version du forum :
  PHPBB2
• Templates modifiés :
  oui
• Navigateur :
  Firefox

Bonjour a toutes et a tous,

J'ai une nouvelle demande pour mon forum

voila, nous avons beaucoup d'adoption a notre actif sur notre forum et bien sur a la longue nous avons des chiens qui partent definitivement avec le lot de tristesse que ca apporte bien sur.

il m'arrive de devoir faire un encart en haut a gauche et a droite pour pouvoir mettre une photo pour prevenir l'ensemble du forum

est ce possible a faire ?
un peu comme ca

titre parametrable et photo a placer dedans aussi

[Milouze14Fondateur]

Hello Christophe,
il vaut mieux mettre une photo toute simple et non utiliser le schéma donné.
Il faut que cette image soit placée sur toutes les pages et est-ce que les invités doivent aussi accéder à cette requête ?

[christ77000]

hello Philippe,

c'est quoi photo simple
pour moi le fond etait toujours le meme juste incrustation dans la photo du canin disparu

si possible il faut pouvoir inscrire son nom dans le fond de la photo (celui qui est tjrs le meme)

non juste sur le forum et portail
les invités peuvent le voir pas de soucis la dessus

[Milouze14Fondateur]

Donc en faite , tu souhaites garder cette image:



Cette image est assez importante, désires tu garder ses dimensions ?
Cliques sur le lien ci-dessous pour voir sa taille initiale:
https://sd-5b.archive-host.com/membres/up/129353504366108608/arc_en_ciel.png

Et de ton côté , tu déposeras l'image du canin disparu ?
Sois bien précis car c'est assez vague cher ami...
Le texte actuel "Au revoir Fydel" reste lui aussi ?

[Milouze14Fondateur]

Bon, j'ai commencé le codage avec le peu d'information.

Le bloc aura ces dimensions 250px sur 250px;

On va déjà déposer le style:

Il est impératif de garder ces proportions Christophe car tout le codage est basé dessus.


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


/*ON POSITIONNE LES DEUX FENETRES EN HAUT  A 60PX DU HAUT*/
.M14_regret_left,.M14_regret_right{position:fixed;top:60px;}
/*ON POSITIONNE LA FENETRE A GAUCHE A 10PX */
.M14_regret_left{left:10px;}
/*ON POSITIONNE LA FENETRE A DROITE A 10PX*/
.M14_regret_right{right:10px;}
/*ON POSITIONNE LA PHOTO DU CANIN */
img.M14_photo_defunt{width:100px;height:100px;margin-left: -110px;margin-top: 110px;position: absolute;}
/*LE TEXTE DU CANIN */
.M14_texte_defunt
{
position: absolute;
width: 250px;
text-align: center;
margin-left: -250px;
height: 30px;
margin-top: 60px;
font-size: 24px;
font-style: italic;
}


Penser a cliquer sur le bouton

Puis le script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur le portail.
Cocher sur l'index.

Déposer ceci:

Code:


$(function(){
//LE LIEN DE LA PHOTO DU DEFUNT CANIN
var img="https://i.servimg.com/u/f20/20/11/87/27/10010.png";
//LE TEXTE SUR LA PHOTO DU CANIN DEFUNT
var texte="Toutou";
$('body').append('<div class="M14_regret_left"><img src="https://i.servimg.com/u/f20/20/11/87/27/arc_en12.png"/><span class="M14_texte_defunt">'+texte+'</span><img src="'+img+'"class="M14_photo_defunt" /></div><div class="M14_regret_right"><img src="https://i.servimg.com/u/f20/20/11/87/27/arc_en12.png"/><span class="M14_texte_defunt">'+texte+'</span><img src="'+img+'"class="M14_photo_defunt"/></div>');
});


Penser a cliquer sur le bouton


Il faudra juste changer le lien de la photo du canin

dans la variable suivante:
//LE LIEN DE LA PHOTO DU DEFUNT CANIN
var img="https://i.servimg.com/u/f20/20/11/87/27/10010.png";

Puis le texte ici:

Code:

//LE TEXTE SUR LA PHOTO DU CANIN DEFUNT
var texte="Toutou";

[christ77000]

hello merci philippe,

pour tes questions

Et de ton côté , tu déposeras l'image du canin disparu ?

    oui si c'est possible dans l'ellipse de la photo de fond

Sois bien précis car c'est assez vague cher ami...

     sorry m'sieur

Le texte actuel "Au revoir Fydel" reste lui aussi ? 

   non il sera a changer a chaque deces du canin



l,a ca reste en bas de page

[Milouze14Fondateur]

Hello Christophe,
merci d'utiliser les balises citation  pour citer des phrases Christophe .

la ca reste en bas de page

La c.s.s n'a pas était déposée.

https://www.milouze14.com/t32507-phpbb2-fenetres-en-haut-du-forum#618862

Je vois ce soir pour modifier l'image de fond.

[christ77000]

[christ77000]

hello philippe,

La c.s.s n'a pas était déposée.

https://www.milouze14.com/t32507-phpbb2-fenetres-en-haut-du-forum#618862

heu celle que tu avais mis ou celle que tu vas mettre ?

[Milouze14Fondateur]

Celle que je t'ai donné.

[christ77000]

bah ecoute,  j'ai bien integré ton morceau de css dans le mien pourtant.

la j'ai juste desactivé le java pour que ca n'empiete pas sur le bas du forum

[Milouze14Fondateur]

Re Christophe, effectivement la css est bien placée.
Tu peux tester de placer de nouveau le script.

[christ77000]

Voila j'ai mis le nouveau JS

[Milouze14Fondateur]

Ok merci,
peux tu me donner ta feuille de style car il y a un bug dans celle-ci:

[christ77000]

ok

[christ77000]

Code:


/* les onglet */
.systab .tab {
  padding: 2px 10px;
  margin-right: 10px;
  color: #000;
  background: #FFFFCC;
  border: 1px solid #000;
  cursor: pointer;
 
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
     }


#i_logo {margin-left:-10px;
margin-right:-10px;
margin-top:0px;
margin-bottom:-19px;}

.navig {
position: absolute;
top: -3px;
width: 100%;
}

/* BARRE DE NAVIGATION*/
a.mainmenu {
font-size:22px;
margin:-1px;
padding-left:1px;
padding-right: 1px;
padding-top:1px;
padding-bottom:1px;
font-family: Arial regular,Arial,Verdana,Helvetica,sans-serif; font-style:bold;
text-decoration:none!important; letter-spacing:0px;text-transform: none;text-transform: uppercase;
}

a.mainmenu:hover
{
font-size:22px;
margin:-1px;
padding-left:1px;
padding-right: 1px;
padding-top:1px;
padding-bottom:1px;
font-family: Arial regular,Arial,Verdana,Helvetica,sans-serif; font-style:bold;
text-decoration:none!important; letter-spacing:0px;text-transform: none;text-shadow: #BA4A36 0px 0px 1px;text-transform: uppercase;}

a.mainmenu img{
display: none;
}

.forumline
{
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 1px;

border-top: 0px  olid #76BBDE;
border-bottom: 1px solid #76BBDE;
padding: 1px;
 
      background-color: #76BBDE;
border: 1px #58acd6 solid;
    border-bottom-color: rgb(88, 172, 214);
    border-bottom-style: solid;
    border-bottom-width: 0px
}


.bodyline{
  background-color: #FFFFFF;
}

span.forumlink { 
display: block;
text-align: left;
border-bottom:0px solid #F2F2F2;
}

span.forumlink:hover
{ display: block;
text-align: left;
border-bottom:0px solid #F2F2F2;
}

.row1.over span.gensmall { display:inline;}

a {
text-decoration: none;
}

u{text-decoration: none;}

.postdetails.poster-profile textarea { width: 196px; Height: 50px;}

a:hover {text-decoration: none!important;}

.postbody {
text-align:justify;
padding-left:1px;
padding-right:1px;
}

.code {
width: 400px;
    max-width: 400px;
    overflow: hidden;
white-space: normal;
background-color:#000000;
border:1px solid #211D1A;
border-left:1px solid #5C372A;
padding:1px;
color:#76BBDE;
}

.spoiler {
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
width: 300px;
    max-width: 300px;
    overflow: hidden;
white-space: normal;
padding:1px;
color:#5F5347;
}

.quote {
background-color:#27221D;
border:1px solid #211D1A;
border-left:1px solid #5C372A;
padding:1px;
color:#5F5347;
}


.headerbar {background-color: transparent;}


tr.post span.gensmall { display: none; }

a.forumlink{ margin-left:5px; margin: 1px; font-size: 12px; font-family: Arial,Verdana,Arial,Helvetica,sans-serif; font-style:bold; text-decoration:none!important; text-align: right;letter-spacing:5px;text-transform: none;margin-left: 0px;text-transform: uppercase;
}

a.forumlink:hover{ margin-left:5px; margin: 1px; font-size: 12px; font-family: Arial,Verdana,Arial,Helvetica,sans-serif; font-style:bold; text-decoration:none!important; text-align: right;letter-spacing:5px;text-transform: none;margin-left: 0px; text-shadow: #C7603C 0px 0px 1px;text-transform: uppercase; color: #AD781F;
}

/* script bouton vers le haut du forum */

 .boutonhautbas {
    bottom: 400px;
    right: 10px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;
}

/* arrondir les angles du forum */

 .forumline th.secondarytitle{
   border-radius: 0px 0px 0px 0;
}
 

/* Afficher le contenu du forum avec une transition opaque*/

 #page-body
    {
    -moz-opacity:0;
    -khtml-opacity:0;
    -ms-filter:"alpha(opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter:alpha(opacity=0);
    opacity:0;
    }



/* Effet 3d sur les boutons*/
    #main-content a.cgu-buttons,input.button1,input.button2,a.button2,button.button2{border: 1px solid #afafaf; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 2px 2px 0px #afafaf; -webkit-box-shadow: 2px 2px 0px #afafaf}

/* qui est en ligne dans les messages*/
.icon_online {
position:absolute;
margin-left:150px;
margin-top:100px;}


 /* arrondir les angles des photos dans les messages*/
.postbody img {
  border-radius: 20px!important ;
}
 

/* AVATAR ARRONDI */
.CAFavatrond img {
  -moz-border-radius: 800px;
  -webkit-border-radius: 80px;
  -ms-border-radius: 800px;
  -o-border-radius: 80px;
  border-radius: 800px;
/* Bordure */
  border-width:1px; /* épaisseur de la bordure */
  border-style:solid; /* bordure pleine */
  border-color:#FFF; /* couleur de la bordure */
}
/* FIN AVATAR ARRONDI */



/* Pagination dans un message */

.postpagination span {
    float: left;
    display: inline;
    margin-left: 4px;
    padding: 0 8px;
    height: 26px;
    border: 1px solid;
    border-color: #C2D5E3;
    background-color: #FFF;
    background-repeat: no-repeat;
    color: #333;
    overflow: hidden;
    text-decoration: none;
    margin: 0 4px 0 0;
    line-height: 26px;
    cursor: pointer;
    font-weight: normal;
}
.postpagination span:hover {
    border-color: #369;
    color: #369;
}
.postpagination span.pp_current {
    background-color: #E5EDF2;
    border-color: #C2D5E3;
    color: #333;
    font-weight: bold;
}
.postpagination {
    display: block;
    font: 12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif;
}
.postpagination:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
div.postpagination { margin: 10px 0 }
span.postpagination span {
    float: none;
    padding: 0 4px;
    font-size: 0.8em;
    margin: 0 2px 0 0;
}
.postpagination span.pp_next {
    padding-right: 25px;
    background-image: url(https://i.imgur.com/2C4dvL5.gif);
    background-position: 90% 50%;
}
span.postpagination span.pp_next {
    padding-right: 12px;
    background-position: 90% 50%;
 
}

/*Fond qui s'adapte à toute la largeur de votre forum*/
    body{
    background-image : url('https://sd-5.archive-host.com/membres/up/129353504366108608/fond_beige.jpg');  /*l image de fond*/
    background-repeat  : no-repeat;  /*Pour que le fond ne se répète pas*/
    background-position:  center;        /* Gère la position de l image  top : en haut.  bottom : en bas.  left : à gauche.  center : centré.  right : à droite. Il est possible de combiner ces mots   exemple :background-position: top right;*/
    background-attachment:fixed; /*fixe l image*/
    /*ou   background-attachment: scroll l image monte avec le forum*/
      -webkit-background-size: cover; /* pour Chrome et Safari */
      -moz-background-size: cover; /* pour Firefox */
      -o-background-size: cover; /* pour Opera */
      background-size: cover;
    }




    /*Afficher de belles infobulles Tooltipster*/
    .tooltipster-base
    {
    padding:0px !important;
    border:1px solid #76BBDE !important;
    background:#DEE3E7!important;
    }
    /*LA PETITE FLECHE*/
    .tooltipster-arrow span
    {
    border-color:# !important;
    }
    /*LE BLOC A L INTERIEUR*/
    .tooltipster-content
    {
    border:2px solid #76BBDE !important;
    border-radius:1px !important;
    background:#DEE3E7!important;
    }


   /*Effet 3D sur les boutons du forum*/
    a.cgu-buttons,input.button1,input.button2,a.button2,button.button2{border:
     1px solid #afafaf; -moz-border-radius: 3px; -webkit-border-radius: 3px;
     -moz-box-shadow: 2px 2px 0px #afafaf; -webkit-box-shadow: 2px 2px 0px
    #afafaf}




   /*Effet loupe sur chaque message*/
    /*Le bouton pour l ouverture de la fenetre*/
    .M14_open_Body
    {
    width: 16px;
    height: 16px;
    right: 10px;
    float: right;
    cursor:pointer;
    }
    /*Le bouton pour la fermeture de la fenetre*/
    .M14_close_Body
    {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 10px;
    right: 10px;
    cursor:pointer;
    }
    /*On place les transitions sur les messages*/
    .postbody
    {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    /*La fenetre agrandie*/
    #M14_Effet_body.postbody
    {
    /*On donne une position relative*/
    position: relative;
    /*On demande une marge negative a gauche pour la correction de la fenetre*/
    left:-80px;
    /*La couleur de fond*/
    background: white;
    /*La couleur de police*/
    color:black;
    /*La taille de police*/
    font-size:14px;
    /*On donne un espace conséquent si besoin peut etre supprime*/
    padding: 20px 30px 10px 10px;
    /*on agrandit sur la largeur et la hauteur sur la plupart des navigateurs*/
    -ms-transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
      /*la couleur de bordure*/
    border:2px solid #006699;
      /*Les bordures arrondies sur la plupart des navigateurs*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }



/*onglets catégories*/
#cat-onglets {
  margin: 5px auto;
  text-align: center; }
 
.co-item {
  background: #000;
  color: #fdf;
  border: 1px solid  #fdf;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-item:hover{
  background: #fff;
  border: 1px solid #fff;
  color:#000;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #fdf;
  color: #000;
  border:1px solid #000; }





/*ICONE BARRE DE NAVIGATION*/
a.mainmenu:link, a.mainmenu:visited{
    background-color: #DEE3E7; /*Couleur de fond de chaque lien*/
    padding:2px 5px 2px 0; /*Espace entre le bord et le texte */
    margin-left:-0px;

/**Bordure**/
    border-top: 1px #76BBDE solid;
    border-bottom: 1px #76BBDE solid;
    border-left: 1px #76BBDE solid;
    border-right: 1px #76BBDE solid;
 
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
 
  }


    /*Auteur du sujet reponse automatique*/
    a.M14_Auteur
    {
    margin-left:5px;
    text-decoration:none !important; 
    }
    /*Avatar*/
    img.M14_Avatar
    {
    max-width:100px;
    max-height:100px;
    }
    /*Le corps du message*/
    #M14_postbody
    {
    font-style:italic;
    font-size:13px;
    color:green;
    }



    /*sujet verrouillé*/
    .M14_sujet_ferme
    {
    margin: 15px 0px;/*on decale de 15px du haut puis 0 */
    width:40%;/*on demande une largeur de 20%*/
    padding: 14px 11px 14px 50px;/*l espace interieur du bloc*/
    border: 3px solid #76BBDE;/*la bordure*/
    background-image: url(LE LIEN DE L IMAGE);/*le lien de l image 16 px*/
    background-repeat: no-repeat;/*on ne repete pas l image*/
    background-position: 10px center;/*on place l image a 10 px du haut puis on la centre*/
    color: #f20909 !important;/*la couleur de police*/
    background-color: #EFEFEF;/*la couleur de fond*/
    -webkit-border-radius: 10px;/*les bordures arrondies*/
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;/*on centre le texte*/
    font-size: 14px;/*on donne une taille de police*/
    }





    /*Adpté(e) Reservé(e) Vendu(e)*/
fa_postbody_xy{
   background: url("https://ahp.li/25c035142aa9260403f6.png");
min-height: 5px;
 

    tr[id^="p"][class*="post--"]  span.M14_icon_post{float: right;}
 
    span.M14_opacity
    {
    font-size: 84px;
    color:red;
    opacity: 0.3;
    width: 50%;
    display: inline-block;
    margin-left: 25%;
    margin-top: 10%;
    }


  }

    /*Faire clignoter les images des nouveaux messages)*/
    .M14_Blink ,a.mainmenu.M14_Blink{color:darkgreen !important;}


  /*Fenetres en haut du forum arc en ciel*/

    /*ON POSITIONNE LES DEUX FENETRES EN HAUT  A 60PX DU HAUT*/
    .M14_regret_left,.M14_regret_right{position:fixed;top:60px;}
    /*ON POSITIONNE LA FENETRE A GAUCHE A 10PX */
    .M14_regret_left{left:10px;}
    /*ON POSITIONNE LA FENETRE A DROITE A 10PX*/
    .M14_regret_right{right:10px;}
    /*ON POSITIONNE LA PHOTO DU CANIN */
    img.M14_photo_defunt{width:100px;height:100px;margin-left: -110px;margin-top: 110px;position: absolute;}
    /*LE TEXTE DU CANIN */
    .M14_texte_defunt
    {
    position: absolute;
    width: 250px;
    text-align: center;
    margin-left: -250px;
    height: 30px;
    margin-top: 60px;
    font-size: 24px;
    font-style: italic;
 
    }

[Milouze14Fondateur]

Tu peux remplacer tout le contenu par celui-ci:

Code:


    /* les onglet */
    .systab .tab {
      padding: 2px 10px;
      margin-right: 10px;
      color: #000;
      background: #FFFFCC;
      border: 1px solid #000;
      cursor: pointer;
   
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
        }


    #i_logo {margin-left:-10px;
    margin-right:-10px;
    margin-top:0px;
    margin-bottom:-19px;}

    .navig {
    position: absolute;
    top: -3px;
    width: 100%;
    }

    /* BARRE DE NAVIGATION*/
    a.mainmenu {
    font-size:22px;
    margin:-1px;
    padding-left:1px;
    padding-right: 1px;
    padding-top:1px;
    padding-bottom:1px;
    font-family: Arial regular,Arial,Verdana,Helvetica,sans-serif; font-style:bold;
    text-decoration:none!important; letter-spacing:0px;text-transform: none;text-transform: uppercase;
    }

    a.mainmenu:hover
    {
    font-size:22px;
    margin:-1px;
    padding-left:1px;
    padding-right: 1px;
    padding-top:1px;
    padding-bottom:1px;
    font-family: Arial regular,Arial,Verdana,Helvetica,sans-serif; font-style:bold;
    text-decoration:none!important; letter-spacing:0px;text-transform: none;text-shadow: #BA4A36 0px 0px 1px;text-transform: uppercase;}

    a.mainmenu img{
    display: none;
    }

    .forumline
    {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 1px;

    border-top: 0px  olid #76BBDE;
    border-bottom: 1px solid #76BBDE;
    padding: 1px;
   
          background-color: #76BBDE;
    border: 1px #58acd6 solid;
        border-bottom-color: rgb(88, 172, 214);
        border-bottom-style: solid;
        border-bottom-width: 0px
    }


    .bodyline{
      background-color: #FFFFFF;
    }

    span.forumlink {
    display: block;
    text-align: left;
    border-bottom:0px solid #F2F2F2;
    }

    span.forumlink:hover
    { display: block;
    text-align: left;
    border-bottom:0px solid #F2F2F2;
    }

    .row1.over span.gensmall { display:inline;}

    a {
    text-decoration: none;
    }

    u{text-decoration: none;}

    .postdetails.poster-profile textarea { width: 196px; Height: 50px;}

    a:hover {text-decoration: none!important;}

    .postbody {
    text-align:justify;
    padding-left:1px;
    padding-right:1px;
    }

    .code {
    width: 400px;
        max-width: 400px;
        overflow: hidden;
    white-space: normal;
    background-color:#000000;
    border:1px solid #211D1A;
    border-left:1px solid #5C372A;
    padding:1px;
    color:#76BBDE;
    }

    .spoiler {
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -moz-border-radius-topleft:0px;
    -moz-border-radius-topright:0px;
    width: 300px;
        max-width: 300px;
        overflow: hidden;
    white-space: normal;
    padding:1px;
    color:#5F5347;
    }

    .quote {
    background-color:#27221D;
    border:1px solid #211D1A;
    border-left:1px solid #5C372A;
    padding:1px;
    color:#5F5347;
    }


    .headerbar {background-color: transparent;}


    tr.post span.gensmall { display: none; }

    a.forumlink{ margin-left:5px; margin: 1px; font-size: 12px; font-family: Arial,Verdana,Arial,Helvetica,sans-serif; font-style:bold; text-decoration:none!important; text-align: right;letter-spacing:5px;text-transform: none;margin-left: 0px;text-transform: uppercase;
    }

    a.forumlink:hover{ margin-left:5px; margin: 1px; font-size: 12px; font-family: Arial,Verdana,Arial,Helvetica,sans-serif; font-style:bold; text-decoration:none!important; text-align: right;letter-spacing:5px;text-transform: none;margin-left: 0px; text-shadow: #C7603C 0px 0px 1px;text-transform: uppercase; color: #AD781F;
    }

    /* script bouton vers le haut du forum */

    .boutonhautbas {
        bottom: 400px;
        right: 10px; /* remplacez right par left pour afficher les boutons à gauche */
        position: fixed;
        z-index: 100;
    }

    /* arrondir les angles du forum */

    .forumline th.secondarytitle{
      border-radius: 0px 0px 0px 0;
    }
   

    /* Afficher le contenu du forum avec une transition opaque*/

    #page-body
        {
        -moz-opacity:0;
        -khtml-opacity:0;
        -ms-filter:"alpha(opacity=0)";
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
        filter:alpha(opacity=0);
        opacity:0;
        }



    /* Effet 3d sur les boutons*/
        #main-content a.cgu-buttons,input.button1,input.button2,a.button2,button.button2{border: 1px solid #afafaf; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 2px 2px 0px #afafaf; -webkit-box-shadow: 2px 2px 0px #afafaf}

    /* qui est en ligne dans les messages*/
    .icon_online {
    position:absolute;
    margin-left:150px;
    margin-top:100px;}


    /* arrondir les angles des photos dans les messages*/
    .postbody img {
      border-radius: 20px!important ;
    }
   

    /* AVATAR ARRONDI */
    .CAFavatrond img {
      -moz-border-radius: 800px;
      -webkit-border-radius: 80px;
      -ms-border-radius: 800px;
      -o-border-radius: 80px;
      border-radius: 800px;
    /* Bordure */
      border-width:1px; /* épaisseur de la bordure */
      border-style:solid; /* bordure pleine */
      border-color:#FFF; /* couleur de la bordure */
    }
    /* FIN AVATAR ARRONDI */



    /* Pagination dans un message */

    .postpagination span {
        float: left;
        display: inline;
        margin-left: 4px;
        padding: 0 8px;
        height: 26px;
        border: 1px solid;
        border-color: #C2D5E3;
        background-color: #FFF;
        background-repeat: no-repeat;
        color: #333;
        overflow: hidden;
        text-decoration: none;
        margin: 0 4px 0 0;
        line-height: 26px;
        cursor: pointer;
        font-weight: normal;
    }
    .postpagination span:hover {
        border-color: #369;
        color: #369;
    }
    .postpagination span.pp_current {
        background-color: #E5EDF2;
        border-color: #C2D5E3;
        color: #333;
        font-weight: bold;
    }
    .postpagination {
        display: block;
        font: 12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif;
    }
    .postpagination:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    div.postpagination { margin: 10px 0 }
    span.postpagination span {
        float: none;
        padding: 0 4px;
        font-size: 0.8em;
        margin: 0 2px 0 0;
    }
    .postpagination span.pp_next {
        padding-right: 25px;
        background-image: url(https://i.imgur.com/2C4dvL5.gif);
        background-position: 90% 50%;
    }
    span.postpagination span.pp_next {
        padding-right: 12px;
        background-position: 90% 50%;
   
    }

    /*Fond qui s'adapte à toute la largeur de votre forum*/
        body{
        background-image : url('https://sd-5.archive-host.com/membres/up/129353504366108608/fond_beige.jpg');  /*l image de fond*/
        background-repeat  : no-repeat;  /*Pour que le fond ne se répète pas*/
        background-position:  center;        /* Gère la position de l image  top : en haut.  bottom : en bas.  left : à gauche.  center : centré.  right : à droite. Il est possible de combiner ces mots  exemple :background-position: top right;*/
        background-attachment:fixed; /*fixe l image*/
        /*ou  background-attachment: scroll l image monte avec le forum*/
          -webkit-background-size: cover; /* pour Chrome et Safari */
          -moz-background-size: cover; /* pour Firefox */
          -o-background-size: cover; /* pour Opera */
          background-size: cover;
        }




        /*Afficher de belles infobulles Tooltipster*/
        .tooltipster-base
        {
        padding:0px !important;
        border:1px solid #76BBDE !important;
        background:#DEE3E7!important;
        }
        /*LA PETITE FLECHE*/
        .tooltipster-arrow span
        {
        border-color:# !important;
        }
        /*LE BLOC A L INTERIEUR*/
        .tooltipster-content
        {
        border:2px solid #76BBDE !important;
        border-radius:1px !important;
        background:#DEE3E7!important;
        }


      /*Effet 3D sur les boutons du forum*/
        a.cgu-buttons,input.button1,input.button2,a.button2,button.button2{border:
        1px solid #afafaf; -moz-border-radius: 3px; -webkit-border-radius: 3px;
        -moz-box-shadow: 2px 2px 0px #afafaf; -webkit-box-shadow: 2px 2px 0px
        #afafaf}




      /*Effet loupe sur chaque message*/
        /*Le bouton pour l ouverture de la fenetre*/
        .M14_open_Body
        {
        width: 16px;
        height: 16px;
        right: 10px;
        float: right;
        cursor:pointer;
        }
        /*Le bouton pour la fermeture de la fenetre*/
        .M14_close_Body
        {
        position: absolute;
        width: 16px;
        height: 16px;
        top: 10px;
        right: 10px;
        cursor:pointer;
        }
        /*On place les transitions sur les messages*/
        .postbody
        {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        }
        /*La fenetre agrandie*/
        #M14_Effet_body.postbody
        {
        /*On donne une position relative*/
        position: relative;
        /*On demande une marge negative a gauche pour la correction de la fenetre*/
        left:-80px;
        /*La couleur de fond*/
        background: white;
        /*La couleur de police*/
        color:black;
        /*La taille de police*/
        font-size:14px;
        /*On donne un espace conséquent si besoin peut etre supprime*/
        padding: 20px 30px 10px 10px;
        /*on agrandit sur la largeur et la hauteur sur la plupart des navigateurs*/
        -ms-transform: scale(1.2,1.2);
        -webkit-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
          /*la couleur de bordure*/
        border:2px solid #006699;
          /*Les bordures arrondies sur la plupart des navigateurs*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        }



    /*onglets catégories*/
    #cat-onglets {
      margin: 5px auto;
      text-align: center; }
   
    .co-item {
      background: #000;
      color: #fdf;
      border: 1px solid  #fdf;
      display: inline;
      cursor: pointer;
      margin: 0 5px;
      padding: 3px;
      border-radius: 10px;
    }
   
    .co-item:hover{
      background: #fff;
      border: 1px solid #fff;
      color:#000;
      display: inline;
      cursor: pointer;
      margin: 0 5px;
      padding: 3px;
      border-radius: 10px;
    }
   
    .co-actif {
      background: #fdf;
      color: #000;
      border:1px solid #000; }





    /*ICONE BARRE DE NAVIGATION*/
    a.mainmenu:link, a.mainmenu:visited{
        background-color: #DEE3E7; /*Couleur de fond de chaque lien*/
        padding:2px 5px 2px 0; /*Espace entre le bord et le texte */
        margin-left:-0px;

    /**Bordure**/
        border-top: 1px #76BBDE solid;
        border-bottom: 1px #76BBDE solid;
        border-left: 1px #76BBDE solid;
        border-right: 1px #76BBDE solid;
   
        -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
   
      }


        /*Auteur du sujet reponse automatique*/
        a.M14_Auteur
        {
        margin-left:5px;
        text-decoration:none !important;
        }
        /*Avatar*/
        img.M14_Avatar
        {
        max-width:100px;
        max-height:100px;
        }
        /*Le corps du message*/
        #M14_postbody
        {
        font-style:italic;
        font-size:13px;
        color:green;
        }



        /*sujet verrouillé*/
        .M14_sujet_ferme
        {
        margin: 15px 0px;/*on decale de 15px du haut puis 0 */
        width:40%;/*on demande une largeur de 20%*/
        padding: 14px 11px 14px 50px;/*l espace interieur du bloc*/
        border: 3px solid #76BBDE;/*la bordure*/
        background-image: url(LE LIEN DE L IMAGE);/*le lien de l image 16 px*/
        background-repeat: no-repeat;/*on ne repete pas l image*/
        background-position: 10px center;/*on place l image a 10 px du haut puis on la centre*/
        color: #f20909 !important;/*la couleur de police*/
        background-color: #EFEFEF;/*la couleur de fond*/
        -webkit-border-radius: 10px;/*les bordures arrondies*/
        -moz-border-radius: 10px;
        border-radius: 10px;
        text-align: center;/*on centre le texte*/
        font-size: 14px;/*on donne une taille de police*/
        }





        /*Adpté(e) Reservé(e) Vendu(e)*/
    fa_postbody_xy{
      background: url("https://ahp.li/25c035142aa9260403f6.png");
    min-height: 5px;
    }

        tr[id^="p"][class*="post--"]  span.M14_icon_post{float: right;}
   
        span.M14_opacity
        {
        font-size: 84px;
        color:red;
        opacity: 0.3;
        width: 50%;
        display: inline-block;
        margin-left: 25%;
        margin-top: 10%;
        }


     

        /*Faire clignoter les images des nouveaux messages)*/
        .M14_Blink ,a.mainmenu.M14_Blink{color:darkgreen !important;}


      /*Fenetres en haut du forum arc en ciel*/

        /*ON POSITIONNE LES DEUX FENETRES EN HAUT  A 60PX DU HAUT*/
        .M14_regret_left,.M14_regret_right{position:fixed;top:60px;}
        /*ON POSITIONNE LA FENETRE A GAUCHE A 10PX */
        .M14_regret_left{left:10px;}
        /*ON POSITIONNE LA FENETRE A DROITE A 10PX*/
        .M14_regret_right{right:10px;}
        /*ON POSITIONNE LA PHOTO DU CANIN */
        img.M14_photo_defunt{width:100px;height:100px;margin-left: -110px;margin-top: 110px;position: absolute;}
        /*LE TEXTE DU CANIN */
        .M14_texte_defunt
        {
        position: absolute;
        width: 250px;
        text-align: center;
        margin-left: -250px;
        height: 30px;
        margin-top: 60px;
        font-size: 24px;
        font-style: italic;
   
        }

Penser a cliquer sur le bouton


Tu avais une accolade de trop

[christ77000]

ah mince desolé pour ca


bah ecoute ca a l'air d'etre nickel ca

[Milouze14Fondateur]

Ce n'est pas grave Christophe

[christ77000]

Juste je vais retoucher l'image de fond en gardant ses dimensions initiales
et celle du chien pour quelle epouse l'ellipse du fond


aprés ca je le passe en resolu


un grand merci a toi philippe




une petite derniere


est il possible de n'avoir qu'une seule a gauche lorsqu'il y a qu'un seul canin a mettre et ajouter le 2eme lorsque y en a 2 canins differents

je vois pour dupliquer les scripts et css ca devrait etre ok ,

[Milouze14Fondateur]

Pas de soucis Christophe,
j'aime avoir toutes les infos dès le départ car avec cette demande:

est il possible de n'avoir qu'une seule a gauche lorsqu'il y a qu'un seul canin a mettre et ajouter le 2eme lorsque y en a 2 canins differents

Il faut que je revois le script ...................

[christ77000]

Oups oups !!!!!!

[Milouze14Fondateur]

Je suis bête,
tu peux pour un défunt ajouter ce script (fenêtre à gauche):

Code:

$(function(){
//LE LIEN DE LA PHOTO DU DEFUNT CANIN
var img="https://i.servimg.com/u/f20/20/11/87/27/10010.png";
//LE TEXTE SUR LA PHOTO DU CANIN DEFUNT
var texte="Toutou";
$('body').append('<div class="M14_regret_left"><img src="https://i.servimg.com/u/f20/20/11/87/27/arc_en12.png"/><span class="M14_texte_defunt">'+texte+'</span><img src="'+img+'"class="M14_photo_defunt" /></div>');
});

Et l'actuel, tu le gardes pour deux défunts Christophe

[christ77000]

Merci encore philippe

et bravo pour cette astuce

[Milouze14Fondateur]

De rien Christophe,

Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande