Aggiungere un bordo a Prosilver

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
IMPORTANTE: che lo crei tu o che usi questo, ricorda di richiamarlo nel file stylesheet.css inserendo il comando
(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
e aggiungere dopo (su una nuova linea)
Ora bisogna aprire overall_footer.html
trovare
e aggiungere dopo (su una nuova linea)
Una volta salvati i file e ricaricati sul server dovrebbe vedersi così (ricordate di fare un refresh se volete vedere le modifiche).
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).