Messages : 33
Age : 26
Date d'inscription : 18/05/2017
Cheshire Cat
Admin
# Design 2017Ven 22 Juin - 15:41
- Code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css" />
<div id="GrosseAnnoncePA">
</div>
<div id="EpicodePA">
<div class="InfolettreBloc">
<div class="Clic">
Clique sur la bouteille ...
</div>
<div class="Hover">
<a href="http://epicode.bbactif.com/g31-infolettre"> <img class="ImageInfoLettre" src="https://img15.hostingpics.net/pics/332596bouteillemessage.png" /> </a>
<div class="InfoLettre">
... pour recevoir les nouveautés par MP !
</div>
</div>
</div>
<div class="Contexte">
<div class="Bienvenue">
Bienvenue
</div>
<div class="Texte_Contexte">
Epicode vous propose un libre service de code, ainsi que graphique, allant des avatars à des thèmes complets ! Si vous ne trouvez pas ce qu'il vous faut, vous pouvez passer commande, nos graphistes et nos codeurs sont là pour vous ! Nous aidons aussi les membres à la recherche d'un staff ou d'un avis pour leur forum. Vous avez aussi la possibilité de faire la publicité de votre forum. Epicode, c'est avant tout une ambiance chaleureuse, un staff disponible et un forum actif !
</div>
</div>
<div class="EnCeMoment">
<div class="Titre">
En ce moment ...
</div>
<p>
Débat n°12 : Un nombre de lignes imposées ou libre ?<a href="http://www.epicode-entraide.com/t13484-debat-12-nombre-de-ligne-imposees-ou-libres-qualite-ou-quantite>C'est ici !</a><br /><br />Premier concours de photographie lancé, venez y participer !<a href=" http:="" www.epicode-entraide.com="" t13492-concours-photo"="">C'est ici !</a><br /><br />Yaaar ! En avant pour la Pirate Party Ramenez du rhum !<a href="http://www.epicode-entraide.com/t13491-pirate-party" "="">C'est ici !</a><br /><br />La chasse aux muguets est terminée ! Bravo tout le monde ! <a href="http://www.epicode-entraide.com/t13415-resultat-chasse-aux-muguets">C'est ici !</a>
</p>
</div>
<div class="Recrutement">
<div class="Titre">
On recrute !
</div>
<div class="R_Cons">
Conseillers
</div>
<div class="R_Anim">
Animateurs
</div>
<div class="R_Code">
Mini à Maxi Codeurs
</div>
<a href="http://epicode.bbactif.com/f24-recrutement">Postuler</a>
</div>
<div class="Liens_haut">
<a href="http://epicode.bbactif.com/t12038-reglement-d-epicode-v2-0">Règlement</a><a href="http://epicode.bbactif.com/t11144-guide-du-nouvel-arrivant">Guide du nouvel arrivant</a><a href="http://epicode.bbactif.com/t9432-epic-guide-qu-est-ce-que-c-est"> Epic'Guide</a>
</div>
<div class="Liens_bas">
<a href="http://www.root-top.com/topsite/epicode/">Notre Epic'Top</a> <a href="http://epicode.bbactif.com/t2225-faire-une-demande-de-partenariat">Devenir partenaire</a> <a href="http://epicode.bbactif.com/f166-epic-badges">Les Epic'Badges</a>
</div>
<div id="EpicodePA_Bas">
<div class="Actualites">
<div class="Titre">
Actualités
</div>
<div class="News">
<a href="#"><span class="date-new">11/06</span> » Naütilus devient calife à la place du calife et Roxane repasse à la modération.</a><a href="http://www.epicode-entraide.com/t335-regles-et-formulaire-de-la-section-graphique"><span class="date-new">11/06</span> » Du changement dans les règles de commande graphique!</a><a href="http://www.epicode-entraide.com/t13491-pirate-party"><span class="date-new">01/06</span> » Yaaar ! En avant pour la Pirate Party ! Ramenez du rhum !</a><a href="http://www.epicode-entraide.com/t13492-concours-photo"><span class="date-new">01/06</span> » Le concours de photographie n°1 est lancé !</a><a href="http://www.epicode-entraide.com/t13415-resultat-chasse-aux-muguets"><span class="date-new">01/06</span> » La chasse aux muguets est terminée : Nanto et Brasier Reshiram l'emportent ex aequo !</a><a href="http://www.epicode-entraide.com/t13489-resultat-concours-de-code-n7#271877"><span class="date-new">01/06</span> » Résultats du concours n°7 de codage annoncés : Dragonnier l'emporte !</a><a href="http://www.epicode-entraide.com/t13330-chasse-aux-muguets-fonctionnement"><span class="date-new">01/05</span> » C'est parti pour la chasse aux muguets !</a> <a href="http://www.epicode-entraide.com/t13296-concours-de-code-n7#266363"><span class="date-new">20/04</span> » Le concours de code n°7 est lancé !</a> <a href="http://www.epicode-entraide.com/t13246-votes-concours-d-ecriture-n7"><span class="date-new">17/03</span> » Les votes du concours d'écriture débute !</a><a href="http://www.epicode-entraide.com/t13153-concours-d-ecriture-n7#257319"><span class="date-new">17/03</span> » Nouveau concours d'écriture !</a><a href="http://www.epicode-entraide.com/t13141-resultat-concours-de-graph-n7#256861"><span class="date-new">14/03</span> » Résultats du concours de graphisme n°7 !</a><a href="http://epicode.bbactif.com/t12947-concours-de-graphisme-n7#250794"><span class="date-new">05/02</span> » Nouveau concours de graphisme</a><a href="http://epicode.bbactif.com/t12932-resultat-concours-de-code-n6"><span class="date-new">02/02</span> » Résultats du concours de codage n°6 !</a><a href="http://epicode.bbactif.com/t12818-debat-9-pnj-maitre-du-jeu-et-lance-de-de"><span class="date-new">20/01</span> » Nouveau thème avec une bannière signée Naütilus, votre modotte favorite !</a><a href="http://epicode.bbactif.com/t12818-debat-9-pnj-maitre-du-jeu-et-lance-de-de"><span class="date-new">08/01</span> » Nouveau débat lancé sur les PNJ et les MJ !</a><a href="http://epicode.bbactif.com/t12815-newsletter-07-01-2018#247103"><span class="date-new">07/01</span> » La première newsletter de 2018 vous souhaite une bonne année !</a><a href="http://epicode.bbactif.com/t12801-concours-de-numero-6#246509"><span class="date-new">04/01</span> » Lancement du 6ème concours de codage</a><a href="http://epicode.bbactif.com/f166-epic-badges"><span class="date-new">01/01</span> » Les Epic'Badges, nouveauté 2018 !</a><a href="#"><span class="date-new">24/12</span> » Bon retour à Batty qui revient comme maxi-codeuse </a><a href="#"><span class="date-new">17/12</span> » Milou monte en grade chez les graphistes !</a><a href="#"><span class="date-new">09/12</span> » Bravo à Reine des Ténèbres, qui devient designeuse </a>
</div>
</div>
<div class="Staff">
<div class="BlocStaff">
<img src="https://www.zupimages.net/up/18/17/vhwy.png" class="AvatarStaff AvatarAdminStaff" alt="Avatar de Naütilus." />
<div class="StaffInfos">
<div class="Pseudo">
Naütilus.
</div>
<div class="Contact">
Admin<br /><a href="http://epicode.bbactif.com/u4396">Profil</a> - <a href="http://epicode.bbactif.com/privmsg?mode=post&u=4396">MP</a>
</div>
</div>
</div>
<div class="BlocStaff">
<img src="https://zupimages.net/up/18/22/t1l6.png" class="AvatarStaff AvatarAdminStaff" alt="Avatar de Cheshire" />
<div class="StaffInfos">
<div class="Pseudo">
Cheshire Cat
</div>
<div class="Contact">
Administratrice<br /><a href="http://epicode.bbactif.com/u991">Profil</a> - <a href="http://epicode.bbactif.com/privmsg?mode=post&u=991">MP</a>
</div>
</div>
</div>
<div class="BlocStaff Bloc2Staff">
<img src="https://zupimages.net/up/18/08/9o0v.png" class="AvatarStaff" alt="Avatar de Roxane" />
<div class="StaffInfos">
<div class="Pseudo">
Roxane E
</div>
<div class="Contact">
Modo<br /><a href="http://epicode.bbactif.com/u6175">Profil</a> - <a href="http://epicode.bbactif.com/privmsg?mode=post&u=6175">MP</a>
</div>
</div>
</div>
<div class="BlocStaff Bloc2Staff">
<img src="https://www.zupimages.net/up/18/22/hlit.gif" class="AvatarStaff" alt="Avatar de Batty" />
<div class="StaffInfos">
<div class="Pseudo">
Batty
</div>
<div class="Contact">
Modo<br /><a href="http://www.epicode-entraide.com/u3507">Profil</a> - <a href="http://www.epicode-entraide.com/privmsg?mode=post&u=3507">MP</a>
</div>
</div>
</div>
<div class="BlocStaff Bloc2Staff">
<img src="https://zupimages.net/up/18/16/bfu4.png" class="AvatarStaff" alt="Avatar d'Eskimo." />
<div class="StaffInfos">
<div class="Pseudo">
Eskimo.
</div>
<div class="Contact">
Modo<br /><a href="http://www.epicode-entraide.com/u144">Profil</a> - <a href="http://www.epicode-entraide.com/privmsg?mode=post&u=144">MP</a>
</div>
</div>
</div>
<div class="Titre2">
<a href="http://epicode.bbactif.com/t3257-le-staff-d-epicode">Le Staff Créatif</a>
</div>
</div>
<div class="Gagnants">
<div class="Titre">
Dernier Gagnant !
</div>
<div class="InfosGagnant">
<div class="VavaGagnant">
<img src="https://zupimages.net/up/18/19/gjm5.png" alt="Avatar du gagnant" />
</div>
<div class="PseudoGagnant">
Dragonnier
</div>
<div class="ConcoursGagnant">
Concours de codage n°7
</div>
<div class="ScreenGagnant">
<a href="http://www.epicode-entraide.com/t13489-resultat-concours-de-code-n7#271877"><img src="https://puu.sh/Ax7MJ/d1e209f726.png" alt="Image du gagnant" /></a>
</div>
</div>
</div>
</div>
</div>
- Code:
/* PAGE D'ACCUEIL */
#EpicodePA{
position:relative;
width:800px;
margin:0 auto;
position:relative;
font-family:'Calibri';
color:#557982;
font-size:13px;
}
#EpicodePA .InfolettreBloc{
position:absolute;
width:270px;
height:50px;
right:30px;
}
#EpicodePA .ImageInfoLettre{
position:absolute;
top:10px;
right:0;
height:30px;
}
#EpicodePA .Clic{
position:absolute;
left:0;
top:15px;
font-size:15px;
color:#407784;
font-family: 'Italiana', serif;
text-shadow:1px 1px 0px #fff;
font-weight:bold;
letter-spacing:1px;
}
#EpicodePA .InfoLettre{
width:180px;
visibility:hidden;
position:absolute;
left:0;
top:5px;
text-align:center;
font-size:15px;
color:#407784;
font-family: 'Italiana', serif;
text-shadow:1px 1px 0px #fff;
font-weight:bold;
letter-spacing:1px;
background-color:#e4e8d1;
opacity:0;
-webkit-transition:all 300ms;
transition:all 300ms;
}
#EpicodePA .Hover:hover .InfoLettre{
opacity:1;
visibility:visible;
}
#EpicodePA .Titre{
font-family:'Cinzel';
color:#407784;
font-size:18px;
text-shadow:1px 1px 0px #fff;
border-bottom:1px solid rgba(252, 252, 252, 0.65);
letter-spacing:1px;
text-align:center;
}
#EpicodePA .Contexte{
display:inline-block;
width:300px;
vertical-align:top;
overflow:hidden;
}
#EpicodePA .Bienvenue{
font-family:'Italiana';
font-size:45px;
margin:0 15px;
height:55px;
text-transform:uppercase;
text-shadow:1px 1px 0px #fff;
letter-spacing:6.5px;
color:#407784;
}
#EpicodePA .Contexte .Texte_Contexte{
background-color:#f5f1ec;
border-radius:10px;
box-shadow:0 0 3px rgba(68,74,115,0.5);
margin:2px;
padding:10px;
height:220px;
overflow:auto;
font-size:14px;
text-align:justify;
line-height:18px;
}
#EpicodePA .EnCeMoment{
display:inline-block;
padding:10px;
background-image: url("http://www.zupimages.net/up/17/24/hvip.png");
background-color:#dbe2ba;
vertical-align:top;
border-radius:10px;
box-shadow:0 0 3px rgba(68,74,115,0.5);
margin:55px 0 0 20px;
}
#EpicodePA .EnCeMoment .Titre{
border:none;
padding-bottom:5px;
}
#EpicodePA .EnCeMoment a{
float:right;
text-align:right;
color:#7daf30;
text-decoration:none;
text-shadow:1px 1px 0px #fff;
font-weight:bold;
letter-spacing:1px;
}
#EpicodePA .EnCeMoment p a::before{
content:'» ';
}
#EpicodePA .EnCeMoment p{
background-color:#f5f1ec;
border-radius:10px;
padding:10px;
width:232px;
height:166px;
text-align:justify;
font-size:13px;
line-height:18px;
}
#EpicodePA .Recrutement{
position:absolute;
right:0;
top:0;
display:inline-block;
width:200px;
height:219px;
background-color:#f5f1ec;
vertical-align:top;
border-radius:10px;
box-shadow:0 0 3px rgba(68,74,115,0.5);
margin-top:55px;
padding:10px;
}
#EpicodePA .R_Admin,
#EpicodePA .R_Modo,
#EpicodePA .R_Anim,
#EpicodePA .R_Code,
#EpicodePA .R_Graph,
#EpicodePA .R_Cons,
#EpicodePA .R_Des{
color:white;
text-align:center;
margin:11px 0;
padding:2px;
letter-spacing:2.5px;
}
.R_Modo{
background-color:#50b761;
}
.R_Anim{
background-color:#6b8db3;
}
.R_Code{
background-color:#f1c776;
}
.R_Graph{
background-color:#dc94ab;
}
.R_Des{
background-color:#a780bb;
}
.R_Cons{
background-color:#d99b4b;
}
#EpicodePA .Recrutement a{
display:block;
text-align:right;
color:#7daf30;
text-decoration:none;
text-shadow:1px 1px 0px #fff;
font-weight:bold;
letter-spacing:1px;
}
#EpicodePA .Recrutement a::before{
content: '» ';
}
#EpicodePA .Liens_haut{
border-bottom:1px solid rgba(252, 252, 252, 0.65);
margin:20px 20px 0 20px;
padding-bottom:3px;
text-align:center;
}
#EpicodePA .Liens_haut a{
text-decoration:none;
font-family:'Cinzel';
font-size:16px;
padding:0 20px;
text-shadow:1px 1px 0px #fff;
letter-spacing:1.5px;
color:#407784;
}
#EpicodePA .Liens_bas{
text-align:center;
margin:5px 20px 20px 20px;
}
#EpicodePA .Liens_bas a{
text-decoration:none;
font-family:'Cinzel';
font-size:16px;
padding:0 12px;
text-shadow:1px 1px 0px #fff;
letter-spacing:2px;
color:#407784;
}
#EpicodePA_Bas{
width:800px;
background-color:#c0d0b3;
border-radius:10px;
box-shadow:0 0 3px rgba(68,74,115,0.5);
}
#EpicodePA .Actualites{
display:inline-block;
background-color:#f5f1ec;
width:240px;
height:230px;
vertical-align:top;
margin:15px;
padding:10px;
border-radius:10px;
box-shadow:0 0 3px rgba(68,74,115,0.5);
overflow:hidden;
}
#EpicodePA .Actualites .News{
overflow-x:auto;
overflow-y:initial;
width:245px;
height:180px;
font-size:12px;
line-height:17px;
}
#EpicodePA .Actualites a{
width:230px;
min-height:39px;
padding:3px 3px 3px 0;
text-decoration:none;
display:block;
color:#3a6a75;
}
#EpicodePA .Actualites .date-new{
background-image: url('http://www.zupimages.net/up/17/24/hvip.png');
background-color:#dbe2ba;
font-family:'Cinzel';
font-size:13px;
text-shadow:1px 1px 0px #fff;
letter-spacing:2px;
padding:6px 5px;
margin:2px 5px 2px 2px;
display:block;
float:left;
width:50px;
}
#EpicodePA .Staff{
display:inline-block;
width:250px;
vertical-align:top;
margin:25px 1.5px;
}
#EpicodePA .AvatarStaff{
position:absolute;
top:-25px;
left:0;
width:110%;
-webkit-transform:scale(1);
transform:scale(1);
-webkit-filter:blur(0px);
filter:blur(0px);
-webkit-transition:all 300ms;
transition:all 300ms;
}
#EpicodePA .AvatarAdminStaff{
max-width:100%;
top:-40px;
}
#EpicodePA .BlocStaff:hover .AvatarStaff{
-webkit-transform:scale(1.2);
transform:scale(1.2);
-webkit-filter:blur(1.5px);
filter:blur(1.5px);
}
#EpicodePA .BlocStaff{
position:relative;
width:116px;
height:80px;
margin:0 3px;
overflow:hidden;
display:inline-block;
font-family:'Cinzel';
background-color:#f5f1ec;
text-align:center;
vertical-align:top;
box-shadow:0 0 2px rgba(58, 106, 117, 0.65);
}
#EpicodePA .Bloc2Staff{
width:73px;
height:80px;
margin:10px 4px 10px;
font-size:12px;
}
#EpicodePA .Bloc3Staff{
width:73.5px;
height:78.5px;
margin:7px 3.6px;
font-size:10.5px;
}
#EpicodePA .BlocStaff:hover .StaffInfos{
opacity:1;
visibility:visible;
-webkit-transform:scale(1);
transform:scale(1);
}
#EpicodePA .Staff .StaffInfos{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
visibility:hidden;
opacity:0;
-webkit-transform:scale(0);
transform:scale(0);
-webkit-transition:all 300ms;
transition:all 300ms;
}
#EpicodePA .StaffInfos .Pseudo{
background-color:rgba(58, 106, 117, 0.75);
margin:5px;
color:white;
}
#EpicodePA .StaffInfos .Contact{
background-color:rgba(239, 237, 232, 0.85);
margin:5px;
line-height:24px;
font-size:10px;
font-weight:bold;
}
#EpicodePA .StaffInfos a{
text-decoration:none;
color:#3a6a75;
}
#EpicodePA .Titre2{
font-family:'Cinzel';
font-size:14px;
text-align:center;
letter-spacing:4px;
background-color:#3a6a75;
padding:3px;
margin:0 3.5px;
box-shadow:0 0 2px rgba(58, 106, 117, 0.65);
}
#EpicodePA .Titre2 a{
text-decoration:none;
color:white;
}
#EpicodePA .Gagnants{
display:inline-block;
background-color:#f5f1ec;
width:240px;
height:230px;
vertical-align:top;
margin:15px;
border-radius:10px;
box-shadow:0 0 3px rgba(68,74,115,0.5);
padding:10px;
position:relative!important;
}
#EpicodePA .VavaGagnant{
padding:0;
overflow:hidden;
width:40px;
height:40px;
border-radius:50%;
border-style:solid;
border-color:#f5f1ec;
position:absolute;
left:11px;
top:45px;
z-index:99;
}
#EpicodePA .VavaGagnant > img{
top:-10px;
width:40px;
height:auto;
transform: translateZ(0); /* empeche bug Chrome */
z-index:99;
}
#EpicodePA .PseudoGagnant{
position:absolute;
left:56px;
top:42px;
font-family:'Cinzel';
font-weight:bold;
font-size:12px;
letter-spacing:2px;
}
#EpicodePA .ConcoursGagnant{
position:absolute;
left:20px;
top:60px;
width:205px;
background-color:#3a6a75;
color:#cfd2d2;
padding-left:35px;
z-index:0;
letter-spacing:1.5px;
}
#EpicodePA .ScreenGagnant{
width:220px;
height:130px;
display:block;
position:absolute;
bottom:10px;
left:10px;
border-radius:5px;
box-shadow:0 0 3px rgba(68,74,115,0.5);
overflow:hidden;
}
#EpicodePA .ScreenGagnant a > img{
height:100%;
width: 100%;
border-radius:5px;
box-shadow:1px 1px 0px #000;
}
- Code:
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="categorie">
<div class="titreCat">
{catrow.tablehead.L_FORUM}
</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="forumCat">
<div class="titreStatsCat">
<a href="{catrow.forumrow.U_VIEWFORUM}">
{catrow.forumrow.FORUM_NAME}
</a>
<div class="statsCat">
{catrow.forumrow.POSTS} {L_POSTS} - {catrow.forumrow.TOPICS} {L_TOPICS}
</div>
</div>
<div class="dernierPostCat">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div>
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
{catrow.forumrow.LATEST_TOPIC_NAME}
</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</div>
</div>
<div class="descForumCat">
<div class="descCat">
{catrow.forumrow.FORUM_DESC}
</div>
<div class="sousForumsCat">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
</div>
<div class="avatarCat">
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->
- Code:
/* CATEGORIES */
.categorie{
margin:10px 0 30px;
}
.titreCat{
color:#407784;
height:60px;
font-family:'Italiana', serif;
text-transform:uppercase;
font-size:25px;
margin:0 0 10px 20px;
text-shadow:1px 1px 0px #fff;
letter-spacing:2px;
}
.titreCat #h1-category{
font-size:25px;
line-height:initial;
}
.forumCat{
background-color:#f5f1ec;
box-shadow:0px 0px 3px rgba(68, 74, 115, 0.5);
border-radius:10px;
overflow:hidden;
margin-bottom:20px;
}
.titreStatsCat{
display:block;
background-color:#c0d0b3;
border-bottom:2px solid #3a6a75;
color:#3a6a75;
font-family:Cinzel, serif;
font-size:18px;
letter-spacing:2px;
padding:5px 12px;
}
.titreStatsCat > a{
color:#3a6a75;
}
.statsCat{
float:right;
font-size:14px;
margin-top:3px;
}
.dernierPostCat{
position:relative;
display:inline-block;
vertical-align:top;
width:186px;
height:130px;
border-right:1px solid rgb(220, 220, 220);
}
.dernierPostCat > img{
position:absolute;
top:0;
opacity:0.65;
left:0;
}
.dernierPostCat div{
position:absolute;
top:0;
left:0;
width:186px;
height:130px;
padding:20px 10px;
color:#3a6a75;
text-align:center;
line-height:30px;
font-size:12px;
letter-spacing:1px;
}
.dernierPostCat a{
font-family:Cinzel, serif;
font-weight:bold;
}
.descForumCat{
display:inline-block;
vertical-align:top;
width:524px;
height:130px;
padding:10px;
}
.descCat{
padding:0 5px;
font-size:13px;
text-align:justify;
margin-bottom:10px;
}
.sousForumsCat{
font-size:0;
}
.sousForumsCat a{
display:inline-block;
vertical-align:top;
background-color:rgba(252, 252, 252, 0.65);
color:#6a738b;
padding:1px 4px;
margin:0 4px 4px 0;
border-radius:3px;
text-align:center;
font-size:13px;
}
.avatarCat{
display:inline-block;
vertical-align:top;
position:relative;
width:90px;
height:130px;
overflow:hidden;
border-left:1px solid #dcdcdc;
background-color:#e5e8d7;
}
.avatarCat img{
position:absolute;
top:-20px;
right:-6px;
max-width:100px!important;
}
Messages : 33
Age : 26
Date d'inscription : 18/05/2017
Cheshire Cat
Admin
# Re: Design 2017Ven 22 Juin - 16:03
- Code:
<!-- BEGIN disable_viewonline -->
<div id="Qeel">
<div id="QeelTitle">Qui est en ligne ?</div>
<div id="QeelCurrentOnline">
<div class="QeelSubTitles">Ils sont là !</div>
<div class="QeelBlock QeelBlock1">{LOGGED_IN_USER_LIST}</div>
</div>
<div class="QeelStatsGroupes">
<div id="QeelStats">
<div>
<div class="QeelStats">
<div class="QeelStatsTitle">Messages</div>
<div class="QeelStatsNumber">{TOTAL_POSTS}</div>
</div>
<div class="QeelStats">
<div class="QeelStatsTitle">Membres</div>
<div class="QeelStatsNumber">{TOTAL_USERS}</div>
</div>
<div class="QeelStats">
<div class="QeelStatsTitle">Bienvenue</div>
<div class="QeelStatsNumber">{NEWEST_USER}</div>
</div>
</div>
</div>
<div id="QeelGroupes">
<script type="text/javascript">
function ch_div(name){
document.getElementById('info_div_'+ancienne_div).style.display = 'none';
document.getElementById('info_div_'+name).style.display = 'block';
ancienne_div = name;
}
</script>
<div class="QeelOnglet">
<div id="div_admin" onClick="javascript:ch_div('admin');">Administrateurs</div>
<div id="div_modo" onClick="javascript:ch_div('modo');">Modérateurs</div>
<div id="div_codeur" onClick="javascript:ch_div('codeur');">Codeurs</div>
<div id="div_design" onClick="javascript:ch_div('design');">Designers</div>
</div>
<div class="QeelContenu">
<div class="div_info" id="info_div_admin">
Les <span id="span_admin">Administrateurs</span> sont les chefs du forum.
Ils s'occupent de faire respecter les règles et d'apporter de la nouveauté pour satisfaire les membres.
N'hésitez pas à les contacter pour tout problème sur le forum ou pour leur proposer vos idées.
Malgré leur indulgence, les administateurs n'hésiteront pas à sanctionner en cas de problème.
</div>
<div class="div_info" id="info_div_modo">
Les <span id="span_modo">Modérateurs</span> sont les bras-droits des administateurs, ils veillent au respect des règles et de la politesse.
Ce sont nos surveillants, donc prenez garde à votre comportement.
Ils vérifient également le bon déroulement des commandes, l'actualisation des pubs et recherches.
N'hésitez pas à leur demander de l'aide à tout moment si besoin est !
</div>
<div class="div_info" id="info_div_codeur">
Les <span id="span_codeur">Codeurs</span> sont les personnes prenant en charge vos demandes de codages que ce soit un thème, une page d'acceuil, une fiche ou juste un morceau de votre forum.
Ils sont aussi là afin d'apporter leurs aides aux membres perdus ou bloqués par un problème technique et leur donner des conseils dans le domaine.
</div>
<div class="div_info" id="info_div_graph">
Les <span id="span_graph">Graphistes</span> s'occupent des commandes graphiques d'Épicode qu'ils s'agissent de faire un design de thème, une bannière ou un simple kit.
Leur logiciel n'a plus de secrets pour eux.
Ils apportent également leur savoir en proposant des tutoriels ou en offrant conseil et avis aux personnes leurs demandant.
</div>
<div class="div_info" id="info_div_design">
Les <span id="span_design">Designers</span> remplissent la double fonction de Graphiste et Codeur.
Ils sont donc en droit de prendre en charge des commandes graphiques et/ou de codage. Leur connaissance leur permet de réaliser une commande complète en créant un schéma puis en le codant pour vous selon vos désirs.
</div>
<div class="div_info" id="info_div_anim">
Les <span id="span_anim">Animateurs</span> ont pour rôle de s'occuper de la section Détente du forum.
Ils sont là pour proposer des jeux, des discussions, participent aux débats et acceuillent les nouveaux membres avec le sourire.
Ce sont eux qui organisent les concours auquel vous pourrez participer sur Épicode.
</div>
<div class="div_info" id="info_div_conseillier">
Les <span id="span_conseillier">Conseillers</span> ont pour rôle de s'occuper de la section Aides aux forums.
Ils sont là pour vous aider la conception de vos bébés!
Que ce soit pour donner un avis sur un design, des annexes, ou pour vous aider à rédiger des contextes attracteurs.
</div>
<div class="div_info" id="info_div_membre">
Les <span id="span_membre">Membres</span> c'est vous ! Et vous avez un rôle ! Celui de participer à la vie du forum.
En étant présent, en participant aux animations ou à l'entraide, vous faites vivre épicode !
Et pour cela, on vous en remercie du fond du coeur !
Sans vous, épicode ne serait pas là et n'aurait pas raison d'être !
</div>
</div>
<div class="QeelOnglet">
<div id="div_graph" onClick="javascript:ch_div('graph');">Graphistes</div>
<div id="div_conseillier" onClick="javascript:ch_div('conseillier');">Conseillers</div>
<div id="div_anim" onClick="javascript:ch_div('anim');">Animateurs</div>
<div id="div_membre" onClick="javascript:ch_div('membre');">Membres</div>
</div>
<script type="text/javascript">
var ancienne_div = 'admin';
ch_div(ancienne_div);
</script>
</div>
</div>
<div id="QeelOfflineBirthday">
<div id="QeelOffline">
<div class="QeelSubTitles">Ils étaient là...</div>
<div class="QeelBlock QeelBlock2">{L_CONNECTED_MEMBERS}</div>
</div>
<div id="QeelBirthday">
Les anniversaires
<div id="QeelBirthdayBlock">{L_WHOSBIRTHDAY_TODAY}</div>
</div>
</div>
</div>
<!-- END disable_viewonline -->
- Code:
/* QUI EST EN LIGNE */
#Qeel{
margin:80px 0 0;
}
#QeelTitle{
color:#407784;
height:60px;
font-family:'Italiana', serif;
text-transform:uppercase;
font-size:50px;
margin:0 0 15px 15px;
text-shadow:1px 1px 0px #fff;
}
#QeelCurrentOnline{
display:inline-block;
vertical-align:top;
width:190px;
height:270px;
background-color:#f5f1ec;
box-shadow:0px 0px 3px rgba(68, 74, 115, 0.5);
border-radius:10px;
overflow:hidden;
}
#QeelCurrentOnline br{
display:none;
}
.QeelStatsGroupes{
display:inline-block;
vertical-align:top;
margin:0 20px;
}
#QeelStats{
width:370px;
height:80px;
background-color:#dbe2ba;
background-image:url('http://www.zupimages.net/up/17/24/hvip.png');
box-shadow:0px 0px 3px rgba(68, 74, 115, 0.5);
border-radius:10px;
overflow:hidden;
margin:0 0 20px;
padding:10px;
}
#QeelStats > div{
padding:5px 10px;
background-color:#f5f1ec;
border-radius:10px;
height:60px;
}
.QeelStats{
display:inline-block;
vertical-align:top;
width:110px;
font-family:Cinzel, serif;
text-align:center;
}
.QeelStatsTitle{
font-size:16px;
border-bottom:1px solid #fff;
padding-bottom:3px;
}
.QeelStatsNumber{
font-size:0;
padding-top:3px;
}
.QeelStatsNumber strong{
font-size:13px;
}
#QeelOfflineBirthday{
position:relative;
display:inline-block;
vertical-align:top;
width:200px;
height:270px;
background-color:#f5f1ec;
box-shadow:0px 0px 3px rgba(68, 74, 115, 0.5);
border-radius:10px;
overflow:hidden;
}
#QeelBirthday{
position:absolute;
bottom:0;
left:0;
width:200px;
background-color:#24545f;
text-align:center;
color:#e2e0dc;
font-family:Cinzel, serif;
letter-spacing:1px;
font-size:14px;
padding:4px 0;
}
#QeelBirthdayBlock{
position:absolute;
top:-202px;
left:0;
height:202px;
overflow:auto;
padding:10px;
font-size:13px;
font-family:calibri;
color:#69728c;
background-color:#e5e8d7;
transition:all 500ms;
text-align:justify;
opacity:0;
-webkit-transform:scale(0);
transform:scale(0);
}
#QeelBirthdayBlock br{
display:none;
}
#QeelBirthday:hover #QeelBirthdayBlock{
opacity:1;
-webkit-transform:scale(1);
transform:scale(1);
}
.QeelSubTitles{
background-color:#c0d0b3;
border-bottom:2px solid #3a6a75;
color:#3a6a75;
font-family:Cinzel, serif;
font-size:18px;
letter-spacing:2px;
padding:5px 12px;
text-align:center;
}
.QeelBlock{
text-align:justify;
padding:10px;
overflow:auto;
font-size:0;
}
.QeelBlock a{
font-size:13px;
}
.QeelBlock a:not(:first-of-type):before{
content:"-";
font-size:13px;
margin:2px 5px;
}
.QeelBlock1{
height:232px;
overflow:auto;
}
.QeelBlock2{
height:202px;
overflow:auto;
}
/* Onglet QEEL */
#QeelGroupes{
width:370px;
}
.QeelOnglet{
text-align:center;
cursor:pointer;
color:#3B3B3B!important;
font-size:12px;
text-transform: uppercase;
}
.QeelOnglet div{
display:inline-block;
width:84px;
margin:0 3px;
font-size:10px;
}
.QeelContenu{
padding:10px 0px;
}
.div_info{
background-color:#f5f1ec;
box-shadow:0 0 3px rgba(68,74,115,0.5);
border-radius:10px;
display:none;
font-size:12px;
text-align:justify;
height:110px;
overflow:auto;
padding:10px;
}
.div_info span{
font-weight:600;
}
#span_membre{
color:#808080;
}
#div_membre{
color:#808080;
background:#808080;
}
#span_conseillier{
color:#ef7e34;
}
#div_conseillier{
color:#ef7e34;
background:#ef7e34;
}
#span_admin{
color:#2b9c8d;
}
#div_admin{
color:#2b9c8d;
background:#2b9c8d;
}
#span_modo{
color:#50b761;
}
#div_modo{
color:#50b761;
background-color:#50b761;
}
#span_codeur{
color:#ecca40;
}
#div_codeur{
color:#ecca40;
background:#ecca40;
}
#span_graph{
color:#dc94ab;
}
#div_graph{
color:#dc94ab;
background:#dc94ab;
}
#span_design{
color:#a780bb;
}
#div_design{
color:#a780bb;
background:#a780bb;
}
#span_anim{
color:#5379a3;
}
#div_anim{
color:#5379a3;
background:#5379a3;
}
Messages : 33
Age : 26
Date d'inscription : 18/05/2017
Cheshire Cat
Admin
# Re: Design 2017Ven 22 Juin - 16:06
- Code:
<!-- BEGIN topics_list_box -->
<!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}()
{
alert('MAIN');
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++)
{
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
{
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}()
{
alert('ALL');
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++)
{
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
{
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<!-- BEGIN row --><!-- BEGIN header_table -->
<div id="ListeSujet">
<!-- END header_table --><!-- BEGIN topic -->
<div class="ListeSujetFond">
<!-- BEGIN table_sticky --><!-- BEGIN multi_selection -->
<input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
<!-- END multi_selection --><!-- END table_sticky -->
<div class="ListeSujetDernier">
<img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
<div>
<span class="ListeSujetBold">
{topics_list_box.row.REPLIES} {L_REPLIES} - {topics_list_box.row.VIEWS} {L_VIEWS}
</span><br />
{topics_list_box.row.LAST_POST_TIME}<br />
<span class="ListeSujetBold">
{topics_list_box.row.LAST_POST_AUTHOR}
</span>
{topics_list_box.row.LAST_POST_IMG}
</div>
</div>
<div class="ListeSujetCentre">
<div class="ListeSujetTitre">
{topics_list_box.row.TOPIC_TYPE}
<a class="ListeSujetBold" href="{topics_list_box.row.U_VIEW_TOPIC}">
{topics_list_box.row.TOPIC_TITLE}
</a>
{topics_list_box.row.L_BY}
<span class="ListeSujetBold">{topics_list_box.row.TOPIC_AUTHOR}</span>
</div>
<dd title="{topicrow.TOPIC_FOLDER_IMG_ALT}" class="ListeSujetIcon" {topics_list_box.row.ICON}></dd>
<!-- BEGIN switch_description -->
<div class="ListeSujetDesc"> {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</div>
<!-- END switch_description -->
<div class="ListeSujetAller">
{topics_list_box.row.GOTO_PAGE_NEW}
<!-- BEGIN nav_tree -->
{topics_list_box.row.TOPIC_NAV_TREE_NEW}
<!-- END nav_tree -->
</div>
</div>
<div class="ListeSujetAvatar">
<!-- BEGIN avatar -->
{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
</div>
<!-- END topic --><!-- BEGIN no_topics -->
<div class="ListeSujetEmpty">
{topics_list_box.row.L_NO_TOPICS}
</div>
<!-- END no_topics --><!-- BEGIN bottom -->
</div>
<!-- END bottom --><!-- END row --><!-- END topics_list_box -->
- Code:
{BOARD_INDEX}
<div class="sub-header">
<div class="sub-header-info">
<div class="sub-header-path">
<a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
{NAV_CAT_DESC}
</div>
</div>
</div>
<div class="ListeSujetLiens">
<!-- BEGIN switch_user_authpost -->
<div class="ListeSujetBoutons">
<a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow" id="lol5Button" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
</div>
<script type="text/javascript">
document.getElementById('lol5Button').innerHTML=document.getElementById('lol5Button').innerHTML.replace(/Ce forum est verrouillé, vous ne pouvez pas poster, ni répondre, ni éditer les sujets./,"Ce forum est verrouillé" );
</script>
<!-- END switch_user_authpost -->
</div>
<div class="ListeSujetPagination">
<div class="pagination">{PAGINATION}</div>
</div>
{TOPICS_LIST_BOX}
<div class="ListeSujetLiens">
<!-- BEGIN switch_user_authpost -->
<div class="ListeSujetBoutons">
<a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow" id="lol6Button" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
</div>
<script type="text/javascript">
document.getElementById('lol6Button').innerHTML=document.getElementById('lol6Button').innerHTML.replace(/Ce forum est verrouillé, vous ne pouvez pas poster, ni répondre, ni éditer les sujets./,"Ce forum est verrouillé" );
</script>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_logged_in -->
<div class="ListeSujetMark">
{S_WATCH_FORUM} - <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>
</div>
<!-- END switch_user_logged_in -->
</div>
<div class="ListeSujetPagination">
<div class="pagination">{PAGINATION}</div>
</div>
<div id="ListeSujetPermissions">
<div class="h3">{L_TABS_PERMISSIONS}</div>
<p>{S_AUTH_LIST}</p>
</div>
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="vf_jumpbox">
{S_JUMPBOX_SELECT}
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
- Code:
/* LISTE DES SUJETS */
.ListeSujetFond{
width:800px;
background-color:#f5f1ec;
box-shadow:0 0 3px rgba(68,74,115,0.5);
border-radius:10px;
margin-bottom:20px;
overflow:hidden;
}
.ListeSujetEmpty{
width:800px;
background-color:#f5f1ec;
box-shadow:0 0 3px rgba(68,74,115,0.5);
padding:20px;
text-align:center;
border-radius:10px;
margin-bottom:20px;
overflow:hidden;
}
.ListeSujetDernier{
position:relative;
display:inline-block;
vertical-align:top;
width:186px;
height:90px;
border-right:1px solid #dcdcdc;
}
.ListeSujetDernier > img{
position:absolute;
top:0;
opacity:0.65;
left:0;
}
.ListeSujetDernier div{
position:absolute;
top:0;
left:0;
width:186px;
padding:10px;
color:#3a6a75;
font-size:13px;
line-height:24px;
text-align:center;
}
.ListeSujetCentre{
display:inline-block;
vertical-align:top;
width:524px;
height:90px;
padding:10px;
overflow:auto;
}
.ListeSujetTitre{
font-size:13px;
}
.ListeSujetLien img{
height:11px;
opacity:.7;
}
.ListeSujetIcon{
display:inline-block;
height:24px;
width:58px;
margin:0px 3px 0 0;
}
.ListeSujetIcon img{
height:24px;
width:58px;
}
.ListeSujetDesc{
font-size:15px;
display:inline;
vertical-align:top;
font-style:italic;
}
.ListeSujetAller{
max-height:20px;
overflow:auto;
margin-top:5px;
}
.ListeSujetAller .pagination span a{
width:20px;
background-color:#24545f!important;
line-height:20px;
}
.ListeSujetBold{
font-family:Cinzel, serif;
font-weight:bold;
}
.ListeSujetAvatar{
position:relative;
display:inline-block;
vertical-align:top;
width:90px;
height:90px;
overflow:hidden;
border-left:1px solid #dcdcdc;
}
.ListeSujetAvatar img{
max-width:100px!important;
position:absolute;
right:-6px;
top:-50%;
}
.sub-header{
background-color:#24545f;
margin:40px 0 20px;
border-radius:5px;
padding:10px 15px;
box-shadow:0 0 3px rgba(68,74,115,0.7);
}
.sub-header a{
color:#e2e0dc;
}
.ListeSujetMark{
text-align:right;
margin:20px;
padding:5px;
}
.ListeSujetBoutons{
float:left;
margin:0 20px 20px;
}
.ListeSujetPagination{
margin:0 20px;
height:40px;
}
.ListeSujetPagination .pagination{
float:right;
}
.ListeSujetPagination .pagination span a{
background-color:#24545f!important;
width:28px;
line-height:25px;
}
.ListeSujetPagination .pagination > a{
font-size:13px;
margin-top:3.5px;
}
.ListeSujetPagination .pagination span strong{
background-color:#f5f1ec!important;
width:28px;
line-height:25px;
}
.ListeSujetPagination .pagination span a{
background-color:#24545f!important;
width:28px;
line-height:25px;
}
.ListeSujetPagination .pagination .pag-img{
background-color:transparent!important;
line-height:initial;
width:15px;
}
.ListeSujetPagination .pagination span a.pag-img img{
height:10px;
}
#ListeSujetPermissions{
background-color:#24545f;
color:#e2e0dc;
border-radius:5px;
box-shadow:0 0 3px rgba(68,74,115,0.7);
padding:15px;
margin-bottom:20px;
}
#ListeSujetPermissions a{
color:#e2e0dc;
font-weight:bold;
}
Messages : 33
Age : 26
Date d'inscription : 18/05/2017
Cheshire Cat
Admin
# Re: Design 2017Ven 22 Juin - 16:14
- Code:
<form action="{S_MODE_ACTION}" method="get">
<div id="MembreHaut">
<h2>{L_ORDER_OR_SELECT}</h2>
<div id="MembreRecherche">
{L_USER_SELECT} <input type="text" class="inputbox tiny" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
{L_SELECT_SORT_METHOD} {S_MODE_SELECT}
{L_ORDER} {S_ORDER_SELECT}
{S_HIDDEN_SID}
<input class="button2" type="submit" name="submit" value="{L_SUBMIT}" />
</div>
</div>
</form>
<h1 class="page-title solo">Liste des membres</h1>
<div id="MembreListe">
<!-- BEGIN memberrow -->
<div class="MembreBlock">
<div class="MembreAvatar">
<a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a>
</div>
<div class="MembreBlockLabel">
<div class="MembrePseudo">
<a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
</div>
<div class="MembreLabel">
<div class="MembreLabelTitre">{L_INTERESTS}</div>
{memberrow.INTERESTS}
</div>
<div class="MembreLabel">
<div class="MembreLabelTitre">{L_JOINED}</div>
{memberrow.JOINED}
</div>
<div class="MembreLabel">
<div class="MembreLabelTitre">{L_VISITED}</div>
{memberrow.LASTVISIT}
</div>
<div class="MembreLabel">
<div class="MembreLabelTitre">{L_POSTS}</div>
{memberrow.POSTS}
</div>
<div class="MembreLabel">
{memberrow.PM_IMG}
{memberrow.WWW_IMG}
</div>
</div>
</div>
<!-- END memberrow -->
</div>
<div class="ListeSujetPagination">
<div class="pagination" style="float:none;">
<!-- BEGIN switch_pagination -->
{PAGINATION}<br />
<!-- END switch_pagination -->
</div>
</div>
- Code:
/* LISTE DES MEMBRES */
#MembreHaut{
margin:0 auto 20px;
width:685px;
}
#MembreHaut > h2{
font-size:15px;
letter-spacing:1px;
border-bottom:1px solid #69728c;
padding-bottom:3px;
margin-bottom:10px;
}
#MembreRecherche{
text-align:center;
font-size:1.2rem;
}
.MembreBlock{
margin:0 0 15px;
background-color:#f5f1ec;
border-radius:10px;
box-shadow:0 0 3px rgba(68,74,115,0.5);
overflow:hidden;
}
.MembreAvatar{
display:inline-block;
width:120px;
height:100px;
position:relative;
overflow:hidden;
border-right:1px solid #dcdcdc;
}
.MembreAvatar img{
position:absolute;
width:100%;
top:-35px;
left:0;
}
.MembrePseudo{
margin:0 17px;
height:25px;
}
.MembrePseudo a{
font-family:'Cinzel', serif;
font-size:17px;
letter-spacing:1px;
}
.MembreBlockLabel{
display:inline-block;
vertical-align:top;
width:680px;
height:100px;
padding:5px 10px;
}
.MembreLabel{
display:inline-block;
vertical-align:top;
width:118px;
height:50px;
background-color:rgba(252, 252, 252, 0.7);
padding:5px;
margin:5px 7px;
border-radius:3px;
font-size:1.1rem;
line-height:20px;
text-align:center;
}
.MembreLabelTitre{
border-bottom:1px solid #BCBCBC;
padding-bottom:1px;
letter-spacing:0.7px;
}
.MembreLabel img {
margin:8px 10px;
border-radius:3px;
}
Messages : 33
Age : 26
Date d'inscription : 18/05/2017
Cheshire Cat
Admin
# Re: Design 2017Ven 22 Juin - 16:22
CSS restant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|