Welcome

Halloween Index complets

Concordia

Halloween, LS codage Forumactif Index complets Index complet Concordia

PHPBB2

Optimisé Lien du profil au survol de l'image du staff sur la page d'accueil.
Le rectangle orange correspond aux images "No new", "New" et "Lock", l'illustration du dessus est différente selon le forum. Elle mesure 250*170px.
Le système de groupe du qeel fonctionne par un jeu d'onglet, au survol de chaque icône. Au survol de l'image du groupe le nom disparait.
Un header & navigation est également disponible. Graphisme par Clyde. La maquette complète

Retour

Codage index complet Concordia accueil Halloween Forumactif

Les images de partenariat sont en 50*50px, celles du staff et des tops en 65*65px, les prédéfinis sont en 250*40px.

CSS

a, a:hover {
  	text-decoration: none !important;
  	transition: .5s all;
}

.clear {
  	clear: both;
}

/* Scrollbar */
::-webkit-scrollbar {
    	width: 8px;
}
::-webkit-scrollbar-thumb {
    	background: #c2625f;
  	border-radius: 5px;
}
::-webkit-scrollbar-track {
    	background: #A1A2A7;
}

/************************************** PAGE ACCUEIL **************************************/
.page_accueil {
        width: 100%;
        background: url(https://i.imgur.com/GOV1hVX.png) bottom no-repeat #e4d6d4;
        padding: 0 0 130px;
        margin: 0;
  	font-family: 'Roboto Condensed', sans-serif;
}

.page_accueil .content {
        width: 1100px;
        margin: auto;
}

.page_accueil #g, .page_accueil #m, .page_accueil #d {
  	float: left;
  	text-align: center;
}

.page_accueil #g {
        width: 35%;
        margin: 0 2%;
}

.page_accueil #m {
    	width: 23%;
}

.page_accueil #d {
        width: 36%;
        margin: 0 0 0 2%;
}

/* CONTEXTE */
.page_accueil #g p {
        width: 90%;
        padding: 0 2% 0 0;
        height: 150px;
        overflow: auto;
        text-align: justify;
        font-size: .8em;
        line-height: 1.5;
        margin: 0 auto 5%;
}

/* PARTENAIRES */
.page_accueil #g a img {
    	padding: 1%;
}

/* STAFF */
.page_accueil .bloc_staff {
    	float: left;
}

.staff {
        width: 65px;
        height: 65px;
        overflow: hidden;
        margin: 0 0 10px;
        padding: 5px;
        border: 1px solid #c66960;
}

.staff:hover .txt {
        margin-top: -50%;
        transition: .5s all;
}

.txt a {
        display: block;
        color: #fff;
}

.txt {
        background: rgba(0,0,0,.5);
        width: 100%;
        z-index: 999;
        position: relative;
        padding: 15% 0;
        text-transform: uppercase;
        font-size: 11px;
   	transition: .5s all;
        margin: 20% 0 0 0;
}

/* NEWS */
.news {
        float: right;
        width: 60%;
        height: 165px;
        padding: 0 5% 0 0;
        overflow: auto;
}

.news p {
        border-left: 5px solid #c66960;
        font-size: .8em;
}

.news p span {
        color: #c66960;
        text-transform: uppercase;
        padding: 0 5% 0 0;
        letter-spacing: 1px;
}

/* PREDEFINIS */
.predef img {
        margin: 5px;
        border: 1px solid #c66960;
        border-left: 5px solid #c66960;
   	transition: .5s all;
}

.predef img:hover {
        border: 1px solid #000;
        border-left: 5px solid #000;
   	transition: .5s all;
}

/* DATE */
.page_accueil h2 {
        font-family: 'Mr Dafoe', cursive;
        font-size: 2.5em;
        font-weight: normal;
        margin: 0;
}

.page_accueil h2 span {
        color: #c66960;
        padding: 0 0 0 4%;
}

/* VOTES */
.votes {
    	margin: 5% 0;
}

.votes img {
    	margin: 0 2%;
}

