Sidebar Meitha 340

Terrible

Bienvenue sur Terrible, le forum de libre-service pour vos codages de forums. Venez trouver ici toutes sortes de codes pour agrémenter aussi bien vos templates que vos messages, sans avoir besoin d'inscription !

Le Deal du moment : -42%
STANLEY Coffret outils 38 pièces
Voir le deal
19.99 €

Terrible :: Codes forum :: Divers
Awful
le Dim 5 Aoû - 12:50
Awful
Sidebar Meitha WcnGyEI

Effets au survol :

Sidebar Meitha YrgBgI5

Sidebar conçue pour l'index complet Meitha
Créditez-moi quelque part sur votre forum si vous utilisez ces codes


Codes et explications


phpBB2


Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :
Code:
<link href="https://fonts.googleapis.com/css?family=Roboto|Cousine|Montserrat:900i" rel="stylesheet">

Dans votre panneau d'administration, Affichage > Templates > Général > overall_header, trouvez le code suivant :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Juste après, collez :
Code:
<div id="sidebar">
    <div class="sidebar-intro">
        Forum <b>NC-16</b> optimisé pour <b>Chrome et Firefox</b>. Avatar illustré <b>200x400</b>, contexte fantastique. <b>Pas de minimum</b> de lignes.
    </div>
    <div class="sidebar-predef">
        <div>
            <img src="http://via.placeholder.com/180x80" />
            <div><b>Nom du perso</b>
                <div><a href="">Voir la fiche</a></div>
            </div>
        </div>
        <div>
            <img src="http://via.placeholder.com/180x80" />
            <div><b>Nom du perso</b>
                <div><a href="">Voir la fiche</a></div>
            </div>
        </div>
        <div>
            <img src="http://via.placeholder.com/180x80" />
            <div><b>Nom du perso</b>
                <div><a href="">Voir la fiche</a></div>
            </div>
        </div>
        <div>
            <img src="http://via.placeholder.com/180x80" />
            <div><b>Nom du perso</b>
                <div><a href="">Voir la fiche</a></div>
            </div>
        </div>
        <a href="#">Les autres sont cachés ici !</a>
    </div>

    <div class="sidebar-top">
        <a href="#" target="_blank">1</a>
        <a href="#" target="_blank">2</a>
        <a href="#" target="_blank">3</a>
        <a href="#" target="_blank">4</a>
    </div>

    <div class="sidebar-event">
        <img src="http://via.placeholder.com/170x160" />
        <div>
            <div>Nom du mois actuel</div>
            <div>Evénement RP du moment</div>
        </div>
    </div>

    <div id="recent_topics" class="sidebar-recent"></div>

    <div class="sidebar-img">
        <img src="http://via.placeholder.com/250x500" />
    </div>
</div>


<script type="text/javascript">
    jQuery.get('/portal', function(data) {
        var topics = $(data).find('.forumline td.row1 .gensmall');
        $(topics).contents().filter(function() {
            return this.nodeType === 3 && $.trim(this.textContent).length
        }).wrap('<span></span>');
        $('#recent_topics').html($(topics));
    });
</script>

Pour l'affichage des sujets récents, dans votre panneau d'affichage > Modules > Portails et Widgets > Configuration du portail, créez un nouveau portail. À "Afficher le portail :" cochez "non"

Modifiez sa structure et supprimez tous les widgets, excepté celui des sujets récents. Enregistrez.

Modifiez le widget des sujets récents. À "Activer le défilement des sujets :" cochez "non".

Normalement, le code javascript dans le template devrait faire le reste et les derniers sujets devraient s'afficher dans la sidebar. Si ce n'est pas le cas, vérifiez que votre portail apparaît bien en ajoutant "/portal" à la fin de l'adresse de votre forum.

