Guida bordi trasparenti prosilver se

Area dedicata alle Guide
Regole del forum
Immagine
Rispondi
Avatar utente
Galandas
Staff phpBB3World
Staff phpBB3World
Messaggi: 792
Iscritto il: 4 nov 2012, 9:18
Località: phpbb3world
Contatta:

Guida bordi trasparenti prosilver se

Messaggio da Galandas » 23 nov 2014, 23:52

Guida bordi trasparenti prosilver se

Autore: Leoitalia
Descrizione: Con questa guida andremo a inserire i bordi trasparenti per lo stile prosilver se, con poche modifiche otterremo i bordi trasparenti, cosi da poter inserire uno sfondo a piacere senza avere i bordi grigi che sporgono fuori. :/>

Apri common.css

Trova:

Codice: Seleziona tutto

/* Border
---------------------------------------- */
.border-left { 
    background: url("{T_THEME_PATH}/images/border_left.gif") #FFFFFF repeat-y 0 0;
}

.border-right {
    background: url("{T_THEME_PATH}/images/border_right.gif") repeat-y 100% 0;
}

.border-top { 
    background: url("{T_THEME_PATH}/images/border_top.gif") repeat-x 0 0; 
}

.border-top-left {
    background: url("{T_THEME_PATH}/images/border_top_left.gif") no-repeat 0 0;
}

.border-top-right {
    background: url("{T_THEME_PATH}/images/border_top_right.gif") no-repeat 100% 0;
}

.border-bottom { 
    background: url("{T_THEME_PATH}/images/border_bottom2.gif") repeat-x 0 100%;
}

.border-left, .border-right, .border-top, .border-top-left, .border-top-right, .border-bottom { width: 100%;}

.border-bottom span {
    background: url("{T_THEME_PATH}/images/border_bottom.gif") no-repeat 0 0;
    display: block;
    height: 18px; 
}

.border-bottom span span { 
    background-position: 100% -18px;
}

.inside { 
    padding: 17px 27px 10px 27px;
}

/* Main blocks
---------------------------------------- */
sostituisci con:

Codice: Seleziona tutto

/* Border
---------------------------------------- */
#border-up { height: 16px;
    background: url("{T_THEME_PATH}/images/border_up.png") ; background-repeat: no-repeat;background-position: top center;
}
#border-down { height: 16px;
    background: url("{T_THEME_PATH}/images/border_down.png") ; background-repeat: no-repeat;background-position: top center;
}
.border-left { 
    background: url("{T_THEME_PATH}/images/border_left.gif") #FFFFFF repeat-y 0 0;
}

.border-right {
    background: url("{T_THEME_PATH}/images/border_right.gif") repeat-y 100% 0;
}

.border-top { 
    background: url("{T_THEME_PATH}/images/border_top.gif") repeat-x 0 0; 
 
}

.border-top-left {
    background: url("{T_THEME_PATH}/images/border_top_left.gif") no-repeat 0 0;

}

.border-top-right {
    background: url("{T_THEME_PATH}/images/border_top_right.gif") no-repeat 100% 0;
}

.border-bottom { 
    background-color: transparent;
}

.border-left, .border-right, .border-top, .border-top-left, .border-top-right, .border-bottom { width: 100%;}

.border-bottom span {
    background-color: transparent;
    display: block;
    height: 18px; 
}

.border-bottom span span { 
    background-position: 100% -18px;
}

.inside { 
    padding: 17px 27px 10px 27px;
}

/* Main blocks
---------------------------------------- */
apri overall_header.html e cerca:

Codice: Seleziona tutto

<div id="wrap">
aggiungi dopo :

Codice: Seleziona tutto

<div id="border-up"></div>
apri overall_footer.html e cerca:

Codice: Seleziona tutto

        <div class="border-bottom"><span><span></span></span></div>
    </div></div></div></div></div>
</div>
sostituisci con :

Codice: Seleziona tutto

        <div class="border-bottom"></div>
    </div></div></div></div></div>
</div>
<div id="border-down"></div>
Copia le immagini allegate in prosilver_se/theme/images
bordi trasparenti prosilver se.zip
(9.33 KiB) Scaricato 117 volte


Ultimo bump di Galandas effettuato il 23 nov 2014, 23:52.
Menu Forum ha scritto:

Rispondi

Torna a “[3.0.x] Guide”

Chi c’è in linea

Visitano il forum: Nessuno e 4 ospiti