[Guida Christian Bullock]Agg. Sfondo Multiplo in prosilver

[NintendoEvoClan]

Questa guida serve per avere una navbar sopra sotto il titolo, e da lì poter selezionare lo sfondo che si vuole.

Servono un editor di testo, tipo notepad++ e l'archivio alleagato che trovere a fine argomento.

Incominciamo con caricare i seguenti file che trovere nell'archivio, nei rispettivi percorsi elencati qui sotto:

Copia: /stylesheet-switcher/jquery.cookie.js in /styles/prosilver/template/
Copia: /stylesheet-switcher/blank.css in /styles/prosilver/theme/
Copia: /stylesheet-switcher/colours in /styles/prosilver/theme/

PASSO1
Apri il file: /styles/prosilver/template/overall_header.html

Cerca:

Codice: Seleziona tutto

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Aggiungi dopo:

Codice: Seleziona tutto

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- If the above line is already present, don't add it again -->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>

Cerca:

Codice: Seleziona tutto

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
    <link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

Aggiungi dopo:

Codice: Seleziona tutto

<link rel="stylesheet" href="{T_THEME_PATH}/blank.css" type="text/css" class="colour-switcher" />

Cerca:

Codice: Seleziona tutto

<a name="start_here"></a>

Aggiungi dopo:

Codice: Seleziona tutto

<br /><br />
<div class="navbar">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="linklist rightside">
            <li><strong>Colour:</strong></li>
            <li><a href="#" rel="{T_THEME_PATH}/colours/red.css" class="switch">Red</a> &bull; </li>
            <li><a href="#" rel="{T_THEME_PATH}/colours/green.css" class="switch">Green</a> &bull; </li>
            <li><a href="#" rel="{T_THEME_PATH}/colours/yellow.css" class="switch">Yellow</a> &bull; </li>
            <li><a href="#" rel="{T_STYLESHEET_LINK}" class="switch">Default</a></li>
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>

Salva le modifiche.

PASSO2

Questo è un codice del file di css.

Codice: Seleziona tutto

/* Green stylesheet. Override everything here.
This is called after phpBB's stylesheet, so !important shouldn't be required in most cases */
html, body {
    background-color: #009900;
}

Potete cambiare il colore oppure modificarlo così per avere un'immagine da mettere al posto del colore:

Codice: Seleziona tutto

/* Green stylesheet. Override everything here.
This is called after phpBB's stylesheet, so !important shouldn't be required in most cases */
    html, body {
        background-image:url("{T_THEME_PATH}/images/prova.jpg");
       background-color: #A0A0A0;
       background-position: top center;
       background-attachment: fixed;
       background-repeat: no-repeat ;
    }

PASSO3

Riapri: /styles/prosilver/template/overall_header.html

Cerca:

Codice: Seleziona tutto

<link rel="stylesheet" href="{T_THEME_PATH}/blank.css" type="text/css" class="colour-switcher" />

Aggiungi dopo:

Codice: Seleziona tutto

<script type="text/javascript">
      if($.cookie("colour-choice")) {
         $("link.colour-switcher").attr("href",$.cookie("colour-choice"));
      }
   $(document).ready(function() {
      $("a.switch").click(function() {
         $("link.colour-switcher").attr("href",$(this).attr('rel'));
         $.cookie("colour-choice",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
      });
   });
</script>

Salva le modifiche, fai un aggiorna template, temi, set-immagini e ripulisci le cache. Ora dovresti vedere la navbar e cambiare colore o immagine a seconda della tua impostazione.

NB: Se si vuole aggiungere un immagine invece della scritta colore, fare come descritto qui sotto:

Cerca:

Codice: Seleziona tutto

<a href="#" rel="{T_THEME_PATH}/colours/red.css" class="switch" rel="nofollow">Red</a>

Sostituisci con:

Codice: Seleziona tutto

<a href="#" rel="{T_THEME_PATH}/colours/red.css" class="switch" rel="nofollow"><img src="{T_THEME_PATH}/images/prova.png" width="16" height="16" alt="" /></a>

Un grazie a Christian Bullock per la guida.

[Lady R]

Questa guida serve per avere una navbar sopra sotto il titolo, e da lì poter selezionare lo sfondo che si vuole.

Non ho capito se è sopra o sotto ^.^"

Comunque sembra carino, andrebbe un po sviluppato e semplificato.
Potresti fare in modo che quando si cambia sfondo il passaggio sia graduale e non "di colpo".

Ma non era meglio postare nella sezione MODs?

[NintendoEvoClan]

Intendevo zona alta del forum, sotto al titolo. Forse mi sono espresso male io.

Cmq guarda l'esperimento qui sul mio sito di prova:

http://www.experimentfusion.altervista.org

Nb: sarebbe bello farlo in modo che sia a tempo, quello sì

[mk3000]

Ma cosi facendo viene memorizzata la scelta dell utente?

[Carlo]

Dovrebbe venire memorizzata nei cookie del browser.