Welcome

Halloween Autres

Profil Morsmordre

Halloween, LS codage Forumactif Templates & Eléments Autres Profil Morsmordre

PHPBB2

Optimisé Une navigation, un footer, un index complet, une liste des sujets, une liste des membres, une fiche administrative, un listing, une fiche publicité et une fiche de présentation sont également disponibles.

Retour

Codage profil Morsmordre Halloween Forumactif

Images

Morsmordre Halloween Forumactif Codage PHPBB2

CSS

/*********************************** PROFIL ***********************************/
.affichage_profil {
        background: url(https://i.imgur.com/6Xbjapd.png) no-repeat bottom left, url(https://i.imgur.com/q46je9p.jpg);
        font-family: 'Alegreya Sans SC', sans-serif;
        font-size: 14px;
        width: 100%;
}

/* IMAGE */
.profil_image {
        background: url(https://zupimages.net/up/18/17/43lu.png) no-repeat;
        content: "";
        display: block;
        float: left;
        height: 500px;
        width: 20%;
}

.profil_colonne {
        float: left;
        width: 80%;
}

/* BLOC AVATAR PSEUDO EN LIGNE */
.profil_images {
        float: left;
        width: 40%;
        text-align: center;
}

/* Avatar */
.profil_images h2 {
        background: url(https://i.imgur.com/f2Gmrxf.png) center no-repeat;
        width: 174px;
        height: 103px;
        margin: 5% auto 8%;
        font-family: Times New Roman;
        text-transform: lowercase;
        font-style: italic;
        font-size: 28px;
        letter-spacing: -2px;
        box-sizing: border-box;
        padding-top: 10%;
}

/* Bouton en ligne */
.profil_connecte {
        font-family: Times New Roman;
        font-size: 24px;
        text-transform: lowercase;
        letter-spacing: -2px;
        margin-top: -5%;
  	color: #d9d9d9;
}

.profil_connecte::before {
        background: url(https://i.imgur.com/JMQCncn.png);
        content: "";
        display: inline-block;
        height: 10px;
        margin: 0 1%;
        width: 10px;
}

/* BLOC INFORMATIONS DROITE */
.profil_bloc {
        width: 60%;
        float: left;
        padding: 5%;
        box-sizing: border-box;
}

/* Rang */
.profil_rang {
        text-align: center;
        font-size: 0;
}

/* Informations */
.profil_informations {
        background: rgba(0,0,0,.2);
        color: #d9d9d9;
        margin: 10% auto;
        padding: 5%;
        font-size: 12px;
        width: 90%;
        height: 200px;
        overflow: auto;
}

.profil_informations span::after {
        background: url(https://i.imgur.com/JMQCncn.png);
        width: 10px;
        height: 10px;
        content: "";
        display: inline-block;
        margin: 0 1%;
}

.profil_informations .field_uneditable {
    	display: inline-block;
}

/* Contact */
.profil_boutons img {
        display: block;
        margin: auto;
}

.profil_boutons {
    	font-size: 0;
}

.profil_boutons a {
        width: 50%;
        display: inline-block;
}

Profile_view_body

<div class="affichage_profil">
  	<div class="profil_image">
  	</div>
  
  	<div class="profil_colonne">          
          	<div class="profil_images">
          		<h2>
                  		{USERNAME}
          		</h2>
                  
                  	<div class="profil_avatar">
                          	{AVATAR_IMG}
                  	</div>
                  
                  	<div class="profil_connecte">
                          	{USER_ONLINE}
                  	</div>
          	</div>
          
          	<div class="profil_bloc">
                  	<div class="profil_rang">
                          	{POSTER_RANK}
                  	</div>
                  
                  	<div class="profil_informations">
                          	<span>
                                  	{L_LAST_VISITED}
                          	</span>
                          	{LAST_VISIT_TIME}
                          	<br />
				
					<span>
                                          	{L_PRIVATE_MSG}
                          		</span>
                          		{PRIVATE_MSG}
                          		<br />
				
                          
				
					<span>
                                          	{profile_field.LABEL}
                          		</span>
                          		{profile_field.CONTENT}
                          		<br />
                          	
                  	</div>
                  
                  	<div class="profil_boutons">
                          	
                          		<a rel="nofollow" class="profil_sujets" href="/sta/{PUSERNAME}">
                                          	{L_TOPICS}
                          		</a>
                          
					<a rel="nofollow" class="profil_messages" href="/spa/{PUSERNAME}">	
                                          	{L_POSTS}
                          		</a>
                          	
                          
                          	
					{contact_field.CONTENT}
				
                  	</div>
          	</div>
  	</div>
  
  	<div class="clear">
  	</div>
</div>
<br />
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
	$(document).ready(function(){
		$('[id^=field_id]').each(function(){
			if ( $(this).find('.field_editable').is('span, div') )
			{
				$(this).hover(function()
				{
					if( $(this).find('.field_editable.invisible').is('span, div') )
					{
						$(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
						$(this).find('.ajax-profil_edit').attr({
								alt: "{L_FIELD_EDIT_VALUE}",
								title: "{L_FIELD_EDIT_VALUE}"
							}).click(function(){
							$(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
							$(this).prev().find('.ajax-profil_valid').attr({
								alt: "{L_VALIDATE}",
								title: "{L_VALIDATE}"
							}).click(function(){
								var content = new Array();
								$(this).parent().find('[name]').each(function(){
									var type_special = $(this).is('input[type=radio],input[type=checkbox]');
									if ( (type_special && $(this).is(':checked')) || !type_special )
									{
										content.push(new Array($(this).attr('name'), $(this).attr('value')));
									}
								});
								var id_name = $(this).parents('[id^=field_id]').attr('id');
								var id = id_name.substring(8, id_name.length);
								$.post(
									"{U_AJAX_PROFILE}",
									{id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
									function(data){
										$.each(data, function(i, item){
											$('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
										});
									},
									"json"
								);
							});
							$(this).remove();
						});
					}
				},function()
				{
					if( $(this).find('.field_editable.invisible').is('span, div') )
					{
						$(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
						$(this).find('.ajax-profil_edit').remove();
					}
				});
			}
		});
	});
//]]>
</script>

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

#morsmordre #profil #forumactif #codage #libreservice

Halloween