Back to top

Autore Topic: [RISOLTO] Modifica hornav su JA_purity  (Letto 3565 volte)

Offline ZioRiP

  • Esploratore
  • **
  • Post: 129
    • Mostra profilo
[RISOLTO] Modifica hornav su JA_purity
« il: 22 Giu 2010, 22:47:20 »
Ciao a tutti, premettendo di essere una vera e propria scarpa in fatto di CSS e compagnia bella ma, per disperazione mi sono trovato a metterci mano, chiedo il vostro aiuto nella speranza che siate molto semplici nello spiegarmi (in caso qualcuno intervenisse in mio aiuto).

Mi è stato consigliato di usare JA_Purity per copiare il più fedelmente possibile un mio altro sito realizzato con una piattaforma commerciale e completamente diverso da Joomla.
Ora, lasciando perdere se ho fatto bene o male a prendere quell'altra piattaforma, il mio problema è che nonostante ce la stia mettendo tutta penso di aver raggiunto i miei limiti.

Mi piacerebbe che il sito http://www.zioripstore.com diventasse identico a http://www.ziorip.com
I siti in questione li sto gestendo entrambi e addirittura ho cercato di farli apparire come unico sito infatti, cliccando sugli ultimi due link a destra di ziorip.com si passa a zioripstore.com.

Per il momento mi accontenterei che la barra dei menu che su joomla è in posizione hornav (JA_Purity) diventasse uguale a quella di ziorip.com. In parte ci sono riuscito, ma ho ancora un problema con le dimensioni del font che se aumento portando alla pari di quelle di ziorip.com mi sballa tutta la grafica del tab attivo.

Oltre a questo mi piacerebbe che la grafica del tab attivo apparisse come quello di ziorip.com che si estende verticalmente oltre la barra giallo arancione.

Inoltre (e poi giuro che non ne tiro fuori più ;) ) la spaziatura tra le varie voci di menu non viene uguale a quella di ziorip.com.

Nonostante per alcuni di voi possa sembrare banale per me quella di aver fatto tutto quel cambiamento da solo è un'impresa titanica (io faccio grafica e non so programmare), spero che qualcuno sappia aiutarmi e ringrazio in anticipo :)

Ciao


« Ultima modifica: 24 Giu 2010, 09:04:32 da ZioRiP »
Corsi gratuiti di grafica digitale
http://www.ziorip.com

adottauncane

  • Visitatore
Re:Modifica hornav su JA_purity
« Risposta #1 il: 23 Giu 2010, 01:29:53 »
Ciao ZioRip,
per la "linguetta" del menù prova a vedere se incollando questo codice in fondo al template funziona:
Codice: [Seleziona]
#ja-mainnav ul.menu li.active {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:transparent;
background-image:url("http://www.ziorip.com/public/style_images/ziorip10/tab_left.png");
background-position:left top;
background-repeat:no-repeat;
font-size:1.05em;
font-weight:bold;
margin-bottom:auto;
margin-left:5px;
margin-right:0;
margin-top:-3px;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
position:relative;
}

Per le dimensioni del testo del menù prova così:
ja-sosdmenu.css (riga 253)
Codice: [Seleziona]
#ja-mainnav ul.menu li a {
display:block;
font-size:12px; <----- aggiungi questa riga e la misura la copi dall'altro sito
line-height:normal;
padding-bottom:8px;
padding-left:20px; <----- qui per variare la spaziatura
padding-right:20px; <----- qui per variare la spaziatura
padding-top:8px;
text-decoration:none;
}

dimmi come va (e se va) e poi vediamo...
Buon lavoro

Offline ZioRiP

  • Esploratore
  • **
  • Post: 129
    • Mostra profilo
Re:Modifica hornav su JA_purity
« Risposta #2 il: 23 Giu 2010, 05:29:26 »
Ciao, ti ringrazio infinitamente :)

Ho applicato le tue modifiche e devo dire che sembrano portare sulla strada giusta.
Ci sono due inconvenienti che ho riscontrato, il primo è relativo alla modifica a template.css in cui ora appare la tab left ma resta un buco tra essa e quella di destra.

La seconda è relativa al rollover sulle tab non attive che crea un rettangolo bianco. Ho provato a capire cosa potesse essere confrontando il tuo css con quello che gli avevo messo ieri (o che forse era l'originale lievemente modificato... immagino tu possa capire che non mi ricordo cos'ho fatto avendo messo le mani quasi a casaccio sul css) :)

Anche in questo caso non saprei assolutamente dove mettere le manine :D

P.S. vedo che abbiamo una passione che ci accomuna: http://www.ziorip.com/gallery/album/3/49-leroy-stitch/

Sono due trovatelli, presumo siano fratellini. Ora non sono più così piccoli, hanno quasi 7 mesi, ma non ho ancora pubblicato le loro nuove foto. Vivono da re... mangiano Eukanuba e sono felici (almeno spero) ;)
Corsi gratuiti di grafica digitale
http://www.ziorip.com

Offline ZioRiP

  • Esploratore
  • **
  • Post: 129
    • Mostra profilo
Re:Modifica hornav su JA_purity
« Risposta #3 il: 23 Giu 2010, 05:39:48 »
Aggiornamento:

