Aggiungi un selettore di stile/tema

Tutorial Aggiungi un selettore di stile/tema

Messaggio Da Niko Dom 17 Gen 2021 - 16:34

Aggiungi un selettore di stile/tema


Questo tutorial ti mostrerà come aggiungere un selettore di temi a piè di pagina del tuo forum di Forumattivo come nell'esempio seguente. Funzionerà su tutte le versioni del forum.

Aggiungi un selettore di stile/tema Captur97

Installazione

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice JAvascript e creiamo un nuovo codice javascript con le seguenti impostazioni:
  • Titolo: a tua scelta
  • Dove: In tutte le pagine
  • Codice:
    Codice:
    $(function() {
      // disable the default stylesheet for better compatibility with themes
      // if you have modified templates styled with CSS it is better to choose : false
      var disable_default_stylesheet = true;
     
      // add new themes by writing : addTheme('theme_name', 'theme_url');
      // default themes below are for phpbb3, you can remove or modify them for other versions
      addTheme('Prosilver Magenta','https:/demo.nicetheme.com/forum?theme_id=100016');
      addTheme('Prosilver Green','https://demo.nicetheme.com/forum?theme_id=100018');
      addTheme('Prosilver Red','https://demo.nicetheme.com/forum?theme_id=100020');
      addTheme('Prosilver Grey','https://demo.nicetheme.com/forum?theme_id=100023');
      addTheme('Prosilver Yellow','https://demo.nicetheme.com/forum?theme_id=100024');
      addTheme('Prosilver Pink','https://demo.nicetheme.com/forum?theme_id=100026');
     
     
      var c = document.cookie.split(';'), dds = disable_default_stylesheet, s;
      for (i=0;i<c.length;i++) {
        if (/newtheme=\/\d+-ltr\.css/.test(c[i])) {
          var theme = c[i].replace(/newtheme=(\/\d+-ltr.css)/,'$1').replace(/\s/g,'');
          newSheet();
        if (window.localStorage) { $('#themeStyle').html(localStorage.selectedTheme); cleanStyle() }
          else $('#themeStyle').load(theme,function(){cleanStyle()});
          $('#themePicker option[value="'+theme+'"]').attr('selected','true');
        }
      }
     
      function addTheme(name, theme) {
        if (!document.getElementById('themePicker')) {
          var n = document.createElement('DIV'), d = document.createElement('OPTION');
        s = document.createElement('SELECT');
          n.innerHTML = '<span style="font-weight:bold;font-size:12px;vertical-align:middle;">Scegli un tema :&nbsp;</span>';
          s.id = 'themePicker';
          d.value = $('head link[href$="-ltr.css"]').attr('href') + '(default)';
          d.innerHTML = 'Default';
          n.appendChild(s);
          s.appendChild(d);
          $('#page-footer, #pun-about, #gfooter').append(n);
        }
        var o = document.createElement('OPTION');
        o.value = theme.replace(/.*?(\d+)/,'/$1-ltr.css');
        o.innerHTML = name;
        s.appendChild(o);
      };
     
      s.onchange = function() {
        var date = new Date();
        date.setTime(date.getTime() + (365*24*60*60*1000));
        if (!document.getElementById('themeStyle')) newSheet();
        if (/\(default\)/.test(s.value)) {var v='default'; if ($('#themeStyle').html().length > 0 && dds==true) $('#themeStyle').load(s.value.replace(/\(default\)/,'')); else $('#themeStyle').html('')}
        else {var v=s.value; $('#themeStyle').load(s.value,function(){cleanStyle();if (window.localStorage) localStorage.selectedTheme = $('#themeStyle').html()})}
        document.cookie = 'newtheme='+v+'; expires='+date.toGMTString()+';';
      };
      function newSheet(){var t=document.createElement('STYLE'); t.id='themeStyle'; document.getElementsByTagName('HEAD')[0].appendChild(t)};
      function cleanStyle(){if($('head link[href$="-ltr.css"]').length && dds==true) $('head link[href$="-ltr.css"]').remove(); $('#themeStyle').html($('#themeStyle').html().replace(/#hitskin_preview.*/,''))};
    });


Modifiche

Ora che hai installato lo script puoi iniziare ad aggiungere o modificare temi esistenti.
Per aggiungere un nuovo tema scrivi semplicemente: addTheme ('theme_name', 'theme_url');

  • theme_name : questo è il nome del tema visualizzato nel menu a discesa
  • theme_url : l'URL del tema che vuoi "importare"


Puoi trovare gli URL del tema su hitskin: https://it.hitskin.com/

Fai clic sullo skin che desideri , quindi fai clic su anteprima:
https://it.hitskin.com/search-a-skin/prosilver-red/100003

Aggiungi un selettore di stile/tema Captur98

Una volta nel forum di anteprima, copia l'URL dalla barra degli indirizzi e incollalo dove si trova theme_url
https://demo.nicetheme.com/forum?theme_id=100003

Aggiungi un selettore di stile/tema Captur99

Dopo non devi fare altro che sostituire theme_name con il nome del tema, ad esempio così:
Codice:
addTheme('Prosilver Red', 'https://demo.nicetheme.com/forum?theme_id=100003');

disable_default_stylesheet : Usato per disabilitare lo stile di default. Fare questo permette una migliore compatibilità con i temi importati:
  • Lo stile sarà lo stesso come su Hitskin, salvo per le immagini
  • Ci saranno meno conflitti


I valori da usare sono:
  • true : Si, disabilita lo stile di default
    - true offre la migliore compatibilità, assicurando che il tema venga visualizzato come su Hitskin. Ovviamente questo dovrebbe essere impostato su true solo se non hai modificato pesantemente lo stile del tuo forum.

  • false : No, non disabilita lo stile di default
    - false è meglio utilizzarlo per i forum che hanno modelli modificati e utilizzano il foglio di stile per definire lo stile dei nuovi elementi.


Il tutto con una scelta fatta:
Codice:
var disable_default_stylesheet = false; // Mantiene quello di default

Informazioni

  • I temi forniti per impostazione predefinita sono per phpbb3. Puoi eliminarli o modificarli come desideri.

  • Per una migliore compatibilità,usa solo temi che corrispondono alla tua attuale versione del forum.

  • Vengono importati solo i fogli di stile di questi temi, il che significa che nessuna immagine cambierà.

  • Ogni volta che cambi il tema, un cookie viene aggiornato per memorizzare le modifiche per 1 anno. Se cancelli i cookie o è trascorso un anno, verrà visualizzato il tema predefinito.



Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 27
Messaggi : 9432
Località : Provincia di Varese

https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto


 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.