Funzionalitą
Questo script permette di avere uno slider "navigabile" con gli ultimi topic del forum.
Installazione
Per installare lo script basterą inserire, nel punto in cui si vorrą veder comparire lo slider:
HTML
<div class="lastarticles" style="display: none">[LAST_TOPICS]</div>
<script type="text/javascript" src="https://nb.forumfree.it/scripts/ace/slider.js"></script>
Lo script sfrutta il widget
[LAST_TOPICS] fornito da Forumfree. Tutte le personalizzazioni possibili sono quindi quelle relative a tale widget, illustrate nella guida
Wiki - Ultime_discussioni_sul_proprio_sito sotto la voce
Forma contratta (widget).
Personalizzazione
Per la personalizzazione base dello script, bisogna inserire in
Colori e stiliCODICE
.lastarticles > div {display: inline-block; width: 100%; vertical-align: top; height: 48px; overflow: hidden; background: #F8F8F8; margin: 0 0 20px 0; border-radius: 2px; box-shadow: 0 0 5px rgba(0, 0, 0, .1)}
.lastarticles .right, .lastarticles .center {display: inline-block; height: 48px; overflow: hidden}
.lastarticles .right {width: 10%; transition: all .5s; line-height: 48px}
.lastarticles .right a {color: #B6B6B6; font-size: 20px; cursor: pointer; margin: 0 4px}
.lastarticles .right a:last-child {margin-right: 10px}
.lastarticles .right {text-align: right}
.lastarticles .right a:hover {opacity: .6}
.lastarticles .center {width: 90%}
.lastarticles .center .slider_main {transition: all .5s; margin-left: 10px}
.lastarticles .thumbs a * {border-radius: 100%; height: 26px}
.lastarticles .topic {border-radius: 2px; transition: all .5s; height: 48px; overflow: hidden; line-height: 48px; text-align: left}
.lastarticles .thumbs {float: none !important; display: inline-block}
.lastarticles .topic > span br {display: none}
.lastarticles .topic > span {margin-left: 5px}
.lastarticles .topic > a {max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; padding-bottom: 2px}
.lastarticles .topic > span a {max-width: 140px; padding-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle}
.lastarticles .topic a:hover {color: #535353}
.lastarticles .topic:hover > a, .lastarticles .topic:hover > span a {opacity: .6}
.lastarticles .topic > .thumbs a {width: 25px !important; height: 25px !important}
.lastarticles .left > a {display: none; padding-top: 10px}
Per modificarne il colore basterą modificare il background di
.lastarticles > div . Per modificare invece la larghezza, andrą modificato il width del suddetto selettore.
Si consiglia di non modificare altro, se non si conoscono almeno le basi del CSS.
