Modifications de deux templates

Mar 30 Mai - 18:28
Bonjour à vous, Skaemp :) Voilà, j'aurais deux petites demandes à vous faire. Premièrement, cela concerne ce codage de la liste des sujets. Serait-ce possible de réduire l'image de gauche à 50x50, plus la hauteur des deux autres blocs à sa droite, ou est-ce que ce serait trop petit pour le contenu de ces boites ? Ainsi que de réduire la largeur totale à 800px.

Ma deuxième demande concerne ce code-ci. Serait-ce possible de déplacer le bloc tout à droite à l'extrême gauche (donc le bloc des messages, sujets et top-sites), de réduire la largeur totale à 800px et de mettre les groupes tout en haut avec rien dessous ? (en bloc, donc, mais invisible le bloc). Je ne sais pas si je suis claire dans cette demande, mes excuses :x


Voilà donc :) En vous remerciant d'avance ♥
Revenir en haut Aller en bas
Mer 31 Mai - 0:30
Bonjour,

Remplacez le code du QEEL par :

Code:
<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><!-- GROUPES --><div class="GQEEL">{GROUP_LEGEND}</div><div id="QEEL"><div class="QEEL"><div class="boxQEEL" style="margin-left:10px;"><!-- TOTAL MESSAGES --><div class="tlPQEEL"><p><span id="tPOSTS"><b>{TOTAL_POSTS}</b></span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," ") .replace(/messages/," ");</script><br/>messages</p></div><!-- TOTAL MEMBRES --><div class="tlMQEEL"><p><span id="tUSERS"><b>{TOTAL_USERS}</b></span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");</script><br/>membres</p></div><!-- TOP-SITES --><div class="voteQEEL"><!-- I --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><!-- II --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><!-- III --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><!-- IV --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a></div></div><div class="boxQEEL"><!-- MEMBRES CONNECTES --><div class="onlineQEEL"><div id="onLINE"><span id="TLUS">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"");</script><br/><br/>{LOGGED_IN_USERS_LIST}</div><script type="text/javascript">document.getElementById('onLINE').innerHTML=document.getElementById('onLINE').innerHTML.replace(/Utilisateurs enregistrés :/," ")</script></div><!-- DERNIER UTILISATEUR ENREGISTRE --><div class="lstQEEL"><b>Bienvenue</b><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script></div></div><!-- 24H --><div class="dayQEEL"><div><table>{L_CONNECTED_MEMBERS}</table></div></div></div></div>
</td></tr></table>
<!-- END disable_viewonline -->

Partie CSS :
Code:
/* BLOC GROUPES QEEL */
.GQEEL {
margin:5px auto; width:800px;
color:rgba(0,0,0,0); text-align:center; text-transform:uppercase;
}
/* LIEN GROUPE QEEL */
.GQEEL a{
font-size:12px; /* MODIFIABLE */
}
/* CADRE QEEL */
#QEEL {
width:798px; padding:12px 0;
background:#DEDEDE; border:1px solid lightgrey; /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:770px; padding:10px 0 6px; text-align:center;
background:white; border:1px solid lightgrey; /* MODIFIABLE */
}
/* BLOC POSITIONNEMENT */
.boxQEEL {
display:inline-block; vertical-align:top;
}
/* CADRE TOTAL MESSAGES QEEL */
.tlPQEEL {
margin-right:10px; margin-bottom:6px;
width:113px; height:60px; padding:5px;
text-align:center; text-transform:uppercase; font-size:16px;
background:#DEDEDE; border:1px solid lightgrey; /* MODIFIABLE */
}
/* TOTAL MESSAGES QEEL */
.tlPQEEL p{
margin:0; height:48px; padding-top:10px;
background:white; border:1px solid lightgrey; color:black; /* MODIFIABLE */
}
/* CADRE TOTAL MEMBRES QEEL */
.tlMQEEL {
width:113px; height:60px; padding:5px;
text-align:center; text-transform:uppercase; font-size:16px;
background:#DEDEDE; border:1px solid lightgrey; /* MODIFIABLE */
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL p{
margin:0; height:48px; padding-top:10px;
background:white; border:1px solid lightgrey; color:black; /* MODIFIABLE */
}
/* IMAGES TOP-SITES */
.voteQEEL {
margin-top:10px; width:125px;
}
.voteQEEL a:nth-child(2) {
margin-left:5px;
}
.voteQEEL a:nth-child(3) {
margin-top:5px;
}
.voteQEEL a:nth-child(4) {
margin-top:5px; margin-left:5px;
}
/* CADRE MEMBRES CONNECTES */
.onlineQEEL {
width:308px; height:185px;
background:#DEDEDE; border:1px solid lightgrey; color:black; /* MODIFIABLE */
}
/* MEMBRES CONNECTES */
.onlineQEEL div{
margin:10px auto 0; width:278px; height:153px; padding:5px; overflow:auto;
font-size:12px; text-align:justify; text-transform:uppercase;
background:white; border:1px solid lightgrey; /* MODIFIABLE */
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
margin-top:12px;
width:310px; height:65px; padding-top:20px;
background:#64B3AC; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-size:14px;
}
/* BIENVENUE DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL b{
display:block;
font-size:24px; color:white; /* MODIFIABLE */
}
/* CADRE 24H QEEL */
.dayQEEL {
display:inline-block; vertical-align:top; margin:0 10px; width:290px; height:282px;
background:#DEDEDE; border:1px solid lightgrey; /* MODIFIABLE */
}
/* 24H QEEL */
.dayQEEL div{
margin:10px auto 0; width:260px; height:250px; padding:5px; overflow:auto;
font-size:12px; text-align:justify; text-transform:uppercase;
background:white; border:1px solid lightgrey; /* MODIFIABLE */
}
.dayQEEL .row1 {
background:none; padding:0 !important;
}
.dayQEEL .gensmall {
font-size:12px; color:black; /* MODIFIABLE */
}

