Aggiungere un bordo a Prosilver

guide, tutorial e suggerimenti utili

Aggiungere un bordo a Prosilver

Messaggioda Nico » sab 27 set 2008, 15:18

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/
Transparent borders.rar
(2.08 KiB) Scaricato 559 volte

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/
css_for_shoots_borders.rar
(1.37 KiB) Scaricato 507 volte


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).
conbordi.png
I miei amici immaginari mi hanno abbandonato perchè i loro amici non credono che io esista..

And somewhere out there, some asshole has my sword.
(George R.R. Martin - 27 ottobre 2008)
Avatar utente
Nico
Il Signore dei Canguri
Il Signore dei Canguri
 
Messaggi: 1639
Iscritto il: mer 12 ott 2005, 1:42
Località: Patavium

Re: Aggiungere un bordo a Prosilver

Messaggioda Vigo » dom 12 ott 2008, 20:42

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.
Avatar utente
Vigo
Cangurino
Cangurino
 
Messaggi: 3
Iscritto il: dom 12 ott 2008, 20:24

Re: Aggiungere un bordo a Prosilver

Messaggioda Nico » lun 13 ott 2008, 0:28

devi togliere
/* all'inizio e */ alla fine. Servono per commentare e non rendono eseguibile la riga. ;)
I miei amici immaginari mi hanno abbandonato perchè i loro amici non credono che io esista..

And somewhere out there, some asshole has my sword.
(George R.R. Martin - 27 ottobre 2008)
Avatar utente
Nico
Il Signore dei Canguri
Il Signore dei Canguri
 
Messaggi: 1639
Iscritto il: mer 12 ott 2005, 1:42
Località: Patavium

Re: Aggiungere un bordo a Prosilver

Messaggioda Vigo » lun 13 ott 2008, 6:24

Grazie mille! Adesso l'immagine di sfondo funziona.
Però è sorto un altro problema... :shock:
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... :hail:
Avatar utente
Vigo
Cangurino
Cangurino
 
Messaggi: 3
Iscritto il: dom 12 ott 2008, 20:24

Re: Aggiungere un bordo a Prosilver

Messaggioda Nico » lun 13 ott 2008, 11:40

Vigo ha scritto:Grazie mille! Adesso l'immagine di sfondo funziona.
Però è sorto un altro problema... :shock:
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... :hail:

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.*/
I miei amici immaginari mi hanno abbandonato perchè i loro amici non credono che io esista..

And somewhere out there, some asshole has my sword.
(George R.R. Martin - 27 ottobre 2008)
Avatar utente
Nico
Il Signore dei Canguri
Il Signore dei Canguri
 
Messaggi: 1639
Iscritto il: mer 12 ott 2005, 1:42
Località: Patavium

Re: Aggiungere un bordo a Prosilver

Messaggioda Vigo » lun 13 ott 2008, 13:57

Adesso è tutto OK :D :D :D :D
Grazie mille per l'aiuto: non lo dimenticherò! ;)
Avatar utente
Vigo
Cangurino
Cangurino
 
Messaggi: 3
Iscritto il: dom 12 ott 2008, 20:24

Re: Aggiungere un bordo a Prosilver

Messaggioda txmmx » ven 17 ott 2008, 14:17

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!
txmmx
Cangurino
Cangurino
 
Messaggi: 2
Iscritto il: ven 17 ott 2008, 14:08

Re: Aggiungere un bordo a Prosilver

Messaggioda Nico » ven 17 ott 2008, 17:16

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
I miei amici immaginari mi hanno abbandonato perchè i loro amici non credono che io esista..

And somewhere out there, some asshole has my sword.
(George R.R. Martin - 27 ottobre 2008)
Avatar utente
Nico
Il Signore dei Canguri
Il Signore dei Canguri
 
Messaggi: 1639
Iscritto il: mer 12 ott 2005, 1:42
Località: Patavium

Re: Aggiungere un bordo a Prosilver

Messaggioda txmmx » ven 17 ott 2008, 17:50

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!
txmmx
Cangurino
Cangurino
 
Messaggi: 2
Iscritto il: ven 17 ott 2008, 14:08

Re: Aggiungere un bordo a Prosilver

Messaggioda valerout » ven 6 feb 2009, 21:43

Vigo ha scritto:Grazie mille! Adesso l'immagine di sfondo funziona.
Però è sorto un altro problema... :shock:
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... :hail:


Gentile nico io ho lo stesso problema ma non sono riuscito ancora a risolerlo :roll: cioè anche a me il bordo si visualizza solo su tre lati del forum quello di destra non si visualizza... :roll: mi puoi gentilmente dire quale file devo modificare? ](*,) grazie
valerout
Cangurino
Cangurino
 
Messaggi: 1
Iscritto il: ven 6 feb 2009, 21:36

Re: Aggiungere un bordo a Prosilver

Messaggioda webmastro » dom 7 nov 2010, 17:57

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.

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.
webmastro
Cangurino
Cangurino
 
Messaggi: 1
Iscritto il: dom 7 nov 2010, 16:55


Torna a Cerchi aiuto?

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite

cron