Demande d'aide pour l'affichage des sujets en GRID sur Graff'Art

[petitefeuille]

Bonjour à tous,

Je suis Lydie, fondatrice du forum 'Petite Feuille' et également de 'Graff'Art'. J'ouvre ce topique aujourd'hui pour solliciter votre aide concernant votre nouvelle fonctionnalité  : l'affichage des sujets en GRID.

J'ai récemment découvert cette option et j'ai pensé qu'elle pourrait être très utile pour notre section dédiée aux dessins et peintures sur 'Graff'Art' (https://graffart.forumactif.com/f7-dessins-peintures). En effet, cette présentation en grille peut rendre les sujets plus attrayants et faciles à parcourir.

Mais, j'ai rencontré un problème : les images des sujets sont tronquées et ne s'affichent pas dans leur intégralité. J'aimerais beaucoup pouvoir les voir en entier pour que les membres puissent apprécier pleinement les œuvres partagées.

J'ai déjà consulté plusieurs demandes d'aide sur ce forum, mais je dois avouer que je n'ai pas réussi à trouver une solution qui fonctionne pour moi. C'est pourquoi je fais appel à votre expertise.

Je joins un screenshot de la section en question pour que vous puissiez voir le problème de vos propres yeux. J'aimerais appliquer cette fonctionnalité à toutes les sections du forum, mais je préfère d'abord résoudre ce problème d'affichage.

Merci d'avance pour votre aide précieuse. Votre soutien est toujours très apprécié et contribue grandement à l'amélioration de notre forum.....

Cordialement,

Lydie



Merci encore !

Lydie

[Stefano123]

Bonjour petitefeuille,

Dans votre Feuille de style CSS :
Vous pouvez régler la hauteur de l'image avec : height: 150px :

Code:

topic-card .cover-image {
  height: 150px;
  position: relative;
  box-shadow: 0 -3px 0 0 rgba(255,255,255,0.1) inset,0 2px 0 0 #ddd;
  background-color: #bbb;
  overflow: hidden;
}

Exemple en image, j'ai mis en  : 350px



Après, je ne sais pas si cela va structurer ou non votre forum !
Où peut-être redimensionner vos images.

Ou si quelqu'un à une meilleure solution à vous proposer !

Cordialement,

[petitefeuille]

Bonjour Stefano123,

merci pour votre aide, mais je ne comprends pas ce message car j'ai juste mis votre encodage et j'ai ce message :



je vous mets mon CSS :

Code:

topic-card .cover-image {
  height: 150px;
  position: relative;
  box-shadow: 0 -3px 0 0 rgba(255,255,255,0.1) inset,0 2px 0 0 #ddd;
  background-color: #bbb;
  overflow: hidden;
}



/*BUTTON  ************************************************/
button:focus { outline:0 !important; }



button, .button
{
 
                        transition: all .4s;
    display: inline-block;
    padding: 0px 10px;
    font-size: 10px;
    text-transform: uppercase;
    cursor: pointer;
  background-color: #bcbcbc;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  color: #000;
  border: 1px solid white;
    text-decoration: none;
    line-height: 15px;
  margin: 3px;
  border-radius: 10px;
  z-index: 999;
    }
button:hover,
.button:hover
 {
 background-color: #b8d6f5;
 color: #FFF;
 
  }


/*PANEL  ************************************************/

#panel
 {
    height: 70px;
    width: 60px;
      background: transparent;
    float: left;
    display: none;
      position: fixed;
 
  z-index: 999;
                  }
 


#click:focus {outline:0;}
#click
            {
  position: fixed;
 color: #000;
 background-color: #bcbcbc;
  top: 400px;
 
 left: -10px;
      font-size: 11px;
 z-index: 990;
              }
#click:hover
        {
 
 color: #FFF;
 
          background-color: #FFFFFF;
 
        }



 #monster
 {
  color: #000;
 background-color: #bcbcbc;
 
    position: fixed;
 top: 300px;
 left: 10px;
      font-size: 11px;
 }
#monster:focus {outline:0;}



#monster1:focus {outline:0;}
#monster1
 {
    color: #000;
 background-color: #bcbcbc;
 
  position: fixed;
 top: 320px;
 left: 10px;
      font-size: 11px;
 
 }



#monster2:focus {outline:0;}
#monster2
 {
    color: #000;
 background-color: #bcbcbc;
  position: fixed;
 top: 340px;
 left: 10px;
      font-size: 11px;
 
 }






/*on desactive sur version mobile et tablette*/
@media (min-width:0px) and (max-width:1024px)
{
.genmed.M14_fofo_description.ok,.genmed.M14_fofo_description,#fa_ticker_block,.M14_importe_load,.M14_load_img,#chatbox_top,.M14_cont_chatBox{display:none!important;}
}

/*Surveillance d un sujet*/
.M14_no_surveille:before{font-family: FontAwesome;content:"\f06e";font-size:14px;position:relative;top:-2px;left:-10px;font-weight:normal!important;color:#fff;}
.resizebox{background-color:transparent!important;}
.spoiler_content,.resize_border{border:none!important; }
.enlarge,.fullsize{text-decoration:none!important;text-transform:capitalize;}
select.fa-prefix-select{background-color:#c66!important;color:#fff;min-width:100px;margin-right:5px; padding:3px 3px 3px 5px;}
select{-webkit-appearance: none!important;padding:3px;}
.M14_avatar{width:225px;}
/*les prefixes sur la liste des sujets*/
.M14_class_prefixe{color:#666!important;font-style:italic;}
/* description des forums*/
.M14_fofo_description.ok span{position:relative;top:17px;font-style:italic;color:#333;font-weight:bold;}
.M14_fofo_description.ok select{color:#c66!important;font-weight:bold;}
.hierarchy span.forumlink{position:relative;top:16px;}
/*description des sujets*/
.M14_topic_description{font-style:italic;color:#333;font-weight:bold;text-transform:capitalize;position:relative;left:122px;}

/*Participants sur les messages*/
.poster-count strong a[href]:before{font-family: FontAwesome;content:"\f0c0";font-size:14px;position:relative;top:-2px;left:-10px;font-weight:normal!important;color:#c66;}
/*couleur des options de messages*/
div[id^="attachment"] .thHead tbody .genmed{color:#fff!important;}
/*ajout couleur de fond pour les images de rangs*/
td[width="300"][valign="top"] img[alt="Fondatrice"],td[width="300"][valign="top"] img[alt="Développeur"],td[width="300"][valign="top"] img[alt="Modo'S"],
td[width="300"][valign="top"] img[alt="Membres Actif"],td[width="300"][valign="top"] img[alt="V.I.P"],td[width="300"][valign="top"] img[alt="Premium"],td[width="300"][valign="top"] img[alt="Invité"]{background:#c66;padding:2px;}
/*correction couleur de fond award sur profil */
#profile_awards_full .module-title,.forumline.awards_module.module .catLeft{background:#c66!important;border:none!important;}
/*les avatars sur les index et sujets*/
#wio_new_avatar img,.lastpost-avatar img{border-radius:100%;}
#wio_new_avatar,.lastpost-avatar{border-radius:100%;background:#fff;height:38px;width:38px;padding:3px!important;border:1px solid #c66;}
/*ajout de bordures basse sur l index*/
.M14_topic td{border-bottom:1px solid #999!important;}
/*pagination liste des sujets et messages*/
.M14_goto_page{position:relative; left:100px;}
.M14_gotopagetop,.M14_gotopagetop b,.M14_goto_page,td.pagination span.gensmall b{color:#c66!important;}
.M14_gotopagetop img,td.pagination span img,.M14_goto_page img,.M14_td_pagin img{display:none;}
.M14_td_pagin,.M14_td_pagin a{color:#fff!important;}
/* Les signatures*/
.signature_div{text-align:center;}
/*modification des récompenses obtenues*/
.dd_award{background-color:transparent!important;border:none!important;}
div.award{height:32px!important;width:32px!important;border:none!important}
.M14_no_css{height:0px!important;max-height:0px!important;}
.M14_border_recompense{border-bottom:1px solid #c66!important;}
/*Correction widget du fofo a gauche*/
#content-container #left{margin-top:140px;margin-left:-20px;}
/* Correction separation de messages*/
.M14_TD_SEPARATE_MESSAGE.row1{background:#fff!important;}


/*DEBUT DES PASTILLES SUR LES MESSAGES*/
.user_pastille{cursor:pointer;width: 24px;height: 24px;position: absolute;background:#c66;border-radius:24px;text-align: center;margin-top:-3px;margin-left: 5px;}
 
.user_pastille span{color: white;font-size:14px;position: relative;top:4px;text-transform: uppercase;}
/*FIN DES PASTILLES SUR LES MESSAGES*/

td.bodyline{background:#fff;padding:0px 0px 10px 0px;}
td.Background_annonce{background:#fff!important;}
/*PARTICIPATION LISTE DES SUJETS*/
.M14_PARTICIPATE_POST_IMG:before{font-family: FontAwesome;font-size:18px;width:18px;height:18px;position:relative;top:-2px;left:6px;font-weight:normal!important;}
.M14-topic-list:not(.M14_ParticipeTopicList) .M14_PARTICIPATE_POST_IMG:before{content:"\f006";color:#999;}
.M14-topic-list.M14_ParticipeTopicList .M14_PARTICIPATE_POST_IMG:before{content:"\f005";color:#c66;}
/*La boite de smileys*/
#sceditor_smilies,#sce_smilies_body,#sce_smilies_body .row1{background:#fff!important;}
/*on ajoute un verrou si le sujet est verrouille message*/
.M14_verrou_titre_topic:after{font-family: FontAwesome;content: "\f023";font-size:24px;color:#c66;position:relative;top:2px;left:8px;font-weight:normal!important;}
/*En haut a droite pour copier le lien etc du message*/
.M14_copie_link:before{font-family: FontAwesome;content: "\f090";font-size:18px;color:#fff;position:relative;top:2px;left:-18px;font-weight:normal!important;}
#wio_group_legend a.gensmall{color:#fff!important;}
.post.post--0.M14_postTopic .M14_show_profil{display:none;}
.post.post--0.M14_postTopic .M14_displayed_MESSAGE{display:none;}
.post.post--0.M14_postTopic .postbody:before{content:"Merci de vous inscrire ou vous connecter";}
/*Inventaire du profil*/
.M14_profil.inventaire{width: 32px;height: 32px;border-radius: 32px;display: block;float:left;margin:1px;}
.M14_profil.inventaire .M14_content img {width: 32px;height: 32px;border-radius:32px}
/*Les messages*/
.profile-field,.profile-field span,.value.M14_content{color:#c66!important;}
font[face="FontAwesome"] span{color:#c66;}
.M14_cit_direct dt{text-align:center;height:25px;line-height:25px;}
.M14_cit_direct dt .genmed{color:#fff!important;}
.M14_cit_direct dd{font-size: 13px;padding: 6px;font-weight: bold;min-height: 45px;background-image: url(https://i.servimg.com/u/f20/20/11/87/27/logoly10.png);background-repeat: no-repeat;background-position: center right;}
.M14_table_message td[class^="postdetails"]{background:#c66;color:#fff!important;}
.M14_table_message td[class^="postdetails"] a[class="togglableMsgLabel"]{color:#fff;}
.M14_table_message td[class^="postdetails"] a[class="togglableMsgLabel"]:after{font-family: FontAwesome;content: "\f071";font-size:24px;color:#fff;position:relative;top:-1px;left:5px;font-weight:normal!important;}
/*LA CHATBOX*/
.M14_Top_ChatBox .row1{background:#fff!important;}
#push-bell:after{font-family: FontAwesome;color:#fff;content:"\f0a2";}
#cb_connect_option .cb_connect_button span{display:none;}
#chatbox_footer:before {content: "N'oubliez pas de consulter les archives, vous pourriez manquer des conversations. Merci."!important;background: url('https://zupimages.net/up/23/37/do46.png') left center no-repeat !important;color:white !important;display: block !important;font-size: 16px !important;padding: 10px !important;padding-left: 35px !important;position:absolute;left:10%;top:-3px;}
#chatbox_option_disco:after,#chatbox_option_disco:before,span[class^="emoti_chatbox"]:after{font-family:FontAwesome;font-size:18px;color:#fff;position:relative;top:0px;left:5px;font-weight:normal!important;}
span.emoti_chatbox_welcome:after{content:"\f0c0";}
span.emoti_chatbox_connect:after{content:"\f08a";}
span.emoti_chatbox_no_connect:after{content:"\f0e5";}
#chatbox_option_disco:after{content:"\f012";left:3px;top:-2px;}
#chatbox_top{border:2px solid #c66;border-radius:6px;background:#c66;}
#chatbox>p{border-color:#c66!important;}
/*#chatbox_header a[href="/chatbox"] strong:after{content:" ,bienvenu sur la ChatBox de Graff''Art";}*/
#chatbox_header .cattitle,.chatbox-options a[href]{color:#fff!important;}
#chatbox_messenger_form{padding:2px 0px;}#chatbox_footer{height:30px!important;}
#chatbox_messenger_form label[for=message],#chatbox_messenger_form input[name="message"],#chatbox_messenger_form input[value="Envoyer"]{position:relative; top:-4px;}
#chatbox_messenger_form input[name="message"]{background:#fff!important;position:relative;height:20px;top:-2px;left:2px;border-color:#fff!important;}
#chatbox_messenger_form input[value="Envoyer"],#chatbox_messenger_form label,#chatbox_messenger_form div{background:none!important;color:#fff!important;border:none!important;box-shadow:none!important;}
#chatbox p span,#chatbox span[style],.cb_connect_name{color:#c66!important;}
.cb_connect_avatar{border:3px solid #c66!important;background-color:#fff!important;}
#chatbox_header,.cb_connect_button span,#chatbox_members,#chatbox_members h4,body.chatbox{background:#c66!important;color:#fff!important;}
#chatbox_members{top:29px!important;left:1px!important;}
#chatbox_members ul li span{color:#fff!important;}
#chatbox.ltr .codebox,  #chatbox.ltr .quote,#chatbox.ltr div[align="center"]{background:#fff;color:#c66;width:80%!important;margin-left:10%;padding:2px;min-height:30px;font-size:14px!important;}
#chatbox.ltr div[align="center"]{line-height:auto;}
#chatbox.ltr u{font-size:18px!important;min-height:30px;width:90%;}
#chatbox.ltr,p[class^="chatbox_row"]{font-size:14px!important;background:#fff!important;color:#c66;}
#chatbox.ltr{padding:0px 0px 0px 5px;}
#chatbox.ltr .genmed{color:#c66!important;}
span[id^="chatbox_option_with"]{color:#fff!important;}
body.chatbox td{border-width:0px!important;background-image:none!important;}
body.chatbox td.catBottom{background-color:transparent!important;}
.M14_row_icon.basic,.M14_icon_message.basic{width:80px;}
.M14_icon_message.basic:before{font-family: FontAwesome;content: "\f0e5";font-size:12px;color:#fff;position:relative;top:-6px;left:5px;font-weight:normal!important;}
.M14_icon_message.basic:after{content:"Sujet";font-size:12px;color:#fff;position:relative;top:-7px;left:25px;font-weight:normal!important;}
.M14_row_icon.basic:before {font-family: FontAwesome;content: "\f0e5";font-size:12px;color:#fff;position:relative;top:-2px;left:5px;font-weight:normal!important;}
.M14_row_icon.basic:after{content:"Sujet";font-size:10px;color:#fff;position:relative;top:-3px;left:25px;font-weight:normal!important;}
table.M14_table_logo{height:100px;color:#fff!important;z-index:999;}
.inner_tabs a.fa_tabactif:before {font-family: FontAwesome;content: "\f046";color: inherit;font-size: 14px!important;font-weight: normal!important;width: 16px;display: inline-block;font-style: normal;}
::selection,select {color: #fff;background-color: #c66;}
select.gensmall{color: #fff!important;}
select{border:none!important;background-image:none!important;}
dl.codebox.hidecode dt{display:inline-block!important;background:#c66;width:100%;height:24px;line-height:24px;}
dl.codebox.hidecode dt:before{content:"Contenu caché:";color:#fff;margin-left:5px;font-weight:bold;}
.spoiler_title{padding:2px;color:#fff!important;}
#fa_mention_suggestions .fam-info{color:#fff!important;}
a[href^="/u"][class^="mentiontag"],.user_post{padding:2px 4px;background:#fff;border:1px solid #c66;border-top:4px solid #c66;text-decoration:none!important;height:28px;line-height:28px;border-radius:5px;}
.rep-button, .rep-button:active,.quickquote{background:#c66;}
div[class^="M14_img"]{background:#c66;display:inline-block;padding:4px;width:24px;height:24px;color:#fff;margin:0px 5px 0px;}
.M14_boutons_message_profil a,.M14_back-to-top,.M14_back-to-bottom{text-decoration:none!important;padding:6px;}
.M14-last-message-link:before,.M14-first-message-link:before,.M14_back-to-top:before,.M14_back-to-bottom:before,div[class^="M14_img"]:before{font-family: FontAwesome;text-decoration:none!important;}
.M14_ProfilPlus{width:100%;display:inline-flex;overflow:hidden;margin-top:10px;}
div[class^="M14_img"]:before{color:#fff;position:relative;top:4px;font-size:15px;}
.M14_back-to-top,.M14_back-to-bottom{background:#c66;display:inline-block;}
.M14_promo_trafic:before{font-family: FontAwesome;text-decoration:none!important;content:"\f0a4";color:#222;}
.M14_imgVisit:before{content: "\f124";color:#fff;}
.M14_imgFriend:before{content: "\f007";color:#fff;}
.M14_imgloadSujet:before{content: "\f0e5";color:#fff;}
.M14_imgloadMessage:before{content: "\f0e6";color:#fff;}
.M14_imgthanks:before{content: "\f164";color:#fff;}
.M14_back-to-top:before{content: "\f0aa";color:#fff;}
.M14_back-to-bottom:before{content: "\f0ab";color:#fff;}
.M14-last-message-link:before{content: "\f078";}
.M14-first-message-link:before{content: "\f077";}
form[action^="/privmsg"]{min-height:400px;}
input[type=submit],div.sceditor-dropdown .button, button.button2, input.button, input.button1,
input.button2, input[type=button], input[type=file], input[type=reset]{background-color:#c66!important;color:#fff!important;border:none!important;}
form[name="register"] td.row1,form[name="register"] td.row2{height:25px;line-height:25px;}
form[name="register"] td.row2 .fa_pseudo_radio {top: -2px!important;left: -2px!important;}

table.forumline[id="parent_editor_simple"]{width:auto!important;}

.fa_pseudo_checkbox{border-radius:100%;border:1px solid #c66;padding:1px;}

#memberlist img[src*="color=primary"] {background:#c66;padding: 4px 6px;}
.sceditor-dropdown:not(.sceditor-font-picker),.sceditor-dropdown:not(.sceditor-font-picker) div,.sceditor-dropdown:not(.sceditor-font-picker) div:hover,.sceditor-header-option.post-content,
.sceditor-fontsize-option{background:#c66!important;}
.sceditor-dropdown.sceditor-font-picker .sceditor-font-option,.sceditor-dropdown.sceditor-font-picker .sceditor-font-option:hover{background:#fff!important;}
.sceditor-font-option font{color:#333!important;}
.sceditor-dropdown .sceditor-header-option,.sceditor-fontsize-option,.sceditor-fontsize-option font, .sceditor-dropdown label,
.sceditor-dropdown.sceditor-twemojifa div,.sceditor-dropdown.sceditor-twemojifa div a[href]{color:#fff!important;}
.sceditor-dropdown{box-shadow:none!important;border-color:#fff!important;border-radius:6px!important;}
#fa_mention_suggestions{box-shadow:none!important;padding:5px 15px 5px;}
#fa_mention_suggestions .fam-focus{border-radius:6px;}
#fa_mention_suggestions .fa_mention_suggestion:before{
    content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 11px;
    position: relative;
    top: 1px;
    left: -14px;
}
#fa_mention_suggestions .fam-focus:after {
    content: "\f058";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 14px;
    position: relative;
    top: -8px;
    left: 10px;
}

/*DEBUT DES TAGS DE MODERATION*/
.M14_tag_value{padding: 3px;width:95%;display:inline-block;}
 /*TAG DE DUEL*/
.duel{font-family:'Akaya Kanadaka', cursive; font-size: 25px;}
    /*TAG DE DUELBIS*/
.duelbis{font-family:'Akaya Kanadaka', cursive; font-size:18px;color:darkred;border:2px dotted #c66;}
/*TAG EN RELATION AVEC LE THEME*/
.M14_tag_value.color-primary,.M14_tag_value.color-primary a[href]{color:white!important;}
 /*TAG EN RELATION AVEC LE LOGO*/
.M14_tag_logo dd.quote{background: url(https://i.servimg.com/u/f20/20/11/87/27/logoly10.png) no-repeat center center !important;border:3px solid #c66;padding:5px;}
/*FIN DES TAGS DE MODERATION*/
/*LES VOTES*/
.fa_vote, .fa_voted, .fa_count {
  text-decoration:none!important;
  font-size:12px;
  font-family:Verdana, Arial, Helvetica, Sans-serif;
  display:inline-block !important;
  width:auto !important;
  float:none !important;
  transition:300ms;
}
 

.fa_voted{cursor:default }
.fa_count{font-weight:bold;top:-2px;left:2px;position:relative;cursor:default;}
.fa_positive{color:#c66}
.fa_reputation img{display:none;}
.fa_vote.fa_plus:before{ content: "\f005";font-family: FontAwesome;color:#c66;font-size:16px;}
.fa_voted.fa_plus:before{ content: "\f00c";font-family: FontAwesome;color:#c66;font-size:16px;}
.fa_negative{color:#A44 }
.fa_votebar, .fa_votebar_inner {background:#C44;height:3px;}
.fa_votebar_inner {background:#c66;transition:300ms;}
.fa_reputation{padding:2px 6px;margin-right:15px;}
.fa_reputation a {float: none;}
.thanked-message{color:#fff!important;}

[Stefano123]

Rebonjour petitefeuille,

Cela n'a rien à voir avec le code que je vous ai donné !

J'ai testé vos codes dans ma feuille de style et le codage qui pose problème, c'est ce code-là !

Code:

/*ajout couleur de fond pour les images de rangs*/
td[width="300"][valign="top"] img[alt="Fondatrice"],td[width="300"][valign="top"] img[alt="Développeur"],td[width="300"][valign="top"] img[alt="Modo'S"],
td[width="300"][valign="top"] img[alt="Membres Actif"],td[width="300"][valign="top"] img[alt="V.I.P"],td[width="300"][valign="top"] img[alt="Premium"],td[width="300"][valign="top"] img[alt="Invité"]{background:#c66;padding:2px;}

J'ai l'impression que le style ne veut pas du td ! Enfin, je dis ça !!

J'ai trouvé d'où cela pouvait provenir au niveau du refus du CSS, mais pour rectifier cela !! c'est une autre paire de manche, j'en suis désolé.
Je crois qu'il faudrait faire une demande d'aide pour rectifier cela !

Avez-vous essayé de vider vos Cookies et Cache de votre navigateur et relancer votre ordi ?

Cordialement,

[petitefeuille]

merci Stefano123 je vais faire une autre annonce ! par contre j'ai mis votre encodage et mes images sont toujours aussi grandes

[Stefano123]

Rebonjour petitefeuille,

Dans ce code td :

Code:

td[width="300"][valign="top"] img[alt="Fondatrice"],td[width="300"][valign="top"] img[alt="Développeur"],td[width="300"][valign="top"] img[alt="Modo'S"],

Dans :  Modo'S : enlever cette apostrophe   '

Code:

[alt="Modo'S"]

Ce qui vous donnera :

Code:

td[width="300"][valign="top"] img[alt="Fondatrice"],td[width="300"][valign="top"] img[alt="Développeur"],td[width="300"][valign="top"] img[alt="ModoS"],

Vous pouvez recoller tout votre code dans le CSS, je vous ai enlever cette apostrophe   '
En esperant que ça vienne de cette aiguille dans cette botte de foin.

Code:

topic-card .cover-image {
  height: 150px;
  position: relative;
  box-shadow: 0 -3px 0 0 rgba(255,255,255,0.1) inset,0 2px 0 0 #ddd;
  background-color: #bbb;
  overflow: hidden;
}



/*BUTTON  ************************************************/
button:focus { outline:0 !important; }



button, .button
{
 
                        transition: all .4s;
    display: inline-block;
    padding: 0px 10px;
    font-size: 10px;
    text-transform: uppercase;
    cursor: pointer;
  background-color: #bcbcbc;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  color: #000;
  border: 1px solid white;
    text-decoration: none;
    line-height: 15px;
  margin: 3px;
  border-radius: 10px;
  z-index: 999;
    }
button:hover,
.button:hover
 {
 background-color: #b8d6f5;
 color: #FFF;
 
  }


/*PANEL  ************************************************/

#panel
 {
    height: 70px;
    width: 60px;
      background: transparent;
    float: left;
    display: none;
      position: fixed;
 
  z-index: 999;
                  }
 


#click:focus {outline:0;}
#click
            {
  position: fixed;
 color: #000;
 background-color: #bcbcbc;
  top: 400px;
 
 left: -10px;
      font-size: 11px;
 z-index: 990;
              }
#click:hover
        {
 
 color: #FFF;
 
          background-color: #FFFFFF;
 
        }



 #monster
 {
  color: #000;
 background-color: #bcbcbc;
 
    position: fixed;
 top: 300px;
 left: 10px;
      font-size: 11px;
 }
#monster:focus {outline:0;}



#monster1:focus {outline:0;}
#monster1
 {
    color: #000;
 background-color: #bcbcbc;
 
  position: fixed;
 top: 320px;
 left: 10px;
      font-size: 11px;
 
 }



#monster2:focus {outline:0;}
#monster2
 {
    color: #000;
 background-color: #bcbcbc;
  position: fixed;
 top: 340px;
 left: 10px;
      font-size: 11px;
 
 }






/*on desactive sur version mobile et tablette*/
@media (min-width:0px) and (max-width:1024px)
{
.genmed.M14_fofo_description.ok,.genmed.M14_fofo_description,#fa_ticker_block,.M14_importe_load,.M14_load_img,#chatbox_top,.M14_cont_chatBox{display:none!important;}
}

/*Surveillance d un sujet*/
.M14_no_surveille:before{font-family: FontAwesome;content:"\f06e";font-size:14px;position:relative;top:-2px;left:-10px;font-weight:normal!important;color:#fff;}
.resizebox{background-color:transparent!important;}
.spoiler_content,.resize_border{border:none!important; }
.enlarge,.fullsize{text-decoration:none!important;text-transform:capitalize;}
select.fa-prefix-select{background-color:#c66!important;color:#fff;min-width:100px;margin-right:5px; padding:3px 3px 3px 5px;}
select{-webkit-appearance: none!important;padding:3px;}
.M14_avatar{width:225px;}
/*les prefixes sur la liste des sujets*/
.M14_class_prefixe{color:#666!important;font-style:italic;}
/* description des forums*/
.M14_fofo_description.ok span{position:relative;top:17px;font-style:italic;color:#333;font-weight:bold;}
.M14_fofo_description.ok select{color:#c66!important;font-weight:bold;}
.hierarchy span.forumlink{position:relative;top:16px;}
/*description des sujets*/
.M14_topic_description{font-style:italic;color:#333;font-weight:bold;text-transform:capitalize;position:relative;left:122px;}

/*Participants sur les messages*/
.poster-count strong a[href]:before{font-family: FontAwesome;content:"\f0c0";font-size:14px;position:relative;top:-2px;left:-10px;font-weight:normal!important;color:#c66;}
/*couleur des options de messages*/
div[id^="attachment"] .thHead tbody .genmed{color:#fff!important;}
/*ajout couleur de fond pour les images de rangs*/
td[width="300"][valign="top"] img[alt="Fondatrice"],td[width="300"][valign="top"] img[alt="Développeur"],td[width="300"][valign="top"] img[alt="ModoS"],
td[width="300"][valign="top"] img[alt="Membres Actif"],td[width="300"][valign="top"] img[alt="V.I.P"],td[width="300"][valign="top"] img[alt="Premium"],td[width="300"][valign="top"] img[alt="Invité"]{background:#c66;padding:2px;}
/*correction couleur de fond award sur profil */
#profile_awards_full .module-title,.forumline.awards_module.module .catLeft{background:#c66!important;border:none!important;}
/*les avatars sur les index et sujets*/
#wio_new_avatar img,.lastpost-avatar img{border-radius:100%;}
#wio_new_avatar,.lastpost-avatar{border-radius:100%;background:#fff;height:38px;width:38px;padding:3px!important;border:1px solid #c66;}
/*ajout de bordures basse sur l index*/
.M14_topic td{border-bottom:1px solid #999!important;}
/*pagination liste des sujets et messages*/
.M14_goto_page{position:relative; left:100px;}
.M14_gotopagetop,.M14_gotopagetop b,.M14_goto_page,td.pagination span.gensmall b{color:#c66!important;}
.M14_gotopagetop img,td.pagination span img,.M14_goto_page img,.M14_td_pagin img{display:none;}
.M14_td_pagin,.M14_td_pagin a{color:#fff!important;}
/* Les signatures*/
.signature_div{text-align:center;}
/*modification des récompenses obtenues*/
.dd_award{background-color:transparent!important;border:none!important;}
div.award{height:32px!important;width:32px!important;border:none!important}
.M14_no_css{height:0px!important;max-height:0px!important;}
.M14_border_recompense{border-bottom:1px solid #c66!important;}
/*Correction widget du fofo a gauche*/
#content-container #left{margin-top:140px;margin-left:-20px;}
/* Correction separation de messages*/
.M14_TD_SEPARATE_MESSAGE.row1{background:#fff!important;}


/*DEBUT DES PASTILLES SUR LES MESSAGES*/
.user_pastille{cursor:pointer;width: 24px;height: 24px;position: absolute;background:#c66;border-radius:24px;text-align: center;margin-top:-3px;margin-left: 5px;}
 
.user_pastille span{color: white;font-size:14px;position: relative;top:4px;text-transform: uppercase;}
/*FIN DES PASTILLES SUR LES MESSAGES*/

td.bodyline{background:#fff;padding:0px 0px 10px 0px;}
td.Background_annonce{background:#fff!important;}
/*PARTICIPATION LISTE DES SUJETS*/
.M14_PARTICIPATE_POST_IMG:before{font-family: FontAwesome;font-size:18px;width:18px;height:18px;position:relative;top:-2px;left:6px;font-weight:normal!important;}
.M14-topic-list:not(.M14_ParticipeTopicList) .M14_PARTICIPATE_POST_IMG:before{content:"\f006";color:#999;}
.M14-topic-list.M14_ParticipeTopicList .M14_PARTICIPATE_POST_IMG:before{content:"\f005";color:#c66;}
/*La boite de smileys*/
#sceditor_smilies,#sce_smilies_body,#sce_smilies_body .row1{background:#fff!important;}
/*on ajoute un verrou si le sujet est verrouille message*/
.M14_verrou_titre_topic:after{font-family: FontAwesome;content: "\f023";font-size:24px;color:#c66;position:relative;top:2px;left:8px;font-weight:normal!important;}
/*En haut a droite pour copier le lien etc du message*/
.M14_copie_link:before{font-family: FontAwesome;content: "\f090";font-size:18px;color:#fff;position:relative;top:2px;left:-18px;font-weight:normal!important;}
#wio_group_legend a.gensmall{color:#fff!important;}
.post.post--0.M14_postTopic .M14_show_profil{display:none;}
.post.post--0.M14_postTopic .M14_displayed_MESSAGE{display:none;}
.post.post--0.M14_postTopic .postbody:before{content:"Merci de vous inscrire ou vous connecter";}
/*Inventaire du profil*/
.M14_profil.inventaire{width: 32px;height: 32px;border-radius: 32px;display: block;float:left;margin:1px;}
.M14_profil.inventaire .M14_content img {width: 32px;height: 32px;border-radius:32px}
/*Les messages*/
.profile-field,.profile-field span,.value.M14_content{color:#c66!important;}
font[face="FontAwesome"] span{color:#c66;}
.M14_cit_direct dt{text-align:center;height:25px;line-height:25px;}
.M14_cit_direct dt .genmed{color:#fff!important;}
.M14_cit_direct dd{font-size: 13px;padding: 6px;font-weight: bold;min-height: 45px;background-image: url(https://i.servimg.com/u/f20/20/11/87/27/logoly10.png);background-repeat: no-repeat;background-position: center right;}
.M14_table_message td[class^="postdetails"]{background:#c66;color:#fff!important;}
.M14_table_message td[class^="postdetails"] a[class="togglableMsgLabel"]{color:#fff;}
.M14_table_message td[class^="postdetails"] a[class="togglableMsgLabel"]:after{font-family: FontAwesome;content: "\f071";font-size:24px;color:#fff;position:relative;top:-1px;left:5px;font-weight:normal!important;}
/*LA CHATBOX*/
.M14_Top_ChatBox .row1{background:#fff!important;}
#push-bell:after{font-family: FontAwesome;color:#fff;content:"\f0a2";}
#cb_connect_option .cb_connect_button span{display:none;}
#chatbox_footer:before {content: "N'oubliez pas de consulter les archives, vous pourriez manquer des conversations. Merci."!important;background: url('https://zupimages.net/up/23/37/do46.png') left center no-repeat !important;color:white !important;display: block !important;font-size: 16px !important;padding: 10px !important;padding-left: 35px !important;position:absolute;left:10%;top:-3px;}
#chatbox_option_disco:after,#chatbox_option_disco:before,span[class^="emoti_chatbox"]:after{font-family:FontAwesome;font-size:18px;color:#fff;position:relative;top:0px;left:5px;font-weight:normal!important;}
span.emoti_chatbox_welcome:after{content:"\f0c0";}
span.emoti_chatbox_connect:after{content:"\f08a";}
span.emoti_chatbox_no_connect:after{content:"\f0e5";}
#chatbox_option_disco:after{content:"\f012";left:3px;top:-2px;}
#chatbox_top{border:2px solid #c66;border-radius:6px;background:#c66;}
#chatbox>p{border-color:#c66!important;}
/*#chatbox_header a[href="/chatbox"] strong:after{content:" ,bienvenu sur la ChatBox de Graff''Art";}*/
#chatbox_header .cattitle,.chatbox-options a[href]{color:#fff!important;}
#chatbox_messenger_form{padding:2px 0px;}#chatbox_footer{height:30px!important;}
#chatbox_messenger_form label[for=message],#chatbox_messenger_form input[name="message"],#chatbox_messenger_form input[value="Envoyer"]{position:relative; top:-4px;}
#chatbox_messenger_form input[name="message"]{background:#fff!important;position:relative;height:20px;top:-2px;left:2px;border-color:#fff!important;}
#chatbox_messenger_form input[value="Envoyer"],#chatbox_messenger_form label,#chatbox_messenger_form div{background:none!important;color:#fff!important;border:none!important;box-shadow:none!important;}
#chatbox p span,#chatbox span[style],.cb_connect_name{color:#c66!important;}
.cb_connect_avatar{border:3px solid #c66!important;background-color:#fff!important;}
#chatbox_header,.cb_connect_button span,#chatbox_members,#chatbox_members h4,body.chatbox{background:#c66!important;color:#fff!important;}
#chatbox_members{top:29px!important;left:1px!important;}
#chatbox_members ul li span{color:#fff!important;}
#chatbox.ltr .codebox,  #chatbox.ltr .quote,#chatbox.ltr div[align="center"]{background:#fff;color:#c66;width:80%!important;margin-left:10%;padding:2px;min-height:30px;font-size:14px!important;}
#chatbox.ltr div[align="center"]{line-height:auto;}
#chatbox.ltr u{font-size:18px!important;min-height:30px;width:90%;}
#chatbox.ltr,p[class^="chatbox_row"]{font-size:14px!important;background:#fff!important;color:#c66;}
#chatbox.ltr{padding:0px 0px 0px 5px;}
#chatbox.ltr .genmed{color:#c66!important;}
span[id^="chatbox_option_with"]{color:#fff!important;}
body.chatbox td{border-width:0px!important;background-image:none!important;}
body.chatbox td.catBottom{background-color:transparent!important;}
.M14_row_icon.basic,.M14_icon_message.basic{width:80px;}
.M14_icon_message.basic:before{font-family: FontAwesome;content: "\f0e5";font-size:12px;color:#fff;position:relative;top:-6px;left:5px;font-weight:normal!important;}
.M14_icon_message.basic:after{content:"Sujet";font-size:12px;color:#fff;position:relative;top:-7px;left:25px;font-weight:normal!important;}
.M14_row_icon.basic:before {font-family: FontAwesome;content: "\f0e5";font-size:12px;color:#fff;position:relative;top:-2px;left:5px;font-weight:normal!important;}
.M14_row_icon.basic:after{content:"Sujet";font-size:10px;color:#fff;position:relative;top:-3px;left:25px;font-weight:normal!important;}
table.M14_table_logo{height:100px;color:#fff!important;z-index:999;}
.inner_tabs a.fa_tabactif:before {font-family: FontAwesome;content: "\f046";color: inherit;font-size: 14px!important;font-weight: normal!important;width: 16px;display: inline-block;font-style: normal;}
::selection,select {color: #fff;background-color: #c66;}
select.gensmall{color: #fff!important;}
select{border:none!important;background-image:none!important;}
dl.codebox.hidecode dt{display:inline-block!important;background:#c66;width:100%;height:24px;line-height:24px;}
dl.codebox.hidecode dt:before{content:"Contenu caché:";color:#fff;margin-left:5px;font-weight:bold;}
.spoiler_title{padding:2px;color:#fff!important;}
#fa_mention_suggestions .fam-info{color:#fff!important;}
a[href^="/u"][class^="mentiontag"],.user_post{padding:2px 4px;background:#fff;border:1px solid #c66;border-top:4px solid #c66;text-decoration:none!important;height:28px;line-height:28px;border-radius:5px;}
.rep-button, .rep-button:active,.quickquote{background:#c66;}
div[class^="M14_img"]{background:#c66;display:inline-block;padding:4px;width:24px;height:24px;color:#fff;margin:0px 5px 0px;}
.M14_boutons_message_profil a,.M14_back-to-top,.M14_back-to-bottom{text-decoration:none!important;padding:6px;}
.M14-last-message-link:before,.M14-first-message-link:before,.M14_back-to-top:before,.M14_back-to-bottom:before,div[class^="M14_img"]:before{font-family: FontAwesome;text-decoration:none!important;}
.M14_ProfilPlus{width:100%;display:inline-flex;overflow:hidden;margin-top:10px;}
div[class^="M14_img"]:before{color:#fff;position:relative;top:4px;font-size:15px;}
.M14_back-to-top,.M14_back-to-bottom{background:#c66;display:inline-block;}
.M14_promo_trafic:before{font-family: FontAwesome;text-decoration:none!important;content:"\f0a4";color:#222;}
.M14_imgVisit:before{content: "\f124";color:#fff;}
.M14_imgFriend:before{content: "\f007";color:#fff;}
.M14_imgloadSujet:before{content: "\f0e5";color:#fff;}
.M14_imgloadMessage:before{content: "\f0e6";color:#fff;}
.M14_imgthanks:before{content: "\f164";color:#fff;}
.M14_back-to-top:before{content: "\f0aa";color:#fff;}
.M14_back-to-bottom:before{content: "\f0ab";color:#fff;}
.M14-last-message-link:before{content: "\f078";}
.M14-first-message-link:before{content: "\f077";}
form[action^="/privmsg"]{min-height:400px;}
input[type=submit],div.sceditor-dropdown .button, button.button2, input.button, input.button1,
input.button2, input[type=button], input[type=file], input[type=reset]{background-color:#c66!important;color:#fff!important;border:none!important;}
form[name="register"] td.row1,form[name="register"] td.row2{height:25px;line-height:25px;}
form[name="register"] td.row2 .fa_pseudo_radio {top: -2px!important;left: -2px!important;}

table.forumline[id="parent_editor_simple"]{width:auto!important;}

.fa_pseudo_checkbox{border-radius:100%;border:1px solid #c66;padding:1px;}

#memberlist img[src*="color=primary"] {background:#c66;padding: 4px 6px;}
.sceditor-dropdown:not(.sceditor-font-picker),.sceditor-dropdown:not(.sceditor-font-picker) div,.sceditor-dropdown:not(.sceditor-font-picker) div:hover,.sceditor-header-option.post-content,
.sceditor-fontsize-option{background:#c66!important;}
.sceditor-dropdown.sceditor-font-picker .sceditor-font-option,.sceditor-dropdown.sceditor-font-picker .sceditor-font-option:hover{background:#fff!important;}
.sceditor-font-option font{color:#333!important;}
.sceditor-dropdown .sceditor-header-option,.sceditor-fontsize-option,.sceditor-fontsize-option font, .sceditor-dropdown label,
.sceditor-dropdown.sceditor-twemojifa div,.sceditor-dropdown.sceditor-twemojifa div a[href]{color:#fff!important;}
.sceditor-dropdown{box-shadow:none!important;border-color:#fff!important;border-radius:6px!important;}
#fa_mention_suggestions{box-shadow:none!important;padding:5px 15px 5px;}
#fa_mention_suggestions .fam-focus{border-radius:6px;}
#fa_mention_suggestions .fa_mention_suggestion:before{
    content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 11px;
    position: relative;
    top: 1px;
    left: -14px;
}
#fa_mention_suggestions .fam-focus:after {
    content: "\f058";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 14px;
    position: relative;
    top: -8px;
    left: 10px;
}

/*DEBUT DES TAGS DE MODERATION*/
.M14_tag_value{padding: 3px;width:95%;display:inline-block;}
 /*TAG DE DUEL*/
.duel{font-family:'Akaya Kanadaka', cursive; font-size: 25px;}
    /*TAG DE DUELBIS*/
.duelbis{font-family:'Akaya Kanadaka', cursive; font-size:18px;color:darkred;border:2px dotted #c66;}
/*TAG EN RELATION AVEC LE THEME*/
.M14_tag_value.color-primary,.M14_tag_value.color-primary a[href]{color:white!important;}
 /*TAG EN RELATION AVEC LE LOGO*/
.M14_tag_logo dd.quote{background: url(https://i.servimg.com/u/f20/20/11/87/27/logoly10.png) no-repeat center center !important;border:3px solid #c66;padding:5px;}
/*FIN DES TAGS DE MODERATION*/
/*LES VOTES*/
.fa_vote, .fa_voted, .fa_count {
  text-decoration:none!important;
  font-size:12px;
  font-family:Verdana, Arial, Helvetica, Sans-serif;
  display:inline-block !important;
  width:auto !important;
  float:none !important;
  transition:300ms;
}
 

.fa_voted{cursor:default }
.fa_count{font-weight:bold;top:-2px;left:2px;position:relative;cursor:default;}
.fa_positive{color:#c66}
.fa_reputation img{display:none;}
.fa_vote.fa_plus:before{ content: "\f005";font-family: FontAwesome;color:#c66;font-size:16px;}
.fa_voted.fa_plus:before{ content: "\f00c";font-family: FontAwesome;color:#c66;font-size:16px;}
.fa_negative{color:#A44 }
.fa_votebar, .fa_votebar_inner {background:#C44;height:3px;}
.fa_votebar_inner {background:#c66;transition:300ms;}
.fa_reputation{padding:2px 6px;margin-right:15px;}
.fa_reputation a {float: none;}
.thanked-message{color:#fff!important;}

Cordialement,

[petitefeuille]

Bonjour Stefano123,

pour le CSS, c'est parfait, plus de bug ! ensuite, pour l'encodage des images, elles sont toujours tronquées… je suis désolée !

à bientôt de vos nouvelles

[Stefano123]

Bonjour petitefeuille,

Dans le code que je vous ai donné, j'avais oublié d'ajouter le point . avant le topic

Code:

.topic-card .cover-image {
  height: 150px;
  position: relative;
  box-shadow: 0 -3px 0 0 rgba(255,255,255,0.1) inset,0 2px 0 0 #ddd;
  background-color: #bbb;
  overflow: hidden;
}

Ce code ne sert pas à modifier l'image, mais seulement la hauteur du cadre intérieur, pour que votre image soit plus visible.
Pour régler la dimension de vos images, je pense que c'est à vous de la redimensionner avant de la rajouter dans l'URL de l'image Facebook : GRID
Enfin, je dis ça !!

Il y a peut-être quelqu'un qui pourrait vous donner une solution, un code ou vous expliquer comment faire, car je ne sais pas si cela est possible de redimensionner l'image par le biais de la template topics_grid_box ou du CSS !

Cordialement,

[Pinguino]

En passant, un grand merci @Stefano123 pour vos différents codes de personnalisation

[petitefeuille]

re Stefano123 ,

oui, je me joins à Pinguino pour vous remercier pour votre travail

suite au denier encodage, alors voilà le rendu, je n'ai pas de changement, voyez-vous même :

[petitefeuille]

Édit : en fait, j'ai mis comme vous l'avez cité en amont et en effet j'ai l'image qui s'affiche en mettant 350 px ! donc le sujet et résolu et vraiment merci à vous

je vous souhaite un bel après midi