[EDIT : Tout ce qui est barré vert a été résolue entre temps]
Bien le bonjour à tous et à toutes !
Je viens à vous aujourd'hui afin d'obtenir de l'aide.
J'avais un forum, mais ne marchant pas, j'ai décidée de le fermer, et d'en refaire un nouveau, tout beau tout neuf. Il n'était pas super, donc j'ai décider de me servir de code en libre service ici.
Il se trouve que j'ai modifier (surtout les couleurs), afin que sa aille avec mon forum, néanmoins, j'ai quelques problèmes, et je requière donc votre aide.
Tout d'abord, voici le lien du LS sur lequel j'ai un problème : Ici
Ensuite le lien de mon forum si vous souhaitez voir en direct : Ici
Voici donc mon problème :
Il s'agit du QEEL.
J'ai comme vous avez pu le constater, enlever la Pokeball (l'image tout court en fait), car je n'en voulais pas. Malheureusement, n'étant pas douée du tout pour le code, le titre qui était dessus a décidé de déménager et est allé se poser au milieu du QEEL. Chose plutôt déplaisante comme vous pouvez l'imaginer !
Donc premier problème, quelqu'un saurait-il comment le remettre en place ?
Ensuite, il s'agit de modifier le code (je suppose).Je voudrais tout d'abord modifier le cadre (rouge clair) où est noté le nombre d'utilisateur en ligne, et les stats' (les deux cadres ) gauche des groupes). J'aimerai que visuellement, il n'y ai qu'un seule cadre, ou réunir les deux tant que sa ne bouge pas.
J'aimerai aussi, si vous savez comment faire, modifier ces phrases, j'ai beau chercher, je ne trouve pas (je suis aussi ce qu'on qualifierai de taupe : Je ne vois rien et loupe tout !).
Je vous en demande déjà beaucoup, et je m'excuse, mais vous remercie aussi si vous pouvez m'aider, j'ai encore quelques petits (ou pas) services ..?
Il s'agit du cadre ou il y a les bannières : Je voudrais pouvoir en affiché 3 ou 4 en haut et en bas (à la place de celles déjà visibles, toujours avec le texte au milieux), fixes. La taille 80*30 si c'est possible.
Avant dernier problème (oui je suis gourmande, ne m'en voulez pas).
Il s'agit de tous les cadres. Je voudrais qu'ils ne dépassent pas une sorte de ligne imaginaire, qu'ils s'arrêtent tous au même endroit maximum, et qu'ils aient tous la même taille (si je puis dire) :
Trois cadres en haut, de la même tailles en hauteur et en largeur, la taille de l'actuel au milieu si c'est possible ?
Et deux en dessous, de la même hauteur et la même largeur.
Si possible, qu'il y ai un certain nombre de pixel entre chaque cadre identique partout. En ce qui concerne la limite vers l'extérieur, laisser autant de marge que en haut pour le haut et le bas, et que à gauche pour la gauche et la droite.
Je me rend compte que je vous en demande beaucoup, et j'vais vous en demander une petite dernière chose, en espèrent que je pourrais vous aider autant que vous m'aurez aider bien que je sois nulle de partout ^^' ...
Il s'agit du bloc Groupe. J'aimerai qu'il y ai cinq groupes notés, de couleur blanche (mais que je puisse modifier), et que je puisse modifier les noms. Je ne veux pas qu'il se passe quoi que ce soit quand on clique ou autre non plus.
Quand au cadre en bas à droite qui servait à la base de description pour ces groupes, je veux pouvoir y marqué un texte que je pourrais modifier, et si possible, avec une rollbox (je crois qu'on appel ça comme ça), afin que je puisse choisir la longueur de mon texte. (Ah, et comme je suis maniaque, si possible, que la barre de défilement et les texte ne dépassent pas le cadre rouge clair ?
Voilà voilà, j'ai enfin terminée avec mes problèmes, vous n'êtes pas obligé de m'aider, j'en suis consciente. Je suis donc venue à vous afin de pouvoir rendre mon QEEL joli et agréable, je ne savais pas trop ou allé et ayant perdu mes favoris suite à un problème, j'ai eu la chance de retrouver par hasard Never Utopia (et j'vais donc pouvoir être enfin active xD) ...
Je vous met ci-dessous les ressources dont vous aurez besoin, ainsi que deux shémas pour vous montrer ce que je souhaite (attention les yeux, sa brûle !)
[EDIT : Template et CSS mis à jour]
Voilà voilà ! J'espère qu'il ne manque rien, merci à vous ! Je reste présente pour vous répondre si vous avez des questions ou s'il manque des choses. Et j'vais aller faire un tour des forums voir si je peux pas aidée à mon tour
Bien le bonjour à tous et à toutes !
Je viens à vous aujourd'hui afin d'obtenir de l'aide.
J'avais un forum, mais ne marchant pas, j'ai décidée de le fermer, et d'en refaire un nouveau, tout beau tout neuf. Il n'était pas super, donc j'ai décider de me servir de code en libre service ici.
Il se trouve que j'ai modifier (surtout les couleurs), afin que sa aille avec mon forum, néanmoins, j'ai quelques problèmes, et je requière donc votre aide.
Tout d'abord, voici le lien du LS sur lequel j'ai un problème : Ici
Ensuite le lien de mon forum si vous souhaitez voir en direct : Ici
Voici donc mon problème :
Il s'agit du QEEL.
Donc premier problème, quelqu'un saurait-il comment le remettre en place ?
Ensuite, il s'agit de modifier le code (je suppose).
Je vous en demande déjà beaucoup, et je m'excuse, mais vous remercie aussi si vous pouvez m'aider, j'ai encore quelques petits (ou pas) services ..?
Avant dernier problème (oui je suis gourmande, ne m'en voulez pas).
Trois cadres en haut, de la même tailles en hauteur et en largeur, la taille de l'actuel au milieu si c'est possible ?
Et deux en dessous, de la même hauteur et la même largeur.
Si possible, qu'il y ai un certain nombre de pixel entre chaque cadre identique partout. En ce qui concerne la limite vers l'extérieur, laisser autant de marge que en haut pour le haut et le bas, et que à gauche pour la gauche et la droite.
Je me rend compte que je vous en demande beaucoup, et j'vais vous en demander une petite dernière chose, en espèrent que je pourrais vous aider autant que vous m'aurez aider bien que je sois nulle de partout ^^' ...
Quand au cadre en bas à droite qui servait à la base de description pour ces groupes, je veux pouvoir y marqué un texte que je pourrais modifier, et si possible, avec une rollbox (je crois qu'on appel ça comme ça), afin que je puisse choisir la longueur de mon texte. (Ah, et comme je suis maniaque, si possible, que la barre de défilement et les texte ne dépassent pas le cadre rouge clair ?
Voilà voilà, j'ai enfin terminée avec mes problèmes, vous n'êtes pas obligé de m'aider, j'en suis consciente. Je suis donc venue à vous afin de pouvoir rendre mon QEEL joli et agréable, je ne savais pas trop ou allé et ayant perdu mes favoris suite à un problème, j'ai eu la chance de retrouver par hasard Never Utopia (et j'vais donc pouvoir être enfin active xD) ...
Je vous met ci-dessous les ressources dont vous aurez besoin, ainsi que deux shémas pour vous montrer ce que je souhaite (attention les yeux, sa brûle !)
- Shéma:
[EDIT : Template et CSS mis à jour]
- Template index_body:
- Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td class="catHead" 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 class="row1" 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 -->
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->
<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<div class="cnxl-bloc">
<form class="cnxl-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
<!-- Bloc gauche - INSCRIPTION-->
<a class="cnxl-inscription" href="/register" title="S'inscrire !">
<img src="http://image.noelshack.com/fichiers/2016/09/1457207134-decoration.png" alt="Rejoindre le forum" />
</a>
<!-- Bloc milieu - LES CHAMPS A REMPLIR-->
<div class="cnxl-input-bloc">
<input type="text" name="username" placeholder="Pseudo" />
<input type="password" name="password" placeholder="Mot de passe" />
</div>
<!-- Bloc droit - BOUTON CONNEXION-->
<div class="cnxl-submit-bloc">
<input type="submit" name="login" value="Connexion" />
</div>
<!-- En bas-->
<div>
<input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
<label for="autologin">Connexion automatique</label>
</div>
</form>
<a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- Fin LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->
<!-- 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">
</td>
<td width="50%" align="right">
<span class="gensmall">
</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'" 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 --><br /><br />
<link href='http://fonts.googleapis.com/css?family=Lobster|Parisienne' rel='stylesheet' type='text/css'>
<div style="top: 1em; position: relative; z-index: 3; font-family: 'Lobster', cursive; font-size: 35px; color: #000000; text-shadow: 1px 1px 2px white;"><center>Qui parcourt nos Terres ?</center></div>
<center><br /><br /><br /><br /><br /><br /><br /></center><center><div class="fond_qeel"><table><tr><td><div class="bloc_qeel" style="width: 200px;">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</div>
<div class="bloc_qeel" style="width: 200px;">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}</div></td>
<td><div class="bloc_qeel" style="width: 200px;"><div class="qeelonglets">
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Administration" onclick="javascript:change_qeelonglet('Administration');"><span style="color: #BC1D1D;">Administration</span></span>
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Scientifique" onclick="javascript:change_qeelonglet('Scientifique');"><span style="color: #2C5654;">Scientifique</span></span>
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Team Rocket" onclick="javascript:change_qeelonglet('Team Rocket');"><span style="color: #D9631C;">Team Rocket</span></span>
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Dresseur" onclick="javascript:change_qeelonglet('Dresseur');"><span style="color: #73377B;">Dresseur</span></span>
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Apprentie_dresseur" onclick="javascript:change_qeelonglet('Apprentie_dresseur');"><span style="color: #BB7BC4;">Apprentie dresseur</span></span>
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Champion" onclick="javascript:change_qeelonglet('Champion');"><span style="color: #62A451;">Champion</span></span>
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Civil" onclick="javascript:change_qeelonglet('Civil');"><span style="color: #938762;">Civil</span></span> <br />
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Eleveur" onclick="javascript:change_qeelonglet('Eleveur');"><span style="color: #5187A4;">Éleveur</span></span>
</div></div></td>
<td><div class="bloc_qeel" style="width: 200px; height: 150px; overflow: auto;">{LOGGED_IN_USER_LIST}</div></td>
</tr><br /><br /></table>
<table><tr><td><div class="bloc_qeel" style="width: 300px;"><div style="background-color: #C7281A; padding: 7px; border-radius: 10px;"><marquee><a href="#"><img src="http://i39.servimg.com/u/f39/18/88/64/69/part_b10.jpg" /></a> <a href="#"><img src="http://i39.servimg.com/u/f39/18/88/64/69/part_b10.jpg" /></a> <a href="#"><img src="http://i39.servimg.com/u/f39/18/88/64/69/part_b10.jpg" /></a> <a href="#"><img src="http://i39.servimg.com/u/f39/18/88/64/69/part_b10.jpg" /></a> <a href="#"><img src="http://i39.servimg.com/u/f39/18/88/64/69/part_b10.jpg" /></a> <a href="#"><img src="http://i39.servimg.com/u/f39/18/88/64/69/part_b10.jpg" /></a></marquee></div>
Nos meilleurs amis et coup de coeur du mois !
<a href="#"> <img src="http://i39.servimg.com/u/f39/18/88/64/69/coeur_10.jpg" style="border-radius: 10px;" /></a></div></td>
<td style="width: 120px;"></td>
<td><div class="bloc_qeel" style="width: 350px;"><div class="contenu_qeelonglets"><div class="contenu_qeelonglet" id="contenu_qeelonglet_Administration" style="position: relative; top: -1em;">Numne Coriolanus contra debuerunt cum si placet debeat illi rem debeat illi debeat progredi num debuerunt si Coriolano si id Maelium Numne Maelium cum habuit si illi ob si si id ob contra si patriam si num debeat ob Coriolanus Numne habuit num progredi ferre debuerunt patriam num num regnum adpetentem amor quatenus ob habuit Coriolano si ob Coriolano illi ferre ob si iuvare primum debuerunt iuvare in amor si amor si ferre num amicos num primum ob arma Coriolano amicos regnum debuerunt in regnum ferre debeat patriam debuerunt debuerunt videamus videamus in debuerunt si adpetentem ob placet Vecellinum amor. <a href="#" style="color: #295654!important;"># Les consulter</a></div>
<div class="contenu_qeelonglet" id="contenu_qeelonglet_Scientifique" style="position: relative; top: -1em;">Numne Coriolanus contra debuerunt cum si placet debeat illi rem debeat illi debeat progredi num debuerunt si Coriolano si id Maelium Numne Maelium cum habuit si illi ob si si id ob contra si patriam si num debeat ob Coriolanus Numne habuit num progredi ferre debuerunt patriam num num regnum adpetentem amor quatenus ob habuit Coriolano si ob Coriolano illi ferre ob si iuvare primum debuerunt iuvare in amor si amor si ferre num amicos num primum ob arma Coriolano amicos regnum debuerunt in regnum ferre debeat patriam debuerunt debuerunt videamus videamus in debuerunt si adpetentem ob placet Vecellinum amor. <a href="#" style="color: #295654!important;"># Les consulter</a></div>
<div class="contenu_qeelonglet" id="contenu_qeelonglet_Team Rocket" style="position: relative; top: -1em;">Numne Coriolanus contra debuerunt cum si placet debeat illi rem debeat illi debeat progredi num debuerunt si Coriolano si id Maelium Numne Maelium cum habuit si illi ob si si id ob contra si patriam si num debeat ob Coriolanus Numne habuit num progredi ferre debuerunt patriam num num regnum adpetentem amor quatenus ob habuit Coriolano si ob Coriolano illi ferre ob si iuvare primum debuerunt iuvare in amor si amor si ferre num amicos num primum ob arma Coriolano amicos regnum debuerunt in regnum ferre debeat patriam debuerunt debuerunt videamus videamus in debuerunt si adpetentem ob placet Vecellinum amor. <a href="#" style="color: #295654!important;"># Les consulter</a></div>
<div class="contenu_qeelonglet" id="contenu_qeelonglet_Dresseur">Contenu 2</div>
<div class="contenu_qeelonglet" id="contenu_qeelonglet_Apprentie_dresseur">Apprentie dresseur</div>
<div class="contenu_qeelonglet" id="contenu_qeelonglet_Champion">Champion</div>
<div class="contenu_qeelonglet" id="contenu_qeelonglet_Civil">Civil</div>
<div class="contenu_qeelonglet" id="contenu_qeelonglet_Eleveur">Éleveur</div>
</div></div></td></tr>
</table></div>
<script type="text/javascript">
//<!--
function change_qeelonglet(name)
{
document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
anc_qeelonglet = name;
}
//-->
</script>
<script type="text/javascript">
//<!--
var anc_qeelonglet = 'Administration';
change_qeelonglet(anc_qeelonglet);
//-->
</script></center>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
<tr>
<td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
<td><span class="gensmall">{L_NEW_POSTS}</span></td>
<td></td>
<td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
<td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
<td> </td>
<td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
<td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
</tr>
</table>
<!-- END switch_legend -->
{AUTO_DST}
<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
FB.init({
appId : {switch_fb_index_login.FACEBOOK_APP_ID},
cookie : true,
xfbml : true,
oauth : true,
version : 'v2.3'
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->
- Feuille CSS:
- Code:
/* --------------------------------- CATEGORIES --------------------------------- */
#liens_sf1 a {
background-color: #C0C0C0;
display: block;
}
#liens_sf1 a:hover {
background-color: #801E15;
}
.essai {
background-color: #000000;
}
/*** FONDS GENERAUX ***/
/* Contenu de l'ensembre des forum */
.categorie {
width: 500px;
height: 20px;
padding: 5px;
}
/* Mise en forme nom de catégorie */
.cate_titre h2 {
font-size: 35px;
font-family: 'Lobster', cursive;
color: #000000;
text-align: center;
position: relative;
top: -0.8em;
}
/*** MISE EN FORME DES FORUM ***/
/* Mise en forme du texte des titres de forum */
.forumlink {
color: #FFFFFF !important;
font-family: 'Lobster', cursive;
font-size: 25px !important;
font-weight: none !important;
position: relative;
top: -2.2em;
left: -3em;
z-index: 1;
}
.forumlink:hover {
color: #FFFFFF !important;
text-decoration: none !important;
}
.forumlink a {
font-size: 16px;
}
/* Mise en forme de la description */
.bloc1 {
background-color: #C7281A;
color: #801E15;
font-size: 11px;
text-align: justify;
height: 120px;
width: 380px;
position: relative;
left: -7em;
top: -6em;
border-radius: 20px;
}
.imgillustration {
border-radius: 10px;
}
/*** SOUS-FORUM ***/
.lienssf {
width: 130px;
background-color: #C7281A;
height: 110px;
overflow: auto;
padding-top: 15px;
padding-bottom: 15px;
position: relative;
top: -3em;
left: -4em;
border-radius: 25px;
text-align: center;
}
.lienssf a {
color: #1B4746 !important;
text-decoration: none !important;
}
.lienssf a:hover {
text-decoration : none !important;
}
/*** DERNIERS MESSAGES ***/
.last_mess {
width: 120px;
height: 130px;
position: relative;
left: -8em;
top: -4.5em;
background-color: #C7281A;
color: #801E15;
padding: 5px;
font-size: 11px;
border-radius: 50px;
}
.last_mess a {
color: #FFFFFF !important;
text-decoration: none !important;
}
/* --------------------------------- FIN CATEGORIES --------------------------------- */
/*----------------- Menu de navigation ----------------- */
a.mainmenu {
font-family: \'Merriweather\';
font-size: 10px;
font-weight:;
text-align: center !important;
padding:2px;
padding-left: 8px;
padding-right: 8px;
color: #F3F4F6;
background-color: #1d1449;
text-decoration: none;
border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;
}
a.mainmenu:link, a.mainmenu:visited {
color: #F3F4F6;
}
#i_icon_mini_index {display: none; } /* résolution d\'un bug qui laisse une marge en trop à gauche */
#i_icon_mini_register {display: none; }
#i_icon_mini_search {display: none; }
#i_icon_mini_faq {display: none; }
#i_icon_mini_login {display: none; }
#i_icon_mini_members {display: none; }
#i_icon_mini_groups {display: none; }
#i_icon_mini_profile {display: none; }
#i_icon_mini_message {display: none; }
#i_icon_mini_new_message {display: none; }
#i_icon_mini_logout {display: none; }
/*----------------- Fin Menu de navigation ----------------- */
/*----------------- Page d'Accueil ----------------- */
/* Base de la PA */
.fond_PA {
background-color: #801E15;
width: 690px;
padding: 20px;
border-radius: 50px;
text-align: justify;
font-size: 11px;
}
.titre_PA {
position: relative;
top: -1.3em;
font-family: 'Lobster', cursive;
font-size: 35px;
color: #000000;
text-shadow: 1px 1px 2px white;
text-align: center;
}
.sous_titre_PA {
position: relative;
top: -0.5em;
z-index: 1;
font-family: 'Lobster', cursive;
font-size: 25px;
color: #000000;
text-shadow: 1px 1px 2px white;
text-align: center;
}
/* Blocs à fond rouge de la PA + couleur de leurs liens */
.bloc_PA {
background-color: #C7281A;
color: #801E15;
border-radius: 25px;
padding: 15px;
font-size: 11px;
position: relative;
top:-2em;
left: -1em;
text-align: justify !important;
}
.bloc_PA a {
color: #801E15 !important;
text-decoration: none !important;
}
/* Bloc spécial pour la navigation */
.bloc_PA_navig {
background-color: #C7281A;
color: #801E15;
border-radius: 20px;
padding-top: 15px;
padding-bottom: 15px;
font-size: 11px;
position: relative;
top:-2em;
left: -1em;
text-align: justify !important;
}
/* Liens de la navigation */
.bloc_PA_navig a {
text-decoration: none !important;
color: #FFFFFF !important;
}
/*Fond "normal" des liens */
#liens_navig a {
background-color: #C7281A;
display: block;
}
/* Fond des liens au survol */
#liens_navig a:hover {
background-color: #801E15;
display: block;
}
/* Info-bulles staff et vacants */
a.info{
position: relative;
z-index: 24;
color: #801E15;
text-decoration: none;
}
a.info:hover{
z-index: 25;
}
a.info span{
display: none;
}
a.info:hover span{
display: block;
position: absolute;
top: -8em;
right: -10em;
width: 100px;
height: 200px;
border-radius: 25px;
overflow: auto;
background-color: #C7281A;
text-align: center;
font-weight: none;
padding: 5px;
}
/* Forme ronde images du staff et des vacants */
.imgstaff {
border-radius: 80%;
}
.imgstaff:hover {
border-radius: 80%;
}
/* Info-bulles Evènements */
a.events{
position: relative;
z-index: 24;
color: #801E15;
text-decoration: none;
}
a.events:hover{
z-index: 25;
}
a.events span{
display: none;
}
a.events:hover span{
display: block;
position: absolute;
top: -8em;
right: -10em;
width: 200px;
height: 60px;
overflow: auto;
border-radius: 25px;
overflow: auto;
background-color: #C7281A;
text-align: center;
font-weight: none;
padding: 5px;
}
/* Forme des images évènements */
.imgevents {
border-radius: 25px;
}
/*----------------- Fin Page d'Accueil ----------------- */
/*----------------------------------------- qeel ---------------------------------------------- */
/* Fond du QEEL */
.fond_qeel {
background-color: #801E15;
width: 700px;
border-radius: 25px;
padding: 25px;
position: relative;
top: -7em;
z-index: 1;
}
/* Mise en forme des blocs du QEEL */
.bloc_qeel {
background-color: #C7281A;
color: #801E15;
text-align: center;
border-radius: 25px;
padding: 15px;
font-size: 11px;
position: relative;
top:-2em;
}
/*** SYSTEME D'ONGLETS ***/
.qeelonglet {
padding-left: 10px;
padding-right: 10px;
font-family: 'Lobster', cursive;
font-size: 15px;
display: block;
}
.qeelonglet_0 {
}
.qeelonglet_1 {
}
.contenu_qeelonglet {
padding: 25px;
display: none;
width: 320px;
height: 45px;
overflow: auto;
border-radius: 25px;
position: relative;
left: -1.5em;
text-align: justify;
}
.contenu_qeelonglet a{
text-decoration: none !important;
}
/*----------------- Fin qeel ----------------- */
/*----------------- Mise en forme sujets ----------------- */
.t-title h1 { color:#ffffff; /* couleur titre de sujet */
}
.catBottom td a { color:#ffffff; /* couleur liens bas sujet */
}
.postdetails.poster-profile a img { /* avatars */
border-radius: 0px ; -webkit-border-radius: 0px ; -moz-border-radius: 0px ;
border: 0px solid #1F1515;
}
.nom { /* pseudos (couplé aux templates) */
font-family: \'Montez\', cursive; !important;
font-size:28px !important;
}
u{ border-bottom: 1px double; border-color:#5E5E5E; }
a:hover{text-transform:uppercase;}
a { text-decoration: none; }
a:link { text-decoration: none; }
.postbody { color: #5e5c5c;
text-align:justify;
margin:10px;} /* le corps de texte */
input,textarea, select { /* zone de texte et boutons */
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
padding-left: 4px;
border:0px solid #4F4D4D;
border-top: 3px solid #4F4D4D;
border-bottom : 1px solid #4F4D4D;
}
.selectCode { /* bouton selection code */
float:right;
font-family: \'Merriweather\';
text-transform: uppercase;
font-size: 8px;
color:#555555;
cursor:pointer;
}
.quote, .code
{ background-color:#ffffff !important;
text-align: justify;
box-shadow: 0px 0px 2px #000000;
-o-box-shadow: 0px 0px 2px #000000;
-htm-box-shadow: 0px 0px 2px #000000;
-webkit-box-shadow: 0px 0px 2px #000000;
-moz-box-shadow: 0px 0px 2px #000000;
padding:2px;}
.quote, .code,
{ padding-left:5px;}
/*----------------- Fin Mise en forme sujets ----------------- */
/* ---------------------------Cadre autour des messages par Alu' pour Never-Utopia ---------------------*/
.profilmembre, .infoprofil, .imageavatar {
height: 320px;/*hauteur de l'avatar*/
width: 200px;/*largeur de l'avatar*/
}
.rangée .thRight, .infoprofil, .nomavatar, .rangée .thLeft, .basviolet .browse-arrows{
font-family: Voltaire; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
}
.basviolet, .postviolet{ background-color:#C7281A;}/*couleur de fond des messages*/
.imageavatar{
background-image: url(http://image.noelshack.com/fichiers/2016/13/1459433187-test-1.png);
/*image par-dessus l'avatar, laisser vide pour l'enlever*/
position:absolute;
top:0;
left:0;
z-index:3;
}
.infoprofil {
background-image:url(/* Url ici */);
/*image de fond des infos du profil, laisser vide pour l'enlever*/
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
padding:15px;
font-size: 13px;
color:#801E15;
z-index:0;
overflow: auto;
}
.nomavatar{
background-image:url(http://nsa33.casimages.com/img/2014/11/30//141130070245722186.png);/*image de fond du pseudo*/
height:61px;/*largeur de l'image de fond*/
width: 208px;/*hauteur de l'image de fond*/
color:#801E15;/*couleur du texte du rang*/
text-transform:uppercase !important;/*rang en majuscules*/
font-size: 18px;
line-height:110%;
text-align:center;
position:relative;
padding-top:20px;
margin-top: -25px;
z-index: 3;
}
.fondpost{
border: 3px solid #FFFFFF;/*bordures fines autour du message*/
border-radius:20px;/*arrondi*/
padding: 15px;
min-height: 325px;
margin: 10px 30px auto 30px;
}
.profilmembre {
border: 5px solid #5E5C5C;/*bordures autour de l'avatar*/
position:relative;
margin: 10px 0;
}
.rangée{
background-color:#801E15;/*couleur de fond de la ligne "auteur-message"*/
border-radius:20px 20px 0 0;/*arrondis*/
display:block;
margin-top:15px;
}
.rangée .thRight{
color:#FFFFFF;/*couleur du texte "message"*/
font-size: 15px;
font-weight:bold;
display:block;
margin-left:255px;
padding-top:7px;
height:19px;
}
.rangée .thLeft, .basviolet .browse-arrows{
color:#FFFFFF;/*couleur du texte "auteur"*/
font-size: 15px;
font-weight:bold;
display:block;
float:left;
width:255px;
padding-top:7px;
height:19px;
}
.basviolet{
border:5px solid #801E15;/*bordures de la partie basse du message*/
display:block;
border-radius:0 0 20px 20px;
border-top:none;
margin-bottom:30px;
}
.postviolet{
border-left:5px solid #801E15;/*bordures de la partie centrale du message*/
border-right:5px solid #801E15;
display:block;
}
.postviolet .postdetails {display:none;}/*enlève la date et l'heure du sujet*/
.postviolet .post-options{padding-right:30px;}
.avatar img: {width:100%; height: 100%;}/*redimensionne les avatars à la bonne taille*/
.pseudo {display:block;font-size:25px; /*taille du pseudo*/font-variant:small-caps;text-transform:none;}
th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop { border:none;font-weight:normal;}
.profilmembre:hover > .avatars {/*ne pas modifier*/
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
z-index:1;
}
.avatars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:2;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
}
/* ------------------ Libre service bloc de connexion rapide verte - NEVER UTOPIA -------------------------/
/* Bloc qui entoure tout */
.cnxl-bloc {
margin: 20px auto;
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 15px;
color: #484848;
}
/* Aligner les 3 blocs */
.cnxl-submit-bloc,
.cnxl-inscription,
.cnxl-input-bloc {
display: inline-block;
vertical-align: middle;
}
/* Style commun pour tous les champs */
.cnxl-form input {
padding: 10px;
border: none;
font-family: inherit;
font-size: 15px;
outline: none;
}
/*
* Décoration à gauche
* Inscription
*/
.cnxl-inscription {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #E5DB84;
padding: 8px;
}
.cnxl-inscription img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/*
* Champs à remplir au centre
*/
.cnxl-input-bloc {
margin: 0 20px;
width: 200px;
border-radius: 5px;
box-shadow: 0 0 0 2px #E5DB84;
overflow: hidden;
padding: 0 5px; /* espace entre le bord et le trait des input */
background: #FFFFFF;
}
.cnxl-input-bloc input {
color: black;
box-sizing: border-box;
display: block;
width: 100%;
border-bottom: 1px solid #E5DB84; /* bordure entre les input */
box-shadow: 0 0 0 100px #ffffff inset; /* couleur de fond des input */
}
.cnxl-input-bloc input:last-of-type {
border: none;
}
/*
* Connexion à droite
*/
/* Bouton de connexion */
.cnxl-submit-bloc input {
background: #E5DB84;
border-radius: 3px;
cursor: pointer;
transition: all 300ms ease-out;
}
/* Bouton de connexion au survol */
.cnxl-submit-bloc input:hover {
background: #ede390;
}
/*
* Zone en bas
*/
.cnxl-form label {
cursor: pointer;
}
/* Liens (Mot de passe oublié) */
.cnxl-bloc a {
font-size: 10px;
text-decoration: none!important;
color: #766e6e;
text-decoration: none;
transition: all 300ms ease-out;
}
/* Liens au survol (Mot de passe oublié) */
.cnxl-bloc a:hover {
color: #a79d46;
}
/*----------------- Fin libre service Connexion rapide verte - Never Utopia ------------*/
Voilà voilà ! J'espère qu'il ne manque rien, merci à vous ! Je reste présente pour vous répondre si vous avez des questions ou s'il manque des choses. Et j'vais aller faire un tour des forums voir si je peux pas aidée à mon tour
Dernière édition par Fiery Aura le Ven 1 Avr 2016 - 17:15, édité 4 fois (Raison : Résolution de l'un des problèmes/Mise à jour template/CSS)