Back to top

Autore Topic: [RISOLTO] Colore background TOP MENU  (Letto 6116 volte)

Offline Mikyjob

  • Nuovo arrivato
  • *
  • Post: 49
    • Mostra profilo
[RISOLTO] Colore background TOP MENU
« il: 21 Ago 2012, 18:09:00 »
Buonasera a tutti. Qui mi serve un aiuto in quanto da solo proprio non penso di farcela.
Sul sito www2.costelli.it vorrei colorare in modo diverso il background dei tasti BLU (da colorare in blu, appunto) e ARANCIO (da colorare in arancio) del Top Menu.
Comincio a ringraziarvi per la solita assistenza!
« Ultima modifica: 23 Ago 2012, 11:22:29 da Mikyjob »

Offline webdesigneritalia

  • Appassionato
  • ***
  • Post: 569
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #1 il: 22 Ago 2012, 06:41:50 »
Ciao Mikyjob,
il colore dei tasti del top menu li gestisci dal foglio di stile relativo.
Nella sezione top menu devi cercare le voci che di solito sono:  a:link  se vuoi modificare il background in stato normale e  a:hover  se vuoi modificare il background quando il mouse è sopra al tasto.
Devi verificare se il background è gestito da un colore ( esempio: #F800000;) oppure da un'immagine appositamente creata (esempio bg_xx.png)


Se è un semplice colore...fai presto a modificarlo, variando lettere e numeri, se è un'immagine la devi scaricare tramite ftp dalla cartella dove si trova (spesso images) poi con un programma grafico la modifichi a piacimento e la ricarichi dove era.
La nuova sovrascrive la vecchia.
Non cambiare la codifica mi raccomando....!!
Spero di esserti stato di aiuto...e buon lavoro
Marco ;)

Offline Mikyjob

  • Nuovo arrivato
  • *
  • Post: 49
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #2 il: 22 Ago 2012, 09:31:43 »
Ciao Marco, non sono riuscito a modificare nulla intervenendo sul topmenu.css, salvo il colore del testo (mentre a me serve modificare il background).
Per altro io vorrei attribuire due colori diversi ai due items del top menu, e ciò richiede, immagino, uno script specifico.
Ti/vi ringrazio se riusciste a darmi una mano.
Ciao. Michele (allego il codice del  topmenu.css).
Codice: [Seleziona]

/*
 
Phoca.cz
 
http://www.phoca.cz/
 
Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
 
Dropdowns by Patrick Griffiths and Dan Webb.
 
http://carroll.org.uk/sandbox/suckerfish/bones2.html
 
*/
 
/* ----[ LINKS ]----*/
 
/* all menu links */
 
#ptm-nav a, #subMenusContainer a{
 
text-decoration:none;
 
display: block;
 
padding: 10px 18px 10px 12px;
 
font-size: 14px;
 
text-transform: uppercase;
 
letter-spacing: -1px;
 
margin-right: 2px;
 
color: #fff;
 
text-shadow: #000 1px 1px 1px;
 
}
 
#subMenusContainer a{
 
text-decoration:none;
 
display: block;
 
padding: 10px 14px 10px 12px;
 
}
 
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
 
#ptm-nav a{
 
margin: 0;
 
float: left;
 
margin-right:2px;
 
}
 
/* Just sub menu links */
 
#subMenusContainer a, #ptm-nav li li a{
 
text-align: left;
 

 
}
 
/* All menu links on hover or focus */
 
#ptm-nav a:hover,
 
#ptm-nav a:focus,
 
#subMenusContainer a:hover,
 
#subMenusContainer a:focus,
 
#ptm-nav a.mainMenuParentBtnFocused,
 
#subMenusContainer a.subMenuParentBtnFocused {
 
color: #fff;
 
margin-right: 2px;
 
}
 
/* sub menu links on hover or focus */
 
#subMenusContainer a:hover,
 
#subMenusContainer a:focus,
 
#ptm-nav a.mainMenuParentBtnFocused,
 
#subMenusContainer a.subMenuParentBtnFocused,
 
#ptm-nav li a:hover,
 
#ptm-nav li a:focus{
 
color: #fff;
 
margin-right: 2px;
 
}
 
/* Parent Sub Menu Links ---[javascript users only]*/
 
