Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
Pisrale

Venez retrouver du libre service divers en graphisme (avatars, icons, gifs, etc. . . ) ou codage (fiche rp, signatures, templates, etc. . . ) et ce sans inscription avec commande possible, c'est chez

Le Deal du moment :
Funko POP! Jumbo One Piece Kaido Dragon Form : ...
Voir le deal

Profil interne

Pisrale :: Codages :: Thèmes complets :: Sombre Pose
KoalaVolant
KoalaVolant
Ven 26 Mai 2023 - 13:38
Version du forum : PHPBB2


Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Sombre Pose"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".




Particularités du code :
- La couleur du profil dépend de la couleur du groupe
- Il est "Récompenses/Awards" compatible.
- Comme crédit il faut mettre : KoalaVolant & Andrea (sauf si vous utilisez pas les awards, en ce cas c'est juste KoalaVolant)

Installation du HTML


  1. Allez dans le Panneau d'administration > Affichage > Templates > Profil > profile_view_body

  2. Copier-coller le code suivant à l'intérieur (puis validez le template)


Code:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;600;700;800;900&family=Fjalla+One&display=swap" rel="stylesheet">
  <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) {
 if (item.startsWith('error : ')){
 let present_err=document.getElementById('field_id' + i + "_err");
 if(!present_err){
 let err = document.createElement('div');
 err.id = 'field_id' + i + "_err";
 err.classList.add("form-error");
 err.textContent = item.substring(8);
 document.getElementById('field_id' + i).querySelector('.field_editable input').after(err);
 }else{
 present_err.innerText=item.substring(8);
 }
 }else {
 let err=document.getElementById('field_id' + i + "_err");
 if(err){
 err.remove();
 }
 $('[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>

<div class="profilntos">
  <!-- Bande du profil -->
  <div id="bandenomprofil">
    <div class="pseudorangprofil">
      <!-- Pseudo du profil -->
      <div class="pseudontos"><b><span id="colorPseudo" class="gen">{USERNAME}</span></b></div>
      <!-- Rang -->
      <div class="rankntos"><span class="gen">{POSTER_RANK}</span></div>
    </div>
    <!-- Dernière visite et administration -->
    <div class="lastsawprofil">
      <span>{L_LAST_VISITED} : {LAST_VISIT_TIME}</span>
      <span>{L_ADMINISTRATE_USER} : {ADMINISTRATE_USER}{BAN_USER}</span>
    </div>
    <!-- MP du profil -->
    <div class="mpaenvoyerprofil">
    <!-- BEGIN contact_field -->{contact_field.CONTENT}<!-- END contact_field -->
    </div>
    </div>
  </div>
  <!-- Flex Avatar et Champs -->
  <div class="profilntosflex">
    <div class="avatarliensntos">
      <!-- Avatar du profil -->
      <div class="avatarntos">
        {AVATAR_IMG}
      </div>
      <!-- Liens sujets et messages (les plus importants, indeed) -->
      <div class="liensntos">
        <a rel="nofollow" class="sbjPFIL" href="/sta/{PUSERNAME}">{L_TOPICS} répondus</a>
        <a rel="nofollow" class="msgPFIL" href="/st/{PUSERNAME}">{L_TOPICS} créés</a>
        <a rel="nofollow" class="msgPFIL" href="/spa/{PUSERNAME}">{L_POSTS}</a>
      </div>
      <div class="awardsntos"><!-- BEGIN switch_awards -->
  <table>  <tr>      <td class="row1 awards_block_simple_wrapper" valign="top">
  <table width="200px" border="0" cellspacing="1" cellpadding="0">            <tr>        
    <td class="awards_block_simple"><span class="gen"><strong>{switch_awards.AWARDS_LIST}</strong></span></td>        
    </tr>        </table>      </td>  </tr></table>
  <!-- END switch_awards -->
      </div>
    </div>
    <!-- Champs du profil -->
    <div class="champprofilntos">
      <div class="champprofil1">
      <!-- BEGIN profile_field --><div id="field_id{profile_field.ID}"><div>
      <span class="gen">{profile_field.LABEL}</span> {profile_field.CONTENT}</div></div>
      <!-- END profile_field --></div>
    </div>
  
<!-- BEGIN switch_rpg -->
    
<div class="champprofil2"><div style="float:left; margin:0 10px 10px 0;">{RPG_IMAGE}</div>
 <!-- BEGIN rpg_fields -->
<span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span> {switch_rpg.rpg_fields.F_VALUE_NEW}<br/>
 <!-- END rpg_fields -->
 {U_ADMIN_RPG}
 </div>
    
 <!-- END switch_rpg -->
<!-- BEGIN switch_admin_user_comment_active --><span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span> {ADMIN_USER_COMMENT}<!-- END switch_admin_user_comment_active -->
<!-- Fin champs de profil -->
</div>
<!-- Fin du flex du profil -->
</div>
<!-- Fin du profil -->
</div>
  
  <script type="text/javascript">
;( function(){

    $(document).ready(() => {
const pseudoColor = $('#colorPseudo').children().css('color');
      $('#bandenomprofil').css('background', pseudoColor);
  
    });
  
  })($);
  </script>

<br />

Installation du CSS



  1. Le :Root
    Ce code utilise un système de “variables” rangé dans un “:root”.
    Si vous trouvez :root { } dans votre CSS déjà actuel, coller ce qu’il y a à l’intérieur du :root suivant, dans celui que vous possédez déjà.
    Attention, il peut y avoir des conflits de variable. Si c’est le cas, il suffit de renommer “--main-color” par exemple en “--main-color-banane” (ce que vous voulez), partout dans le code.
    Pour rechercher et remplacer dans tout un code : https://convertir.github.io/outils/remplacer-texte-en-ligne.html

    Note : Si vous utilisez plusieurs codes de Pisrale, il y a des chances qu’il y ait des conflits. Si vous voulez qu’on modifie les codes pour vous, suivez le bouton

    Personnaliser mon code

  2. Le reste du CSS
    Allez dans le Panneau d’Administration > Affichage > Images et Couleurs > Couleurs & CSS > Feuille de style CSS & 
Copier ce code

    Code:
    /*Rewards**/
     div.award {
        background-image: var(--award-image);
        background-position: center;
        background-size: cover;
        display: inline-block;
        height: 50px;
        margin: 3px;
        position: relative;
        scroll-snap-align: center;
        width: 50px;
        opacity: 80%;
    }

    div.award:hover {
        opacity: 100%;
    }
     
    .award_tooltiptext {
     background-color: #1c1c1c;
     border: 2px solid #000;
        border-radius: 6px;
        color: white;
        font-weight: 400;
        left: 60px;
        line-height: 10px;
        font-size: 13px;
        margin-top: -30px;
        opacity: 0;
        padding: 8px;
        pointer-events: none;
        position: absolute;
        text-align: center;
        top: 27px;
        transform: translateY(-50%);
        transition: opacity .4s;
        visibility: collapse;
        white-space: normal;
        width: 130px;
        word-break: break-word;
        z-index: 6;
    }
     
    .award_tooltiptext::after {
        border-color: transparent var(--awards_color) transparent transparent;
        border-style: solid;
        border-width: 7px;
        content: "";
        margin-top: -10px;
        position: absolute;
        right: 100%;
        top: 50%;
    }
     
    .award_tooltiptext_title {
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        padding-bottom: 3px;
    }

    @import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;600;700;800;900&family=Fjalla+One&display=swap');

    :root{
    --profil-font1:'Encode Sans', sans-serif;
    --profil-font2:'Fjalla One', sans-serif;
      
            --awards_color: #352c29;
        --profil-blanc:#f0f0f0;
        --profil-blanc-o:rgb(240,240,240,0.4);
        --profil-noir:#1c1c1c;
        --profil-degrade:linear-gradient(90deg, rgba(47,53,96,1) 0%, rgba(0,0,0,1) 100%);
    }

    .profilntos{ width:100%; font-family:var(--profil-font1); }
    .profilntos, .profilntos *{ box-sizing:border-box; }

    /* BANDE DU PROFIL */
    #bandenomprofil{ display:flex; justify-content:flex-end;
    align-items:center; padding:20px; }

    /* PSEUDO RANG */
    .pseudorangprofil{ width:42%; }

    /* Flèche pour edit */
    .ajax-profil_parent{ position:relative; }
    .ajax-profil_edit{ position:absolute; width:100px; top:50%; transform:translateY(-50%); }

    /*PSEUDO */
    .pseudorangprofil .pseudontos .gen{ text-align:center; display:block;
        font-size:35px; line-height:40px;
        font-family:var(--profil-font2); letter-spacing:3px; }
    .pseudorangprofil .pseudontos .gen strong{     color:var(--profil-blanc) !important; }

    /* RANG */

    .rankntos .gen{ font-size:14px;  display:block;
    text-align:center; color:var(--profil-blanc);
     letter-spacing:2px; }
    .rankntos img{ margin-top:5px;}

    /* DERNIERE VISITE ET ADMIN */

    .lastsawprofil{ width:24%; margin-left:20px; text-align:center;
        background:var(--profil-blanc-o);
        padding:5px; box-shadow: 0 0 8px 8px var(--profil-blanc-o);
    display:block; font-size:14px; color:var(--profil-noir); }
    .lastsawprofil span{ display:block; margin:5px 0px; }

    /* MP ET LIENS */

    .mpaenvoyerprofil{ text-align:right; width:9%; font-size:0; }
    .mpaenvoyerprofil a{ display:block; }
    /* FLEX D'AVATAR ET CHAMP */

    .profilntosflex{ display:flex; min-height:415px; max-height:550px; justify-content:space-between; position:relative;}
    .avatarliensntos{ width:200px; position:relative;
    top:-120px; left:20px; }
    .avatarliensntos img{ width:200px; height:320px; object-fit:cover;
    border:2px solid var(--profil-noir);}

    .liensntos{ margin-top:10px; }
    .liensntos a{ display:block; text-align:center; margin:5px 0;
    background:var(--profil-degrade); padding:10px; color:var(--profil-blanc);
    text-decoration:none; font-family:var(--profil-font2); text-transform:uppercase;  }
    .liensntos a:hover{ text-decoration:none !important; background:var(--profil-noir); }

    .champprofilntos{ padding:20px; margin:10px; text-align:justify;
        width:100%; position:relative; left:20px; height:360px; overflow:auto; font-size:13px;  }
    .champprofilntos .gen{ font-weight:bold; font-family:var(--profil-font1); font-size:15px; margin-top:10px; display:inline-block; }
    .champprofil2{ height:350px; overflow-y:auto; width:50%; padding:0 20px; margin:0 15px;  }

  3. Vous voulez enlever la partie des awards parce que vous n'en avez pas besoin ? Enlevez tout ce qu'il y a avant "@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;600;700;800;900&family=Fjalla+One&display=swap');".

  4. Les polices d’écriture ne vous plaisent pas ? Vous voulez des bords arrondis ou autre ? Des couleurs différentes ? Une modification minime mais qui rende ce code personnel pour vous ?
    Vous ne savez pas faire, n’avez aucun codeur à disposition ?

    Personnaliser mon code

  5. Le code bug ? Vous ne comprenez pas comment ça fonctionne ? Il y a un souci ? Dites le nous, histoire qu’on puisse vous aider Smile

    Signaler un souci

Revenir en haut

Profil interne

Pisrale :: Codages :: Thèmes complets :: Sombre Pose

Nos amis proches

Profil interne Parto512 Logo WyvArtem