/* LIENS UTILES */
.page_accueil .liens_utiles a {
        font-family: 'Mr Dafoe', cursive;
        display: inline-block;
        font-size: 1.8em;
        margin: 0 4%;
        color: #fff;
}

.page_accueil .liens_utiles a:hover {
  	color: #ebb67a;
}

Overall_header

Supprimer les lignes 250 à 273, à savoir :

<table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        
                        <td align="center" width="100%" valign="middle">
                            
                            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                            <br />
                            
                            <div class="maintitle">{MAIN_SITENAME}</div>
                            <br />
                            <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                        </td>
                        
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        
                    </tr>
                </table>

Puis insérer ce qui suit entre les lignes 244 et 245 (entre l'ancre "Top" et le "JAVASCRIPT").

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                    <tr>
                        <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                    </tr>
                </table>
  	
  
  	<div class="page_accueil">
          	<div class="content">
                  
          	
          	<div id="g">
                  	<p>
                          	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget massa facilisis, laoreet est at, faucibus nulla. Pellentesque euismod, risus sed porta scelerisque, tortor velit feugiat orci, ac varius velit arcu eget nunc. In tincidunt aliquam dolor dignissim tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempus pharetra velit, sed consequat velit luctus non. Nullam at elit consectetur, iaculis metus at, laoreet orci. Vestibulum accumsan vestibulum sagittis. Suspendisse ut mauris sed lacus mattis tempus. Aliquam mattis varius nibh. Duis vel pellentesque nibh. Nullam efficitur rutrum lectus in luctus.
                          	<a href="#">
                                  	La suite
                          	</a>
                  	</p>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	<img src="https://www.zupimages.net/up/18/35/6cz2.png" alt="" />	
                  	</a>
          	</div>
          	
          
          	
          	<div id="m">
                  	<div class="bloc_staff">
                          	<div class="staff">
                                  	<img src="https://www.zupimages.net/up/18/35/cr8t.png" alt="" />
                                  	<div class="txt">
                                          	<a href="#">
                                                  	Profil
                                          	</a>
                                  	</div>
                          	</div>
                          
                          	<div class="staff">
                                  	<img src="https://zupimages.net/up/18/35/mqba.png" alt="" />
                                  	<div class="txt">
                                          	<a href="#">
                                                  	Profil
                                          	</a>
                                  	</div>
                          	</div>
                  	</div>
                  
                  	<div class="news">
                          	<p>
                                  	<span>
                                          	Date
                                  	</span>
                                  
                                  	New - Contenu new
                          	</p>
                          
                          	<p>
                                  	<span>
                                          	Date
                                  	</span>
                                  
                                  	New - Contenu new
                          	</p>
                          
                          	<p>
                                  	<span>
                                          	Date
                                  	</span>
                                  
                                  	New - Contenu new
                          	</p>
                          
                          	<p>
                                  	<span>
                                          	Date
                                  	</span>
                                  
                                  	New - Contenu new
                          	</p>
                  	</div>
                  
                  	<div class="clear">
                  	</div>
                  
                  	<div class="predef">
                          	<a href="#" target="_blank">
                          		<img src="https://zupimages.net/up/18/35/7xxx.png" alt="" />
                  		</a>
                  
                  		<a href="#" target="_blank">
                          		<img src="https://zupimages.net/up/18/35/7xxx.png" alt="" />
                  		</a>
                  	</div>
          	</div>
          	
          
          	
          	<div id="d">
                  	<h2>
                          	Nous sommes en
                          		<span>
                                          	Date
                          		</span>
                  	</h2>
                  
                  	<div class="votes">
                          	<a href="#" target="_blank">
                          		<img src="https://zupimages.net/up/18/35/mwdl.png" alt="" />
                  		</a>
                  
                  		<a href="#" target="_blank">
                         	 	<img src="https://www.zupimages.net/up/18/35/fao9.png" alt="" />
                  		</a>
                  
                  		<a href="#" target="_blank">
                        	  	<img src="https://www.zupimages.net/up/18/35/ut78.png" alt="" />
                  		</a>
                  	
                  		<a href="#" target="_blank">
                       	   		<img src="https://www.zupimages.net/up/18/35/qfea.png" alt="" />
                  		</a>
                  	</div>
                  
			<div class="liens_utiles">
                          	<a href="#" target="_blank">
                                  	Lien utile
                          	</a>
                          
                          	<a href="#" target="_blank">
                                  	Lien utile
                          	</a>
                          
                          	<a href="#" target="_blank">
                                  	Lien utile
                          	</a>
                          
                          	<a href="#" target="_blank">
                                  	Lien utile
                          	</a>
                          
                          	<a href="#" target="_blank">
                                  	Lien utile
                          	</a>
                          
                          	<a href="#" target="_blank">
                                  	Lien utile
                          	</a>
                  	</div>
          	</div>
          	
          
          	<div class="clear">
          	</div>
          
          	</div>
  	</div>

Pour ajouter les polices, toujours dans le même template placer ce qui suit avant "T_HEAD_STYLESHEET" ligne 18.

ATTENTION : Pensez à supprimer toutes les polices du forum dans "Couleurs" si vous souhaitez que les Google Font soient prises en compte.

Codage index complet Concordia catégories Halloween Forumactif PHPBB2

L'image de fond de titre de catégorie est en 858*168px, les illustrations en 250*170px et les images "New", "No new" et "Lock" en 250*15px.

CSS

a, a:hover {
  	text-decoration: none !important;
  	transition: .5s all;
}

.clear {
  	clear: both;
}

/* Scrollbar */
::-webkit-scrollbar {
    	width: 8px;
}
::-webkit-scrollbar-thumb {
    	background: #c2625f;
  	border-radius: 5px;
}
::-webkit-scrollbar-track {
    	background: #A1A2A7;
}

/************************************** CATEGORIES **************************************/
.categories_forums {
        width: 858px;
        margin: 2% auto 0;
  	font-family: 'Roboto Condensed', sans-serif;
}

/* TITRE CATEGORIE */
.secondarytitle h2 {
        text-align: center;
        font-size: 3em;
        font-family: 'Mr Dafoe', cursive;
        background: url(https://www.zupimages.net/up/18/35/2by0.png) no-repeat;
        padding: 6% 0;
        color: #e3e3e3;
        font-weight: normal;
  	display: block;
}

/* BLOC FORUM */
.forum {
        width: 100%;
        padding: 2% 0;
        box-sizing: border-box;
        margin: 1% 0;
  	position: relative;
}

.fg {
        width: 29%;
        float: left;
        position: relative;
        height: 240px;
}

.fm {
        float: left;
        width: 35%;
        margin: 3.5% 2% 0;
}

.fd {
        float: left;
        width: 32%;
        margin: 5% 0 0;
}

/* NOM FORUM */
a.forumlink {
        color: #c66960 !important;
        font-family: 'Mr Dafoe', cursive;
        font-weight: normal;
        text-align: center;
        font-size: 2em;
        display: block;
}

/* STATUT FORUM */
img.statut_forum {
        position: absolute;
        bottom: 0;
}

/* DESCRIPTION */
.description p {
        width: 100%;
        padding: 0 5% 0 0;
        box-sizing: border-box;
        overflow: auto;
        text-align: justify;
        line-height: 1.5;
        font-size: .9em;
        height: 130px;
}

.description {
    	height: 143.5px;
}

/* IMAGE DESCRIPTION */
.description img {
        position: absolute;
        left: 0;
        top: 24%;
}

/* STATS */
.stats span {
        display: inline-block;
        width: 49%;
        background: #c66960;
        color: #fff;
        text-align: center;
        font-family: 'Mr Dafoe', cursive;
        padding: 5% 0;
}

.stats span:nth-child(1n+2) {
    	margin: 0 0 0 2%;
}

/* SOUS FORUM */
.sous_forum {
        width: 100%;
        height: 140px;
        overflow: auto;
}

.sous_forum a {
        display: block;
        text-align: center;
        background: #c66960;
        color: #fff;
        font-size: 1em;
        text-transform: uppercase;
        margin: 0 0 2% 0;
}

.sous_forum a:hover {
    	background: #ebb67a;
}

/* DERNIER MESSAGE */
.dernier_message {
        font-size: .8em;
        padding: .5em;
        border: 1px solid #c66960;
        text-align: center;
}

/* LIENS FOOTER */
.liens_footer a {
        color: #c66960;
        font-size: 10px;
        text-transform: uppercase;
        text-shadow: 1px 1px #000;
        padding: 0 1%;
        font-weight: bold;
}

.liens_footer {
        width: 858px;
        margin: auto;
        text-align: right;
}

.liens_footer a:hover {
    	text-shadow: none;
  	font-weight: normal;
}

Index_box

<div class="categories_forums">
		<div class="secondarytitle">
                  	{catrow.tablehead.L_FORUM}
          	</div>
	
          
          
	
	
          
          
	
	<div class="forum">
          	<div class="fg">
                  	<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          	{catrow.forumrow.FORUM_NAME}
                  	</a>
                  
                  	<img class="statut_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          	</div>
          
          	<div class="fm">
                  	<div class="description">
                          	{catrow.forumrow.FORUM_DESC}
                  	</div>
                  
                  	<div class="stats">		
                          	<span>
                                  	{catrow.forumrow.POSTS} M.
                          	</span>
                          
                          	<span>
                                  	{catrow.forumrow.TOPICS} S.
                          	</span>
                  	</div>
          	</div>
          
          	<div class="fd">
                  	<div id="subforums" class="sous_forum">
                          	{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                  	</div>
                  	<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
                  
                  	<div class="dernier_message">
                          	{catrow.forumrow.LAST_POST}
                  	</div>
          	</div>
          
          	<div class="clear">
          	</div>
        </div>
	
          
          
          
	
	
          
          
          
	
	</div>

Compléter les descriptions

Les illustrations de chaque forum sont à insérer dans le champ image de chaque forum. Vos textes de description devront être entourés de balises "p". Exemple :

Ajout des polices

Pour ajouter les polices, toujours dans le même template placer ce qui suit avant "T_HEAD_STYLESHEET" ligne 18.

ATTENTION : Pensez à supprimer toutes les polices du forum dans "Couleurs" si vous souhaitez que les Google Font soient prises en compte.

Codage index complet Concordia qui est en ligne Halloween Forumactif PHPBB2

Les images de groupe sont en 254*270px, les icônes en 65*65px.

CSS

a, a:hover {
  	text-decoration: none !important;
  	transition: .5s all;
}

.clear {
  	clear: both;
}

/* Scrollbar */
::-webkit-scrollbar {
    	width: 8px;
}
::-webkit-scrollbar-thumb {
    	background: #c2625f;
  	border-radius: 5px;
}
::-webkit-scrollbar-track {
    	background: #A1A2A7;
}

/************************************** QUI EST EN LIGNE **************************************/
.qeel {
        background: url(https://i.imgur.com/GOV1hVX.png) bottom no-repeat;
        margin: 4% 0 2%;	
  	font-family: 'Roboto Condensed', sans-serif;
}

.qeel .content {
        width: 1100px;
        margin: auto;
}

.qeel .qg {
        float: left;
        width: 30%;
}

.qm {
        float: left;
        width: 24%;
        margin: 0 8%;
        text-align: center;
}

.qd {
        float: left;
        width: 30%;
}

/* MEMBRES CONNECTES */
.online, .connectes {
        width: 100%;
        box-sizing: border-box;
        height: 130px;
        overflow: auto;
        padding: 5%;
        font-size: .8em;
        text-align: justify;
        background: rgba(255,255,255,.1);
}

/* CONNECTES 48H DERNIERES HEURES */
.connectes {
    	margin: 5% 0 0;
}

.connectes .row1 {
    	background: none;
}

.connectes .gensmall {
        font-size: 1em;
        font-family: 'Roboto Condensed', sans-serif;
}

/* GROUPES */
.paonglet {
      display: inline-block;
      cursor: pointer;
}
         
.contenu_paonglet {
        display: none;
        width: 254px;
        height: 270px;
        overflow: hidden;
}

.contenu_paonglets {
        width: 254px;
        margin: auto;
}

a.nom_groupe {
        display: block;
        margin-top: -60%;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px #000;
        font-size: 2.5em;
        font-family: 'Mr Dafoe', cursive;
}

.contenu_paonglet:hover .nom_groupe {
    	margin-top: 0;
}

/* DERNIER INSCRIT */
.dernier_inscrit {
        font-family: 'Mr Dafoe', cursive;
        font-size: 3em;
}

.dernier_inscrit strong {
        font-weight: normal;
        display: block;
        text-align: right;
        font-family: 'Roboto Condensed', sans-serif;
        text-transform: uppercase;
        font-size: .7em;
        margin: -2% 0 0;
}

/* STATISTIQUES */
.stats_qeel span {
        display: block;
        width: 80%;
        background: rgba(0,0,0,.1);
        padding: 2%;
        text-align: center;
        margin: 0 auto 4%;
        text-transform: uppercase;
        color: #e3e3e3;
}

.stats_qeel {
    	margin: 10% 0 0;
}

Index_Body

Remplacer les lignes commençant par "BEGIN disable_viewonline" et finissant par "END disable_viewonline" (lignes 136 à 184), par le contenu suivant :

<div class="qeel">
  <div class="content">
  	<div class="qg">
          	<div class="online">
                  	{LOGGED_IN_USER_LIST}
          	</div>
          
          	<div class="connectes">
                  	<table>
                          	{L_CONNECTED_MEMBERS}
                  	</table>
          	</div>
  	</div>
  
  	<div class="qm">
          	<script type="text/javascript">
            	//
            	</script>
          
            	<div class="contenu_paonglets">
                	<div class="contenu_paonglet" id="contenu_paonglet_g1">
                          	<img src="https://www.zupimages.net/up/18/35/a3tv.png" alt="" />
                          	<a href="#" class="nom_groupe">
                                  	Nom groupe #1
                          	</a>
			</div>

<div class="contenu_paonglet" id="contenu_paonglet_g2">
				<img src="https://www.zupimages.net/up/18/35/iqk4.png" alt="" />
                          	<a href="#" class="nom_groupe">
                                  	Nom groupe #2
                          	</a>
			</div>

<div class="contenu_paonglet" id="contenu_paonglet_g3">
				<img src="https://www.zupimages.net/up/18/35/5rlu.png" alt="" />
                          	<a href="#" class="nom_groupe">
                                  	Nom groupe #3
                          	</a>
			</div>
                  
                  	<div class="contenu_paonglet" id="contenu_paonglet_g4">
				<img src="https://www.zupimages.net/up/18/35/37yz.png" alt="" />
                          	<a href="#" class="nom_groupe">
                                  	Nom groupe #4
                          	</a>
			</div>
          	</div>
          
          	<div class="paonglets">
                	<span class="paonglet_0 paonglet" id="paonglet_g1" onmouseover="javascript:change_paonglet('g1');">
                          	<img src="https://www.zupimages.net/up/18/35/gmu0.png" alt="" />
                  	</span>
                  
                	<span class="paonglet_0 paonglet" id="paonglet_g2" onmouseover="javascript:change_paonglet('g2');">
                          	<img src="https://www.zupimages.net/up/18/35/pkl3.png" alt="" />
                  	</span>
                  
                	<span class="paonglet_0 paonglet" id="paonglet_g3" onmouseover="javascript:change_paonglet('g3');">
                          	<img src="https://www.zupimages.net/up/18/35/h6v5.png" alt="" />
                  	</span>
                  
                  	<span class="paonglet_0 paonglet" id="paonglet_g4" onmouseover="javascript:change_paonglet('g4');">
                          	<img src="https://www.zupimages.net/up/18/35/sztz.png" alt="" />
                  	</span>
		</div>

Ajout des polices

Pour ajouter les polices, toujours dans le même template placer ce qui suit avant "T_HEAD_STYLESHEET" ligne 18.

ATTENTION : Pensez à supprimer toutes les polices du forum dans "Couleurs" si vous souhaitez que les Google Font soient prises en compte.

Dernière modification : 25 April 2020 23 : 36.

#concordia #indexcomplet #forumactif #codage #libreservice

Halloween