REDAZIONE

Cari MyBlogger,

in questo tutorial vi mostriamo alcuni modi per personalizzare il template dei vostri fotoblog. Partendo da uno dei template a scelta che troviamo nella sezione “Presentazione > Template”, ad esempio:

vogliamo creare un nuovo template come questo:

Vediamo passo dopo passo come fare.
Partiamo effettuando alcune modifiche al Foglio di stile già installato nel Fotoblog.
Dalla sezione “Presentazione > Opzioni avanzate”, clicchiamo sul link “Modifica modello” del Foglio di stile e all’interno della colonna destra della finestra che si è apre scriviamo le righe riportate di seguito.

Per prima cosa vogliamo sostituire lo sfondo con una immagine che sfuma verticalmente da un blu scuro ad un blu chiaro (come questa):

  body {
  background: #002844 url("http://...background.gif") 
  repeat-x top left;
  }
            
  #container {
  background-color: transparent;
  }           

Procediamo modificando la header del Fotoblog, eliminiamo lo sfondo e cambiamo il colore e la posizione del titolo:

  #banner {
  background-color: transparent;
  padding: 10px 0 0 0;
  color: #FFF;
  }
            
  #banner a {
  color: #FFF;
  text-decoration: none;
  }
            
  #banner h1 {
  margin-top: 10px;
  font-size: 255%;
  }
            
  #banner .nav {
  border-bottom: 2px solid #77aee3;
  }
            
  #banner .nav a {
  color: #86FF3F;
  }           

Fatto questo, vogliamo aumentare la distanza tra le anteprime delle foto ed inserirgli attorno una cornice azzurra che al passaggio del mouse si scurisce:

  .sidebar img{
  padding: 0px;
  margin-top: 30px;
  margin-left: 10px;
  border: 5px solid #BBDDFF;
  width:100px;
  }
            
  .sidebar a:hover img{
  border: 5px solid #77aee3;
  }
            
  #foot li.album {
  display: inline;
  padding: 0px;
  margin: 10px;
  }
            
  #foot h2 {
  color: #86FF3F;
  font-size: 155%;
  margin-top: 20px;
  }           

Nei template standard non appaiono i titoli delle foto, ma nel nostro template li vogliamo mostrare sotto ad ogni anteprima, quindi iniziamo a creare lo stile che dovranno avere, poi andremo ad inserirli nel codice HTML.
Vogliamo che i titoli si visualizzino con un testo bianco su uno sfondo nero, quindi:

  .titolo{
  color:#BBDDFF;
  background-color: #000;
  padding:7px;
  margin-left:-110px;
  }           

Per finire, vogliamo inserire in fondo alla pagina una riga di testo in cui diciamo che siamo noi gli autori di questo Fotoblog. Il testo dovrà essere bianco e i link contenuti dovranno essere sottolineati per essere più riconoscibili:

  #footer {
  font-size: 70%;
  color: #FFF;
  }
            
  #footer a{
  color: #FFF;
  text-decoration: underline;
  }           

Salviamo il Foglio di stile e prepariamoci ad effettuare le modifiche all’interno del codice HTML delle pagine. In questo articolo vi mostriamo come modificare la Home Page, quindi clicchiamo sul link “Modifica modello” posizionato a destra di “Modello della homepage”.

Partiamo dalla header. Abbiamo deciso di non mostrare il sottotitolo, quindi lo disattiviamo trasformandolo in commenti HTML.
Per inserire dei commenti in HTML basta inserire i seguenti simboli <!- - e - - > rispettivamente all’inizio e alla fine di quello che si vuole commentare, ad esempio:

  <!- - CONTENUTO DEL COMMENTO - ->           

Quindi, cerchiamo all’interno del codice le seguenti righe e inseriamo nei commenti il sottotitolo come mostrato di seguito:

  <div class="banner-decorator">
  <h1><a href="{$blog.url}">{$blog.title}</a></h1>
  <!-- <h2>{$blog.description|default:"&nbsp;"}</h2> -->
  <span class="nav">&#160;</span>
  </div>           

La Home Page dei template standard mette in primo piano una foto grande. Nel nostro template, invece, vogliamo mettere in risalto soltanto  le anteprime delle ultime foto che abbiamo caricato. Quindi, sempre trasformando il codice in commenti, disattiviamo la foto grande come mostrato di seguito:

  <!—
  <div id="center">
  <div class="center-decorator1">
  <div class="center-decorator2">
  <div class="content">
  {foreach from=$posts item=post}
  <a id="a{$post.id}"></a>
  <h1 class="photoblog"><a href="{$post.post_permalink}">
  <img src="{$blog.url}photos/{$post.photo}" 
  alt="{$post.title|htmlspecialchars}" /></a></h1>
  <h2>
  {date_header date="`$post.pubdate`"}
  {$post.pubdate|date_format:"`$blog.date_format`"} | {$post.title}
  {/date_header}
  </h2>
  <p>{$post.source|trimlonglines:60}</p>
  <p class="posted">
  {post_footer}
  </p>
  <div style="clear: both;">&#160;</div>
  {/foreach}
  </div>
  <div style="clear: both;">&#160;</div>
  </div>
  </div>
  </div>
  -->           

Nel template standard, in Home Page, vengono visualizzate le ultime 6 anteprime, noi invece vogliamo mostrare le anteprime delle ultime 10 foto che abbiamo inserito. Quindi cerchiamo:

  {posts assign="post" lastn="6" type="photo"}           

e sosituiamo il numero 6 con il numero di anteprime che vogliamo visualizzare, in questo caso 10.

 

Come abbiamo detto sopra, quando stavamo creando gli stili in CSS, vogliamo mostrare sotto ad ogni anteprima il titolo della foto. Per inserirlo cerchiamo il seguente codice:

  <li class="album iteration{$post.iteration}">
  <a href="{$post.permalink}">
  <img src="{$blog.url}photos/{$post.thumbnail}" 
  alt="{$post.title|truncate:30:"..."|htmlspecialchars}" 
  title="{$post.title|truncate:30:"..."|htmlspecialchars}" 
  border="0" /></a>        

e subito dopo incolliamo questa riga:

  <font class="titolo">{$post.title}</font></li>           

Per concludere le modifiche nella Home Page, non ci resta che inserire la riga che separa il contenuto del nostro fotoblog con il piè di pagina (o footer) e il testo in cui diciamo di essere gli autori del Fotoblog. Sostituiamo le seguenti righe:

  {if $post.last}</ul>{/if}
  {/posts}
  </div>
  <div class="column2">{sidebar file="sidebar2.htm"}</div>           

Con le seguenti:

  {if $post.last}</ul>{/if}
  {/posts}
  </div>
        
  <hr color="#77aee3" />
  <div id="footer" align="left">Fotoblog creato da 
  <a href="inserisci l'indirizzo web del tuo profilo">
  Tuo Nickname</a>.</div>
            
  <div class="column2">{sidebar file="sidebar2.htm"}</div>           

Salviamo le modifiche e andiamo a vedere la trasformazione che abbiamo effettuato sulla nostra Home Page.

Ora non ci rimane che eliminare lo sfondo marrone che si visualizza ogni volta che andiamo a vedere una fotografia ingrandita.

Per farlo, basta aggiungere nel Foglio di stile questo attributo all'elemento center:

  #center {
  background-color: transparent;
  }           

 

Ora tocca a voi. Non appena avrete modificato il template del vostro Fotoblog, se vi và, segnalatecelo, lo pubblicheremo all’interno del Blog Redazione.

Buon lavoro!