Modificare la Barra intorno al Forum

Fabio

Posted on 30/4/2008, 09:50

.

User deleted

Con questa guida impareremo a modificare la barra attorno al Forum in pochi semplici passi.
Innanzitutto c'è da dire, per chi non lo sa, che la barra va realizzata tramite un programma di grafica (Es. Photoshop) e divisa in 3 parti che andremo poi a inserire nel CSS in Amministrazione > Modifica Colori e Stili.
Vi consiglio per la realizzazione della barra l'utilizzo di questa Guida.

Ho realizzato apposta per questa guida una semplice barra già divisa in 3 parti che nel CSS saranno
.mback_left

.mback_right

.mback center

Le dimensioni che ho utilizzato sono 200x30 per le 2 barre laterali e 1x30 per quella centrale.

Ora non ci resta che andare a inserire questa barra all'interno del CSS, preleviamo la parte di codice relativa alla barra:

CODICE

/* BARRA ATTORNO AL FORUM */
.mback {background-color: #80B0F0; height: 28px; border-top: 1px solid #999}
.mtitle {color: #FFF; font-size: 12px; font-weight: bold}
.mtitle a:link, .mtitle a:visited {color: #FFF; text-decoration: none}
.mtitle a:hover {color: #F1F1F1}
.mtitle img {margin-bottom: -6px}
.mback_right {width: 18px; background-image: url(http://img.forumfree.net/style_images/22/nav_m.gif); background-repeat: no-repeat; background-position: center}
.mback_left {width: 18px; background-image: url(http://img.forumfree.net/style_images/22/nav_m.gif); background-repeat: no-repeat; background-position: center}
.mback_center {width: 18px; background-image: url(http://img.forumfree.net/style_images/22/nav_m.gif); background-repeat: repeat-x; background-position: center}

Questo è il nostro codice di partenza, andiamo ora a modificarlo:

CODICE

/* BARRA ATTORNO AL FORUM */
.mback {background-color: #80B0F0; height: 30px; border-top: 1px solid #999}
.mtitle {color: #FFF; font-size: 12px; font-weight: bold}
.mtitle a:link, .mtitle a:visited {color: #FFF; text-decoration: none}
.mtitle a:hover {color: #F1F1F1}
.mtitle img {margin-bottom: -6px}
.mback_right {width: 200px; background-image: url(http://digilander.libero.it/jukyu/skins/guidabarra/backr.png); background-repeat: no-repeat; background-position: center}
.mback_left {width: 200px; background-image: url(http://digilander.libero.it/jukyu/skins/guidabarra/backl.png); background-repeat: no-repeat; background-position: center}
.mback_center {background-image: url(http://digilander.libero.it/jukyu/skins/guidabarra/backc.png); background-repeat: repeat-x; background-position: center}

Ecco il codice modificato, andiamo ad analizzare cosa è stato modificato:

- I Link delle immagini
- Le dimensioni delle barre. (width corrisponde alla larghezza della barra, nel nostro caso 200 e poi al selettore .mback inseriamo l'altezza che corrisponde a height)

Vi consiglio anche l'utilizzo di questa guida per capire meglio come modificare la barra.
Se avete bisogno di ulteriori chiarimenti postate pure in questo topic.

Edited by Fabio - 30/4/2008, 11:21

.

pulp_94

Posted on 21/9/2008, 19:18

.

User deleted

e se si volesse proprio eliminare la barra?

.

!jak!mk

Posted on 21/9/2008, 19:36

.

User deleted

scusate.... guardate i margini del mio forum.... http://leo94.forumfree.net/ cm faccio a eliminarli così ke si veda lo sfondo intero?

.

Shizuru117

Posted on 22/9/2008, 10:14

.

User deleted

CITAZIONE (!jak!mk @ 21/9/2008, 20:36)

scusate.... guardate i margini del mio forum.... http://leo94.forumfree.net/ cm faccio a eliminarli così ke si veda lo sfondo intero?

Devi togliere il container

.

!jak!mk

Posted on 23/9/2008, 11:48

.

User deleted

asp qst è il mio codice di modifica colori e stili:
cosa tolgo???
se tolgo barra attorno al forum mi si tolgono altre cose ma nn quella....

SPOILER (click to view)

CODICE

body {background-image:none; background-color: #F5F5F5; font-family: verdana, tahoma, arial; font-size: 11px; color: #6C6C6C}
table, div {font-size: 10px; color: #6C6C6C}
a:link, a:visited {text-decoration: none; color: #21B5E4}
a:hover {color: #6B6B6B}

/* SCRITTE ESTERNE */
.nav {font-weight: bold}

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

/* COLORI LISTA UTENTI ATTIVI */
.amministratore {color: #14C2D7; font-weight: bold}
.moderatore {color: #E686B9; font-weight: bold}
.utente {color: #81D0EA}
.daconvalidare {color: #6C6C6C}
.gruppo1 {color: #B980FF; font-weight: bold}
.gruppo2 {color: #80A9FF; font-weight: bold}
.gruppo3 {color: #95DDFF; font-weight: bold}
.gruppo4 {color: #9FEF50; font-weight: bold}
.gruppo5 {color: #FFF000; font-weight: bold}
.gruppo6 {color: #FFB56A; font-weight: bold}

/* BARRA ATTORNO AL FORUM */
.mback {height: 26px; background-image: none}
.mtitle {padding-left: 24px; padding-top: 6px; font-weight: bold; font-size: 11px; color: #81D0EA}
.mback_left {width: 161px; background-image: url(http://www.napolicalcetto.com/electro/1/mback_left.gif); background-position: bottom; background-repeat: no-repeat}
.mback_center {background-image: url(http://skin.forumfree.net/bubblegum/mback_center.gif); background-position: bottom; background-repeat: repeat-x}
.mback_right {width: 96px; background-image: url(http://www.napolicalcetto.com/electro/1/mback_right.gif); background-position: bottom; background-repeat: no-repeat}
.msub {height: 20px}
.msub_left {width: 7px; background-image: url(http://www.napolicalcetto.com/electro/1/msub_left.gif); background-repeat: no-repeat}
.msub_center {background-image: url(http://www.napolicalcetto.com/electro/1/msub.gif)}
.msub_right {width: 7px; background-image: url(http://www.napolicalcetto.com/electro/1/msub_right.gif); background-repeat: no-repeat}

/* BARRA UTENTE */
.header {background-color: #F6F5F5; border: 1px solid #CECECE}
.menu {height: 19px; background-image: url(http://skin.forumfree.net/bubblegum/title.gif); background-repeat: repeat-x; background-color: #F3F5F7; border: 1px solid #CECECE; border-top: 0}
.menu .highlight, .msg .highlight {color: #6C6C6C; font-weight: bold}
.menu_right {display:none}

/* SEZIONI FORUM */
.mainbg {background-color: #CECECE}
.title {height: 14px; background-repeat: repeat-x; background-image: url(http://skin.forumfree.net/bubblegum/title.gif); background-color: #FFFFFF; font-weight: bold; color: #81D0EA}
.aa, .bb, .cc {background-color: #F0F0F0; border: 1px solid #FFF}
.ww, .xx, .yy, .zz {background-color: #F6F5F5; border: 1px solid #FFF}
.web {font-size: 11px; line-height: 150%}
.web a:link, .web a:visited {text-decoration: underline}
.desc {font-size: 9px}
.foot {background-color: #F2F2F2; font-weight: bold}
.board .foot {display: none}
.tag .aa, .tag .ww {border: 0}

/* STATISTICHE */
.skin_tbl_border {background-color: #CECECE}
.stats .title2 {height: 20px; text-align: left; padding-left: 45px; background-image: url(http://skin.forumfree.net/bubblegum/title.gif); background-repeat: repeat-x; color: #81D0EA; font-weight: bold; font-size: 8pt}
.sunbar {text-align: center; background-image: url(http://skin.forumfree.net/bubblegum/title.gif); background-repeat: repeat-x; background-color: #FFFFFF; font-weight: bold}
.stats a:hover * {color: #000}

/* LINK MOD */
.highlight a:hover {color: #7D2020}

/* DISCUSSIONE */
.left_top, .right_top, .left_bottom, .right_bottom {height: 20px; background-color: #F0F0F0}
#quote, #code {font-family: verdana, arial; font-size: 11px; color: #6C6C6C; background-color: #FFF; border: 1px dashed #6C6C6C; border-left: 5px solid #81D0EA; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px}
.color {font-size: 12px}
hr {color: #EC8DC4}
.fancyborder {background-color: #F6F5F5; border: 1px dashed #21B5E4}
.edit {font-size: 9px}
.bottomborder {border-bottom: 1px dashed #9295A4}
.signature {background-color: #F6F5F5; border: 1px solid #CECECE; padding: 2px; font-size: 7.5pt; line-height: 150%}
.sep {background-color: #FFF; height: 5px; border-left: 1px solid #CECECE; border-right: 1px solid #CECECE}
.left {background-color: #F6F5F5; border: 1px solid #FFF}
.right {background-color: #F0F0F0; border: 1px solid #FFF}
.nick a:link, .nick a:visited {font-weight: bold; font-size: 12px}
.bar_left {background-image:url(http://www.napolicalcetto.com/electro/1/bar_left.gif)}
.bar {background-image:url(http://www.napolicalcetto.com/electro/1/bar.gif)}
.bar_right {background-image:url(http://www.napolicalcetto.com/electro/1/bar_right.gif)}

/* MESSENGER */
.msg_main {background-color: #F6F5F5}
.darkbar a:link, .darkbar a:visited {color: #3A4F6C}
.darkbar a:hover {color: #4A668A}
.row1 {background-color: #F6F5F5}
.row2, .darkbar {height: 18px; background-image: url(http://skin.forumfree.net/bubblegum/title.gif); background-repeat: repeat-x; background-color: #FFF; color: #81D0EA; font-weight: bold; padding-bottom: 2px}
.row3 {border: 1px solid #CECECE; background-color: #F6F5F5}
.title3 {font-weight: bold; background-color: #F0F0F0}
.info {color: #14C2D7}
.alert {color: #E62222}

/* PROFILO UTENTI */
.pagetitle {font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 120%}
.title2 {height: 18px; padding-bottom: 2px; background-image: url(http://skin.forumfree.net/bubblegum/title.gif); background-repeat: repeat-x; background-color: #FFF; color: #81D0EA; font-weight: bold}

/* INPUT */
.codebuttons {font-size: 10px; color: #21B5E4; font-family: verdana, helvetica, sans-serif; vertical-align: middle; background-color: #FFF; background-image: url(http://helyanstyle.altervista.org/_altervista_ht/fmx/button.jpg); background-position:center; border: 1px solid #CECECE}
.forminput {font-size: 10px; border: 1px solid #CECECE; color: #21B5E4; background-color: #FFF; font-family: verdana, helvetica, sans-serif; vertical-align: middle}
.textinput {font-size: 10px; border: 1px solid #CECECE; background-color: #FFF; color: #21B5E4; font-family: verdana, helvetica, sans-serif; vertical-align: middle}

.web a:link img, .web a:visited img {filter:alpha(opacity=30); -moz-opacity: 0.5; opacity: 0.5}
.web a:hover img {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0}

.

Shizuru117

Posted on 23/9/2008, 12:21

.

User deleted

Il container non si trova in "modifica colori e stili", ma in "gestione codice html"

.

!jak!mk

Posted on 23/9/2008, 19:05

.

User deleted

quale???:

codice in cima al sito:

SPOILER (click to view)

CODICE

.

Homer J. Simpson

Posted on 23/9/2008, 21:39

.

User deleted

Questa parte è quella che ti interessa:

In cima al sito

HTML

<div id="wrapper">
<div id="barleft">
<div id="barright">

In fondo al sito

HTML

</div></div></div>

Sarebbe il container.

.

!jak!mk

Posted on 24/9/2008, 12:17

.

User deleted

ok grz ci sn riuscito.... ma mi piace di più cn il container XD grazie ancora

.

MAXIMUS250

Posted on 26/6/2009, 14:44

.

User deleted

scusate come faccio a differenziare la barra attorno al forum da quella sulla TAG BOARD? ce un metodo? mi serve che siano differenti

Edited by MAXIMUS250 - 26/6/2009, 17:24

.

Zukkulino

Posted on 16/7/2009, 13:56

.

User deleted

tu intendi una skin x la tagboard e una skin x il resto del forum?

.

†..Ja¢k The Ripper..†

Posted on 25/8/2009, 13:57

.

User deleted

a me è venuto cosi mi spiegate il perke?

ecco il codice

SPOILER (click to view)

CODICE

/* BARRA ATTORNO AL FORUM */
.mback {background-color: #80B0F0; height: 35px; border-top: 1px solid #999}
.mtitle {padding-bottom: 2px; font-size: 9pt; text-align: center; color: #F98C67}
.mback_left {width: 95px; height: 35px; background-image: url(http://i26.tinypic.com/16igndh.jpg); background-repeat: no-repeat; background-position: bottom}
.mback_center {width: 69px; height: 35px; background-image: url(http://i27.tinypic.com/n4h5ll.jpg); background-repeat: repeat-x; background-position: bottom}
.mback_right {width: 132px; height: 35px; background-image: url(http://i28.tinypic.com/1265o5x.jpg); background-repeat: no-repeat; background-position: bottom}
.msub {height: 20px} .
.msub_left {width: 26px; height: 20px; background-image: url(http://i31.tinypic.com/23wpf02.jpg); background-repeat: no-repeat}
.msub_center {width: 26px; height: 20px; background-image: url(http://i31.tinypic.com/i2ox10.jpg); background-repeat: repeat-x}
.msub_right {width: 26px; height: 20px; background-image: url(http://i31.tinypic.com/29dxnqg_th.jpg); background-repeat: no-repeat}
.mleft, .sep_left, .mright, .sep_right {width: 0}

.

The Medea[L'admin. Founder]

Posted on 2/11/2009, 02:16

.

User deleted

ciao questo è il mio forum--->http://themedeashophouse.forumfree.net/
io volevo sapere come cambiare solo il colore a quei ghirigori neri! cioè quella specie di cornice nera!

.

Lyrin

Posted on 23/2/2010, 17:21

.

User deleted

Scusate se riesumo il topic ma ho un problema e volevo evitare di aprirne uno nuovo visto che è inerente.
A proposito del container,dunque l'ho tolto dalla skin che ho scelto (da gestione codici html) però di conseguenza la tabella della skin si allarga..come faccio a restringerla ?

Grazie in anticipo.

.

S t y l e

Posted on 24/2/2010, 19:59

.

User deleted

CITAZIONE

Scusate se riesumo il topic ma ho un problema e volevo evitare di aprirne uno nuovo visto che è inerente.
A proposito del container,dunque l'ho tolto dalla skin che ho scelto (da gestione codici html) però di conseguenza la tabella della skin si allarga..come faccio a restringerla ?

Grazie in anticipo.

Aggiungi la larghezza in % alla tabella

CODICE

Oppure crei un id nei CSS dove imposti la larghezza e poi lo richiami nell'HTML

.