Modifica Template: Bordi Rotondi

Pannello di controllo amministrazione > Stili > Temi > Aggiorna (in riferimento al template che usi )
Pannello di controllo amministrazione > Stili > Template > Aggiorna( in riferimento al template che usi )
Pannello di controllo amministrazione > svuota la cache
Andare nel link del forum a cui è stata apportata la modifica e aggiornare il browser.

Se dimentichi di eseguire questi passaggi finali, i nuovi cambiamenti potrebbero non essere visualizzati e ciò ti potrebbe far credere, di aver sbagliato.

1) Modifica del colore di sfondo per tutta la Pagina

- Aprire il file colours.css che si trova all’interno della directory styles/prosilver/theme
- Cercare la seguente stringa:

Codice:

html, body {
color: #536482;
background-color: #FFFFFF;
}

- Modificare il valore FFFFFF con il codice del colore desiderato.

2) Modifica del Template Prosilver: Creazione Bordi Arrotondati

E’ possibile operare in due modi:

Codice:

/* phpBB 3.0 Style Sheet
————————————————————–
Style name: proSilver
Based on style: proSilver (this is the default phpBB 3 style)
Original author: subBlue ( http://www.subBlue.com/ )
Modified by: shoot

Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
————————————————————–
*/

/*
————————————————————–
html, body tag copy from colours.css inhere
————————————————————– */
html, body {
color: #68696D;
background-color: #A0A8AE;
/* background-image: url(”{T_THEME_PATH}/images/yourbg.gif”);*/ /* CHANGE: path and name of your image */
}

/*
————————————————————–
#wrap tag copy from common.css inhere
————————————————————– */
#wrap {
padding: 0 20px;
min-width: 700px;
width: 900px;
margin: 0 auto;
}

/* 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 */
}

.notopgap { margin-top: 0; } /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

.outside {
margin: 0 auto;
width : 950px;
}

A questo punto salvare il fiel con il nome borders.css e caricarlo nella directory styles/prosilver/theme. Adesso aprire il file stylesheet.css che trovate nella directory styles/prosilver/theme apritelo con un editor di testo e aggiungete la seguente stringa: @import url(”borders.css”);

- Aprire il file overall_header.html che trovate nella directory styles\prosilver\template e cercate il seguente spezzone di codice:

Codice:

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

Aggiungendo una nuova linea successiva e incollando il seguente codice:

Codice:

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

- Aprire il file overall_footer.html che trovate nella directory styles\prosilver\template e cercate il seguente spezzone di codice:

Codice:

<!– IF not S_IS_BOT –>{RUN_CRON_TASK}<!– ENDIF –>

Aggiungendo una nuova linea successiva e incollando il seguente codice:

Codice:

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

Questo dovrebbe essere il risultato:

1) Modifica del colore di sfondo dopo aver installato i bordi

- Se avete scaricato il file Css_for_borders.rar aprite il file shoots_boarders.css cercate il seguente spezzone di codice:

Codice:

html, body {
color: #68696D;
background-color: #A0A8AE;
/* background-image: url(”{T_THEME_PATH}/images/yourbg.gif”);*/ /* CHANGE: path and name of your image */
}

- modificate il valore A0A8AE con il codice del colore desiderato

Segnala presso: