Avada KedagraphConnexion

description[terminé] FOOTER Awesome BB

more_horiz
Bonjour et bonne année I love you

C'est encore moi XD

Carmina

Le type du code : D'après les possibilités d'écrite dans les règles de la section.Un footer QEEL awesomeBB
Le schéma: obligatoire. Designé ou fait à la main/paint.
Spoiler :

Acceptez-vous que le code soit mis en LS sur AK ? Vous avez le droit de dire non, mais le partage c'est beau ! Je peux également le poster en LS à retardement, genre dans 1 ou 2 mois pour que vous gardiez l'exclusivité pour votre MAJ et ensuite, quand il n'est plus utilisé, le laisser à la disposition d'autres Smile Vi
Les éléments : Textes/url/couleur/images/police ... N'hésitez pas à écrire vos dimensions et tout ce qui m'aidera à intégrer. Pour le coté responsive, les éléments peuvent se mettre un en dessous des autres, avec redimension de la colonne du milieu pour que la largeur égale celle des deux autres colonnes.
Un lien vers votre forum/site/Autre: http://ambrosiatest.fra.co/
Autre chose? écrire ici
Merci
fiche réalisée par laxy

descriptionRe: [terminé] FOOTER Awesome BB

more_horiz
Et voici les codes !! I love you

Le CSS :

Code:

/* -------- sidebar = QEEL - Jamy AvadaKedagraph -------- */
#page-footer{margin-top:0;}
#sidebar{ border-top:25px solid var(--fondfonce);  padding-bottom: 10px; background: url('https://i.pinimg.com/originals/cf/85/07/cf85078e6ad170933679280b00988b5f.jpg'); background-size:cover; margin-top: 120px !important}
.infos{width:400px;margin:-118px auto;background:var(--fondclair);border-top:25px solid var(--fondfonce);border-radius:100%;padding:20px 83px;text-align:center;text-transform:uppercase; line-height: 17px; font-size: 12px;}

.decoration{margin-top: 146px; text-align: center;}
.decoration a{  display:inline-block; margin: 0 5px;}
.decoration a img{  display:block; width: 25px;}

.wrappQEEL{display: flex; justify-content:space-between; width:90%; margin: 10px auto; flex-direction: column;}
#sidebar .headline{font-size:20px;font-weight:bold;text-align:right; width:80%; margin:0 auto;text-transform:uppercase;}
.totalUserOnline{text-align:right; width:90%; margin:0 10% 0 0;text-transform:uppercase;font-size: 11px; }


.blocInfos{padding: 3px 8px; background:var(--fondclair);  box-shadow: 2px 2px 4px black}

.wrapp-item{display: flex; justify-content:space-between; margin: 10px 0;}
#listOnline{width: 65%; height:50px; padding: 5px; overflow: auto; background:var(--fondbody);}
#listOnline br{display:none;}
#totalPost, #totalUser{background:var(--fondfonce); padding:10px 0; text-align:center;font-size: 11px;font-weight:normal; background:var(--fondbody); width: 13%;}

.wrapp-item2{display: flex; justify-content:space-between; margin: 10px 0; align-items: center;}
.lastLogged{height:70px; width: 65%; padding: 5px; overflow: auto; background:var(--fondbody);}
#newUser{width:30%; text-align:center; text-transform:uppercase; font-size: 12px; }

.birthday{width:60%; margin:20px auto; background:var(--fondbody); padding: 10px; text-align: center; font-size: 13px; text-transform: uppercase;}
.birthday br{display:none;}
#groups{text-align:center; margin:10px 0 15px;}
#groups .gensmall { text-transform:uppercase; background-color: none; border-bottom: 0; display: inline-block; font-size: 12px; font-weight:normal; margin: 0 5px; max-width: auto; width: auto;}


.partenaire{background:var(--fondclair); padding: 3px; text-align:center; margin: 10px 0 ;}
.partenaire img{display:inline-block; margin: 0 5px; width: 100px;}

.importantLink a{display:block; margin: 5px 0;text-align:center;background:var(--fondclair); color: var(--colorone); padding:10px 5px; text-transform:uppercase; font-size:12px;}


@media (min-width: 750px){
  #sidebar, .main-inner{float: none; }
  #index{ margin: 6px 85px 0; }
  #sidebar{width: auto;margin: 0;}
}
@media (min-width: 900px){
  .wrappQEEL{flex-direction: row; width:67%;}
  .blocInfos{width:45%; }
  .importantLink{width:40%;}
  .partenaire{width: 12%; text-align:center; margin: 0;}
  .partenaire img{display:block; margin: 5px auto; width: 90%;}
}

/* -------- FIN sidebar = QEEL tjrs dans le flux -------- */


Et les templates :
Dans le templates : overall_footer_begin
Faut aller supprimer les infos/lignes suivantes :

Code:

