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%;
}
|
|
|