Come modificare l'header del prosilver

Area dedicata alle Guide
Regole del forum
Immagine
Rispondi

Vota per questa Guida creata dall'utente prototech

Eccellente
3
50%
Ottima
3
50%
Buona
0
Nessun voto
Mediocre
0
Nessun voto
Scarsa
0
Nessun voto
Brutta
0
Nessun voto
 
Voti totali: 6

Avatar utente
phpBB3
News PhpBB3
News PhpBB3
Messaggi: 81
Iscritto il: 6 lug 2013, 14:01

Come modificare l'header del prosilver

Messaggio da phpBB3 » 4 nov 2012, 10:44

Dal momento che molte persone sembrano continuare a chiedere come modificare diverse parti dell' header del prosilver Ho deciso di fare questo tutorial. Come sempre, fare un back-up dei file prima di modificarli.
Non dimenticate di aggiornare lo stile dopo aver apportato tutte le modifiche, andando nel Pannello di Amministrazione di Controllo => Stili => (Template / Temi) => prosilver e cliccare su aggiorna.

Guida originale presa dal www.phpbb.com, il riferimento fa fede li.

Indice dei contenuti -----------------------------------------------------------------------------------------------------------------------------------
Guida tradotta da rey


Aggiungere un'immagine personalizzata nell'header

1) Prima di tutto, carica la tua immagine in styles/prosilver/theme/images/

2) Apri: styles/prosilver/theme/common.css
Cerca:

Codice: Seleziona tutto

    .headerbar {
       background: #ebebeb none repeat-x 0 0;
       color: #FFFFFF;
       margin-bottom: 4px;
       padding: 0 5px;
Aggiungi dopo:

Codice: Seleziona tutto

height: 100px;
Modificare l'altezza in base alla vostra immagine.

3) Apri: styles/prosilver/theme/colours.css
Cerca:

Codice: Seleziona tutto

    .headerbar {
       background-color: #12A3EB;
       background-image: url("{T_THEME_PATH}/images/bg_header.gif");
       color: #FFFFFF;
    }
Cambia il nome bg_header.gif con il nome della vostra immagine, oppure si puo chiamare uguale è sovrascriverla.

4) Apri: styles/prosilver/template/overall_header.html
Cerca:

Codice: Seleziona tutto

    <div id="site-description">
Aggiungi prima:

Codice: Seleziona tutto

    <div style="height: 90px;">
Nota: L'altezza deve essere di 10 pixel inferiore a quella della tua immagine!

Cerca:

Codice: Seleziona tutto

    <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
                </form>
             </div>
          <!-- ENDIF -->
Aggiungere dopo:

Codice: Seleziona tutto

</div>
5) Aggiornare il tema e template.

-----------------------------------------------------------------------------------------------------------------------------------

Rimuovere logo del sito

1) Apri: styles/prosilver/template/overall_header.html
Trovare e rimuovere:

Codice: Seleziona tutto

    <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
2) Aggiorna il template.

-----------------------------------------------------------------------------------------------------------------------------------

Togliere nome del sito e Descrizione

1) Apri: styles/prosilver/template/overall_header.html
Trovare e rimuovere:

Codice: Seleziona tutto

    <h1>{SITENAME}</h1>
    <p>{SITE_DESCRIPTION}</p>
2) Aggiorna il template.

-----------------------------------------------------------------------------------------------------------------------------------

Rimuovere Search Box

1) Apri: styles/prosilver/template/overall_header.html
Trovare e rimuovere:

Codice: Seleziona tutto

    <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
             <div id="search-box">
                <form action="{U_SEARCH}" method="post" id="search">
                <fieldset>
                   <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                   <input class="button2" value="{L_SEARCH}" type="submit" /><br />
                   <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
                </form>
             </div>
          <!-- ENDIF -->
2) Aggiorna il template.

-----------------------------------------------------------------------------------------------------------------------------------

Aggiungere una immagine casuale Header

1) Creare le immagini e il nome nel modo seguente, header_random_1.ESTENSIONE.
  • Iniziamo da 1 è man mano salire, assicurati di non perdere alcun numero.
  • Sostituire ESTENSIONE con l'estensione delle immagini in uso (gif, png, jpg, ecc)
  • L' estensione deve essere la stessa su tutte le immagini.
2) Carica tutte le immagini in styles/prosilver/theme/images/

3) Apri: includes/functions.php.

Trova:

Codice: Seleziona tutto

    'T_STYLESHEET_NAME'      => $user->theme['theme_name'],
Aggiungere dopo:

Codice: Seleziona tutto

    'RANDOM_HEADER'      => mt_rand(1, NUMERO-DI-IMMAGINI),
  • Modifica NUMERO-DI-IMMAGINI con la quantità di immagini che avete creato.
4) Apri: style.php
Cerca:

Codice: Seleziona tutto

 '{S_USER_LANG}'            => $user['user_lang']
Sostituire con:

Codice: Seleziona tutto

          '{S_USER_LANG}'            => $user['user_lang'],
          '{RANDOM_HEADER}'      => mt_rand(1, NUMERO-DI-IMMAGINI)
  • Come prima, cambiare NUMERO-DI-IMMAGINI alla quantità di immagini che avete creato.
5) Apri: styles/prosilver/theme/colours.css
Cerca:

Codice: Seleziona tutto

    .headerbar {
       background-color: #12A3EB;
       background-image: url("{T_THEME_PATH}/images/bg_header.gif");
       color: #FFFFFF;
    }
Sostituire con:

Codice: Seleziona tutto

    .headerbar {
       background-color: #12A3EB;
       background-image: url("{T_THEME_PATH}/images/header_random_{RANDOM_HEADER}.ESTENSIONE");
       color: #FFFFFF;
    }
  • Cambia ESTENSIONE con l'estensione delle immagini in uso.
6) Aggiornare il vostro tema.

-----------------------------------------------------------------------------------------------------------------------------------

Sostituire "Cambia la dimensione del carattere" con icona motore di ricerca

1) Apri: styles/prosilver/template/overall_header.html.
Cerca:

Codice: Seleziona tutto

    <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>
Sostituire con:

Codice: Seleziona tutto

                <li class="rightside" style="font-size: 1em;">
              <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
                 <div id="search-box">
                    <form action="{U_SEARCH}" method="post" id="search">
                    <fieldset>
                       <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                       <input class="button2" value="{L_SEARCH}" type="submit" /><br />
                        {S_SEARCH_HIDDEN_FIELDS}
                    </fieldset>
                    </form>
                 </div>
              <!-- ENDIF -->
            </li>
2) Apri: styles/prosilver/theme/common.css.
Cerca:

Codice: Seleziona tutto

    #search-box {
       color: #FFFFFF;
       position: relative;
       margin-top: 30px;
       margin-right: 5px;
       display: block;
       float: right;
       text-align: right;
       white-space: nowrap; /* For Opera */
    }
Sostituire con:

Codice: Seleziona tutto

    #search-box {
      color: #FFFFFF;
      position: relative;
      display: block;
      text-align: right;
      white-space: nowrap; /* For Opera */
      line-height: 1em;
    }
3) Aggiornare tema e template

-----------------------------------------------------------------------------------------------------------------------------------

Aggiungere l'icona di ricerca alla navigazione

1) Apri: styles/prosilver/template/overall_header.html.
Cerca:

Codice: Seleziona tutto

    <li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
Aggiungi dopo:

Codice: Seleziona tutto

    <li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li>
2) Aggiorna il template.

Rispondi

Torna a “[3.0.x] Guide”

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti