Il salottino del Signore dei Canguri

Questa guida è la traduzione di Shoot's Guide To Styling Prosilver - 2) Adding a overall boarder to your forum.

Cominciamo:

Scarica i bordi trasparenti e mettili nella cartella styles/prosilver/theme/images/

Ora che le immagini dei bordi sono caricate bisogna dichiararle in un css.
Puoi farlo a mano oppure usare il css qui allegato, che va messo nella cartella styles/prosilver/theme/


Se vuoi crearlo tu, ecco il codice che devi inserirci

Codice: Seleziona tutto

    /*
        --------------------------------------------------------------
    * @name shoots_borders.css
    * @package phpBB
    * @version $Id: v 0.7 09/02/2008 shoot Exp $
    * @license http://opensource.org/licenses/gpl-license.php GNU Public License
        --------------------------------------------------------------
    */

    a {
    outline: none;
    }

    select {
       font-size: 1.1em;
       padding: 1px;
    }

    h5 {
       /* Forum and topic list titles */
       font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
       font-size: 1.1em;
       color: #115098;
    }


    /*     
    --------------------------------------------------------------
    html, body tag copy from colours.css inhere
    -------------------------------------------------------------- */
    html, body {
       color: #68696D;
       background-color: #666666;   
        /*background-image: url("{T_THEME_PATH}/images/yourimage.jpg");*/
        background-repeat: repeat-x;
        background-attachment: fixed; /* this is for a background  image. If you apply one your board will move and your bg will be fixed.*/
    }


    /* additional proSilver Markup Styles outside rouded
    ----------------------------------------------------------- */
    .top-left, .top-right, .bottom-left, .bottom-right {
       height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
       }
       
    .top-left {
       background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
       background-position: 0 -20px; /* CHANGE: replace second number by negative height of one of your corners */
       margin-left: 1px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: 0px;  /* CHANGE: replace by the height of one of your corners */
       margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
       }
    .top-right {
       background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
       background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
       margin-left: 0px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
       margin-right: 1px; /* CHANGE: replace by the width of one of your corners */   
       }
    .top-center {
       background-image: url("{T_THEME_PATH}/images/bg_headers.gif"); /* CHANGE: path and name of your image */
       background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
       height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
       margin-left: 20px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
       margin-right: 20px; /* CHANGE: replace by the width of one of your corners */
       margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */
       }
       
    .bottom-left  {
       background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
       background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
       margin-right: 0px; /* CHANGE: replace by the width of one of your corners */
       margin-left: 1px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: 0px;  /* CHANGE: replace by the height of one of your corners */
       }
    .bottom-right {
       background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
       background-position: 100% -20px; /* CHANGE: replace second number by negative height of one of your corners */
       margin-right: 1px; /* CHANGE: replace by the width of one of your corners */
       margin-left: 0px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
       }
    .bottom-center {
       background-image: url("{T_THEME_PATH}/images/bg_footers.gif"); /* CHANGE: path and name of your image */
       background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
       height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
       margin-left: 20px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
       margin-right: 20px; /* CHANGE: replace by the width of one of your corners */
       margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */
       }

    .inside {
       border-left: 0px solid #000000; /* YCC: color & properties of the left-borderline */
       border-right: 0px solid #000000;/* YCC: color & properties of the right-borderline */
       background: #FFFFFF;            /* YCC: background-color of the inside */
       color: #000000;                 /* YCC: default text-color of the inside */
       padding-left: 0px;              /* YCC: all texts at some distance of the left border */
       padding-right: 0px;             /* YCC: all texts at some distance of the right border */
       background-image: url("{T_THEME_PATH}/images/bg_body.gif"); /* CHANGE: path and name of your image */
       margin-left: 7px;  /* CHANGE: replace by the width of one of your corners */
       margin-right: 4px; /* CHANGE: replace by the width of one of your corners */
       }
       
    .notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
    .nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

    /*     
    --------------------------------------------------------------
    #wrap tag copy from common.css inhere
    -------------------------------------------------------------- */
    #wrap {
       padding: 0px 20px;
       min-width: 650px;
       width: 900px;  /* change here to set the inner width (forum) of the wrapper */
       margin: 0px auto;
    }

    .outside {
       margin: 0px auto;
       width : 950px; /* change here to set the outer width (borders) of the wrapper */
    }
 