.subMenuParentBtn{
 
background: url(../images/ptm/arrow_right.png) right center no-repeat; 
 
}
 
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
 
.subMenuParentBtnFocused{
 
background: url(../images/ptm/arrow_right_over.png) right center no-repeat; 
 
}
 
/* Parent Main Menu Links ---[javascript users only]*/
 
.mainMenuParentBtn{
 
background: url(../images/ptm/arrow_down.png) right center no-repeat;
 
}
 
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
 
.mainMenuParentBtnFocused{
 
background: url(../images/ptm/arrow_down_over.png) right center no-repeat;
 
}
 
/* ----[ OLs ULs, LIs, and DIVs ]----*/
 
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
 
/* the 2px left & right padding lets you have a 1px border
 
   on the ul or ol inside since overflow is set to hidden*/
 
.smOW{
 
display: none;
 
position: absolute;
 
overflow: hidden;
 
padding: 0 2px;
 
margin: 0 0 0 -2px;
 
}
 
/* All ULs and OLs */
 
#ptm-nav,
 
#ptm-nav ul,
 
#ptm-nav ol,
 
#subMenusContainer ul,
 
#subMenusContainer ol {
 
padding: 0;
 
margin: 0;
 
list-style: none;
 
line-height:26px;
 
}
 
/* All submenu OLs and ULs */
 
/*border around submenu goes here*/
 
#ptm-nav ol,
 
#ptm-nav ul,
 
#subMenusContainer ul,
 
#subMenusContainer ol {
 
background: #000;
 
border: 1px solid #000;
 
left: 0;
 
}
 
/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
 
/*great place to use a background image as a divider*/
 
#ptm-nav li {
 
display: block;
 
list-style: none;
 
position: relative;
 
float: left;
 
padding: 0;
 
margin: 0;
 

 
}
 
#subMenusContainer li{
 
list-style: none;
 
padding: 0;
 
margin: 0;
 
}
 
/* main menu ul or ol elment */
 
#ptm-nav{
 
display: block;
 
position: relative;
 
list-style: none;
 
margin: 0 0 0 0;
 
z-index: 5;
 

 
text-align: center;
 
display: block;
 
padding-left:2px;
 
/*background: #f3f3f3 url(../images/bg-topmenu.png) 0 0 repeat-x;*/
 
/*background: transparent url(../images/bg-sep.png) left center no-repeat;*/
 
/*width: 967px;*/
 
margin: 10px 2px;
 
}
 
#subMenusContainer {
 
display: block;
 
position: absolute;
 
top: 0;
 
left: 0;
 
width: 100%;
 
height: 0;
 
overflow: visible;
 
z-index: 1000000000;
 
}
 
/* -----[ The below is just for non-javscript users ]-----------*/
 
#ptm-nav li li {
 
float: none;
 
}
 
/* Just submenu links*/
 
#ptm-nav li li a {
 
position: relative;
 
float: none;
 
}
 
/* second-level lists */
 
/* using left instead of display to hide menus because display: none isn't read by screen readers */
 
#ptm-nav li ul {
 
position: absolute;
 
width: 10em;
 
margin-left:-1000em;
 
margin-top: 36px;
 
font-size: 16px;
 
}
 
/* second-level lists */
 
#ptm-nav li ul a {
 
font-size: 13px;
 
}
 
/* third-and-above-level lists */
 
#ptm-nav li ul ul { margin: -26px 0 0 -1000em;}
 
#ptm-nav li:hover ul ul,
 
#ptm-nav li.sfhover ul ul { margin-left: -1000em;}
 
/* lists nested under hovered list items */
 
#ptm-nav li:hover ul,
 
#ptm-nav li.sfhover ul { margin-left: 0;}
 
#ptm-nav li li:hover ul { margin-left: 10em; margin-top:-37px;}
 
#ptm-nav li li.sfhover ul { margin-left: 10em; margin-top:-35px;}
 
/* extra positioning rules for limited noscript keyboard accessibility */
 
#ptm-nav li a:focus + ul { margin-left: 0; margin-top:36px;}
 
#ptm-nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-36px;}
 
#ptm-nav li li a:focus { left:0; margin-left: 1000em; width:10em; margin-top:0;}
 
