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
---------------------------------------- */
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
---------------------------------------- */
Codice: Seleziona tutto
<div id="wrap">
Codice: Seleziona tutto
<div id="border-up"></div>
Codice: Seleziona tutto
<div class="border-bottom"><span><span></span></span></div>
</div></div></div></div></div>
</div>
Codice: Seleziona tutto
<div class="border-bottom"></div>
</div></div></div></div></div>
</div>
<div id="border-down"></div>