IMPORTANTE: che lo crei tu o che usi questo, ricorda di richiamarlo nel file stylesheet.css inserendo il comando

Codice: Seleziona tutto

@import url("shoots_borders.css");

(ovviamente se cambi il nome al file css devi anche cambiare la sua chiamata)

Ora che abbiamo tutto quello che ci serve, dobbiamo modificare i file del template.

Bisogna aprire overall_header.html
trovare

Codice: Seleziona tutto

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

e aggiungere dopo (su una nuova linea)

Codice: Seleziona tutto

    <div class="outside">
       <div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
          <div class="inside">
             <div class="notopgap">

Ora bisogna aprire overall_footer.html
trovare

Codice: Seleziona tutto

    <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
    </div>

e aggiungere dopo (su una nuova linea)

Codice: Seleziona tutto

    </div>
    <div class="nobottomgap"></div>
          </div>
       <div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
    </div>

Una volta salvati i file e ricaricati sul server dovrebbe vedersi così (ricordate di fare un refresh se volete vedere le modifiche).

Ho notato che nel file shoots_borders.css è presente anche questa parte di codice:

Codice: Seleziona tutto

--------------------------------------------------------------
html, body tag copy from colours.css inhere
-------------------------------------------------------------- */
html, body {
   color: #68696D;
   background-color: #666666;   
    /*background-image: url("{T_THEME_PATH}/images/yourimage.jpg");*/
    background-repeat: repeat-x;
    background-attachment: fixed; /* this is for a background  image. If you apply one your board will move and your bg will be fixed.*/
}


Quindi, dopo aver modificato il background color, ho provato a caricare un'immagine con lo stesso nome e la stessa estensione seguendo anche lo stesso percorso, come da questa riga di codice:

Codice: Seleziona tutto

/*background-image: url("{T_THEME_PATH}/images/yourimage.jpg");*/

Ed è a questo punto che ho riscontrato problemi...
Infatti il colore di sfondo funziona perfettamente, ma l'immagine di sfondo è come se non l'avessi mai inserita; proprio non si vede

Dove sbaglio?

Grazie in anticipo per l'aiuto.

devi togliere
/* all'inizio e */ alla fine. Servono per commentare e non rendono eseguibile la riga.

Grazie mille! Adesso l'immagine di sfondo funziona.
Però è sorto un altro problema...
L'immagine si vede solo all'inizio della pagina (una riga di immagini ripetute sulla parte alta) e non viene ripetuta all'infinito (cioè su tutta la pagina). In più quando scorro la pagina la riga di immagini ripetute sulla parte alta scorre con me (quindi non resta fissa in alto); mentre vorrei che restasse fissa.
Di seguito ti riporto in grassetto le righe che penso vadano modificate:

Codice: Seleziona tutto

background-repeat: repeat-x;
background-attachment: fixed; /* this is for a background  image. If you apply one your board will move and your bg will be fixed.*/


Se mi puoi aiutare anche stavolta te ne sarò molto grato...

Vigo ha scritto:Grazie mille! Adesso l'immagine di sfondo funziona.
Però è sorto un altro problema...
L'immagine si vede solo all'inizio della pagina (una riga di immagini ripetute sulla parte alta) e non viene ripetuta all'infinito (cioè su tutta la pagina). In più quando scorro la pagina la riga di immagini ripetute sulla parte alta scorre con me (quindi non resta fissa in alto); mentre vorrei che restasse fissa.
Di seguito ti riporto in grassetto le righe che penso vadano modificate:

Codice: Seleziona tutto

background-repeat: repeat-x;
background-attachment: fixed; /* this is for a background  image. If you apply one your board will move and your bg will be fixed.*/


Se mi puoi aiutare anche stavolta te ne sarò molto grato...

repeat-x ripete solo l'asse x
I valori sono 4 in totale
repeat-x repeat-y no-repeat repeat
Inoltre l'ultima linea va eliminata (o meglio commentata così che rimanga ma non venga elaborata)
Quindi il codice va cambiato così:

Codice: Seleziona tutto

background-repeat: repeat;
/* background-attachment: fixed; this is for a background  image. If you apply one your board will move and your bg will be fixed.*/


Adesso è tutto OK
Grazie mille per l'aiuto: non lo dimenticherò!

Ciao ottima guida, però ho notato una cosa... ossia il bordo di destra non si visualizza correttamente.
E' come se fosse sotto. dimmi tu se mi sbaglio... anche nello screen che hai fatto sembra non esserci.

Me ne sono accorto andando a variare questi parametri per allargare leggermente il forum.
praticamente non si sposta a destra come dovrebbe ma rimane sotto.
Quello a sx invece ok.

Codice: Seleziona tutto

--------------------------------------------------------------
#wrap tag copy from common.css inhere
-------------------------------------------------------------- */
#wrap { 
   padding: 0px 20px; 
   min-width: 650px; 
   width: 900px;  /* change here to set the inner width (forum) of the wrapper */
   margin: 0px auto; 
} 

.outside {
   margin: 0px auto;
   width : 950px; /* change here to set the outer width (borders) of the wrapper */
}


Grazie mille ciao!

Le immagini vanno modificate se modifichi la larghezza.
Comunque nulla vieta di farsi le proprie di immagini borgo.

Io ho preferito affrontare la cosa in modo totalmente diverso infatti.. viewtopic.php?f=17&t=968

Nico ha scritto:Io ho preferito affrontare la cosa in modo totalmente diverso infatti.. viewtopic.php?f=17&t=968

Grande!!! Ottima idea, non ci avevo pensato!

Ora mi metto subito all'opera! Vediamo se riesco a tirare fuori qualcosa di buono!

Al massimo, se ne avro bisogno, ti chiederò qualche consiglio!

Vigo ha scritto:Grazie mille! Adesso l'immagine di sfondo funziona.
Però è sorto un altro problema...
L'immagine si vede solo all'inizio della pagina (una riga di immagini ripetute sulla parte alta) e non viene ripetuta all'infinito (cioè su tutta la pagina). In più quando scorro la pagina la riga di immagini ripetute sulla parte alta scorre con me (quindi non resta fissa in alto); mentre vorrei che restasse fissa.
Di seguito ti riporto in grassetto le righe che penso vadano modificate:

Codice: Seleziona tutto

background-repeat: repeat-x;
background-attachment: fixed; /* this is for a background  image. If you apply one your board will move and your bg will be fixed.*/


Se mi puoi aiutare anche stavolta te ne sarò molto grato...

Gentile nico io ho lo stesso problema ma non sono riuscito ancora a risolerlo cioè anche a me il bordo si visualizza solo su tre lati del forum quello di destra non si visualizza... mi puoi gentilmente dire quale file devo modificare? grazie

Saluto tutti e complimenti a Nico per questo interessantissimo sito.
Detto questo mi presento: sono il solito incompetente che fa domande assolutamente all'altezza del proprio quasi inesistente quoziente intellettivo.

Per rimanere coerente chiedo se e come è possibile creare un bordino come nell'immagine.



In pratica, al di là dei colori dell'esempio, vorrei adattare la grafica del forum a tutte le altre pagine del sito che, appunto, racchiudono in un bordino tutto, tranne menu e logo.

Ringrazio a prescindere.

P.s.: il template è Mv_fire che ho adattato alla bisogna.