<!-- BEGIN disable_viewonline -->
<footer>
    <div class="wrap">
        <div id="forum-statistics">
            <div>
                <div>{TOTAL_POSTS}</div>
            </div>
            <div>
                <div>{TOTAL_USERS}</div>
            </div>
            <div>
                <div>{NEWEST_USER}</div>
            </div>
        </div>
    </div>
</footer>
<!-- END disable_viewonline -->


et dans le template page d'accueil remplace tout par ça :

Code:

<main id="index">
    <div class="main-inner">
        {CHATBOX_TOP}
        {BOARD_INDEX}
        {CHATBOX_BOTTOM}
    </div>
</main>

</div>

<!-- BEGIN disable_viewonline -->
<aside id="sidebar" class="sidebar-home">
  <div class="infos"> Univers steampunk • Victorien • Politique • Création originale de Lilith De Choiseul et Everard Zullheimer
    • Design et Codage par Lilith De Choiseul en collaboration avec Jamy - d'AvadaKedagraph • Contexte par Everard Zullheimer • Autres
    codages par Skaemp et Never Utopia. • Optimisation Chrome-Mozzila • 2017/01/22 • Ouvert le
  </div>
  
  <div class="decoration">
    <a href=""><img src="https://media.discordapp.net/attachments/514787768254332928/527552532902445057/123.png" /></a>
    <a href=""><img src="https://media.discordapp.net/attachments/514787768254332928/527552532902445057/123.png" /></a>
    <a href=""><img src="https://media.discordapp.net/attachments/514787768254332928/527552532902445057/123.png" /></a>
    <a href=""><img src="https://media.discordapp.net/attachments/514787768254332928/527552532902445057/123.png" /></a>
    <a href=""><img src="https://media.discordapp.net/attachments/514787768254332928/527552532902445057/123.png" /></a>
    <a href=""><img src="https://media.discordapp.net/attachments/514787768254332928/527552532902445057/123.png" /></a>
    <a href=""><img src="https://media.discordapp.net/attachments/514787768254332928/527552532902445057/123.png" /></a>
  </div>
  
  <div class="wrappQEEL">
    <div class="blocInfos">
       <div class="headline">Qui est en ligne</div>
       <div class="totalUserOnline">{TOTAL_USERS_ONLINE}</div>
      
        <div class="wrapp-item">
          <div id="listOnline">{LOGGED_IN_USER_LIST}</div>
          <div id="totalPost">{TOTAL_POSTS}</div>
          <div id="totalUser">{TOTAL_USERS}</div>
       </div>
      
        <div class="wrapp-item2">
          <div class="lastLogged">{L_CONNECTED_MEMBERS}</div>
          <div id="newUser">{NEWEST_USER}</div>
        </div>
      
      
        <div class="birthday">{L_WHOSBIRTHDAY_TODAY}</div>
      
        <div id="groups">{GROUP_LEGEND}</div>
    </div>
    
    <div class="partenaire">
      <img src="https://via.placeholder.com/100x35" />
      <img src="https://via.placeholder.com/100x35" />
      <img src="https://via.placeholder.com/100x35" />
      <img src="https://via.placeholder.com/100x35" />
      <img src="https://via.placeholder.com/100x35" />
      <img src="https://via.placeholder.com/100x35" />
    </div>
    
    <div class="importantLink">
      <a href="">L'histoire du forum</a>
      <a href="">Les intrigues du forum</a>
      <a href="">La vie Ambrosienne</a>
      <a href="">Le Panthéon divin</a>
      <a href="">Les groupes du forum</a>
      <a href="">L'atlas Ambrosien</a>
      <a href="">Guide du nouvel arrivant</a>
      <a href="">Mais qui sommes-nous ?</a>
    </div>
  </div>
</aside>

  <script type="text/javascript">
       $(document).ready(function() {
    
      var value = $('#totalPost strong').text();
      $('#totalPost').html(value + "<br>Messages");
    
          var value2 = $('#totalUser strong').text();
          $('#totalUser').html(value2 + "<br>Membres");
  
    
          document.getElementById('listOnline').innerHTML = document.getElementById('listOnline').innerHTML.replace(/Utilisateurs enregistrés/g,'Membres en ligne');
          document.getElementById('groups').innerHTML = document.getElementById('groups').innerHTML.replace(/[[\]]/g,'');
          document.getElementById('newUser').innerHTML = document.getElementById('newUser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/g,'Bienvenue à');
       });
    
  </script>
    
<!-- END disable_viewonline -->
    
<script type="text/javascript">
    $(document).ready(function() {
        if (!$('#sidebar').length) {
            $('#index').css('margin', 0);
        }
    });
</script>

descriptionRe: [terminé] FOOTER Awesome BB

more_horiz
J'archive, la commande étant terminée Smile

descriptionRe: [terminé] FOOTER Awesome BB

more_horiz
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum