Cominciamo:
Scarica i bordi trasparenti e mettili nella cartella styles/prosilver/theme/images/
Transparent borders.rar- (2.08 KiB) Scaricato 1063 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 877 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).
](./images/smilies/eusa_wall.gif "Brick wall")
cioè anche a me il bordo si visualizza solo su tre lati del forum quello di destra non si visualizza... 
Kangoo theme by Nico | Styled with the help of