#ptm-nav li li li a:focus { left:0; margin-left: 2010em; width: 10em; margin-top:-26px;}
 
#ptm-nav li:hover a:focus,
 
#ptm-nav li.sfhover a:focus { margin-left: 0;}
 
#ptm-nav li li:hover a:focus + ul,
 
#ptm-nav li li.sfhover a:focus + ul { margin-left: 10em;}

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #3 il: 22 Ago 2012, 09:37:05 »
theme.css riga 262:
Codice: [Seleziona]
#ptm-nav li
{
.
.
.
.
background: url(images/btn.png) repeat-x; /* ELIMINA QUESTA RIGA */
.
.
}
ed inserisci appena chiusa la graffa:
Codice: [Seleziona]
li.item-476
{
background-color: blue;

}

li.item-477
{
background-color: orange;

}

edit: il file theme.css lo trovi qui: templates/phoca_bild/themes/black/theme.css
« Ultima modifica: 22 Ago 2012, 09:38:49 da giovi »

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #4 il: 22 Ago 2012, 10:06:50 »
attenzione però a non cancellare le voci di menù, altrimenti dovresti cambiare il numero dell'item
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline Mikyjob

  • Nuovo arrivato
  • *
  • Post: 49
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #5 il: 22 Ago 2012, 13:26:56 »
Mi dispiace, non ho risolto (stavo già per mandarvi un grazie gigante -che vi devo anche solo per la cortesia -).
Ho provato sia eliminando concretametne la riga che modificandone il codice inserendo lo script /* ELIMINA QUESTA RIGA */
Ovviamente, dopo la graffa, ho inserito lo script di riferimento agli items.
Non succede nulla. Come mai?!?! Ci avevo riposto tanta fiducia...

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #6 il: 22 Ago 2012, 15:01:02 »
prova ancora perchè la modifica sembra non avere avuto effetto (nel senso che non è stata salvata) oppure prova a cancellare la cache di joomla!

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #7 il: 22 Ago 2012, 15:26:14 »
Si prova ancora, quando si fanno queste modifiche se non svuoti la cache del browser resta tutto infvariato.

premi F5 insieme a CTRL per un paio di volte  ;)
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline Mikyjob

  • Nuovo arrivato
  • *
  • Post: 49
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #8 il: 22 Ago 2012, 16:18:12 »
Niente ragazzi. Non funziona. Vi allego il codice che ho inserito, magari sono ciuccio io.
Giustamente ho aggiornato il browser ma tutto ciò non ha avuto effetti.
Grazie per il supporto.
Codice: [Seleziona]
#ptm-nav li {
 
color: #fff;
 
box-shadow: inset 0 0px 1px #fff;
 
-o-box-shadow: inset 0 0px 1px #fff;
 
-webkit-box-shadow: inset 0 0px 1px #fff;
 
-moz-box-shadow: inset 0 0px 1px #fff;
 
margin: 0px 5px;
 
background-color: #000;
 
border-radius: 7px;
 
-o-border-radius: 7px;
 
-moz-border-radius: 7px;
 
-webkit-border-radius: 7px;
 
}
 
li.item-476
 
{
 
background-color: blue;
 
}
 
li.item-477
 
{
 
background-color: orange;
 
}

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #9 il: 22 Ago 2012, 22:53:06 »
il codice che devi inserire è quello esatto, il problema sta nel salvataggio del file. Come lo stai aprendo, tramite filezilla o qualche gestore files fornito dal tuo provider? Come non detto, sto vedendo che l'eliminazione dello sfondo come immagine l'ha presa, ora non resta che spiegargli che il colore che abbiamo impostato depo deve avere la priorità sul resto!

Prova a sostituire il codice precedente con questo:
Codice: [Seleziona]
li.item-476
{
background-color: blue !important;
}
li.item-477
{
background-color: orange !important;
}
« Ultima modifica: 22 Ago 2012, 22:56:38 da giovi »

Offline Mikyjob

  • Nuovo arrivato
  • *
  • Post: 49
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #10 il: 22 Ago 2012, 23:51:55 »
Niente da fare Giovi!
Io uso Filezilla e le modifiche le prende, tant'è che cambiando il codice prima delle indicazioni sugli items cambiano normalmente le visualizzazioni (sul colore per esempio).
O c'è da qualche altre parte un'istruzione che va in conflitto... oppure... boh.
Non mi abbandonare, grazie!

