[Tutorial] Barra Utente Centrata

Mezmerized

Posted on 12/5/2009, 00:52

Volete avere il menù utente centrato? E' semplicissimo e ve lo spiegherò in pochi passaggi.
I credits non sono obbligatori ma sempre graditi (:

Innanzi tutto andiamo nell'amministrazione della Skin e selezioniamo Modifica colori e stili. Dentro Modifica colori e stili inseriamo, sotto al selettore .menu il seguente codice css:

CODICE

.menu form {display: none}

Che ci permetterà di far sparire i vari menù di ricerca dalla barra, lasciandoci solo con la parte riguardante l'utente.
Dopodiche spostiamo la nostra attenzione nel selettore .menu (prenderò come esempio il codice della Default Skin):

CODICE

Al codice di base ci basterà aggiungere (sostituendo 300px con la dimensione che più preferite) queste tre descrizioni:

CODICE

margin-left: auto; margin-right: auto; text-align:center; width: 300px;

Ed ecco qui il codice finale!

CODICE

.menu {background-image: url(http://img.forumfree.net/style_images/37/tile_sub.gif); background-repeat: repeat-x; background-color: #DFE2E4; border: 1px solid #FFF; border-top: 0; color: #3A4F6C; font-weight: bold; letter-spacing: 1px; margin-left: auto; margin-right: auto; text-align:center; width: 300px; height:25px}
.menu form {display: none}

Esempio codice applicato.

Edited by CioboMario ‘ - 18/5/2009, 14:49

~ i r i s

Posted on 5/6/2009, 18:21

Grazie Grazie Grazie **
Ho inserito i credits nella skin che sto facendo al momento
e la cui barra utente è stata modificata grazie a questo tutorial =)

Rachel Aori

Posted on 27/7/2009, 19:57

Group:: I <3 Skinning!

Posts:: 8,504

Status:

Una domanda, se io volessi conservare le immagini di cerca aiuto e utenti, sempre mantenedola centrata, come potrei modificare il codice?

Web Contacts

~ Sy

Posted on 29/7/2009, 13:53

basta che togli questo:

CODICE

.menu form {display: none}

e naturalmente devi fare l'immagine di sfondo più lunga ed infine viene tutto centrato se utilizzi il codice di sopra^^

Tefnut.5

Posted on 31/7/2009, 12:03

una domanda ma se lo volessi fare in tre parti? come la barra del forum o l'msub.. ho provato utilizzando lo stesso codice e sostituendo il selettore .mback con .menu ma non funziona....

CODICE

.header {border: 1px solid #000}
.menu {height: 58px; background:transparent}
.menu_center {background-image: url(http://i32.tinypic.com/ibgygi.jpg)}
.menu_right {width: 77px; background-image: url(http://i31.tinypic.com/erfnv7.jpg); background-repeat: no-repeat; background-position: top right}
.menu_left {width: 77px; background-image: url(http://i28.tinypic.com/a4wj6d.jpg); background-repeat: no-repeat; background-position: top left}
.menu form {display: none}

Tefnut.5

Posted on 3/8/2009, 14:11

†Vermilion Witch†

Posted on 12/8/2009, 16:42

Valar Morghulis

Group:: I <3 Skinning!

Posts:: 14,700

Location:: •Westeros~

Status:

Lo cercavo da un sacco! Grazie!

Web

Chuck

Posted on 3/9/2009, 09:08

CITAZIONE (Tefnut.5 @ 31/7/2009, 13:03)

una domanda ma se lo volessi fare in tre parti? come la barra del forum o l'msub.. ho provato utilizzando lo stesso codice e sostituendo il selettore .mback con .menu ma non funziona....

CODICE

Non è possibile farlo.

Dadz,

Posted on 10/9/2009, 15:16

Volevo avvisare gli skinner che avessero problemi in questo periodo che il codice sotto riportato, a causa di alcune modifiche effettuate, non è più disponibile e non nasconde epiù tutta la parte destra del menù
CODICE
.menu form {display: none}

Al suo posto potete utilizzare
CODICE
.menu img, .menu_right, .menu form {display: none}

E avrete tutto nascosto di nuovo.

8 replies since 12/5/2009, 00:52 1054 views