container tramite CSS

King Graphic

Posted on 17/4/2011, 11:30

User deleted

amministrazione ---->grafica ----->colori e stile e sotto inserire un codice simile:

CODICE
.nav {font-weight: bold; font-size: 8pt; color: #679CAC}

dovrete mettere questo codice,nel caso non ci fosse già:

CODICE
#wrapper {background: #CODCE COLORE; border: 0; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; width: 80%}

CODICE
/*LATI CONTAINER*/
#leftborder {background-image: url(LINK IMMAGINE);
background-repeat: repeat-y; background-position: left}
#rightborder {background-image: url(LINK IMMAGINE);
background-position: right; background-repeat: repeat-y}
#topborder {background-image: url(LINK IMMAGINE);
background-position: top; background-repeat: repeat-x}
#bottomborder {background-image: url(LINK IMMAGINE);
background-position: bottom; background-repeat: repeat-x}

/*ANGOLI DEL CONTAINER*/
#ang1 {background-image: url(LINK IMMAGINE);
background-position: left top; background-repeat: no-repeat}
#ang2 {background-image: url(LINK IMMAGINE);
background-position: right top; background-repeat: no-repeat}
#ang3 {background-image: url(LINK IMMAGINE);
background-position: right bottom; background-repeat: no-repeat}
#ang4 {background-image: url(LINK IMMAGINE);
background-position: left bottom; background-repeat: no-repeat}

Attenzione,prima di farlo però assicuriamoci che la dimensione del forum sia dai 90 ai 100.in caso non fosse così modificate questo codice che troverte subito sotto:

CODICE
/* DIMENSIONI FORUM */
.header_width, .skin_tbl_width, .skin_tbl {width: 70%}
.stats .border {width: 70%}

CODICE
/*CONTAINER*/
#wrapper {background: #CODCE COLORE; border: 0; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; width: 80%}

/*LATI CONTAINER*/
#leftborder {background-image: url(LINK IMMAGINE);
background-repeat: repeat-y; background-position: left}
#rightborder {background-image: url(LINK IMMAGINE);
background-position: right; background-repeat: repeat-y}
#topborder {background-image: url(LINK IMMAGINE);
background-position: top; background-repeat: repeat-x}
#bottomborder {background-image: url(LINK IMMAGINE);
background-position: bottom; background-repeat: repeat-x}

/*ANGOLI DEL CONTAINER*/
#ang1 {background-image: url(LINK IMMAGINE);
background-position: left top; background-repeat: no-repeat}
#ang2 {background-image: url(LINK IMMAGINE);
background-position: right top; background-repeat: no-repeat}
#ang3 {background-image: url(LINK IMMAGINE);
background-position: right bottom; background-repeat: no-repeat}
#ang4 {background-image: url(LINK IMMAGINE);
background-position: left bottom; background-repeat: no-repeat}

il codice per ora non funzionerà,non essendoci i codici e i link delle immagini,quindi passiamo alle modifiche:

CODICE
/*CONTAINER*/
#wrapper {background: #CODCE COLORE; border: 0; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; width: 80%}

Qui dobbiamo modificare il colore dello sfondo,segendo la Tabella colori in HTML fatto questo arriva il difficile:

CODICE
/*LATI CONTAINER*/
#leftborder {background-image: url(LINK IMMAGINE);
background-repeat: repeat-y; background-position: left}
#rightborder {background-image: url(LINK IMMAGINE);
background-position: right; background-repeat: repeat-y}
#topborder {background-image: url(LINK IMMAGINE);
background-position: top; background-repeat: repeat-x}
#bottomborder {background-image: url(LINK IMMAGINE);
background-position: bottom; background-repeat: repeat-x}

I link delle immagini sono state sostituite con LINK IMMAGINE
Voi dovrete fare un immagine tipo queste:

https://skin.forumfree.net/1467/container_left.png per #leftborder {background-image: url(LINK IMMAGINE);
background-repeat: repeat-y; background-position: left}

https://skin.forumfree.net/1467/container_right.png per #rightborder {background-image: url(LINK IMMAGINE);
background-position: right; background-repeat: repeat-y}

https://skin.forumfree.net/1467/container_top.png per #topborder {background-image: url(LINK IMMAGINE);
background-position: top; background-repeat: repeat-x}

https://skin.forumfree.net/1467/container_bottom.png per #bottomborder {background-image: url(LINK IMMAGINE);
background-position: bottom; background-repeat: repeat-x}

più che altro è la grandezza che conta,voi potete farlo come più vi piace,comunque sostituirete LINK IMMAGINE con i link delle immagini:

CODICE
/*ANGOLI DEL CONTAINER*/
#ang1 {background-image: url(LINK IMMAGINE);
background-position: left top; background-repeat: no-repeat}
#ang2 {background-image: url(LINK IMMAGINE);
background-position: right top; background-repeat: no-repeat}
#ang3 {background-image: url(LINK IMMAGINE);
background-position: right bottom; background-repeat: no-repeat}
#ang4 {background-image: url(LINK IMMAGINE);
background-position: left bottom; background-repeat: no-repeat}

anche qui dovrete modificare LINK IMMAGINE con i link delle immagini.le dimensioni e la forma saranno tipo queste,ma voi potete fare come volete:

CODICE
https://skin.forumfree.net/1467/container_angolo.png per #ang1 {background-image: url(LINK IMMAGINE);
background-position: left top; background-repeat: no-repeat}

https://skin.forumfree.net/1467/container_right_top.png per #ang2 {background-image: url(LINK IMMAGINE);
background-position: right top; background-repeat: no-repeat}

https://skin.forumfree.net/1467/container_right_bottom.png per #ang3 {background-image: url(LINK IMMAGINE);
background-position: right bottom; background-repeat: no-repeat}

https://skin.forumfree.net/1467/container_left_bottom.png per #ang4 {background-image: url(LINK IMMAGINE);
background-position: left bottom; background-repeat: no-repeat}

Il container è ora finito!! :mky: ora non vi resta che mettere il codice sotto a:

CODICE
/* SCRITTE ESTERNE */
.nav {font-weight: bold; font-size: 8pt; color: #679CAC}

e sopra a

CODICE
/* DIMENSIONI FORUM */
.header_width, .skin_tbl_width, .skin_tbl {width: 95%}
.stats .border {width: 95%}

0 replies since 17/4/2011, 11:30 24 views