Welcome

Halloween Profil & Message

Colby Lake

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

PHPBB2

Optimisé Une navigation, un index complet, une feuille de présentation et une fiche de contexte sont également disponibles. L'image "en ligne" est de taille 106*18px. Important Le profil ne peut que contenir 5 champs de texte court. Le champ image doit être placé en second dans la liste. Et le champ "Messages" en premier. Un autre sens risque de faire planter le code. Le lien "fiche de présentation" est un champ contact.

Retour

Codage profil Colby Lake Halloween Forumactif

Ajouter la police

Pour ajouter la police de l'aperçu, dans le template "Overall_header" coller ceci juste avant "{T_HEAD_STYLESHEET}" ligne 18.

CSS

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

::-webkit-scrollbar {
        background: #e3e3e3;
        border: 0;
        width: 3px;
}

::-webkit-scrollbar-thumb {
        background: #333;
        border: 0;
}

/****************************************************************** AFFICHAGE MESSAGES ET PROFIL ******************************************************************/
.ensemble_message_profil {
    display: flex;
    flex-direction: row;
}

/* TITRE DATE ET EDITER CITER SUPPRIMER */
.header_sujet_profil {
        background: #1e1f20;
        color: #eee;
        letter-spacing: 2px;
        margin: 1% 0;
        padding: 2%;
  font-family: 'Share Tech Mono', monospace;
        text-align: right;
        box-sizing: border-box;
}

.titre_date_message {
        float: left;
        text-align: left;
}

.date_sujet {
        font-size: 10px;
        padding: .5% 0 0;
}

/* PROFIL */
.profil_message {
        background: #f8f8f8;
        border: 1px solid rgba(26,25,25,.2);
        padding: 2%;
        text-align: center;
        width: 30%;
  font-family: 'Share Tech Mono', monospace;
  	color: #1a1919;
        box-sizing: border-box;

}

/* Pseudo */
.pseudo_sujet {
        background: #1e1f20;
        padding: 5%;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-size: 1.5vw;
  	margin: auto;
  	box-sizing: border-box;
  	width: 200px;
}

.pseudo_sujet a strong {
    	font-weight: normal;
}

/* Avatar et infos profil */
.bloc_avatar_sujet {
        width: 200px;
        height: 320px;
        overflow: hidden;
        transition: .5s all;
  	margin: auto;
}

.avatar_sujet img {
  	display: block;
}

.bloc_avatar_sujet:hover .info_avatar_sujet {
    	margin-top: -310px;
}

.info_avatar_sujet {
        background: #f8f8f8;
        box-sizing: border-box;
        height: 300px;
        margin: 0 auto;
        overflow: auto;
        padding: 15% 0;
        position: relative;
        text-align: center;
        text-transform: lowercase;
        transition: .5s all;
        width: 85%;
        z-index: 2;
}

.info_avatar_sujet .label {
    	font-size: 0;
}

.info_avatar_sujet .content_element_profil:nth-child(55n+2) {
        background: url(https://i.servimg.com/u/f38/19/69/79/53/fond_i10.png);
        width: 150px;
        height: 55px;
        text-align: center;
        box-sizing: border-box;
        padding: 4.22% 0 0 0;
        margin: 0 auto 5%;
        border: 0;
}

.content_element_profil:nth-child(55n+1) {
        position: absolute;
        bottom: 7%;
        text-align: center;
        width: 100%;
        left: 0;
        font-size: 1.5vw;
        background: none;
        border: 0;
        margin: 0;
}

.content_element_profil:nth-child(55n+1)::after {
        content: "Messages";
        display: block;
        font-size: 12px;
        letter-spacing: 5px;
}

.info_avatar_sujet img {
        width: 135px;
        height: 40px;
        object-fit: cover;
}

.content_element_profil {
        background: #eee;
        width: 90%;
        margin: 0 auto 4%;
        font-size: 12px;
        border: 1px solid rgba(26,25,25,.2);
}

/* Rang */
.rang_sujet {
        background: #1e1f20;
        color: #eee;
        font-size: 12px;
        letter-spacing: 3px;
        padding: 4% 0;
  	margin: auto;
  	width: 200px;
  	box-sizing: border-box;
}

/* Bouton presentation */
.lien_presentation {
    	margin: 5% auto 10%;
}

/* Contenu message */
.content_message_profil {
        background: #f8f8f8;
        border-bottom: 1px solid rgba(65,64,64,.2);
        border-right: 1px solid rgba(65,64,64,.2);
        border-top: 1px solid rgba(65,64,64,.2);
        padding: 2% 4%;
        box-sizing: border-box;
  font-family: 'Share Tech Mono', monospace;
  	color: #1a1919;
}

/* Pagination */
.pagination_footer_sujet {
        background: #1e1f20;
        color: #eee;
        margin: 1% 0;
        line-height: 3;
        box-sizing: border-box;
        border: 1px solid rgba(26,25,25,.2);
        font-size: 12px;
  font-family: 'Share Tech Mono', monospace;
  	color: #1a1919;
        text-align: right;
}

.number_page_sujet {
    	float: left;
  	margin: 0 0 0 3%;
}

.pagination_nav a {
    	color: #eee;
}

/* Arreter de surveiller et moderer */
.liens_footer_sujet {
        text-align: center;
        margin: 1% 0;
        font-size: 12px;
  font-family: 'Share Tech Mono', monospace;
  	color: #1a1919;
}

.surveiller_sujet a {
        background: #3d4b49;
        display: inline-block;
        color: #eee;
        line-height: 3;
        width: 250px;
        text-transform: uppercase;
        letter-spacing: 2px;
  font-family: 'Share Tech Mono', monospace;
  	color: #1a1919;
        font-size: 10px;  
        border: 1px solid rgba(26,25,25,.2);
}

.moderer_sujet {
        float: left;
        font-size: 0;
}

.moderer_sujet a {
        font-size: 10px;
        background: #3d4b49;
        display: block;
        color: #eee;
        text-transform: uppercase;
        letter-spacing: 2px;
        width: 250px;
        border: 1px solid rgba(26,25,25,.5);
        line-height: 3;
  font-family: 'Share Tech Mono', monospace;
  	color: #1a1919;
        margin: 0 0 0 60%;
}

Viewtopic_body

//]]>
</script>

<table width="100%" border="0" cellspacing="1" cellpadding="0" >
	
	
	{POLL_DISPLAY}
	
	
	<tr>
		<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
	</tr>
	
	
  	
  	<tr>
          	<td colspan="2">
                  	<div class="header_sujet_profil">
                  		<div class="titre_date_message">
                                  	{postrow.displayed.POST_SUBJECT}
                  			<div class="date_sujet">
                          			{postrow.displayed.POST_DATE}
                  			</div>
                          	</div>
                          
                  		<div class="options_sujet">
                          		{postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG}
                  		</div>
                  	</div>
          	</td>
  	</tr>
  
	<tr class="post post--{postrow.displayed.U_POST_ID} ensemble_profil_message" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
		
          	<td class="profil_message"{postrow.displayed.THANK_BGCOLOR} valign="top">
                  	<div class="pseudo_sujet">
                          	<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="bloc_avatar_sujet">
                          	<div class="avatar_sujet">
                                  	{postrow.displayed.POSTER_AVATAR}
                          	</div>
                          
                          	<div class="info_avatar_sujet">
                                  	
						<div class="content_element_profil">
                                                  	{postrow.displayed.profile_field.CONTENT}
                                  		</div>
					
					{postrow.displayed.POSTER_RPG}
                          	</div>
                  	</div>
                  
                  	<div class="rang_sujet">
                          	{postrow.displayed.POSTER_RANK}
                  	</div>	    
                  
                  	<div class="lien_presentation">
                          	
                          		{postrow.displayed.contact_field.CONTENT}
                          	
                  	</div>	                  
                  
                  	<div class="online_sujet">
                          	{postrow.displayed.ONLINE_IMG}
                  	</div>
		</td>
          
		<td class="content_message_profil"{postrow.displayed.THANK_BGCOLOR} valign="top" 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>

<div class="pagination_footer_sujet">
  	<div class="number_page_sujet">
          	{PAGE_NUMBER}
  	</div>
  
  	<div class="pagination_nav">
          	
			{PAGINATION}
		
  	</div>
</div>
	
<div class="liens_footer_sujet">
	<div class="moderer_sujet">
		
			{S_AUTH_LIST}
		
	</div>
  
  	
          	<div class="surveiller_sujet">
                  	
				{S_WATCH_TOPIC}
			
          	</div>
	
</div>

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

<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

<td align="center">
			<span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
		</td>
		<td align="center" width="250">
			<span class="gensmall"> </span>
		</td>
		
	</tr>
</table>
</form>

<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.

#colbyLake #messageprofil #forumactif #codage #libreservice

Halloween