Offline Mikyjob

  • Nuovo arrivato
  • *
  • Post: 49
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #11 il: 23 Ago 2012, 08:01:57 »
Segnalo una cosa, a chi ha la capacità (non come me) di valutarla:
può essere che il topmenu.css contenga istruzioni che vanificano le modifiche sul theme.css?
Per esempio, cambiando il colore sull'istruzione:
Codice: [Seleziona]
#ptm-nav a, #subMenusContainer a{
 
text-decoration:none;
 
display: block;
 
padding: 10px 18px 10px 12px;
 
font-size: 14px;
 
text-transform: uppercase;
 
letter-spacing: -1px;
 
margin-right: 2px;
 
color: #fff;
 
text-shadow: #000 1px 1px 1px;
mi cambia il colore del testo degli items (entrambi, ovviamente) del topmenu.
Spero possa essere utile. Grazie.

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #12 il: 23 Ago 2012, 11:07:08 »
Ferma tutto, l'errore è mio!!!
Il codice esatto è questo, ti spiego poi il perchè:

Codice: [Seleziona]
li#item-476
{
background-color: blue !important;
}
li#item-477
{
background-color: orange !important;
}
come vedi prima ho usato dei punti per individuare la voce di menu, quando in realtà sono degli id e non delle classi, per cui bisogna usare i cancelletti. E' stata una mia disattenzione: fa questa prova e fammi sapere!

Offline Mikyjob

  • Nuovo arrivato
  • *
  • Post: 49
    • Mostra profilo
Re:Colore background TOP MENU
« Risposta #13 il: 23 Ago 2012, 11:20:30 »
Giovi: GRANDE, GRANDE, GRANDE.
Ti ringrazio tantissimo!
Vero che dovrei riuscire a variare i colori usando, per esempio, anzichè "blue" un codice web-safe tipo 39F?
Ancora grazie.

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:[RISOLTO] Colore background TOP MENU
« Risposta #14 il: 23 Ago 2012, 11:30:23 »
blue è una costante definita per un certo codice esadecimale. Non c'è alcuna differenza se scrivi blue o #00F perché è uno standard del css.
Un colore web-safe è invece un colore che viene riprodotto allo stesso modo da tutti i monitor del mondo ma pratica non esiste perché ad esempio i mac hanno una saturazione diversa dai pc e quindi avrà sempre delle sfumature di differenza. I colori websafe comunque ti assicurano che possono essere visualizzati allo stesso modo su un monitor con 16bit di colore (quindi con pochi colori disponibili) ed un monitor con 32bit (che consente di usare più sfumature dello stesso colore). Se ad esempio il blu è un colore standard rappresentabile sulla maggior parte dei monitor, il blu cristallino può essere rappresentato solo su monitor che rappresentano anche diverse sfumature del blu. Se un monitor non supporta il blu cristallin, utilizzerà il blu classico al suo posto. ecco perchè il blu è un colore web-safe ed il blu cristallino (semmai esistesse come colore) no. Non cambia nulla se scrivi blue o #00f, o se scrivi red o #f00 0 #ff0000, white o #fff o #ffffff, ecc... ;)

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:[RISOLTO] Colore background TOP MENU
« Risposta #15 il: 23 Ago 2012, 11:31:58 »
Qui trovi i colori che dovrebbero essere websafe: http://www.w3schools.com/cssref/css_colors.asp
Come puoi vedere utilizzano solo 3 cifre anzichè sei!

Offline Mikyjob

  • Nuovo arrivato
  • *
  • Post: 49
    • Mostra profilo
Re:[RISOLTO] Colore background TOP MENU
« Risposta #16 il: 23 Ago 2012, 11:54:00 »
Ammazza... Non volevo chiederti una dissertazione sui sistemi e i codici cromatici!
Grazie per il tempo che mi hai dedicato!

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:[RISOLTO] Colore background TOP MENU
« Risposta #17 il: 23 Ago 2012, 12:56:55 »
Non preoccuparti, a volte fa comodo ripassare questi concetti  ;D

 



Web Design Bolzano Kreatif