En cas de souci (si par exemple le portail ne s'affiche pas), tentez la manœuvre suivante :
- À "Afficher le portail :" cochez "oui"
- Dans votre PA > Affichage > Page d'accueil > Généralités, à "L'adresse de votre forum dirige vers :" cochez "L'index du forum"
- Dans votre PA > Modules > Portails et Widgets > Configuration du portail, à "Afficher le portail :" cochez "non"

Si cela ne fonctionne toujours pas, il vaut mieux parfois recommencer la manœuvre dès le début, les voies de Forumactif sont impénétrables.

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
Code:
/***********************************
*** GENERAL ***
**********************************/
 body {
     position: relative;
     overflow-x: hidden;
}
/***********************************
*** SIDEBAR ***
**********************************/
 #sidebar {
     background: #f1f1f1;
     position: absolute;
     width: 200px;
     height: 100%;
     min-height: 1490px;
     left: 0px;
     font-family: 'Roboto', sans-serif;
     box-sizing: border-box;
     padding: 10px;
     transition: all 0.3s;
     z-index: 100;
}
 #sidebar a {
     text-decoration: none!important;
}
 .sidebar-intro {
     font-family: 'Cousine', monospace;
     text-transform: uppercase;
     font-size: 9px;
     letter-spacing: 1px;
     border-top: 1px solid #e1e1e1;
     border-bottom: 1px solid #e1e1e1;
     padding: 12px 0px 10px;
     margin-bottom: 15px;
     color: #181818;
}
 .sidebar-intro b {
     text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
     color: #c3a7cc;
}
 .sidebar-predef > div{
     margin-bottom: 10px;
     height: 80px;
     overflow: hidden;
     position: relative;
}
 .sidebar-predef > div > div {
     height: 100%;
     width: 100%;
     position: absolute;
     top: -100%;
     background: #c3a7cc;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     transition: top 0.3s;
}
 .sidebar-predef > div:hover > div {
     top: 0;
}
 .sidebar-predef > div > div b {
     font-family: 'Montserrat', sans-serif;
     font-style: italic;
     text-transform: uppercase;
     font-size: 10px;
     letter-spacing: 1px;
     text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}
 .sidebar-predef > div > div a {
     color: #fff;
     text-transform: uppercase;
     font-size: 9px;
     font-family: 'Cousine', monospace;
     letter-spacing: 1px;
     text-shadow: 1px 1px 0px #b28eb9;
}
 .sidebar-predef > a {
     font-size: 8px;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: #c3a7cc;
     display: block;
     border: 1px solid #dfcfe3;
     text-align: center;
     padding: 10px 0;
     background: transparent;
     transition: all 0.3s;
}
 .sidebar-predef > a:hover {
     background: #ebdcf0;
}
 .sidebar-top {
     display: flex;
     justify-content: space-between;
     margin: 30px auto;
}
 .sidebar-top a {
     height: 35px;
     width: 35px;
     border: 1px solid #e1e1e1;
     border-radius: 50%;
     text-align: center;
     font-family: 'Montserrat', sans-serif;
     line-height: 35px;
     background: #fbfbfb;
     color: #ccc;
     font-size: 10px;
     text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
     transition: all 0.3s;
}
 .sidebar-top a:hover {
     border-color: #c3a7cc;
}
 .sidebar-event {
     margin: auto;
     width: 180px;
     height: 170px;
     box-sizing: border-box;
     border: 1px solid #fff;
     padding: 4px;
     position: relative;
}
 .sidebar-event > div {
     height: calc(100% - 8px);
     width: calc(100% - 8px);
     background: rgba(0,0,0,0.7);
     position: absolute;
     top: 4px;
     display: flex;
     flex-direction: column;
     padding: 10px;
     box-sizing: border-box;
     color: #fff;
     text-transform: uppercase;
     font-size: 11px;
     text-align: center;
     justify-content: center;
     transform: scale(0);
     transition: all 0.3s;
}
 .sidebar-event:hover > div {
     transform: scale(1);
}
 .sidebar-event > div div:first-child {
     font-family: 'Montserrat', sans-serif;
     font-style: italic;
}
 .sidebar-event > div > img {
     height: 50px;
     margin-right: 10px;
}
 .sidebar-recent {
     box-sizing: border-box;
     border: 1px solid #e1e1e1;
     padding: 10px;
     width: 100%;
     margin: 40px auto 0px;
     height: 250px;
     overflow: auto;
     background: #fbfbfb;
}
 .sidebar-recent .gensmall {
     color: #181818;
     text-transform: uppercase;
     font-size: 9px;
}
 .sidebar-recent img, .sidebar-recent .gensmall > span:first-child, .sidebar-recent .gensmall br + span {
     display: none;
}
 .sidebar-recent a[href^="/t"] {
     color: #c3a7cc;
     letter-spacing: 1px;
     font-family: 'Montserrat', sans-serif;
     font-style: italic;
     font-size: 8px;
     transition: color 0.3s;
}
 .sidebar-recent a[href^="/t"]:hover {
     color: #969696;
}
 .sidebar-img {
     position: absolute;
     left: 0;
     bottom: 0;
}
 .sidebar-img img {
     width: 100%;
}

Noctua
le Mer 26 Fév - 0:47
avatar
Bonsoir,

Magnifique sidebar que vous avez fait là.
J'aurai aimé savoir s'il était possible de la rendre rétractable et si oui comment s'il vous plaît :x
Segovia
le Mer 26 Fév - 2:33
avatar
Bonjour/Bonsoir !

J'avoue que cela m'intéresse également ! Après s'il n'est pas possible de la rendre rétractable, auriez-vous un code pour qu'elle n'apparaisse pas sur une certaine taille d'écran ? Par exemple, que la sidebar soit visible sur Pc (écran Pc) et non sur un écran de tablette et/ou téléphone portable.

Je ne sais pas si j'ai été clair dans ma requête..
En vous remerciant !
Awful
le Mar 10 Mar - 9:11
Awful
Bonjour à vous !
J'ai un tuto sur les sidebars rétractables ici si ça vous intéresse : https://terrible.forumactif.org/t173-sidebar-retractable-ou-non
Vous pouvez tenter de l'adapter à cette sidebar, ou faire une demande dans la partie aide si vous n'y arrivez pas : https://terrible.forumactif.org/f19-probleme-avec-un-code

Pour que la sidebar ne s'affiche pas sur mobile, vous pouvez également ajouter ce code à votre CSS (supposons que la taille maximale pour un écran mobile soit de 767px) :
Code:
@media screen and (max-width: 767px) {
  #sidebar {
    display:none;
  }
}
CrazySweet
le Lun 20 Avr - 13:47
avatar
Bonjour !
J'ai un petit souci. Le Wigdet "Derniers sujets" s'affiche en double. Donc dans la sidebar mais aussi le widget en lui même. J'ai beau chercher, impossible de trouver comment faire.
Lykos
le Lun 15 Juin - 17:37
avatar
Bonjour !

Je voulais savoir si le code était compatible avec du phpbb3 ? et où le placer sur le template, parce que je ne vois pas d'équivalent ?

tes codages sont chouettes, et j'aimerai avoir une sidebar sur mon nouveau bébé, mais avec du phpbb3 ! voilà, merci d'avance pour ta réponse, et courage à toi !
Contenu sponsorisé