Rajouter un cadre autour d'une 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 • Partagez
Rajouter un cadre autour d'une QEEL
Détails techniques
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 20/12/2016
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour à tous,
je viens vers vous afin d'essayer de régler mon soucis si vous souhaitez bien m'aider.
En effet j'ai personnalisé un QEEL préfait et j'aimerai rajouter des cadres autour de celui-ci et à l'intérieur. J'ai eu beau tourner pendant des heures je n'arrive pas à le faire :'(
J'aimerai donc pouvoir ajouter deux cadres:
cadre 1 (qui encadre tout le QEEL (voir schéma ci-dessous))=
cadre 2 (qui entoure une partie du QEEL à l'intérieur (voir schéma ci-dessous)):
Voici mon QEEL actuel:
Voici le Qeel que j'aimerai obtenir à la fin:
Voici mon CSS :
- Code:
/* -------------------------------- QEEL -------------------------------- */
.fond_qeel {
width: 830px;
background-image: url('http://image.noelshack.com/fichiers/2016/51/1482192703-tst.png');
margin: auto;
height: 450px;
position: relative;
}
/*** MISE EN FORME TITRE PRINCIPAL ***/
.titre_principal {
color: #AA0000;
font-family: georgia;
font-size: 28;
letter-spacing: 5px;
text-align: center;
}
/*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/
.titre_secondaire {
color: #C7BBC1;
font-family: georgia;
font-size: 14px;
text-align: center;
}
/*** MISE EN FORME BLOC STATISTIQUES ***/
.bloc_stat {
background-color: #F0F0F0;
padding: 15px;
width: 200px;
height: 150px;
overflow: auto;
font-size: 11px;
border: 2px solid #CACACA;
text-align: justify;
color: #515151;
position: absolute;
left: 3em;
z-index: 1;
}
/*** MISE EN FORME BLOC DES GROUPES ***/
.bloc_groupes {
background-color: #F0F0F0;
padding: 15px;
width: 420px;
height: 50px;
overflow: auto;
font-size: 20px;
border: 2px solid #CACACA;
text-align: center;
font-family: 'Six Caps', sans-serif;
position: absolute;
left: 14.5em;
z-index: 1;
}
/*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/
.bloc_connectes {
background-color: #F0F0F0;
padding: 15px;
width: 420px;
height: 50px;
overflow: auto;
font-size: 20px;
border: 2px solid #CACACA;
text-align: center;
font-family: 'Six Caps', sans-serif;
position: absolute;
left: 14.5em;
z-index: 1;
}
/*** MISE EN FORME BLOC DES PARTENAIRES ***/
.bloc_partenaires {
background-color: #F0F0F0;
padding: 20px;
width: 420px;
height: 70px;
overflow: auto;
font-size: 20px;
border: 2px solid #CACACA;
text-align: center;
font-family: 'Six Caps', sans-serif;
position: absolute;
left: 14.5em;
z-index: 1;
}
/*** MISE EN FORME BLOC DES PARTENAIRES ***/
.bloc_partenaires {
background-color: #F0F0F0;
padding: 10px;
width: 686px;
height: 70px;
overflow: auto;
font-size: 20px;
border: 2px solid #CACACA;
text-align: center;
font-family: 'Six Caps', sans-serif;
position: absolute;
bottom: 22px;
left: 34px;
z-index: 1;
}
/*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/
#kaboum .row1 {
background-color : transparent;
}
#kaboum span.gensmall {
color: #515151;
}
/*** MISE EN FORME DES TITRES (simple + survol) ***/
.titre_bloc {
font-family: 'Dancing Script', cursive;
font-size: 24px;
font-weight: bold;
color: #AA0000;
position: absolute;
z-index: 2;
margin-top: -18px;
}
/*** TITRE PARTENAIRES ***/
.titre_partenaires {
font-family: 'Dancing Script', cursive;
font-size: 24px;
font-weight: bold;
color: #AA0000;
position: absolute;
z-index: 2;
bottom: 105px;
left: 54px;
}
.titre_bloc:hover {
color: #420404;
}
.titre_partenaires:hover {
color: #420404;
}
/*** GROUPES A ONGLETS ***/
/* Mise en forme des noms de groupe */
.groupe_onglet {
display: inline-block;
padding: 10px;
}
/* Mise en forme du bloc en transparence de description */
.contenu_groupe_onglet {
padding: 15px;
display: none;
width: 315px;
height: 115px;
overflow: auto;
font-size: 11px;
color: #414141;
text-align: justify;
background-color: #CBC4C2;
position: absolute;
top: 14em;
left: 21em;
filter: alpha(opacity = 50);
opacity: 0.5;
}
.testcadre {
margin-top:-30px
}
.fond_deux {
-moz-border-image: url(http://i.imgur.com/VgBIVUc.png) 8 round;
-o-border-image: url(http://i.imgur.com/VgBIVUc.png) 8 round;
-webkit-border-image: url(http://i.imgur.com/VgBIVUc.png) 8 round;
background-image: url(http://image.noelshack.com/fichiers/2015/26/1435089036-1.png);
border-image: url(http://i.imgur.com/VgBIVUc.png) 8 fill round;
border-style: solid;
border-width: 8px;
height: 310px}
.cadre_prem {
-moz-border-image: url(http://i.imgur.com/PAjd5wl.png) 9 repeat;
-o-border-image: url(http://i.imgur.com/PAjd5wl.png) 9 repeat;
-webkit-border-image: url(http://i.imgur.com/PAjd5wl.png) 9 repeat;
background-image: url(http://i.imgur.com/G1BMZj9.png);
background-position-x: 363px;
background-position-y: 300px;
border-image: url(http://i.imgur.com/PAjd5wl.png) 9 fill repeat;
border-style: solid;
border-width: 9px;
box-shadow: 0 0 5px #000;
padding-bottom: 15px
}
/* -------------------------------- FIN QEEL -------------------------------- */
Voici mon template index_body:
- Code:
<!-- BEGIN disable_viewonline -->
<link href='http://fonts.googleapis.com/css?family=Dancing+Script|Six+Caps' rel='stylesheet' type='text/css'>
<div class="cadreprem">
<div class="fond_qeel"><br /><br /><div class="titre_principal">QUI EST EN LIGNE ?</div>
<br />
<br /><br />
<br />
<div class="titre_bloc" style="left: 2.5em;">Statistiques</div>
<div class="bloc_stat">{TOTAL_POSTS}.<br />{TOTAL_USERS}.<br />
{NEWEST_USER}.<br />
{TOTAL_USERS_ONLINE}<br /><br />{LOGGED_IN_USER_LIST}</div>
<div class="titre_bloc" style="left: 13em;">Groupes</div>
<div class="bloc_groupes"><div class="groupe_onglets">
<span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_protecteurs" onmouseover="javascript:change_groupe_onglet('protecteurs');"><font color=#123D18>NG1</font></span>
<span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_trucs" onmouseover="javascript:change_groupe_onglet('trucs');"><font color=#776B2B>NG2</font></span>
<span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_dissidents" onmouseover="javascript:change_groupe_onglet('dissidents');"><font color=#772F2B>NG3</font></span>
<span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_civils" onmouseover="javascript:change_groupe_onglet('civils');"><font color=#3B133B>NG4</font></span>
<span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_gardiens" onmouseover="javascript:change_groupe_onglet('gardiens');"><font color=#2B3077>NG5</font></span>
</div></div><br /><br /><br /><br /><br />
<div class="titre_bloc" style="left: 13em;">Périgrination</div>
<div class="bloc_connectes"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div>
<div class="titre_partenaires">Partenaires</div>
<div class="bloc_partenaires"><table>Test</table></div>
</div></div>
<!-- END disable_viewonline -->
J'espère que vous saurez gentiment apporter réponses à mes problèmes
En vous souhaitant de bonnes fêtes de fin d'année et en vous remerciant d'avance,
Dernière édition par Unleash le Mar 20 Déc 2016 - 4:03, édité 1 fois
Re: Rajouter un cadre autour d'une QEEL
Résolu tout seul j'ai réussi finalement j'y ai passé du temps mais j'ai réussi x)
Sujets similaires
» Arrondir les avatars des membres et rajouter une bordure autour
» Rajouter une image QEEL
» QEEL rajouter les gens sur la chatbox
» Cadre autour des avatars
» Cadre autour de la PA
» Rajouter une image QEEL
» QEEL rajouter les gens sur la chatbox
» Cadre autour des avatars
» Cadre autour de la PA
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