Mar 19 Avr - 7:18 | OLBACE - BLACK OR WHITE Remplacer le code du QEEL [lignes 173 à 221 du template index_body] par celui-ci :- Spoiler:
- Code:
-
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css"> <!-- BEGIN disable_viewonline --> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr><td><div class="QEEL"><!-- 24H --><div class="dayQEEL"><!-- TITRE 24H --><div class="tleDAY"></div><table>{L_CONNECTED_MEMBERS}</table></div><div class="boxQEEL"><!-- IMAGE --><img src="{L_ONLINE_IMG}" id="imgQEEL" /><!-- DESCRIPTIFS GROUPES --><script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script><div class="contenu_onglets"> <script type="text/javascript"> //<!-- var anc_onglet = 'eins'; change_onglet(anc_onglet); //--> </script> <!-- CONTENU GROUPE 1 --><div class="contenu_onglet" id="contenu_onglet_eins"><!-- NOM --><div style="color:#bf51b2">Les démons</div><p>Contenu groupe 1.</p></div><!-- CONTENU GROUPE 2 --><div class="contenu_onglet" id="contenu_onglet_zwei"><!-- NOM --><div style="color:#f0cc7e">Les humains</div><p>Contenu groupe 2.</p></div><!-- CONTENU GROUPE 3 --><div class="contenu_onglet" id="contenu_onglet_drei"><!-- NOM --><div style="color:#99e2fb">Les anges</div><p>Contenu groupe 3.</p></div>
</div><!-- TITRE --><div class="tleQEEL"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><img src="http://image.noelshack.com/fichiers/2016/15/1460773504-ilssont.png" /></a></div><!-- MEMBRES CONNECTES --><div class="onlineQEEL"><!-- STATISTIQUES --><div class="stsQEEL">{TOTAL_USERS}. {TOTAL_POSTS}. {NEWEST_USER}</div><table>{LOGGED_IN_USER_LIST}</table></div></div>
<!-- GROUPES --><div class="GQEEL"><div class="onglets"><!-- GROUPE 1 --><span class="onglet_0 onglet" id="onglet_eins" onmouseover="javascript:change_onglet('eins');" style="background:#bf51b2;">Démons</span><!-- GROUPE 2 --><span class="onglet_0 onglet" id="onglet_zwei" onmouseover="javascript:change_onglet('zwei');" style="background:#f0cc7e;">Humains</span><!-- GROUPE 3 --><span class="onglet_0 onglet" id="onglet_drei" onmouseover="javascript:change_onglet('drei');" style="background:#99e2fb;">Anges</span> </div></div>
</div></td></tr></table> <!-- END disable_viewonline --> Partie CSS : - Code:
-
/* QEEL */ .QEEL { margin:auto; width:850px; padding-top:30px; text-align:center; background-image:url(http://image.noelshack.com/fichiers/2016/15/1460773369-brush.png); background-position:bottom left; /* MODIFIABLE */ background-repeat:no-repeat; } /* TITRE 24H QEEL */ .tleDAY { position:absolute; margin-top:-65px; margin-left:-25px; width:267px; height:72px; background:url(http://image.noelshack.com/fichiers/2016/15/1460773504-ilsetaient.png); /* MODIFIABLE */ } /* 24H QEEL */ .dayQEEL { display:inline-block; vertical-align:top; width:275px; height:450px; padding:5px; overflow:auto; border:1px solid #bf51b2; /* MODIFIABLE */ font-size:10px; text-align:justify; } .dayQEEL .row1 { padding:0 !important; background:none !important; } /* COULEUR TEXTE 24H */ .dayQEEL .gensmall { color:#bf51b2; /* MODIFIABLE */ } /* BLOC IMAGE / DESCRIPTIONS GROUPES / MEMBRES CONNECTES */ .boxQEEL { display:inline-block; vertical-align:bottom; margin-left:25px; text-align:center; } /* IMAGE QEEL */ #imgQEEL { width:325px; height:325px; border-radius:350px; } /* BLOC DESCRIPTION GROUPE QEEL */ .contenu_onglet { display:none; position:absolute; margin-top:-310px; margin-left:70px; width:300px; height:270px; padding-top:30px; overflow:auto; border-radius:300px; background-color:rgba(250,250,250,0.5); /* MODIFIABLE */ font-size:10px; text-align:justify; } /* NOM GROUPE DESCRIPTION GROUPE QEEL */ .contenu_onglet div { margin-bottom:15px; height:35px; text-align:center; text-transform:uppercase; font-family:Roboto; font-size:32px; } /* DESCRIPTION GROUPE */ .contenu_onglet p { margin:auto; width:200px; height:160px; overflow:auto; font-size:10px; text-align:justify; color:#bf51b2; /* MODIFIABLE */ } /* TITRE MEMBRES CONNECTES */ .tleQEEL { position:absolute; margin-top:-55px; margin-left:-5px; } /* STATISTIQUES QEEL */ .stsQEEL { margin-bottom:10px; } /* MEMBRES CONNECTES QEEL */ .onlineQEEL { margin-top:5px; width:430px; height:120px; padding:5px; overflow:auto; color:#bf51b2; border:1px solid #bf51b2; /* MODIFIABLE */ font-size:10px; text-align:justify; } /* BLOC GROUPES QEEL */ .GQEEL { margin-top:15px; width:850px; text-align:center; } /* NOM DU GROUPE QEEL */ .onglet { display:inline-block; margin:0 10px; padding:5px 10px; text-align:center; text-transform:uppercase; font-family:Roboto; font-size:24px; color:white; /* MODIFIABLE */ transition:all 0.45s linear; -webkit-transition:all 0.45s linear; } /* SURVOL NOM DU GROUPE QEEL */ .onglet_1 { box-shadow:0 0 3px rgba(0,0,0,0.1); /* MODIFIABLE */ } Instructions :YOGI NEMIOS - UNE CHOCO-FRAISE GEMINI DAIRIUN - Code:
-
<!-- INVENTAIRE --><div class="INV"><!-- INVENTAIRE GAUCHE - IMAGES EN 125*125 --><div class="lftINV"><!-- I --><div><img src="http://www.aht.li/2780126/125125.png" /><!-- CONTENU --><p>Texte</p></div><!-- II --><div><img src="http://www.aht.li/2780126/125125.png" /><!-- CONTENU ---><p>Texte</p></div><!-- III --><div><img src="http://www.aht.li/2780126/125125.png" /><!-- CONTENU --><p>Texte</p></div></div><!-- BLOC CENTRAL INVENTAIRE --><div class="mdlINV"><!-- IMAGE INVENTAIRE EN 200*100 --><div><img src="http://www.aht.li/2733637/200100.png" /><!-- CONTENU --><p>Texte</p></div><!-- IMAGE PERSONNAGE EN 200*300 --><img src="http://www.aht.li/2776411/200300.png" /></div><!-- INVENTAIRE DROITE - IMAGES EN 125*125 --><div class="rgtINV"><!-- I --><div><img src="http://www.aht.li/2780126/125125.png" /><!-- CONTENU --><p>Texte</p></div><!-- II --><div><img src="http://www.aht.li/2780126/125125.png" /><!-- CONTENU ---><p>Texte</p></div><!-- III --><div><img src="http://www.aht.li/2780126/125125.png" /><!-- CONTENU --><p>Texte</p></div></div><!-- TITRE / CITATION --><div class="tleINV">Titre / citation</div><!-- INFORMATIONS SUPPLEMENTAIRES --><div class="abtINV">Texte<div></div> Partie CSS : Affichage > Images et Couleurs > Couleurs > Feuille de style CSS - Code:
-
/* INVENTAIRE */ .INV { margin:auto; width:500px; line-height:16px; } /* INVENTAIRE GAUCHE */ .lftINV { display:inline-block; vertical-align:bottom; } .lftINV div{ margin-top:10px; } .lftINV div img{ width:125px; height:125px; } /* CONTENUS INVENTAIRE GAUCHE */ .lftINV div p{ position:absolute; margin-top:-125px; width:115px; height:115px; padding:5px; overflow:auto; background:white; color:black; /* MODIFIABLE */ opacity:0; transition:all 0.55s; -webkit-transition:all 0.55s; } .lftINV div:hover p { opacity:1; } /* BLOC CENTRAL INVENTAIRE */ .mdlINV { display:inline-block; vertical-align:top; margin:0 25px; } .mdlINV div{ margin-bottom:10px; } .mdlINV div img{ width:200px; height:100px; } /* CONTENU BLOC CENTRAL INVENTAIRE */ .mdlINV div p{ position:absolute; margin-top:-100px; width:190px; height:90px; padding:5px; overflow:auto; background:white; color:black; /* MODIFIABLE */ opacity:0; transition:all 0.55s; -webkit-transition:all 0.55s; } .mdlINV div:hover p { opacity:1; } /* INVENTAIRE DROITE */ .rgtINV { display:inline-block; vertical-align:bottom; } .rgtINV div{ margin-top:10px; } .rgtINV div img{ width:125px; height:125px; } /* CONTENUS INVENTAIRE DROITE */ .rgtINV div p{ position:absolute; margin-top:-125px; width:115px; height:115px; padding:5px; overflow:auto; background:white; color:black; /* MODIFIABLE */ opacity:0; transition:all 0.55s; -webkit-transition:all 0.55s; } .rgtINV div:hover p { opacity:1; } /* TITRE */ .tleINV { margin:15px auto; text-align:center; font-size:24px; /* MODIFIABLE */ } /* INFORMATIONS SUPPLEMENTAIRES */ .abtINV { height:100px; /* MODIFIABLE */ padding:20px; overflow:auto; border-radius:25px; background:black; color:white; /* MODIFIABLE */ font-size:11px; text-align:justify; } LILY. - Code:
-
<meta charset="utf-8"><!-- SLIDE BY JSSOR --><script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/jquery-1113min.js"></script><script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/jssorslidermini.js"></script><script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/debug_slide.js"></script><link href="https://fonts.googleapis.com/css?family=Niconne" rel="stylesheet" type="text/css"><link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/PART_SLID.css" rel="stylesheet" type="text/css"><!-- PARTIE CSS PERMETTANT DE MODIFIER LA COULEUR DES LIENS & DES FLECHES --><style type="text/css">/* LIENS */.lksSLID a{color:white !important; font-family:Times New Roman !important;} /* FLECHE GAUCHE ET SON SURVOL */ .lftARW {color:black !important;} .lftARW:hover {color:grey !important;} /* FLECHE DROITE ET SON SURVOL */ .rgtARW {color:black !important;} .rgtARW:hover {color:grey !important;}</style><!-- FICHE PARTENARIAT - TOUTES COULEURS PERSONNALISABLES --><div class="SLID" style="background:grey;"><!-- CREDIT --><div class="cdtSLID"><a href="http://crushcrushcrush.actifforum.com/" target="_blank">Ʃkaemp はは ™</a></div><!-- BANNIERE DU FORUM - LARGEUR MINIMALE = 500PX - REDIMENSIONNEMENT AUTOMATIQUE --><div class="imgSLID"><img src="http://www.aht.li/2780127/500150.png" /></div><!-- 5 LIENS --><div class="lksSLID"><!-- I --><a href="" target="_blank">Lien</a><!-- II --><a href="" target="_blank">Lien</a><!-- III --><a href="" target="_blank">Lien</a><!-- IV --><a href="" target="_blank">Lien</a><!-- V --><a href="" target="_blank">Lien</a></div><!-- SLIDE STAFF - IMAGES EN 200*50 --><div class="sliSLID" style="background:#7DB6FC;"><div id="jssor_1"><div data-u="slides" style="position:relative; width:300px; height:100px; overflow:hidden;"><!-- I --><div data-p="225.00" style="display:none; color:black;"><!-- CONTENU --><img src="http://www.aht.li/2824974/20050.png" /><span>Pseudonyme</span><br/>Fonction</div><!-- II --><div data-p="225.00" style="display:none; color:black;"><!-- CONTENU --><img src="http://www.aht.li/2824974/20050.png" /><span>Pseudonyme</span><br/>Fonction</div><!-- III --><div data-p="225.00" style="display:none; color:black;"><!-- CONTENU --><img src="http://www.aht.li/2824974/20050.png" /><span>Pseudonyme</span><br/>Fonction</div></div><!-- FLECHES --><span data-u="arrowleft" class="lftARW">◄</span><span data-u="arrowright" class="rgtARW">►</span></div></div><br/><br/><!-- CONTEXTE --><div class="ctxtSLID" style="background:#7DB6FC; color:black; font-family:Times New Roman;">Contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte</div><!-- 6 PREDEFINIS - IMAGES EN 40*40 --><div class="pfSLID"><!-- 1 --><a href="" target="_blank"><img src="http://www.aht.li/2889364/4040C.png" /></a><!-- 2 --><a href="" target="_blank"><img src="http://www.aht.li/2889364/4040C.png" /></a><!-- 3 --><a href="" target="_blank"><img src="http://www.aht.li/2889364/4040C.png" /></a><!-- 4 --><a href="" target="_blank"><img src="http://www.aht.li/2889364/4040C.png" /></a><!-- 5 --><a href="" target="_blank"><img src="http://www.aht.li/2889364/4040C.png" /></a><!-- 6 --><a href="" target="_blank"><img src="http://www.aht.li/2889364/4040C.png" /></a></div><br/><br/><!-- JOIN US --><div class="joinSLID" style="color:black;">Nous rejoindre ?<!-- IMAGE --><a href="" target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a></div><!-- NOUVELLES --><div class="newsSLID" style="background:#7DB6FC; color:black; font-family:Times New Roman;"><b>- le 00/00/00 :</b> ...<br/><b>- le 00/00/00 :</b> ...<br/><b>- le 00/00/00 :</b> ...</div></div> I. Créer une nouvelle page html :II. Iframe à modifier [ Lien | Width | Height ] et communiquer : - Code:
-
<center><iframe src="lien" scrolling="no" style="width:525px; height:500px;" marginwidth="0" marginheight="0" frameborder="0"></iframe></center> Ajout de staff = ajout de : - Code:
-
<!-- ? --><div data-p="225.00" style="display:none; color:black;"><!-- CONTENU --><img src="http://www.aht.li/2824974/20050.png" /><span>Pseudonyme</span><br/>Fonction</div> MIA SAY'RI Message RP : - Code:
-
<link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/BOR_RP.css" rel="stylesheet" type="text/css"><!-- BOITE - TOUTES COULEURS PERSONNALISABLES --><div class="BOR"><!-- BLOC TITRE --><div id="tleBOR" style="background:#a3a3c7; color:white;"><!-- BORDURE TITRE --><div class="tleBOR" style="border-color:white;"><!-- TITRE --><div>Titre</div><!-- SOUS-TITRE --><span>sous-titre</span></div></div><!-- MESSAGE & BORDURE BAS --><div class="msgBOR" style="background:white; color:black; border-color:#a3a3c7;">Message.</div></div> Fiche prédéfinis : - Code:
-
<link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/PF_BOR.css" rel="stylesheet" type="text/css"><!-- FICHE --><div class="PFBOR"><!-- NOM PRENOM(S) - DISPONIBILITE --><div id="tlePFBOR"><div class="tlePFBOR"><!-- NOM PRENOM(S) --><div>NOM Prénom(s)</div><!-- DISPONIBILITE --><span>Disponible</span></div></div><!-- AVATAR / INFORMATIONS / HISTOIRE / ADJECTIFS --><div class="abtPFBOR"><!-- CREDIT --><a class="cdtPFBOR" href="http://crushcrushcrush.actifforum.com/" target="blank"><img src="http://www.aht.li/2456212/PUF.png" /></a><!-- AVATAR / PHYSIQUE / INFORMATIONS --><div class="fosPFBOR"><!-- IMAGE 200*320 --><img src="http://img15.hostingpics.net/pics/591509jeanne23.png" /><!-- INFORMATIONS / PHYSIQUE --><div><center>ft. personnage de <b>série/artiste</b></center><br/><b>Âge</b> : ...<br/><b>Métier/études</b> : ...<br/><b>Nationalité/origines</b> : ...<br/><b>Situation conjugale</b> : <i>Marié(e)/Célibataire/En couple/Divorcé(e)/Veuf(ve)</i><br/><b>Situation familiale</b> : <i>Fils(le) unique/(Demi-)frère(s)/(Demi-)soeur(s)</i><br/><b>Situation financière</b> : <i>Précaire/Moyenne/Aisée</i><br/><br/><!-- PHYSIQUE --><b>Carnation</b> : ...<br/><b>Taille</b> : ...<br/><b>Corpulence</b> : ...<br/><b>Cheveux</b> : <i>Longueur, couleur</i><br/><b>Yeux</b> : <i>Couleur</i><br/><b>Signe(s) distinctif(s)</b> : <i>Tatouage, tache de naissance, accessoire particulier, etc...</i></div></div><!-- HISTOIRE --><div class="storyPFBOR"><span>Histoire</span><!-- CONTENU -->Histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire histoire</div><!-- LISTE D'ADJECTIFS - PAS DE MAXIMUM --><div class="adjPFBOR"><div>adjectif</div><div>adjectif</div><div>adjectif</div><div>adjectif</div><div>adjectif</div><div>adjectif</div></div></div></div><!-- RELATION POTENTIELLE --><div class="rlPFBOR"><!-- IMAGE & NOM PRENOM --><div class="npPFBOR"><!-- IMAGE 100*100 --><img src="https://v.dreamwidth.org/5025007/1282274" /><!-- NOM PRENOM --><div>NOM<br/>Prénom</div></div><!-- DESCRIPTION --><div class="uniPFBOR"><!-- RELATION --><span>relation</span><!-- CONTENU --><p>Description</p></div></div> Ajout de relation potentielle = ajout de : - Code:
-
<!-- RELATION POTENTIELLE --><div class="rlPFBOR"><!-- IMAGE & NOM PRENOM --><div class="npPFBOR"><!-- IMAGE 100*100 --><img src="https://v.dreamwidth.org/5025007/1282274" /><!-- NOM PRENOM --><div>NOM<br/>Prénom</div></div><!-- DESCRIPTION --><div class="uniPFBOR"><!-- RELATION --><span>relation</span><!-- CONTENU --><p>Description</p></div></div> Partie CSS : - Code:
-
/* FICHE PREDEFINIS */ /* BLOC NOM PRENOM(S) & DISPONIBILITE */ #tlePFBOR { background:#a3a3c7 !important; color:white !important; } /* BORDURE NOM PRENOM(S) & DISPONIBILITE */ .tlePFBOR { border-color:white !important; } /* BLOC AVATAR / INFORMATIONS / HISTOIRE / ADJECTIFS */ .abtPFBOR { background:white !important; } /* INFORMATIONS & PHYSIQUE */ .fosPFBOR div{ background:rgba(250,250,250,0.7) !important; color:black !important; } /* TITRES INFORMATIONS & PHYSIQUE */ .fosPFBOR b{ color:#a3a3c7 !important; } /* BLOC HISTOIRE */ .storyPFBOR { background:#eae9eb !important; color:black !important; } /* TITRE HISTOIRE */ .storyPFBOR span{ border-bottom-color:#a3a3c7 !important; color:black !important; } /* BLOC ADJECTIFS */ .adjPFBOR { background:#eae9eb !important; } /* ADJECTIF */ .adjPFBOR div{ background:#a3a3c7 !important; color:white !important; } /* BLOC RELATION POTENTIELLE */ .rlPFBOR { background:white !important; } /* BORDURE NOM PRENOM RELATION POTENTIELLE */ .npPFBOR div{ border-color:white !important; } /* NOM PRENOM RELATION POTENTIELLE */ .npPFBOR:hover div { background:white !important; color:black !important; } /* BLOC DESCRIPTION RELATION POTENTIELLE */ .uniPFBOR { background:#eae9eb !important; } /* QUALIFICATION RELATION POTENTIELLE */ .uniPFBOR span{ border-bottom-color:#a3a3c7 !important; color:black !important; } /* DESCRIPTION RELATION POTENTIELLE */ .uniPFBOR p{ color:black !important; } Fiche groupe : - Code:
-
<!-- FICHE - TOUTES COULEURS PERSONNALISABLES --><div class="COMBOR"><!-- BLOC TITRE --><div id="tleCOMBOR" style="background:#a3a3c7; color:white;"><!-- BORDURE TITRE --><div class="tleCOMBOR" style="border-color:white;"><!-- TITRE --><div>Titre</div><!-- SOUS-TITRE --><span>sous-titre</span></div></div><!-- IMAGE / INFORMATIONS / CHEF DE CLAN / RELATIONS ENTRE CLANS / EFFECTIFS & BORDURE BAS --><div class="abtCOMBOR" style="background:white; border-color:#a3a3c7;"><!-- IMAGE --><div class="picCOMBOR"><!-- IMAGE 200*200 --><img src="" /></div><!-- DESCRIPTION --><div class="descCOMBOR">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div><!-- BLOC RANG CHEF DE CLAN --><div id="rankCOMBOR" style="background:#a3a3c7; color:white;"><!-- BORDURE RANG CHEF DE CLAN --><div class="rankCOMBOR" style="border-color:white;"><!-- IMAGE --><img src="http://img15.hostingpics.net/pics/529529iconcouronne.png" /><!-- RANG -->Reine<br/>d'Elwynn</div></div><!-- BLOC NOM CHEF DE CLAN --><div id="lksCOMBOR" style="background:#a3a3c7; color:white;"><!-- BORDURE NOM CHEF DE CLAN --><div class="lksCOMBOR" style="border-color:1px;">Pseudonyme<br/><!-- PROFIL & MP --><a href="" target="_blank">Profil</a> - <a href="" target="_blank">MP</a></div></div><!-- RELATIONS ENTRE CLANS --><div class="rlCOMBOR">- Nom : ...<br>- Nom : ...<br/>- Nom : ...</div><!-- EFFECTIFS --><div class="nbCOMBOR">Membres et grades</div></div></div> Partie CSS : - Code:
-
/* FICHE GROUPE */ .COMBOR { margin:auto; width:525px; line-height:16px; } /* TITRE */ #tleCOMBOR { padding:5px; } .tleCOMBOR { padding:5px; border:1px solid; text-align:center; text-transform:uppercase; } .tleCOMBOR div{ font-size:20px; } .tleCOMBOR span{ display:block; margin-top:2px; font-size:11px; } /* INFORMATIONS */ .abtCOMBOR { margin-top:10px; padding:20px 0; border-bottom:15px solid; text-align:center; } /* IMAGE */ .picCOMBOR { display:inline-block; vertical-align:top; margin-right:10px; width:220px; padding:10px 0; text-align:center; } .picCOMBOR img { width:200px; height:200px; border:1px solid white; } /* DESCRIPTION */ .descCOMBOR { display:inline-block; vertical-align:top; width:260px; height:240px; overflow:auto; } /* RANG */ #rankCOMBOR { display:inline-block; vertical-align:top; margin-right:10px; width:210px; height:45px; padding:5px; } .rankCOMBOR { padding:5px; border:1px solid; text-align:center; text-transform:uppercase; } .rankCOMBOR img{ float:left; } /* NOM CHEF DE CLAN */ #lksCOMBOR { display:inline-block; vertical-align:top; width:250px; height:45px; padding:5px; text-align:center; text-transform:uppercase; } .lksCOMBOR { padding:5px; border:1px solid; text-align:center; text-transform:uppercase; } .lksCOMBOR a{ text-decoration:none !important; font-size:14px; } /* RELATIONS CLANS */ .rlCOMBOR { margin:10px auto; width:490px; text-align:left; } /* EFFECTIFS */ .nbCOMBOR { margin:auto; width:490px; height:125px; overflow:auto; text-align:justify; } DYDOU SHINU - HARLEY QUINN BORA RYUUKO PAPYRUS Fiche contexte : - Code:
-
<!-- FICHE CONTEXTE --><div class="CTXT"><!-- BLOC TITRE & SOUS-TITRE --><div class="tleCTXT"><!-- TITRE -->Titre<!-- SOUS-TITRE --><span>sous-titre</span></div><!-- BLOC CONTENU CONTEXTE --><div class="msgCTXT"><!-- CONTENU --><p>Texte</p></div></div> Partie CSS : Affichage > Images et Couleurs > Couleurs > Feuille de style CSS - Code:
-
/* FICHE CONTEXTE */ .CTXT { margin:auto; width:500px; } /* BLOC TITRE & SOUS-TITRE */ .tleCTXT { margin-bottom:10px; padding:10px; background:skyblue; color:white; /* MODIFIABLE - FOND & COULEUR DU TEXTE */ text-align:center; font-size:24px; letter-spacing:1px; } /* SOUS-TITRE */ .tleCTXT span{ display:block; font-size:14px; } /* BLOC CONTENU CONTEXTE */ .msgCTXT { padding:10px; background:lightblue; /* MODIFIABLE - FOND */ } /* CONTENU CONTEXTE */ .msgCTXT p{ margin:0; padding:5px; background:white; color:black; /* MODIFIABLE - FOND & COULEUR DU TEXTE */ text-align:justify; } Fiche groupe : - Code:
-
<link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/COM_GRP.css" style="text/css" rel="stylesheet"><!-- FICHE GROUPE - TOUTES COULEURS PERSONNALISABLES --><div class="GRP"><!-- IMAGE 200*400 - VEILLER A LAISSER LA CLASS --><img class="imgGRP" src="..." /><!-- BLOC NOM & DESCRIPTION --><div class="boxGRP"><!-- NOM & RESUME --><div class="tleGRP" style="background:black; color:white;"><!-- NOM DU GROUPE --><span style="color:white; border-color:white;">Nom du groupe</span><!-- CITATION / RESUME --><p style="color:white;">Résumé du groupe.</p></div><!-- DESCRIPTION --><div class="msgGRP" style="background:white; color:black;">Description du groupe.</div></div><div> TRILLIAN SILVER BANSHEE. Fiche de relations : - Code:
-
<link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/RL_BOR.css" rel="stylesheet" type="text/css"><!-- PARTIE CSS PERMETTANT DE DETERMINER LES COULEURS DES ADJECTIFS --><style type="text/css">.adjRLBOR div {background:#a3a3c7 !important; color:black !important;}</style><!-- FICHE RL - TOUTES COULEURS PERSONNALISABLES --><div class="RLBOR"><!-- NOM PRENOM(S) - INFORMATIONS DIVERSES --><div id="tleRLBOR" style="background:#a3a3c7; color:white;"><!-- BORDURE --><div class="tleRLBOR" style="border-color:white;"><!-- NOM PRENOM(S) --><div>NOM Prénom(s)</div><!-- INFORMATIONS DIVERSES --><span>Âge - Occupation</span></div></div><!-- IMAGES --><div class="imgRLBOR" style="background:#dedede;"><!-- 200*100 --><img src="http://www.aht.li/2733637/200100.png" /><!-- 100*100 --><img src="http://www.aht.li/2838068/100100.png" /><!-- 200*100 --><img src="http://www.aht.li/2733637/200100.png" /></div><!-- BLOC A PROPOS --><div style="background:rgba(250,250,250,0.9);"><!-- CREDIT --><a class="cdtRLBOR" href="http://crushcrushcrush.actifforum.com/" target="blank"><img src="http://www.aht.li/2456212/PUF.png" /></a><div class="boxRLBOR"><!-- RESUME PERSONNAGE --><div class="youRLBOR" style="border-color:a3a3c7; color:black;">Résumé de l'histoire du personnage.</div><!-- LIENS RECHERCHES --><div class="seekRLBOR" style="border-color:#a3a3c7; color:black;"><b>▬ lien recherché</b> : description<br/><b>▬ lien recherché</b> : description<br/><b>▬ lien recherché</b> : description</div><!-- 2 LIENS --><a href="" target="_blank" style="background:#a3a3c7; color:white;">Présentation</a><!-- II --><a href="" target="_blank" style="background:#a3a3c7; color:white;">Répertoire RP</a></div><!-- 5 ADJECTIFS --><div class="adjRLBOR"><div>adjectif</div><div>adjectif</div><div>adjectif</div><div>adjectif</div><div>adjectif</div><!-- IMAGE 200*100 - REDIMENSIONNEMENT AUTOMATIQUE --><img src="http://www.aht.li/2733637/200100.png" /></div></div></div> Relations : - Code:
-
<link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/RL_BOR.css" rel="stylesheet" type="text/css"><!-- LIENS - TOUTES COULEURS PERSONNALISABLES --><div class="RLBOR"><!-- BLOC TITRE --><div id="tleRLBOR" style="background:#a3a3c7; color:white;"><!-- BORDURE --><div class="tleRLBOR" style="border-color:white;"><!-- TITRE --><div>Titre</div><!-- SOUS-TITRE --><span>sous-titre</span></div></div><!-- LIEN I --><div class="lksRLBOR" style="background:white;"><!-- IMAGE & NOM PRENOM --><div class="npRLBOR"><!-- IMAGE 100*100 --><img src="http://www.aht.li/2901991/100100BW.png" /><!-- NOM PRENOM --><div>NOM<br/>Prénom</div></div><!-- DESCRIPTION --><div class="descRLBOR" style="background:#eae9eb;"><!-- RELATION --><span style="border-color:#a3a3c7; color:black;">relation</span><!-- CONTENU --><p style="color:black;">Description</p></div></div><!-- CREDIT --><a class="cdtRLBOR" href="http://crushcrushcrush.actifforum.com/" target="blank"><img src="http://www.aht.li/2456212/PUF.png" /></a><!-- LIEN II --><div class="lksRLBOR" style="background:white;"><!-- IMAGE & NOM PRENOM --><div class="npRLBOR"><!-- IMAGE 100*100 --><img src="http://www.aht.li/2901991/100100BW.png" /><!-- NOM PRENOM --><div>NOM<br/>Prénom</div></div><!-- DESCRIPTION --><div class="descRLBOR" style="background:#eae9eb;"><!-- RELATION --><span style="border-color:#a3a3c7; color:black;">relation</span><!-- CONTENU --><p style="color:black;">Description</p></div></div><!-- LIEN III --><div class="lksRLBOR" style="background:white;"><!-- IMAGE & NOM PRENOM --><div class="npRLBOR"><!-- IMAGE 100*100 --><img src="http://www.aht.li/2901991/100100BW.png" /><!-- NOM PRENOM --><div>NOM<br/>Prénom</div></div><!-- DESCRIPTION --><div class="descRLBOR" style="background:#eae9eb;"><!-- RELATION --><span style="border-color:#a3a3c7; color:black;">relation</span><!-- CONTENU --><p style="color:black;">Description</p></div></div></div> Répertoire : - Code:
-
<link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/RL_BOR.css" rel="stylesheet" type="text/css"><!-- REPERTOIRE - TOUTES COULEURS PERSONNALISABLES --><div class="RLBOR"><!-- NOM PRENOM(S) - INFORMATIONS DIVERSES --><div id="tleRLBOR" style="background:#a3a3c7; color:white;"><!-- BORDURE --><div class="tleRLBOR" style="border-color:white;"><!-- NOM PRENOM(S) --><div>NOM Prénom(s)</div><!-- INFORMATIONS DIVERSES --><span>Âge - Occupation</span></div></div><!-- IMAGES --><div class="imgRLBOR" style="background:#dedede;"><!-- 200*100 --><img src="http://www.aht.li/2733637/200100.png" /><!-- 100*100 --><img src="http://www.aht.li/2838068/100100.png" /><!-- 200*100 --><img src="http://www.aht.li/2733637/200100.png" /></div><!-- BLOC LISTE RPs --><div style="background:rgba(250,250,250,0.9);"><!-- CREDIT --><a class="cdtRLBOR" href="http://crushcrushcrush.actifforum.com/" target="blank"><img src="http://www.aht.li/2456212/PUF.png" /></a><!-- LISTE RPs --><div class="listRLBOR" style="border-color:a3a3c7;"><!-- EN COURS --><span style="color:#a3a3c7;">En cours</span><!-- CONTENU --><a href="" target="_blank">titre du rp</a> ft. ...<br/><a href="" target="_blank">titre du rp</a> ft. ...<!-- EN ATTENTE --><span style="color:#a3a3c7;">Envisagés</span><!-- CONTENU --><a href="" target="_blank">titre du rp</a> ft. ...<!-- TERMINES --><span style="color:#a3a3c7;">Terminés</span><!-- CONTENU --><a href="" target="_blank">titre du rp</a> ft. ...</div><!-- 5 ADJECTIFS --><div class="adjRLBOR"><div>adjectif</div><div>adjectif</div><div>adjectif</div><div>adjectif</div><div>adjectif</div><!-- IMAGE 200*100 - REDIMENSIONNEMENT AUTOMATIQUE --><img src="http://www.aht.li/2733637/200100.png" /></div></div></div> GEMINI BATTLEFRONT Remplacer l'intégralité du template index_box par : - Code:
-
<link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet" type="text/css"> <table width="800px" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall">{LAST_VISIT_DATE}<br /> {CURRENT_TIME}<br /> </span> <!-- END switch_user_logged_in --> <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom"> <!-- BEGIN switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br /> <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br /> <!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table> <!-- BEGIN catrow --><!-- BEGIN tablehead --> <div class="tleCAT">{catrow.tablehead.L_FORUM}</div> <!-- END tablehead -->
<!-- BEGIN cathead --> <!-- END cathead --> <!-- BEGIN forumrow --> <div class="FRM"><div class="boxFRM"><div class="blocFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div><div class="lmsgFRM"><div class="nbFRM">{catrow.forumrow.TOPICS} sujets ▼ {catrow.forumrow.POSTS} messages</div>{catrow.forumrow.LAST_POST}<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /></div></div> <!-- END forumrow --> <!-- BEGIN catfoot --> <!-- END catfoot --> <!-- BEGIN tablefoot --> <!-- END tablefoot --><!-- END catrow --> Partie CSS : - Code:
-
/* TITRE CATEGORIE */ .tleCAT{ margin:5px auto; width:800px; padding:10px 0; text-align:center; background:black; /* MODIFIABLE */ } .tleCAT h2{ margin:0; font-size:32px; text-transform:uppercase; letter-spacing:3px; font-family:Megrim; color:white; /* MODIFIABLE */ } /* BLOC FORUM */ .FRM { margin:auto; margin-bottom:15px; width:800px; } /* BLOC TITRE / DESCRIPTION & SOUS-FORUMS */ .boxFRM { display:inline-block; vertical-align:top; width:580px; height:110px; padding:10px; border:1px solid; border-color:#5e0409; /* MODIFIABLE */ } /* BLOC TITRE & DESCRIPTION */ .blocFRM{ display:inline-block; vertical-align:top; } /* TITRE FORUM */ .tleFRM { margin-bottom:5px; width:370px; height:20px; text-transform:uppercase; text-align:left; } .tleFRM a{ color:white !important; font-family:Megrim; /* MODIFIABLE */ } /* DESCRIPTION FORUM */ .descFRM { width:360px; height:75px; padding:5px; overflow:auto; font-size:12px; text-align:justify; font-family:Megrim; background:#0d0101; color:white; /* MODIFIABLE */ } /* SOUS-FORUMS */ .sfFRM { display:inline-block; vertical-align:top; margin-left:15px; width:195px; height:110px; overflow:auto; font-family:Megrim; text-transform:uppercase; text-align:center; line-height:6px; } /* LIEN SOUS-FORUMS */ .sfFRM a{ display:block; width:100% !important; padding:5px 0; line-height:16px; background:#0d0101; color:white !important; font-size:16px; /* MODIFIABLE */ transition:all 0.55s; -webkit-transition:all 0.55s; } /* SURVOL LIEN SOUS-FORUMS */ .sfFRM a:hover { color:red !important; /* MODIFIABLE */ } /* DERNIER MESSAGE FORUM */ .lmsgFRM { display:inline-block; vertical-align:top; margin-left:10px; width:175px; height:123px; padding:7px 5px 0; border:1px solid; text-align:center; font-size:14px; font-family:Megrim; border-color:#5e0409; color:white; /* MODIFIABLE */ } /* NOMBRE SUJETS ET MESSAGES FORUM */ .nbFRM { margin-bottom:5px; font-size:12px; text-transform:uppercase; color:white; /* MODIFIABLE */ } /* ICÔNES FORUM */ .imgFRM{ margin-top:5px; width:165px; height:40px; } Taille des icônes du forum : 165*40MISSDREAM Remplacer l'intégralité du template index_box par : - Code:
-
<table width="800px" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall">{LAST_VISIT_DATE}<br /> {CURRENT_TIME}<br /> </span> <!-- END switch_user_logged_in --> <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom"> <!-- BEGIN switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br /> <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br /> <!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table> <!-- BEGIN catrow --><!-- BEGIN tablehead --> <div class="tleCAT">{catrow.tablehead.L_FORUM}</div> <div class="mdlCAT"> <!-- END tablehead -->
<!-- BEGIN cathead --> <!-- END cathead --> <!-- BEGIN forumrow --> <div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><div class="nbFRM">{catrow.forumrow.TOPICS} sujets ▼ {catrow.forumrow.POSTS} messages</div></div><br/><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="lmsgFRM"><div id="avaFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>{catrow.forumrow.LAST_POST}</div><br/><div class="sfFRM"><div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><span>sous-forums</span></div></div> <!-- END forumrow --> <!-- BEGIN catfoot --> <!-- END catfoot --> <!-- BEGIN tablefoot --> </div><div class="btmCAT"></div> <!-- END tablefoot --><!-- END catrow --> Partie CSS : - Code:
-
/* HAUT CATEGORIE */ .tleCAT{ margin:5px auto 0; width:800px; height:175px; text-align:center; background:url(http://i86.servimg.com/u/f86/19/05/86/76/haut_d10.png); /* MODIFIABLE */ } /* TITRE CATEGORIE */ .tleCAT h2{ padding-top:120px; font-size:32px; text-transform:uppercase; letter-spacing:3px; color:white; /* MODIFIABLE */ } /* BLOC CATEGORIE */ .mdlCAT { margin:auto; width:800px; padding:10px 0 5px; background:lightgrey; /* MODIFIABLE */ } /* BAS CATEGORIE */ .btmCAT { margin-top:0; width:800px; height:100px; background:url(http://i86.servimg.com/u/f86/19/05/86/76/bas_de10.png); /* MODIFIABLE */ } /* BLOC FORUM */ .FRM { margin:auto; margin-bottom:15px; width:800px; text-align:center; } /* TITRE FORUM */ .tleFRM { display:inline-block; vertical-align:top; margin-bottom:5px; width:580px; padding-left:130px; text-transform:uppercase; text-align:left; } .tleFRM a{ color:black !important; /* MODIFIABLE */ transition:all 1.25s; -webkit-transition:all 1.25s; } /* SURVOL TITRE FORUM */ .tleFRM a:hover { color:red !important; /* MODIFIABLE */ } /* NOMBRE SUJETS & MESSAGES FORUM */ .nbFRM { display:inline-block; vertical-align:top; margin-left:10px; padding-top:3px; font-size:12px; text-transform:uppercase; color:darkgrey; /* MODIFIABLE */ } /* ICÔNES FORUM */ .imgFRM{ display:inline-block; vertical-align:bottom; width:90px; height:90px; border-radius:10px; box-shadow:0 0 5px white; /* MODIFIABLE */ } /* DESCRIPTION FORUM */ .descFRM { display:inline-block; vertical-align:top; margin:0 20px; width:360px; height:80px; padding:5px; overflow:auto; font-size:12px; text-align:justify; border-radius:10px; box-shadow:0 0 5px white; background:#191919; color:white; /* MODIFIABLE */ } /* AVATAR DERNIER POSTEUR FORUM */ #avaFRM { position:absolute; margin-left:155px; margin-top:-15px; width:45px; height:70px; overflow:hidden; border-radius:100px 25px/25px 100px; } #avaFRM img { width:50px; } /* DERNIER MESSAGE FORUM */ .lmsgFRM { display:inline-block; vertical-align:top; margin-left:10px; width:175px; height:80px; padding:10px 5px 0; text-align:center; font-size:14px; text-transform:uppercase; border-radius:10px; box-shadow:0 0 5px white; background:#191919; color:white; /* MODIFIABLE */ } /* SOUS-FORUMS */ .sfFRM { margin-left:165px; } .sfFRM span { display:block; width:150px; padding:5px; border-radius:0 0 10px 10px; font-size:11px; text-transform:uppercase; background:grey; color:white; /* MODIFIABLE */ } .sfFRM:hover div{ width:355px; height:30px; padding:5px; overflow:auto; } /* CONTENU SOUS-FORUMS */ .sfFRM div{ width:365px; height:0; overflow:auto; border-radius:0 0 10px 0; text-transform:uppercase; text-align:center; font-size:10px; background:grey; color:white; /* MODIFIABLE */ transition:all 0.75s; -webkit-transition:all 0.75s; } /* LIEN SOUS-FORUMS */ .sfFRM a{ color:white !important; /* MODIFIABLE */ } ECLEASYA |
|