Welcome

Halloween Page d'accueil

Maniac

Halloween, LS codage Forumactif Templates & Eléments Page d'accueil Page d'accueil Maniac

Invision

Optimisé Les images du staff se redimensionnent automatiquement, et les informations correspondantes s'affichent au survol. Les statistiques du qui est en ligne sont à droite, ainsi que les groupes (mise à jour automatique de ces derniers). Une fiche administrative est également disponible.
Réalisé pour le forum Maniac.

Retour

Codage page d'accueil Maniac Halloween Forumactif

CSS

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

::-webkit-scrollbar {
        width: 7px;
        height: 14px;
        background: #cebec1;
        border: 1px solid #a9a6a6;
}
::-webkit-scrollbar-thumb {
        border: solid 0 transparent;
        border-right-width: 2px;
        -webkit-border-radius: 5px;
        -webkit-border-top-right-radius: 9px 5px;
        -webkit-border-bottom-right-radius: 9px 5px;
        -webkit-box-shadow: inset 0 0 0 1px #6a1732, inset 0 0 0 6px #6a1732;
        border-left-width: 2px;
}
::-webkit-scrollbar-track-piece {
        background: transparent none;
        border: solid 4px transparent;
        border-right-width: 8px;
        margin: 4px;
        -webkit-box-shadow: inset 1px 1px 0 0 rgb(137,131,117), inset -1px -1px 0 0 rgb(224,220,210);
}

/******************************************** PAGE ACCUEIL ********************************************/
.pa_maniac {
        background: #cda2ae;
        padding: 2%;
        width: 890px;
  	box-sizing: border-box;
        margin: 2% auto;
  	font-family: Arial;
  	font-size: 12px;
  	line-height: 135%;
}

.pa_content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
  	text-align: justify;
}

/* TITRES */
.pa_maniac h2, .pa_maniac h2 span, .pa_maniac h2 strong {
        text-shadow: 1px 1px #6a1732;
        text-align: center;
        font-family: 'Jolly Lodger', cursive;
        font-size: 40px;
        margin: 2% 0;
        color: #201918;
}

.pa_maniac h2 {
        font-size: 0;
}

.pa_maniac h2 strong {
        margin: 0 0 0 1%;
        color: #6a1732;
        text-shadow: none;
}

/* CONCEPT */
.pa_content .pa_concept {
        background: #cebec1;
        box-sizing: border-box;
        padding: 2%;
        width: 30%;
        height: 128px;
}

.pa_content .pa_concept p {
        box-sizing: border-box;
        overflow: auto;
        padding: 0 5% 0 0;
        width: 100%;
        height: 100%;
}

/* LIENS */
.pa_content .liens_utiles {
        width: 30%;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        font-family: 'Roboto Condensed', sans-serif;
        text-transform: uppercase;
}

.pa_content .liens_utiles a {
        width: 50%;
        color: #d4e2f9;
        background: #6a1732;
        padding: 3% 0;
}

.pa_content .liens_utiles a:nth-child(2), .pa_content .liens_utiles a:nth-child(3), .pa_content .liens_utiles a:nth-child(6), .pa_content .liens_utiles a:nth-child(7) {
    	background: #48222e;
}

.pa_content .liens_utiles a:hover {
    	background: #a95470;
}

/* STATS */
.pa_content .stats {
        width: 40%;
        background: #a95470;
        padding: 2%;
        box-sizing: border-box;
        height: 128px;
        line-height: 1.6;
        color: #48222e;
}

/* STAFF */
.pa_content .staff {
        display: flex;
        flex-wrap: wrap;
        width: 20%;
        height: 128px;
}

.pa_content .staff .bloc_staff {
        height: 50%;
        overflow: hidden;
        position: relative;
        transition: .5s all;
        width: 50%;
}

.pa_content .staff .bloc_staff img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.pa_content .bloc_staff:hover .infos_staff {
        top: 0;
  	transition: .5s all;
}

.pa_content .infos_staff {
        position: absolute;
        top: 100%;
        background: #a84470;
        height: 100%;
  	transition: .5s all;
        left: 0;
        right: 0;
        text-align: center;
        padding: 10%;
  	bottom: 0;
}

.pa_content .infos_staff h3 {
        font-family: 'Roboto Condensed', sans-serif;
        color: #48222e;
        text-transform: uppercase;
        font-weight: normal;
}

.pa_content .infos_staff span {
        text-transform: lowercase;
        letter-spacing: 2px;
        font-style: italic;
        color: #cda2ae;
}

.pa_content .infos_staff a {
        display: block;
        background: #48222e;
        color: #cebec1;
        font-size: 10px;
        font-weight: bold;
        margin: 2% 0 0;
}

/* LIENS PUB */
.pa_content div:nth-child(5) {
        width: 10%;
        background: #d4e2f9;
        height: 128px;
        text-align: center;
        padding: 4% 0 0 0;
        box-sizing: border-box;
}

a.pa_publicite:nth-child(1n+2) {
    	margin: 0 0 0 4%;
}

a.pa_top {
        font-family: 'Jolly Lodger', cursive;
        font-size: 40px;
        color: #6a1732;
}

/* ACTUALITES */
.pa_content div:nth-child(6) {
        height: 128px;
        width: 30%;
        background: #a95470;
        color: #f4e2f9;
        padding: 2%;
        box-sizing: border-box;
        overflow: auto;
}

/* GROUPES CONNECTES */
.pa_content div:nth-child(7) {
        width: 40%;
        height: 128px;
        overflow: auto;
        background: #cebec1;
        padding: 2%;
        box-sizing: border-box;
}

.pa_groupes {
        font-family: 'Jolly Lodger', cursive;
        text-align: center;
        font-size: 0;
}

.pa_groupes a {
        font-size: 25px;
        font-weight: normal;
        margin: 0 2%;
}

HTML

A insérer dans le template Index_body, après "END switch_user_login_form_header" (ligne 45).

<div class="pa_maniac">
  	<h2><span>Bienvenue</span> {LOGGED_AS}</h2>

<div class="pa_content">
		<div class="pa_concept">
                  	<p>
                          	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae laoreet nunc. Quisque elementum iaculis nunc. Morbi enim sapien, imperdiet sit amet euismod eu, tincidunt et eros. Donec sit amet urna vestibulum magna dapibus luctus ac nec diam. Quisque auctor vitae massa vitae faucibus. Nullam tempor aliquam lacus, at cursus mi. Praesent facilisis eros sed purus efficitur eleifend. Nullam arcu quam, aliquet sed pharetra a, aliquam in metus. Nullam scelerisque, risus ut mollis auctor, tortor lorem condimentum diam, sed iaculis turpis justo ut ligula. Curabitur laoreet diam maximus mi volutpat vehicula. Aliquam venenatis condimentum libero, id blandit mi ultricies ac. Duis sed diam libero. Vivamus sollicitudin elit non gravida porta. Vivamus pharetra egestas augue in tristique.
                  	</p>
          	</div>

<div class="stats">                  	
                  	{TOTAL_POSTS}.
                  	<br />
                  	{TOTAL_USERS}.
                  	<br />
                  	{NEWEST_USER}.
                  	<br />
                  	{RECORD_USERS}.
		</div>
          
          	<div class="staff">
                  	<div class="bloc_staff">
                          	<img src="https://i.imgur.com/cCjI1cj.png" alt="" />
                          	<div class="infos_staff">
                                  	<h3>
                                          	Nom
                                  	</h3>
                                  
                                  	<span>
                                          	Rang
                                  	</span>
                                  
                                  	<a href="#">
                                          	MP
                                  	</a>
                          	</div>
                  	</div>
                  
                  	<div class="bloc_staff">
                          	<img src="https://i.imgur.com/cCjI1cj.png" alt="" />
                          	<div class="infos_staff">
                                  	<h3>
                                          	Nom
                                  	</h3>
                                  
                                  	<span>
                                          	Rang
                                  	</span>
                                  
                                  	<a href="#">
                                          	MP
                                  	</a>
                          	</div>
                  	</div>
                  
                  	<div class="bloc_staff">
                          	<img src="https://i.imgur.com/cCjI1cj.png" alt="" />
                          	<div class="infos_staff">
                                  	<h3>
                                          	Nom
                                  	</h3>
                                  
                                  	<span>
                                          	Rang
                                  	</span>
                                  
                                  	<a href="#">
                                          	MP
                                  	</a>
                          	</div>
                  	</div>
                  
                  	<div class="bloc_staff">
                          	<img src="https://i.imgur.com/cCjI1cj.png" alt="" />
                          	<div class="infos_staff">
                                  	<h3>
                                          	Nom
                                  	</h3>
                                  
                                  	<span>
                                          	Rang
                                  	</span>
                                  
                                  	<a href="#">
                                          	MP
                                  	</a>
                          	</div>
                  	</div>
          	</div>
          
          	<div>
                  	<a href="#" class="pa_publicite">
                          	Lien
                  	</a>
                  
                  	<a href="#" class="pa_publicite">
                          	Lien
                  	</a>
                  
	                <br /><br />
                  
                  	<a class="pa_top" href="#" target="_blank">
                          	1
                  	</a>
                  
                  	<a class="pa_top" href="#" target="_blank">
                          	2
                  	</a>
                  
                  	<a class="pa_top" href="#" target="_blank">
                          	3
                  	</a>
          	</div>
          
          	<div>
                  	blablabla
          	</div>
          
          	<div>
                  	<div class="pa_groupes">
                          	{GROUP_LEGEND}
                  	</div>
                  	{TOTAL_USERS_ONLINE}
                  	<br /><br />
                  	{LOGGED_IN_USER_LIST}
                  	<br /><br />
                  	{L_CONNECTED_MEMBERS}
          	</div>
  	</div>
</div>

Puis supprimer la partie du qui est en ligne entre les lignes 51 à 162.

<div id="fo_stat" class="borderwrap">
	<div class="maintitle floated">
		<h3>{L_STATISTICS}</h3>
		<div class="contract" id="bs0" onclick="toggleCategory('s0');">
			   
		</div>
	</div>

<table cellpadding="0" cellspacing="0" class="ipbtable">
		<thead>
			<tr>
				<th colspan="2">
					<div class="linklist clearfix statlinks">
						<ul>
							<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
							<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
							<li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
						</ul>
					</div>
				</th>
			</tr>
		</thead>
		<tfoot>
			<tr><td colspan="2"></td></tr>
		</tfoot>
		<tbody id="s0">
			<tr>
				<th colspan="2" class="formsubtitle">
				
				<a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
				
				
				{L_WHO_IS_ONLINE}
				
				</th>
			</tr>
			<tr>
				<td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
				<td class="row2">
					<div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
					<div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
					<div>{LEGEND} : {GROUP_LEGEND}</div>
				</td>
			</tr>
			
			<tr>
				<th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
			</tr>
			<tr>
				<td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
				<td class="row2">
					<p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
				</td>
			</tr>
			
			
			<tr>
				<th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
			</tr>
			<tr>
				<td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
				<td class="row2">
					{CALENDAR_EVENTS_5DAYS}
				</td>
			</tr>
			
			<tr>
				<th colspan="2" class="formsubtitle">

<a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>

{L_STATISTICS}
				
				</th>
			</tr>
			<tr>
				<td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
				<td class="row2">
					<p>{TOTAL_POSTS}</p>
					<p>{TOTAL_USERS}</p>
					<p>{NEWEST_USER}</p>
					<p>{RECORD_USERS}</p>
				</td>
			</tr>
			
			<tr>
				<th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
			</tr>
			<tr>
				<td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
				<td class="row2">
					<p>{TOTAL_CHATTERS_ONLINE}</p>
					<p>{CHATTERS_LIST}</p>
					
					<div id="chatbox_popup"></div>
					<script type="text/javascript">
					insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
					</script>
					
				</td>
			</tr>
			
		</tbody>
	</table>

</div>

Ajout des polices

Dans le template Overall_header, coller ceci avant "T_HEAD_STYLESHEET" :

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

#maniac #pageaccueil #forumactif #codage #libreservice

Halloween