Sono andato a mettere mano nel css della cartella Styles ed ho risolto il problema del rettangolo bianco nel rollover sui tab... ora non si vede più :)

Invece non ho veramente idea su come risolvere l'altro problema :(

Ringrazio in anticipo per ulteriori aiuti :)

Ciao
Corsi gratuiti di grafica digitale
http://www.ziorip.com

adottauncane

  • Visitatore
Re:Modifica hornav su JA_purity
« Risposta #4 il: 23 Giu 2010, 18:24:19 »
Un altro tentativo perché quello che ti ho proposto ieri non mi riesce di correggerlo...
Togli il pezzo nuovo da template.css e incolla questo su ja-sosdmenu.css
Codice: [Seleziona]
#ja-mainnav ul.menu li.active {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:#000; <---- qui metti un colore che si avvicini al tuo
background-position:left top;
background-repeat:no-repeat;
font-size:1.05em;
font-weight:bold;
margin-bottom:auto;
margin-left:5px;
margin-right:0;
margin-top:-8px;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
position:relative;
height: 39px;
-moz-border-radius: 5px 5px 0 0;
}
e poi prova a togliere in quel file background:transparent url(../images/tab_right.png) no-repeat scroll right top; da dove lo trovi, c'è più di una volta...
Vedi se come soluzione può andarti bene lo stesso...

Offline ZioRiP

  • Esploratore
  • **
  • Post: 129
    • Mostra profilo
Re:Modifica hornav su JA_purity
« Risposta #5 il: 23 Giu 2010, 21:47:40 »
Ti ringrazio nuovamente.

Questa volta ho provato in locale, come faccio di solito, e non ho fatto la modifica in remoto perchè la barra del menu attivo mi viene di due colori, uno è il nero che hai impostato tu con il tuo ultimo codice del css, l'altro è un rettangolo presumibilmente del colore #cccccc (non ho controllato, ma ho un certo occhio per i colori) ed è scostato  di circa 10 pixel a destra rispetto a quello che dovrebbe esserci (il nero che hai fatto tu).

A questo punto mi sorge una domanda: se io mi creassi la grafica di quella barra attiva si potrebbe farne una nuova da usare nel css in qualche modo? Il problema principale è che si deve ridimensionare...

Io ovviamente non ho idea della fattibilità della cosa dal lato programmazione :)

In caso la preparo secondo i criteri corretti e via.

Grazie ancora, sei veramente molto gentile :)
Corsi gratuiti di grafica digitale
http://www.ziorip.com

adottauncane

  • Visitatore
Re:Modifica hornav su JA_purity
« Risposta #6 il: 23 Giu 2010, 23:12:23 »
Forse ho trovato
Copia e incolla questo codice sul file
Codice: [Seleziona]
#ja-mainnav ul li.active a {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:transparent;
background-image:url("http://www.ziorip.com/public/style_images/ziorip10/tab_right.png");
background-position:right top;
background-repeat:no-repeat;
display:block;
margin-left:6px;
padding-bottom:10px;
padding-left:10px;
padding-right:15px;
padding-top:10px;
}

#ja-mainnav ul.menu li.active {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:transparent;
background-image:url("http://www.ziorip.com/public/style_images/ziorip10/tab_left.png");
background-position:left top;
background-repeat:no-repeat;
font-size:1.05em;
font-weight:bold;
margin-bottom:auto;
margin-left:5px;
margin-right:0;
margin-top:-3px;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
position:relative;
}

Cancella il vecchio codice in fondo al template.css
Importante: togli questa riga dal medesimo file:

Codice: [Seleziona]
#ja-mainnav ul.menu li.active a,
#ja-mainnav ul.menu li.active a:hover,
#ja-mainnav ul.menu li.active a:active,
#ja-mainnav ul.menu li.active a:focus {
    background-color: transparent;
    background-image: url("../images/tab_right.png"); <----- via
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: right top;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-left: 6px;
    display: block;
/*background: url(../images/arrow2.png) no-repeat bottom center #333333;*/
color: #FFFFFF;
font-weight: bold;
}

Dovrebbe bastare. Se rimangono ancora dei pezzi prova a cercare e togli:
    background-image: url("http://www.ziorip.com/public/style_images/ziorip10/tab_right.png");
che è in altri due codici. Probabilmente l'avevi aggiunta tu.

Offline ZioRiP

  • Esploratore
  • **
  • Post: 129
    • Mostra profilo
Re:Modifica hornav su JA_purity
« Risposta #7 il: 24 Giu 2010, 09:04:05 »
SIII!!

Sembra proprio che il tuo codice funzioni!!

Ora ho incasinato non so cosa per cui il testo del link attivo mi rimane nero, ma siccome ho incasinato in pochi punti lo recupero ;) Ho inibito del codice che non dovevo, forse.

Grazie mille!!!
Corsi gratuiti di grafica digitale
http://www.ziorip.com

Offline pisolino

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
Re:[RISOLTO] Modifica hornav su JA_purity
« Risposta #8 il: 27 Ott 2010, 18:22:51 »
ciao a tutti, piacerebbe anche a me avere l'hornav con le tab...
per ottenerlo è sufficente incollare i due ultimi pezzi di codice postati da adottauncane? :)

 



Web Design Bolzano Kreatif