Styliser mon QEEL

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

Résolu Styliser mon QEEL

Message par Westaly le Mar 22 Mai 2012 - 14:24

Bonjour à tous ceux qui liront ce message! =D
C'est encore moi ^^ (Mais que voulez-vous? Quand on construit un forum, on construit un forum!)

Alors je cherche à stylyser mon QEEL pour qu'il ressmble au final à ceci:



Mais avec des coins arrondis

Mon template Index_Body a été légèrement modifié pour que les phrases soient personnalisées et pour avoir une image au-dessus. Voici la partie disable_viewonline:



Spoiler:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td colspan="2"><img src="http://urpix.fr/files/2wdf57q7ydb31osfsjvl.bmp" /></td>
</tr> <tr>


<tr>
<td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
<td class="row1" width="100%"><span class="gensmall"> <span id="bert">{TOTAL_POSTS}
</span>
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"La communauté sorcière a rédigé un total de").replace(/messages/,"manuscrits");
</script> <br />
<span id="matt">{TOTAL_USERS}
</span>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Il y a").replace(/membres enregistrés/,"sorciers inscrits dans les registres du Ministère");
</script> <br />
<span id="yosh">{NEWEST_USER}
</span>
<script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier ayant reçu sa lettre d'admission est");
</script></span></td>
</tr>
<tr>
<td class="row1"><span class="gensmall"> <span id="celine">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript"> document.getElementById('celine').innerHTML=document.getElementById('celine').innerHTML.replace(/Il y a en tout/,"Il y a en tout").replace(/utilisateur(s?) en ligne/,"sorciers réveillés").replace(/::/,"::").replace(/Enregistré(s?)/,"membre$1").replace(/Invisible(s?) et/,"caché$1 et").replace(/Invité(s?)/,"visiteur$1");
</script><br />
<span id="connectes">{RECORD_USERS}
</span>
<br />
<br />
<span id="alpha">{LOGGED_IN_USER_LIST}
</span>
<script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés/,"Les sorciers éveillés");</script></span>

<table id="kaboum">{L_CONNECTED_MEMBERS}</table>
<script type="text/javascript">
jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 72 dernières heures : ','Les personnes qui sont venues lors des 72 dernières heures :'));
</script>

<tr>
<td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>


</td></tr>
<!-- END disable_viewonline -->

MON QEEL ressemble présentement à ceci:



Merci pour votre aide =D


Dernière édition par Westaly le Mar 22 Mai 2012 - 18:34, édité 1 fois

Westaly
*

Messages : 47
Inscrit(e) le : 28/03/2012

http://obscuro-momentum.forumactif.com
Westaly a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Styliser mon QEEL

Message par Invité le Mar 22 Mai 2012 - 16:19

Bonjour,

Le QEEL d'origine est une tableau ... celui que vous voulez est un tableau différent mais un tableau quand même Razz. Donc en reprenant les scripts et en les plaçant dans un tableau, vous obtiendrez le résultat souhaité ... enfin la bonne armature, faudra mettre un peu d'habillage CSS après Wink.

Code:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="3" cellpadding="3">

<tr>
<td colspan="3"><img src="http://urpix.fr/files/2wdf57q7ydb31osfsjvl.bmp" /></td>
</tr>

<tr>
<td style="width:30%"> <span class="gensmall"> <span id="bert">{TOTAL_POSTS}
</span>
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"La communauté sorcière a rédigé un total de").replace(/messages/,"manuscrits");
</script> <span id="matt">{TOTAL_USERS}
</span>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Il y a").replace(/membres enregistrés/,"sorciers inscrits dans les registres du Ministère");
</script> <span id="yosh">{NEWEST_USER}
</span>
<script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier ayant reçu sa lettre d'admission est");
</script> <span id="celine">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript"> document.getElementById('celine').innerHTML=document.getElementById('celine').innerHTML.replace(/Il y a en tout/,"Il y a en tout").replace(/utilisateur(s?) en ligne/,"sorciers réveillés").replace(/::/,"::").replace(/Enregistré(s?)/,"membre$1").replace(/Invisible(s?) et/,"caché$1 et").replace(/Invité(s?)/,"visiteur$1");
</script> <span id="connectes">{RECORD_USERS}
</span></span>
</td>

<td style="width:30%">
<span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span><br />
<table><span class="gensmall"><span id="alpha">{LOGGED_IN_USER_LIST}
  </span></span></table>
<script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés/,"Les sorciers éveillés");</script>
</td>


<td style="width:30%"><table id="kaboum">{L_CONNECTED_MEMBERS}</table>
<script type="text/javascript">
jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 72 dernières heures : ','Les personnes qui sont venues lors des 72 dernières heures :'));
</script>
</td>
</tr>
<!-- END disable_viewonline -->
</table>
Bien sincèrement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Styliser mon QEEL

Message par Westaly le Mar 22 Mai 2012 - 16:45

Merci Beaucoup Azami! Décidemment, vous m'aidez perpétuellement! =D

Pourtant... je me sens très nulle parce que je ne sais pas quel format correspond à la modification du QEEL dans ma fiche CSS Rolling Eyes Pourriez-vous m'aider à ce sujet?

Westaly
*

Messages : 47
Inscrit(e) le : 28/03/2012

http://obscuro-momentum.forumactif.com
Westaly a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Styliser mon QEEL

Message par Invité le Mar 22 Mai 2012 - 17:30

Very Happy Le CSS ça ne s'invente pas ... enfin si en partie, pour les premiers pas vous avez ce tutoriel:
=> http://forum.forumactif.com/t301866-le-css-comment-ca-marche
et mon anti-sèche préférée:
=> http://www.siteduzero.com/tutoriel-3-13639-memento-des-proprietes-css.html#ss_part_1

Et concernant votre qeel, on doit pouvoir faire quelque chose comme ça:
inventer 2 class, une pour lescellules et une pour les div qui sont dedans.
Code:
.caseqeel{
  border: 1px solid #000;
  width: 30%;
  padding: 5px;
  border-radius: 11px;}

.cadreqeel{
  border: 1px solid #f00;
  padding: 2px;
  margin: auto;
  width: 95%;
  height: 150px;
  overflow-y: auto;
  text-align: justify;
  border-radius: 8px;}
C'est à personnaliser Wink.
Du coup le template donnera ceci:
Code:
<!-- BEGIN disable_viewonline -->
<table  class="forumline" width="100%" border="0" cellspacing="3" cellpadding="3">
 
<tr>
<td colspan="3"><img src="http://urpix.fr/files/2wdf57q7ydb31osfsjvl.bmp" /></td>
</tr>
 
<tr>
<td class="caseqeel"> <div class="cadreqeel"><span class="gensmall"> <span id="bert">{TOTAL_POSTS}
</span>
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"La communauté sorcière a rédigé un total de").replace(/messages/,"manuscrits");
</script> <span id="matt">{TOTAL_USERS}
</span>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Il y a").replace(/membres enregistrés/,"sorciers inscrits dans les registres du Ministère");
</script> <span id="yosh">{NEWEST_USER}
</span>
<script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier ayant reçu sa lettre d'admission est");
</script> <span id="celine">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript"> document.getElementById('celine').innerHTML=document.getElementById('celine').innerHTML.replace(/Il y a en tout/,"Il y a en tout").replace(/utilisateur(s?) en ligne/,"sorciers réveillés").replace(/::/,"::").replace(/Enregistré(s?)/,"membre$1").replace(/Invisible(s?) et/,"caché$1 et").replace(/Invité(s?)/,"visiteur$1");
</script> <span id="connectes">{RECORD_USERS}
  </span></span></div>
</td>
 
<td  class="caseqeel">
<span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span><br />
<div class="cadreqeel"><table><span class="gensmall"><span id="alpha">{LOGGED_IN_USER_LIST}
  </span></span></table>
<script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés/,"Les sorciers éveillés");</script>
  </div></td>
 
 
<td  class="caseqeel"><div class="cadreqeel"><table id="kaboum">{L_CONNECTED_MEMBERS}</table>
<script type="text/javascript">
jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 72 dernières heures : ','Les personnes qui sont venues lors des 72 dernières heures :'));
  </script></div>
</td>
</tr>
<!-- END disable_viewonline -->
</table>
Bien sincèrement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Styliser mon QEEL

Message par Westaly le Mar 22 Mai 2012 - 18:33

Ça fonctionne! Merci infiniment!

Westaly
*

Messages : 47
Inscrit(e) le : 28/03/2012

http://obscuro-momentum.forumactif.com
Westaly a été remercié(e) par l'auteur de ce sujet.

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


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