Accueil
Créer un forumQEEL - création
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
QEEL - création
par Valendium Ven 24 Fév 2012 - 13:44
Bonjour à tous,
Voila, depuis deux semaines maintenant, j'essaye de créer un QEEL original, jamais vu, bref un truc bien. Mais je n'arrive à rien - et c'est peu dire! -
Je vous supplie à genoux de m'aider... T.T
- Mon forum : http://p-k-m-w.forums-actifs.net/
- la version de votre forum : PHBB2
- une capture d'écran du problème : Vu que j'ai tout effacé, il n'y a plus rien
- votre statut sur le forum : Fondateur
- si vous avez modifié des templates : index_body, index_box, overall_header et viewtopic_body;
- si vous avez du CSS personnalisé : Oui j'en ai..
- votre ou vos navigateur(s) : Mozzila firefox
J'aimerais obtenir quelque chose ainsi :
Ensuite, à la place des groupes (dresseurs, coordinateurs, etc.) j'aimerais mettre des pokéballs qui tournent quand on place le curseur dessus, avec une infobulle donnant les explications. Mais n'ayant pas du tout de programme pour mettre des images animées, c'est compliqué..
Niveau image :
1) Couronne : https://2img.net/r/hpimg15/pics/677885couronne.png
2) Fond : https://2img.net/r/hpimg15/pics/650806Sanstitre1copie.png
3) Titre + couronne : https://2img.net/r/hpimg15/pics/938600quiestenlignemodifi22.png
Merci d'avance pour votre aide, j'essaye encore de mon côté, mais j'ai peu de chance d'y arriver.
A bientôt!
J'ai trouvé une image sur votre site expliquant mieux ce que j'aimerais pour les pokéballs... C'est de AlyssonB.
Voila, depuis deux semaines maintenant, j'essaye de créer un QEEL original, jamais vu, bref un truc bien. Mais je n'arrive à rien - et c'est peu dire! -
Je vous supplie à genoux de m'aider... T.T
- Mon forum : http://p-k-m-w.forums-actifs.net/
- la version de votre forum : PHBB2
- une capture d'écran du problème : Vu que j'ai tout effacé, il n'y a plus rien
- votre statut sur le forum : Fondateur
- si vous avez modifié des templates : index_body, index_box, overall_header et viewtopic_body;
- si vous avez du CSS personnalisé : Oui j'en ai..
- votre ou vos navigateur(s) : Mozzila firefox
J'aimerais obtenir quelque chose ainsi :
- Spoiler:
Ensuite, à la place des groupes (dresseurs, coordinateurs, etc.) j'aimerais mettre des pokéballs qui tournent quand on place le curseur dessus, avec une infobulle donnant les explications. Mais n'ayant pas du tout de programme pour mettre des images animées, c'est compliqué..
Niveau image :
1) Couronne : https://2img.net/r/hpimg15/pics/677885couronne.png
2) Fond : https://2img.net/r/hpimg15/pics/650806Sanstitre1copie.png
3) Titre + couronne : https://2img.net/r/hpimg15/pics/938600quiestenlignemodifi22.png
Merci d'avance pour votre aide, j'essaye encore de mon côté, mais j'ai peu de chance d'y arriver.
A bientôt!
J'ai trouvé une image sur votre site expliquant mieux ce que j'aimerais pour les pokéballs... C'est de AlyssonB.
- Spoiler:
- CSS:
- Code:
.plop {text-decoration: blink;}
.bodyline{ -moz-border-radius: 6px;}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
margin-bottom: -1px;
list-style: none;
}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #fff;
cursor: pointer;
margin-bottom: -1px;
list-style: none;}
.clear{
clear: both;
}
.mon_contenu{
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
line-height: normal;
font-size: 11px;}
#mes_contenus, #mes_onglets{
width: 400px;
margin: auto;}
.transparence {
background-color: transparent;
border: none;
opacity: 0.5;
}
.transparence:hover{
background-color: transparent;
border: none;
opacity: 2;
}
#fondinfos{
border :1px dotted #white;
width: 205px;
background-color: #e1E1E1;
}
#fondprofil{
border :0px dotted #000;
width: 205px;
background-color: #e1E1E1;
}
.postbody {
}
.groupes{
Font-transform:rotate(-2deg);
Font-family: Trebuchet MS;
opacity: 0,8;
Text-shadow : 2px 2px 2px #96928D;
font-size:20px;
text-align:justify;
text-align:center;
font-weight: bold;
}
.fondgroupes {
background-image: url('http://img15.hostingpics.net/pics/314567ggfyjfk.png');
background-repeat: no-repeat;
height:376px;
width: 332px;
}
/*Barre de Navigation*/
.navipose td {
position: fixed;
top: 0%;
right:0%;
height: 20px;
width: 100%;
background-image:url(http://img15.hostingpics.net/pics/353854copiedepic4fh6copie2c36ff0.png);
-moz-box-shadow:1px 1px 1px 1px #D6D0C9;
-moz-radius-bottomleft: 100px;
-moz-border-radius-bottomleft: 100px;
-moz-border-radius-bottomright: 100px;
text-align: center;
font-size: 18px;
}
a.mainmenu {
background-img:url:('');
padding-right: 10px;
font-weight: bold;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
text-transform: uppercase;
color : #494E4F;
font-size: 10px;
}
a.mainmenu:hover{
background-color: #AD9A85;
padding-right: 10px;
font-weight: bold;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
text-transform: uppercase;
color : #ffffff;
font-size: 10px;
}
/*tour de forum*/
.tourcat {
background-color : #F5F5FF;
border : 1px dotted #FFB433;
-moz-border-radius: 20px ;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:20px;
padding : 3px;
}
.name {
font-size: 12px;
letter-spacing: 10px;
font-family: TrebuchetMS;
text-align: center;
Text-transform:rotate(-2deg);
}
.fiche5{
background-position: center;
border-radius: 50px 50px 50px 50px;
width:420px;
background-color:#e8e8e8;
border-bottom: 2px dotted #FFB433;
border-top: 2px dotted #A7D957;
padding : 20px;
}
.fiche0 {
background-position: center;
border-radius: 50px 50px 50px 50px;
width:410px; height:150px;
background-color:#e8e8e8;
border-bottom: 2px dotted #FFB433;
border-top: 2px dotted #A7D957;
padding : 20px;
}
.fiche4 {
background-position: center;
border-radius: 50px 50px 50px 50px;
width:420px;
height:220px;
overflow:auto;
background-color:#e8e8e8;
border-bottom: 2px dotted #FFB433;
border-top: 2px dotted #A7D957;
padding : 20px;
}
.fiche3 {
background-position: center;
border-radius: 50px 50px 50px 50px;
width:220px; height:230px; overflow: auto;
background-color:white;
border-bottom: 2px dotted #FFB433;
border-top: 2px dotted #A7D957;
text-align: center;
}
.fiche2 {
background-position: center;
border-radius: 50px 50px 50px 50px;
width:220px; height:230px; overflow:auto;
background-color:white;
border-bottom: 2px dotted #FFB433;
border-top: 2px dotted #A7D957;
}
.fiche1 {
background-position: center;
width:420px;
border-radius: 0px 0px 50px 50px;
background-color:#e8e8e8;
border-bottom: 2px dotted #FFB433;
border-top: 2px dotted #A7D957;
padding : 20px;
}
.ficherdc {
background-position: center;
width:450px; height:10px;
background-color:white;
padding : 5px;
}
.fiche {
background-position: center;
width:410px; height:150px;
border-radius: 50px 50px 0px 0px;
background-color:#e8e8e8;
border-bottom: 2px dotted #FFB433;
border-top: 2px dotted #A7D957;
padding : 20px;
}
.profil1
{
width: 200px;
height: 40px;
font-size: 13px;
font-family: Trebuchet MS;
font-weight: bold;
}
.profilmasque
{
background-color : FFFFFF ;
font-size: 10px;
width: 200px;
border: 1px dotted #FFB433;
-moz-radius-bottomleft:10px ;
-moz-border-radius-bottomright:10px ;
-moz-border-radius-topleft:10px ;
-moz-border-radius-topright:10px ;
-moz-border-radius-bottomleft:10px ;}
.postdetails.poster-profile a img {
}
/*liens des sous forums*/
.sousfo {
background-color : white ;
border-bottom: 1px dotted #FFB433;
padding : 2px;
}
/*tour de dernier sujet*/
.dersuj {
background-color : white ;
border : 5px solid #FFB433;
-moz-box-shadow : 5px 5px 2px 2px #D6D0C9;
-moz-border-radius : 200px 200px 200px 200px;
padding : 10px;
image-attachment: fixed : url('http://img856.imageshack.us/img856/6447/sansre6ty.png');
-moz-transform:rotate(5deg);
}
a.forumlink:link, a.forumlink:visited {
color: #FF8800;
font-family: Trebuchet MS;
text-transform : uppercase;
font-size: 100%;
-moz-box-shadow:0px 0px 8px white;
letter-spacing: 5px;
display: block;
-moz-border-radius:15px;
}
a.forumlink:hover, a.forumlink:hover:visited {
color: #a7d957;
font-size: 26px;
display: block;
border-bottom: 3px dotted #FFB433;
-moz-border-radius:20px;
-moz-transform:rotate(-2deg);
}
input,textarea, select
{
-moz-border-radius: 5px 5px 5px 5px;
padding-left: 4px;
border: 1px dotted #A7D957;
}
a:hover {text-decoration: none !important}
.pa_contour
{
border: 2px dotted #FF0000
-moz-border-radius: 7px 7px 7px 7px;
padding: 10px;
}
.pa_L1
{
font-size: 26px;
border: 2px dotted #1F504F;
-moz-border-radius: 7px 7px 7px 7px;
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 10px;
font-family: trebuchet ms;
}
.pa_titre
{
font-size: 22px;
font-family: trebuchet ms;
text-align: right;
border−width: 80%;
border-bottom: 2px solid #AD9A85;
padding-bottom: 2px;
padding-right: 10px;
}
.pa_contour2
{
border: 2px dotted #1F504F;
-moz-border-radius: 7px 7px 7px 7px;
padding: 10px;
padding-right:40px;
padding-left: 40px;
}
.pa_titre2
{
font-size: 22px;
font-family: trebuchet ms;
border-bottom: 2px solid #AD9A85;
padding-bottom: 2px;
padding-right: 10px;
text-align: right;}
.pa_texte
{
font-size: 12px;
font-family: verdana;
}
.pa_caps
{
font-variant:small-caps;
}
.pa_liens a
{
font-variant:small-caps;
text-decoration:none;
font-weight:bold;
}
.pa_liens a:hover
{
background-color: #AD9A85;
color : #ffffff;
display:block;
text-decoration:none;
border-left: solid 4px #E1DAD2;
border-right: solid 4px #E1DAD2;
text-align: center;
font-weight:bold;
}
.pa_news
{
display:block;
overflow:auto;
font-size: 12px;
font-family: verdana;
height:55px;
}
.pa_titre3
{
font-size: 22px;
font-family: trebuchet ms;
padding-bottom: 2px;
}
a.mainmenu:hover {
text-align: center;}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
.position {
position: relative;
top : 9px
}
.tabtour {
background-repeat:
background-image: url('http://img11.hostingpics.net/pics/669294blue2.png');
border : 5px solid #A7D957;
padding-right : 15px;
padding-top : 15px;
padding-left : 15px;
padding-bottom : 5px;
-moz-border-radius-topleft: 40px;
-webkit-border-top-left-radius: 40px;
border-top-left-radius: 40px;
-moz-border-radius-topright: 40px;
-webkit-border-top-right-radius: 40px;
border-top-right-radius: 40px;
}
.tablogo {
background-color: #FFFFFF;
border : 1px solid white;
}
.tabhistoire {
background-color: #FFFFFF;
border : 1px solid white;
-moz-border-radius-topright: 40px;
-webkit-border-top-right-radius: 40px;
border-top-right-radius: 40px;
}
.tabpartenaires {
background-color: #FFFFFF;
border : 1px solid white;
}
.tabvotez {
background-color: #FFFFFF;
border : 1px solid white;
-moz-radius-bottomleft:40px;
-moz-border-radius-bottomright:40px;
-moz-border-radius-bottomleft:40px; }
.infobulle{
position: relative;
background-image : url('http://img11.hostingpics.net/pics/669294blue2.png')
height : 50px;
width : 80px;
border-top-left-radius: 40px;
-moz-border-radius-topright: 40px;
-webkit-border-top-right-radius: 40px;
border-top-right-radius: 40px;
z-index: 50;}
.infobulle:hover{
background-color: transparent;
z-index: 50;}
.infobulle span{
position: absolute;
background-image : url('http://img11.hostingpics.net/pics/669294blue2.png')
padding: 2px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
.infobulle span img{
border: 2px;
padding: 5px;}
.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#494E4F;
border: 2px dotted #30AD98;
border-radius: 40px 40px 40px 40px;
border-top-left-radius: 40px;
-moz-border-radius-topright: 40px;
-webkit-border-top-right-radius: 40px;
border-top-right-radius: 40px;
}
div.bulle
{
position: relative;
float: left;
}
div.bulle span
{
display: none; /* ceci masque l'infobulle */
}
div.bulle:hover
{
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
color: #FFD194;
}
div.bulle:hover span
{
display: inline; /* on affiche l'infobulle */
position: absolute;
top: 10px; /* on positionne notre infobulle */
background-image:url(http://img11.hostingpics.net/pics/669294blue2.png);
color: black;
padding: 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
}
input,textarea, select
{
-moz-border-radius: 5px 5px 5px 5px;
padding-left: 4px;
border: 1px dotted #A7D957;
}
.nawak{
infobulle
position: relative;
height : 50px;
width : 50px;}
/*supprimer dernière édition */
tr.post span.gensmall { display: none; }
.milieu {width: 90%; margin: 2px; border: 3px solid #D8FF99;-moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 5px; background-color:#ffffff ; font-size: 11px}
.fiche10 {
background-position: center;
border-radius: 50px 50px 50px 50px;
width:420px;
background-color:#e8e8e8;
border-bottom: 2px dotted #FFB433;
border-top: 2px dotted #A7D957;
padding : 20px;
}
.deroulant
{
border: 1px dotted #FF8C00;
background: white;
font-family: trebuchet ms;
color: #6AC3DE;
font-size: 12px;
}
.derougo
{
border: 1px dotted #958787;
background: white;
font-family: trebuchet ms;
color: #6AC3DE;
font-size: 12px;
}
.derougo:hover
{
border: 1px dotted #e2b0b0;
background: white;
font-family: trebuchet ms;
color: #6AC3DE;
font-size: 12px;
}
.bodyline{
border-top:20px solid #8DCDC1;
border-radius:8px solid #8DCDC1;
border-right: 5px solid #8DCDC1;
border-left: 5px solid #8DCDC1;
border-bottom: 5px solid #fff;
border-top-left-radius: 200px;
-moz-border-radius-topright: 100px;
-webkit-border-top-right-radius: 100px;
border-top-right-radius: 200px;
-moz-box-shadow:4px 0px 10px 5px #B3B1B1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
border-radius: 10px;
border-bottom:4px
}
body {
cursor: url(http://img11.hostingpics.net/pics/913549186719u02g2iav.gif), auto;
background-color: ;
background-image: url(http://img11.hostingpics.net/pics/268384bnn4.png);
background-position: top center ;
background-repeat: repeat-x;
}
- index_body:
- Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
<td rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>
<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<!-- BEGIN switch_fb_connect_no -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td class="row1" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect_no -->
<!-- BEGIN switch_fb_connect -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td valign="top" width="100%" class="row1" align="center">
<table width="100%">
<tr>
<td width="55%" valign="middle" align="right">
<table class="right">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<td width="10%" align="center" valign="middle">
<span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
</td>
<td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">
<!-- BEGIN switch_delete_cookies -->
<br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
<!-- END switch_delete_cookies -->
</span>
</td>
<td width="50%" align="right">
<span class="gensmall">
<!-- BEGIN switch_on_index -->
<!-- BEGIN switch_delete_cookies -->
<br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
<!-- END switch_delete_cookies -->
<!-- END switch_on_index -->
</span>
</td>
</tr>
</table>
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<!-- BEGIN switch_fb_connect_no -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td class="row1" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect_no -->
<!-- BEGIN switch_fb_connect -->
>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td valign="top" width="100%" class="row1" align="center">
<table width="100%">
<tr>
<td width="55%" valign="middle">
<table class="right">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<td width="10%" align="center" valign="middle">
<span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
</td>
<td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN disable_viewonline -->
<table border="0" width="100%" class="qeel_start" cellpadding="2" background-color:#FFFFFF>
<tr>
<td width="100%" colspan="2" align="center" valign="bottom" class="fondgroupes">
<span class="groupes"><a href="http://t-p-a.forums-actifs.net/g13-dresseur"><div style="-moz-transform: rotate(-2deg);">♛<font color="#FF3838">Dresseur</font></div></a></span><img src="http://img4.hostingpics.net/pics/867910espacecopie.png">
<span class="groupes"><a href="http://t-p-a.forums-actifs.net/g6-coordinateurs"><div style="-moz-transform: rotate(-2deg);">❥<font color="#23DB73">Coordinateur</font></div></a></span><img src="http://img4.hostingpics.net/pics/867910espacecopie.png">
<span class="groupes"><a href="http://t-p-a.forums-actifs.net/g8-eleveurs"><div style="-moz-transform: rotate(-2deg);">❦<font color="#38AFFF">Eleveur</font></div></a></span><img src="http://img4.hostingpics.net/pics/867910espacecopie.png">
<span class="groupes"><a href="http://t-p-a.forums-actifs.net/g9-observateurs"><div style="-moz-transform: rotate(-2deg);">★<font color="#3F38FF">Observateur</font></div></a></span><img src="http://img4.hostingpics.net/pics/867910espacecopie.png">
<span class="groupes"><a href="http://t-p-a.forums-actifs.net/g3-scientifique"><div style="-moz-transform: rotate(-2deg);">✖<font color="#A04CFF">Scientifique</font></div></a></span><img src="http://img4.hostingpics.net/pics/867910espacecopie.png">
<span class="groupes"><a href="http://t-p-a.forums-actifs.net/g12-journaliste"><div style="-moz-transform: rotate(-2deg);">☊<font color="#FFB536">Journaliste</font></div></a></span><img src="http://img4.hostingpics.net/pics/867910espacecopie.png">
</div>
<br><br>
</td>
</tr>
<tr>
<td width="50%">
<div class="qeel_align"><span class="gensmall"><span id="messages">{TOTAL_POSTS}</span>
<script type="text/javascript">
document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de/,"Bienvenue sur Tsuki's Pokemon Adept! Rejoins nous dans cette merveilleuse aventure qu'est la quête pour arriver à Tsuki. Depui peu nous avons ");
</script>
<script type="text/javascript">
document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/messages/,"petites histoires farfelues.");
</script>
<br>
<span id="users">{TOTAL_USERS}</span>
<br><div style="background;> {L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY}</div>
<script type="text/javascript">
document.getElementById('users').innerHTML=document.getElementById('users').innerHTML.replace(/membre enregistré/,"Pokémaniac totalement barge.");
document.getElementById('users').innerHTML=document.getElementById('users').innerHTML.replace(/membres enregistrés/,"Pokémaniacs totalement barges.");
</script>
<br><br> <span id="newuser">{NEWEST_USER}</span>
<script type="text/javascript">
document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le petit nouveau à nous avoir rejoint est");
</script>.
<br>Sois le bienvenue sur les routes qui mènent à Tsuki! Bonne chance pour rencontrer tout un tât d'amis et de pokémons. Tu verras, tu pourras tous les attrapez!
<br><br> <span id="totaluser">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateur en ligne/,"Pokémaniac");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateurs en ligne/,"Pokémaniacs");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistré/,"Dresseur");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistrés/,"Dresseurs");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisible/,"Voyeur");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisibles/,"Voyeurs");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invité/,"Explorateur.");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invités/,"Explorateurs.");
</script>
<br><br>
<span id="connecteduser">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">
document.getElementById('connecteduser').innerHTML=document.getElementById('connecteduser').innerHTML.replace(/Utilisateurs enregistrés/,"Les Pokémaniacs toujours occupés à jouer au casino sont ");
</script>
<br><br>
<span id="record">{RECORD_USERS}</span>
<script type="text/javascript">
document.getElementById('record').innerHTML=document.getElementById('record').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le record de dresseurs traversant les routes menant à Tsuki à été de ");
</script>
</span></div>
</td>
<td style="padding-left: 10px; vertical-align: top; border-left: 3px dotted #6AC3DE;" width="50%"></div></div>
<br><div style="background;>{L_CONNECTED_MEMBERS}</div>
</table>
</td>
</tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td align="center" width="100%" colspan="2" style="padding-top: 20px;">
<span class="gensmall">Utilisateurs connectés sur la Chatbox: {CHATTERS_LIST}
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
{AUTO_DST}
<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->
<html><head>
<style type="text/css">
.mycss
{
font-weight:normal;font-variant:small-caps;color:#000000;letter-spacing:1pt;word-spacing:2pt;font-size:11px;text-align:center;font-family:arial, helvetica, sans-serif;line-height:1;
}
</style>
</head>
<body>
<p class="mycss">(c) Tsuki's Pokemon Adept / Reproduction Interdite !</p>
</body>
Dernière édition par Valendium le Lun 27 Fév 2012 - 23:45, édité 1 fois
Valendium- **
- Messages : 96
Inscrit(e) le : 13/06/2011 -
Re: QEEL - création
par kheino Sam 25 Fév 2012 - 11:05
Bonjour Valendium,
Deux questions :
1- Je veux bien t'aider à réaliser ton QEEL, mais avec le template par défaut.
Si tu as d'autres modifs avant le QEEL, il faudra les réadapter.
2- L'image dans le "spoiler" est sensée être où et représenter quoi ?
Il me semble qu'elle n'est pas sur ton schéma...
Deux questions :
1- Je veux bien t'aider à réaliser ton QEEL, mais avec le template par défaut.
Si tu as d'autres modifs avant le QEEL, il faudra les réadapter.
2- L'image dans le "spoiler" est sensée être où et représenter quoi ?
Il me semble qu'elle n'est pas sur ton schéma...
kheino- Membre habitué
-
Messages : 1698
Inscrit(e) le : 09/05/2010 -
Re: QEEL - création
par Valendium Sam 25 Fév 2012 - 13:14
Bonjour,
Merci beaucoup de bien vouloir m'aider!
1) Aucun problème, je serai me débrouiller pour tout bien replacer normalement
- je bidouille assez souvent le HTML, c'est juste ici que j'ai du mal xD
2) A la place de "Dresseur, coordinateur ..." j'aimerais placer des pokéballs.
Mais j'aimerais que ces pokéballs bougent comme sur l'image en spoiler! (ou qu'elles pivotent) et qu'en plus, il y ait une infobulle (encore une fois comme dans l'image en spoiler).
Cette image est juste là comme exemple, elle n'a pas vraiment d'importance ^^'
Un très très grand merci!! =D
Merci beaucoup de bien vouloir m'aider!
1) Aucun problème, je serai me débrouiller pour tout bien replacer normalement
- je bidouille assez souvent le HTML, c'est juste ici que j'ai du mal xD2) A la place de "Dresseur, coordinateur ..." j'aimerais placer des pokéballs.
Mais j'aimerais que ces pokéballs bougent comme sur l'image en spoiler! (ou qu'elles pivotent) et qu'en plus, il y ait une infobulle (encore une fois comme dans l'image en spoiler).
Cette image est juste là comme exemple, elle n'a pas vraiment d'importance ^^'
Un très très grand merci!! =D
Valendium- **
- Messages : 96
Inscrit(e) le : 13/06/2011 -
Re: QEEL - création
par kheino Sam 25 Fév 2012 - 17:54
Ouh la, je n'ai pas encore réussi !
Surtout ce qui va poser soucis, c'est la partie groupes, parce que c'est une variable, et là je ne sais pas si j'arriverai à les séparer ainsi...
Je vois ça plus tard dans la soirée, car là je ne suis que de passage.
Surtout ce qui va poser soucis, c'est la partie groupes, parce que c'est une variable, et là je ne sais pas si j'arriverai à les séparer ainsi...
Je vois ça plus tard dans la soirée, car là je ne suis que de passage.
kheino- Membre habitué
-
Messages : 1698
Inscrit(e) le : 09/05/2010 -
Re: QEEL - création
par Valendium Sam 25 Fév 2012 - 17:59
Aucun soucis, c'est déjà bien gentil de prendre ma commande.
Au pire, si tu n'arrives pas à faire la variable, quelqu'un d'autre s'en chargera - je crois - ^^
J'ai moi-même essayé, mais sans succès T.T. Je pense que tout ce joue par le CSS sans en être à 100% convaincue.
Passe une bonne fin de journée!
Au pire, si tu n'arrives pas à faire la variable, quelqu'un d'autre s'en chargera - je crois - ^^
J'ai moi-même essayé, mais sans succès T.T. Je pense que tout ce joue par le CSS sans en être à 100% convaincue.
Passe une bonne fin de journée!
Valendium- **
- Messages : 96
Inscrit(e) le : 13/06/2011 -
Re: QEEL - création
par kheino Dim 26 Fév 2012 - 23:20
Hello Valendium !
Ah ben j'étais absente finalement...
Bon mais voilà un premier jet, mais avant, le principe y est, sauf que ton image de fond est plus petite et celle du QEEL immense (bien que transaorente).
Comme je n'ai pas eu vraiment le temps, je l'ai découpée avec GIMP tout en la gardant transparente.
Je n'ai pas mis les couleurs de la police, mais tu constateras dans le HTML que la cellule principale des groupes a un identifiant "castes" qui a ses réglages pour l'ensemble des groupes.
Ensuite chaque groupe a son "class" pour son détail (sa couleur).
N'hésite pas si tu as des questions, j'essaierai de me connecter demain.
Dans le template, juste la partie concernée :
Et dans le CSS :
Je te demande de laisser la mise en page de cette partie telle quelle jusqu'à ce que tu mettes le
Sinon je suis perdue !
EDIT : J'ai ajouté au CSS la couleur pour chaque groupe.
EDIT 2 :Il faut bien m'expliquer l'histoire de l'image et de l'infobulle...
Je comprends très vite quand on m'explique longtemps ou bien avec un bon schéma...
Ayéh, j'ai compris !
La question est : Où (dans la 1ère cellule comme le texte des groupes ?)
et comment (en barre de navigation ?) veux-tu ces icônes ?
Ah ben j'étais absente finalement...
Bon mais voilà un premier jet, mais avant, le principe y est, sauf que ton image de fond est plus petite et celle du QEEL immense (bien que transaorente).
Comme je n'ai pas eu vraiment le temps, je l'ai découpée avec GIMP tout en la gardant transparente.
Je n'ai pas mis les couleurs de la police, mais tu constateras dans le HTML que la cellule principale des groupes a un identifiant "castes" qui a ses réglages pour l'ensemble des groupes.
Ensuite chaque groupe a son "class" pour son détail (sa couleur).
N'hésite pas si tu as des questions, j'essaierai de me connecter demain.
Dans le template, juste la partie concernée :
- Code:
<!-- BEGIN disable_viewonline -->
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="100%" colspan="2" align="center" valign="bottom">
<!-- BEGIN switch_viewonline_link -->
<span class="imgwio"><a class="imgqeel" href="{U_VIEWONLINE}"><img src="http://i43.servimg.com/u/f43/17/03/76/41/wio10.png" width="954" border="0" alt="qeel" /></a></span>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<span></span>
<!-- END switch_viewonline_nolink -->
</td></tr>
<tr><td width="100%" align="center" valign="middle">
<table class="qeelcrea" width="950" align="center" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="castes" width="19%" valign="middle">
<table><tr><td align="center">
<div class="dressr"><a href="url_group-dresseur">Dresseur</a></div>
<div class="coord"><a href="url_group-coordi">Coordinateur</a></div>
<div class="eleve"><a href="url_group-eleveur">Eleveur</a></div>
<div class="obser"><a href="url_group-observat">Observateur</a></div>
<div class="scien"><a href="url_group-scientif">Scientifique</a></div>
<div class="journ"><a href="url_group-journal">Journaliste</a></div>
</td></tr></table>
</td>
<td align="left" width="43%" valign="middle">
<table width="80%" align="center"><tr><td>
<div class="mytext" align="justify">
Bienvenue sur Tsuki's Pokemon Adept! Rejoins nous dans cette merveilleuse aventure qu'est la quête pour arriver à Tsuki.
Depui peu nous avons 435 petites histoires farfelues.
Nous avons 19 Pokémaniacs totalement barges.
Aucun membre ne fête son anniversaire aujourd'hui.
Le petit nouveau à nous avoir rejoint est Denzel Nero.
Sois le bienvenue sur les routes qui mènent à Tsuki! Bonne chance pour rencontrer tout un tât d'amis et de pokémons.
Tu verras, tu pourras tous les attrapez!
</div>
</td></tr></table>
</td>
<td width="38%" align="right" valign="middle">
<table class="wio" width="100%" align="center"><tr>
<td width="100%" align="left"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td>
</tr>
<tr>
<td align="left"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</td></tr></table>
</td></tr></table>
</td></tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
Et dans le CSS :
- Spoiler:
- .qeelcrea {
background: url(https://i.servimg.com/u/f43/17/03/76/41/65080610.png) no-repeat center center;
width: 900px;
height: 387px;
border: 7px solid orange;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
padding: 0;
margin: 0 auto;
z-index: 1;
}
.castes a {
display: inline;
font: bold 34px trebuchet ms; /* ordre a respecter pour les normes W3C avec le raccourci font, style variant weight size/height familly (on peut omettre toutes les propriétés sauf le size et le family dans l ordre) */
-moz-transform: rotate(-17deg);
-webkit-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
-htm-transform: rotate(-17deg);
transform: rotate(-17deg);
padding: 7px 3px 3px;
}
.dress a {
color: red!important;
}
.coord a {
color: green!important;
}
.eleve a {
color: skyblue!important;
}
.obser a {
color: blue!important;
}
.scien a {
color: magenta!important;
}
.journ a {
color: brown!important;
}
Je te demande de laisser la mise en page de cette partie telle quelle jusqu'à ce que tu mettes le
Sinon je suis perdue !
EDIT : J'ai ajouté au CSS la couleur pour chaque groupe.
EDIT 2 :
Je comprends très vite quand on m'explique longtemps ou bien avec un bon schéma...
Ayéh, j'ai compris !
La question est : Où (dans la 1ère cellule comme le texte des groupes ?)
et comment (en barre de navigation ?) veux-tu ces icônes ?
kheino- Membre habitué
-
Messages : 1698
Inscrit(e) le : 09/05/2010 -
Re: QEEL - création
par Valendium Lun 27 Fév 2012 - 17:56
Merci c'est génialllllllllllllllll ♥ j'aime j'aime j'aime!
Bon j'ai encore bidouillé pour arriver à ce que je voulais ♫
http://p-k-m-w.forums-actifs.net/
Comme tu peux voir avec la pokéball j'ai obtenu l'infobulle ♥
Reste plus qu'à réussir à faire pivoter la pokéball quand on met le curseur dessus. °° Mais ça je serais pas te faire un schéma en fait..
Au pire si ça reste comme ça, c'est bien aussi ♥
Un tout grand merci! Plus que le pivotement des petites baball **
Bon j'ai encore bidouillé pour arriver à ce que je voulais ♫
http://p-k-m-w.forums-actifs.net/
- Code:
<!-- BEGIN disable_viewonline -->
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="100%" colspan="2" align="center" valign="bottom">
<!-- BEGIN switch_viewonline_link -->
<span class="imgwio"><a class="imgqeel" href="{U_VIEWONLINE}"><img src="http://img11.hostingpics.net/pics/850419quiestenlignemodifi222.png" width="954" border="0" alt="qeel" /></a></span>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<span></span>
<!-- END switch_viewonline_nolink -->
</td></tr>
<tr><td width="100%" align="center" valign="middle">
<table class="qeelcrea" width="950" align="center" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="castes" width="19%" valign="middle">
<table><tr><td align="center">
<div class="dressr"><a href="url_group-dresseur">Dresseur</a></div>
<center><table><tr><br><div align="right"><tr><td><div class="bulle"> <a href="http://p-k-m-w.forums-actifs.net/g13-dresseur"><img src="http://www.pokebip.com/pokemon/pages/trucage/ressources_dp/objets/objet004.png" border="0" class="transparence" alt="http://www.pokebip.com/pokemon/pages/trucage/ressources_dp/objets/objet004.png" /><span><table border="0"><tr><td align="left"> <img src="http://www.pokepedia.fr/images/7/76/Miniat_3_r_001.gif"> <img src="http://www.pokepedia.fr/images/1/10/Miniat_3_r_004.gif"> <img src="http://www.pokepedia.fr/images/6/68/Miniat_3_r_007.gif">
<br><img src="http://www.pokepedia.fr/images/f/f4/Miniat_3_r_152.gif"> <img src="http://www.pokepedia.fr/images/b/b7/Miniat_3_r_155.gif"> <img src="http://www.pokepedia.fr/images/7/7d/Miniat_3_r_158.gif">
<br><img src="http://www.pokepedia.fr/images/4/44/Miniat_3_r_252.gif"> <img src="http://www.pokepedia.fr/images/2/26/Miniat_3_r_255.gif"> <img src="http://www.pokepedia.fr/images/8/83/Miniat_3_r_258.gif">
<br><img src="http://www.pokepedia.fr/images/5/5e/Miniat_4_d_387.gif"> <img src="http://www.pokepedia.fr/images/6/67/Miniat_4_d_390.gif"> <img src="http://www.pokepedia.fr/images/a/aa/Miniat_4_d_393.gif">
<br><img src="http://www.pokepedia.fr/images/2/2b/Miniat_5_n_495.gif"> <img src="http://www.pokepedia.fr/images/6/6f/Miniat_5_n_498.gif"> <img src="http://www.pokepedia.fr/images/5/56/Miniat_5_n_501.gif">
</td><td align="center">
<div class="dressr"><div style="-moz-transform: rotate(-2deg);">♛<font color="#FF3838">Dresseur</font></div></a></div> <br><br>
... </td></tr></table></span></td></tr></table></center>
<div class="coord"><a href="url_group-coordi">Coordinateur</a></div>
<div class="eleve"><a href="url_group-eleveur">Eleveur</a></div>
<div class="obser"><a href="url_group-observat">Observateur</a></div>
<div class="scien"><a href="url_group-scientif">Scientifique</a></div>
<div class="journ"><a href="url_group-journal">Journaliste</a></div>
</td></tr></table>
</td>
<td align="left" width="43%" valign="middle">
<table width="80%" align="center"><tr><td>
<div class="mytext" align="justify">
<div class="qeel_align"><span class="gensmall"><span id="messages">{TOTAL_POSTS}</span>
<script type="text/javascript">
document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de/,"Bienvenue sur Tsuki's Pokemon Adept! Rejoins nous dans cette merveilleuse aventure qu'est la quête pour arriver à Tsuki. Depui peu nous avons ");
</script>
<script type="text/javascript">
document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/messages/,"petites histoires farfelues.");
</script>
<br>
<span id="users">{TOTAL_USERS}</span>
<br><div style="background;> {L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY}</div>
<script type="text/javascript">
document.getElementById('users').innerHTML=document.getElementById('users').innerHTML.replace(/membre enregistré/,"Pokémaniac totalement barge.");
document.getElementById('users').innerHTML=document.getElementById('users').innerHTML.replace(/membres enregistrés/,"Pokémaniacs totalement barges.");
</script>
<br><br> <span id="newuser">{NEWEST_USER}</span>
<script type="text/javascript">
document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le petit nouveau à nous avoir rejoint est");
</script>.
<br>Sois le bienvenue sur les routes qui mènent à Tsuki! Bonne chance pour rencontrer tout un tât d'amis et de pokémons. Tu verras, tu pourras tous les attrapez!
<br><br>
</div>
</td></tr></table>
</td>
<td width="38%" align="right" valign="middle">
<table class="wio" width="100%" align="center"><tr>
<td width="100%" align="left"><span class="gensmall">
<span id="connecteduser">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">
document.getElementById('connecteduser').innerHTML=document.getElementById('connecteduser').innerHTML.replace(/Utilisateurs enregistrés/,"Les Pokémaniacs toujours occupés à jouer au casino sont ");
</script><br>
<div style="background;>{L_CONNECTED_MEMBERS}
</div>
<span class="gensmall">
<span id="record">{RECORD_USERS}</span><br><br>
<script type="text/javascript">
document.getElementById('record').innerHTML=document.getElementById('record').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le record de dresseurs traversant les routes menant à Tsuki à été de ");
</script>
<span class="gensmall"> <span id="totaluser">{TOTAL_USERS_ONLINE}
<script type="text/javascript">
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateur en ligne/,"Pokémaniac");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateurs en ligne/,"Pokémaniacs");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistré/,"Dresseur");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistrés/,"Dresseurs");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisible/,"Voyeur");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisibles/,"Voyeurs");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invité/,"Explorateur.");
document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invités/,"Explorateurs.");
</script>
</span></div>
</span></span><br><br>
<center> <img src="http://img15.hostingpics.net/pics/464577courge.png" border="0" alt="qeel" /></a></span></center><br><br>
</td>
</table>
</td>
</tr>
</td></tr></table>
</td></tr></table>
<center> <img src="http://img11.hostingpics.net/pics/289054wonderland.png" border="0" alt="qeel" /></a></span></center>
</td></tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td align="center" width="100%" colspan="2" style="padding-top: 20px;">
<span class="gensmall">Utilisateurs connectés sur la Chatbox: {CHATTERS_LIST}
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
Comme tu peux voir avec la pokéball j'ai obtenu l'infobulle ♥
Reste plus qu'à réussir à faire pivoter la pokéball quand on met le curseur dessus. °° Mais ça je serais pas te faire un schéma en fait..
Au pire si ça reste comme ça, c'est bien aussi ♥
Un tout grand merci! Plus que le pivotement des petites baball **
Dernière édition par Valendium le Lun 27 Fév 2012 - 18:48, édité 1 fois
Valendium- **
- Messages : 96
Inscrit(e) le : 13/06/2011 -
Re: QEEL - création
par kheino Lun 27 Fév 2012 - 18:23
A propos des images, voici ce que ça donne le HTML et le CSS.
On reprend tout (j'avais demandé de gardé la mise en place de la partie concernée) et d'abord le CSS:
Seulement la cellule (td principal) des groupes du template:
Voilà je crois que tu as même reçu un bonus.
Il te reste à mettre tes images et leurs dimensions (important), ainsi que le texte approprié à chaque groupe.
EDIT : Attention (H 20:15), CSS édité, parce que les images "castes" ne sont pas des liens, donc pas de a dans l'intitulé.
On reprend tout (j'avais demandé de gardé la mise en place de la partie concernée) et d'abord le CSS:
- Spoiler:
- .qeelcrea {
background: url(https://i.servimg.com/u/f43/17/03/76/41/65080610.png) no-repeat center center;
width: 900px;
height: 387px;
border: 7px solid orange;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
padding: 0;
margin: 0 auto;
z-index: 1;
}
.castes a {
display: inline;
font: bold 31px trebuchet ms; /* ordre a respecter pour les normes W3C avec le raccourci font, style variant weight size/height familly (on peut omettre toutes les propriétés sauf le size et le family dans l ordre) */
-moz-transform: rotate(-17deg);
-webkit-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
-htm-transform: rotate(-17deg);
transform: rotate(-17deg);
padding: 3px 3px 0;
}
.dress a {
color: red!important;
}
.coord a {
color: green!important;
}
.eleve a {
color: skyblue!important;
}
.obser a {
color: blue!important;
}
.scien a {
color: magenta!important;
}
.journ a {
color: brown!important;
}
.castes img {
width: 34px;
height: 34px;
-o-transition: 0.4s ease;
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-htm-transition: 0.4s ease;
transition: 0.4s ease;
padding: 7px 3px 0;
margin: 3px auto 0;
}
.castes img:hover {
-o-transition: 0.7s ease;
-webkit-transition: 0.7s ease;
-moz-transition: 0.7s ease;
-htm-transition: 0.7s ease;
transition: 0.7s ease;
-o-transform: rotate(49deg);
-moz-transform: rotate(49deg);
-webkit-transform: rotate(49deg);
-htm-transform: rotate(49deg);
transform: rotate(49deg);
}
.bulle3, .bulle3 img {
width: 34px;
height: 34px;
position: relative;
z-index: 3;
cursor: pointer;
}
.bulle3:hover, .bulle3 img:hover {
z-index: 4;
}
.bulle3 .inbulle3, .bulle3 img .inbulle3, .bulle3 .inbulle3 a, .bulle3 img .inbulle3 a {
color: transparent;
overflow: hidden;
}
.bulle3:hover .inbulle3, .bulle3 img:hover .inbulle3 {
position: absolute;
width: 130px;
height: 130px;
overflow-y: auto;
left: 34px;
top: -34px;
color: #5a1c1d;
text-shadow: 1px 1px 0px #e8d9b5;
border: 4px ridge #A92C10;
background: #fff;
box-shadow: 8px 8px 16px gray;
-moz-box-shadow: 8px 8px 16px #444;
-webkit-box-shadow: 8px 8px 16px #444;
-moz-border-radius:13px;
-webkit-border-radius: 13px;;
border-radius: 13px;
padding: 4px;
-o-transition: all 1.7s ease;
-webkit-transition: all 1.7s ease;
-moz-transition: all 1.7s ease;
-htm-transition: all 1.7s ease;
transition: all 1.7s ease;
z-index: 5;
}
.inbulle3 {
text-align: left;
}
Seulement la cellule (td principal) des groupes du template:
- Code:
<!-- BEGIN switch_viewonline_nolink -->
<span></span>
<!-- END switch_viewonline_nolink -->
</td></tr>
<tr><td width="100%" align="center" valign="middle">
<table class="qeelcrea" width="950" align="center" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="castes" width="19%" valign="middle">
<table><tr><td align="center">
<div class="dress"><a href="url_group-dresseur">Dresseur</a></div>
<div class="bulle3"><img src="http://2img.net/i/fa/subsilver/whosonline.gif" alt="dress" />
<div class="inbulle3">Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
</div></div>
<div class="coord"><a href="url_group-coordi">Coordinateur</a></div>
<div class="bulle3"><img src="http://2img.net/i/fa/subsilver/whosonline.gif" alt="dress" />
<div class="inbulle3">Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
</div></div>
<div class="eleve"><a href="url_group-eleveur">Eleveur</a></div>
<div class="bulle3"><img src="http://2img.net/i/fa/subsilver/whosonline.gif" alt="dress" />
<div class="inbulle3">Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
</div></div>
<div class="obser"><a href="url_group-observat">Observateur</a></div>
<div class="bulle3"><img src="http://2img.net/i/fa/subsilver/whosonline.gif" alt="dress" />
<div class="inbulle3">Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
</div></div>
<div class="scien"><a href="url_group-scientif">Scientifique</a></div>
<div class="bulle3"><img src="http://2img.net/i/fa/subsilver/whosonline.gif" alt="dress" />
<div class="inbulle3">Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
</div></div>
<div class="journ"><a href="url_group-journal">Journaliste</a></div>
<div class="bulle3"><img src="http://2img.net/i/fa/subsilver/whosonline.gif" alt="dress" />
<div class="inbulle3">Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
Les Dresseurs sont acariatres et austères. Ils cherchent la perfection chez chacun.
</div></div>
</td></tr></table>
</td>
Voilà je crois que tu as même reçu un bonus.
Il te reste à mettre tes images et leurs dimensions (important), ainsi que le texte approprié à chaque groupe.
EDIT : Attention (H 20:15), CSS édité, parce que les images "castes" ne sont pas des liens, donc pas de a dans l'intitulé.
Résultat : 
kheino- Membre habitué
-
Messages : 1698
Inscrit(e) le : 09/05/2010 -
Re: QEEL - création
par Valendium Lun 27 Fév 2012 - 23:44
Bonsoir,
En fait ton code ne marche pas avec des petites images à l'intérieur de l'infobulle, mais ce n'est pas un soucis. ^^
Mes membres et moi-même sommes en tout cas très heureux du résultat!
Je te remercie de ton aide précieuse et de ta bonne volonté. Je n'ai rien à t'offrir, que toute ma sympathie! Mais si tu as besoin un jour d'un partenaire forum, les portes de PKMW te sont grandes ouvertes.
Un énorme merci.
Cordialement
PS : Je ne sais pas, si tu veux qu'on trouve d'autres solutions ou quoi pour donner un tuto complet, on peut aussi.
En attendant, je met résolu, parce que je suis super contente du résultat!
Ah aussi, j'aimerais te mettre en crédit, tu as un 'pseudo' spécial pour ça?
En fait ton code ne marche pas avec des petites images à l'intérieur de l'infobulle, mais ce n'est pas un soucis. ^^
Mes membres et moi-même sommes en tout cas très heureux du résultat!
Je te remercie de ton aide précieuse et de ta bonne volonté. Je n'ai rien à t'offrir, que toute ma sympathie! Mais si tu as besoin un jour d'un partenaire forum, les portes de PKMW te sont grandes ouvertes.
Un énorme merci.
Cordialement
Valendium.
PS : Je ne sais pas, si tu veux qu'on trouve d'autres solutions ou quoi pour donner un tuto complet, on peut aussi.
En attendant, je met résolu, parce que je suis super contente du résultat!
Ah aussi, j'aimerais te mettre en crédit, tu as un 'pseudo' spécial pour ça?
Valendium- **
- Messages : 96
Inscrit(e) le : 13/06/2011 -
Sujets similaires» Création d'un QEEL sous forme de tableau
» Petite création d'un QEEL pour un tout nouveau forum !
» Création icone pour les statistiques qui se situent dans le QEEL de mon forum.
» Problème de superposition de mon texte du qeel et l'image du qeel !
» QEEL en double (originel et nouveau QEEL)
» Petite création d'un QEEL pour un tout nouveau forum !
» Création icone pour les statistiques qui se situent dans le QEEL de mon forum.
» Problème de superposition de mon texte du qeel et l'image du qeel !
» QEEL en double (originel et nouveau QEEL)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum