Welcome

Halloween Profil & Message

Freedom

Halloween, LS codage Forumactif Templates & Eléments Messages & Profil Profil Freedom

PHPBB2

Optimisé Les informations du profil s'affichent en hover

Retour

Codage profil Freedom Halloween Forumactif

CSS

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

.clear {
    clear: both;
}

/***************************************************** MESSAGE ET PROFIL *****************************************************/
/* TITRE */
.message_profil_titre h1 {
    background: url(https://i.imgur.com/Rd6EneF.png);
    color: #deccce;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 1px;
    margin: auto;
    padding: .5% 0;
    text-align: center;
    text-transform: uppercase;
    width: 850px;
    margin: 2% 0 0 0;
}

/* BOUTON REPONDRE */
a.message_profil_repondre {
    margin: 0 0 0 2%;
}

/* MISE EN FORME MESSAGE ET PROFIL */
.message_profil {
    border-bottom: 20px solid #4a1e23;
    margin: 0 auto 2% auto;
    width: 850px;
    color: #626667;
}

/* PROFIL */
td.profil_message_profil {
    background: url(https://i.imgur.com/n56hPA9.png);
    font-size: 12px;
    text-align: center;
    padding: 0 4%;
    width: 250px;
}

/* DATE */
.message_profil_date {
    text-transform: uppercase;
    font-size: 10px;
    padding: 4% 0 5% 0;
}

/* AVATAR ET PROFIL */
.message_profil_hover {
    position: relative;
    border-top: 10px solid #4a1e23;
    border-right: 5px solid #4a1e23;
    border-bottom: 10px solid #4a1e23;
    border-left: 5px solid #4a1e23;
    width: 200px;
    margin: auto;
}

.message_profil_contenu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: rgba(0,0,0,.5);
    width: 200px;
    height: 320px;
    padding: 5%;
    box-sizing: border-box;
    text-align: left;
}

.message_profil_contenu:hover {
    z-index: 3;
}

.message_profil_avatar {
    position: relative;
    z-index: 2;
}

.message_profil_avatar:hover {
    z-index: 1;
}

/* PSEUDO */
.message_profil_pseudo a {
    font-size: 30px;
    margin: 5% 0 2% 0;
    display: block;
}

/* RANG */
.message_profil_rang {
    margin: 2% 0 10% 0;
}

/* MESSAGE */
.postbody div {
    width: 95%;
    margin: auto;
    padding: 2%;
}

td.message_profil_contenu_message {
    background: #2c2d2f;
}

/* LIENS FOOTER LISTE SUJETS */
.liste_sujets_bouton_footer a {
    text-align: center;
    font-size: 10px;
    background: #2c2d2f;
    padding: 1%;
    margin: 0 1%;
    text-transform: uppercase;
    color: #626667 !important;
    display: inline-block;
}

.liste_sujets_bouton_footer {
    text-align: center;
    margin: 2% 0;
}

.liste_sujets_bouton_footer a:hover {
    background: #ed540b;
    color: #fff !important;
}

.moderer {
    font-size: 0 !important;
}

Viewtopic_body

//]]>
</script>

<table class="message_profil" width="100%" border="0" cellspacing="1" cellpadding="0" >
	<div class="message_profil_titre">
          	<h1>{TOPIC_TITLE}</h1>
  	</div>
	
	<tr>
		<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
	</tr>
	
	{POLL_DISPLAY}
	
	
	<tr>
		<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
	</tr>
	
	
	<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
		<td class="profil_message_profil" width="200" valign="top">
			<div class="message_profil_date">
                          	{postrow.displayed.POST_DATE}
                  	</div>
                  
                  	<div class="message_profil_hover">
                          	<div class="message_profil_contenu">
                                  	
						{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
					
					{postrow.displayed.POSTER_RPG}
                          	</div>
                          
                  		<div class="message_profil_avatar">
                          		{postrow.displayed.POSTER_AVATAR}
                  		</div>
                  	</div>
                  
                  	<div class="message_profil_pseudo">
                          	<a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                          	{postrow.displayed.POSTER_NAME}
                  	</div>
                  
                  	<div class="message_profil_rang">
                          	{postrow.displayed.RANK_IMAGE}
                  	</div>
                  
                  	<div class="message_profil_options">
                          	{postrow.displayed.EDIT_IMG} 
                          	{postrow.displayed.DELETE_IMG}
                          	{postrow.displayed.PROFILE_IMG} 
                          	{postrow.displayed.PM_IMG}
                          	{postrow.displayed.ONLINE_IMG}
                  	</div>
		</td>
		<td class="message_profil_contenu_message" {postrow.displayed.THANK_BGCOLOR} valign="top" width="65%" height="28">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td colspan="2">
						
						<div class="vote gensmall">
							
							<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>

<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
								
								<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>

<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
								
							</div>

<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>

<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
							
						</div>

<div>{postrow.displayed.MESSAGE}</div>

<dl class="attachbox">
								<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
								<dd>
									
									<dl class="file">
										<dt>
											<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}

{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
											
										</dt>

<dd>
											<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
										</dd>

<dd>
											<em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
										</dd>

<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
									</dl>
									
								</dd>
							</dl>

<div class="clear"></div>
							
							<div class="signature_div">
								{postrow.displayed.SIGNATURE}
							</div>

</div>
						<span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
	
	
	
	
	<tr align="center">
		<td class="row1" colspan="2" height="28">
			<span class="genmed">{no_post.L_NO_POST}</span>
		</td>
	</tr>
	
</table>

<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
	<tbody>
		<tr>
			<td class="catBottom">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tbody>
						<tr>
							<td valign="top">
								<div class="cattitle"> {L_FORUM_RULES}</div>
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
		<tr>
			<td class="row1 clearfix">
				<table>
					<tr>
						
						<td class="logo">
							<img src="{RULE_IMG_URL}" alt="" />
						</td>
						
						<td class="rules postbody">
							{RULE_MSG}
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</tbody>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td colspan="2" align="center" style="padding:0px">
			
			<a name="quickreply"></a>
			{QUICK_REPLY_FORM}<br />
			
		</td>
	</tr>
</table>

<div class="liste_sujets_bouton_footer">
  	<span class="moderer">
          	{S_AUTH_LIST}
  	</span>

	
	<span id="surveillermessages">
          	{S_WATCH_TOPIC}
	</span>
	

</div>
<script type="text/javascript">document.getElementById('surveillermessages').innerHTML=document.getElementById('surveillermessages').innerHTML.replace(/Surveiller les sujets de ce forum/,"Surveiller");</script>
<script type="text/javascript">document.getElementById('marquersujetslus').innerHTML=document.getElementById('marquersujetslus').innerHTML.replace(/Marquer tous les sujets comme lus/,"Marquer comme lus");</script>

<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
	<tr>
		<td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
			<form name="action" method="get" action="{S_FORM_MOD_ACTION}">
				<input type="hidden" name="t" value="{TOPIC_ID}" />

<input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
			</form>
		</td>
	</tr>
</table>

<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

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

#freedom #messageprofil #forumactif #codage #libreservice

Halloween