Remplacez la partie CSS concernant la liste des sujets par :
Code:
/* PRESENTATION LISTE SUJETS */
/* BLOC LISTE SUJETS */
#LSBJ {
width:800px; margin:auto;
background:none; /* MODIFIABLE */
}
/* BLOC SUJET */
.SBJ {
width:800px; margin:10px auto 0; text-align:center;
}
/* OUTIL MODERATION */
.modSBJ {
position:absolute; z-index:3; margin-left:-15px; margin-top:55px;
}
/* BLOC ICÔNES / VUES & REPONSES LISTE SUJETS */
#ivrSBJ {
display:inline-block; vertical-align:top;
width:50px; height:50px;
}
.ivrSBJ {
position:relative;
width:50px; height:50px; overflow:hidden;
}
/* ICÔNES LISTE SUJETS */
.imgSBJ {
width:50px; height:50px;
}
/* VUES LISTE SUJETS */
.vuesSBJ {
position:absolute; z-index:2; margin-top:-100px;
width:50px; height:20px; padding-top:5px;
background:rgba(250,250,250,0.8); color:black; /* MODIFIABLE */
font-size:11px; text-align:center;
opacity:0; transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
.ivrSBJ:hover .vuesSBJ {
margin-top:-50px; opacity:1;
}
/* REPONSES LISTE SUJETS */
.repSBJ {
position:absolute; z-index:2; margin-top:0px;
width:50px; height:20px; padding-top:5px;
background:rgba(250,250,250,0.6); color:black; /* MODIFIABLE */
font-size:11px; text-align:center;
opacity:0; transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
.ivrSBJ:hover .repSBJ {
margin-top:-25px; opacity:1;
}
/* BLOC TITRE / DESCRIPTION / AUTEUR LISTE SUJETS */
.tleSBJ {
display:inline-block; vertical-align:top;
width:450px; height:45px; padding:5px 5px 0; overflow:hidden;
font-family:Arial; background:black; color:#C1BFB7; /* MODIFIABLE */
text-align:center; text-transform:uppercase; font-size:14px;
}
/* TITRE LISTE SUJETS */
.tleSBJ a {
color:#C1BFB7 !important; /* MODIFIABLE */
}
/* DESCRIPTION LISTE SUJETS */
.descSBJ {
font-size:9px; font-style:italic;
}
/* AUTEUR TITRE LISTE SUJETS */
.nameSBJ {
font-size:11px;
}
/* DERNIER MESSAGE LISTE SUJETS */
.lmsgSBJ {
display:inline-block; vertical-align:top;
width:275px; height:45px; padding:5px 0 0; overflow:hidden;
font-family:Arial; background:#242424; color:#C1BFB7; /* MODIFIABLE */
text-align:center; font-size:10px; text-transform:uppercase;
}
/* AUTEUR DERNIER MESSAGE LISTE SUJETS */
.lmsgSBJ .gensmall {
font-size:12px;
}
/* LISTE DES PAGES */
.gotoSBJ {
width:790px; text-align:right; font-size:9px;
}
Revenir en haut Aller en bas
Mer 31 Mai - 6:01
Bonsoir Skaemp :) C'est parfait pour le deuxième code, je vous remercie ♥ Concernant le premier, je ne rencontre qu'un léger soucis : il n'y a plus d'espace entre les images des top-sites. Est-ce normal ? Et avez-vous besoin de mon css complet ?
Revenir en haut Aller en bas
Mer 31 Mai - 22:25
Remplacez :
Code:
/* IMAGES TOP-SITES */
.voteQEEL {
margin-top:10px; width:125px;
}
.voteQEEL a:nth-child(2) {
margin-left:5px;
}
.voteQEEL a:nth-child(3) {
margin-top:5px;
}
.voteQEEL a:nth-child(4) {
margin-top:5px; margin-left:5px;
}

Par :
Code:
/* IMAGES TOP-SITES */
.voteQEEL {
margin-top:10px; width:125px; line-height:4px;
}

Remplacez :
Code:
<!-- TOP-SITES --><div class="voteQEEL"><!-- I --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><!-- II --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><!-- III --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><!-- IV --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a></div></div><div class="boxQEEL">

Par :
Code:
<!-- TOP-SITES --><div class="voteQEEL"><!-- I --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><!-- II --><a style="margin-left:5px;" href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><br/><br/><!-- III --><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><!-- IV --><a style="margin-left:5px;" href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a></div></div><div class="boxQEEL">
Revenir en haut Aller en bas
Ven 2 Juin - 2:09
Superbe, maintenant tout fonctionne à merveille. Infiniment merci Skaemp et je suis désolé de ce léger retard de réponse, je n'étais pas disponible avant :s

Sinon, pouvez-vous me dire d'où venait le problème ? Je vous avoue être assez curieuse :o (enfin, si cela ne vous déranges pas de me l'expliquer, sinon zappez ma question :) )
Revenir en haut Aller en bas
Sam 3 Juin - 4:45
L'application du CSS diffère selon les navigateurs ; un visuel optimal sur Firefox ne le demeure nécessairement sur Chrome.
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum