[RISOLTO] Cambiare prima sezione di Quasar

[virgus]

Ciao a tutti!

Ho esigenza di dover cambiare la prima sezione del template quasar quella sopra la "top tab content" per intenderci come potete vedere qui:

http://www.joomlashow.it/template-joomla/free/quasar-qualita-eccezionale-grazie-al-framework-gantry/

dove devo andare mettere mani per cambiare tutta quella parte con un'immagine a mia scelta?

Altra domanda: e per cambiare anche il logo?

[adottauncane]

Ciao virgus,
non hai allegato l'immagine, che comunque serve a poco, puoi piuttosto mettere un link al sito?

[virgus]

si perdonami!

potete vederlo da qui!

http://www.joomlashow.it/template-joomla/free/quasar-qualita-eccezionale-grazie-al-framework-gantry/

se sto infrangendo qualche regola del forum lo elimino subito l'url!

Fatemi sapere e grazie della risposta

[adottauncane]

Per cambiare il logo qui:
style6.css (riga 19)

Codice: [Seleziona]

#rt-logo {
.
.
background-image:url("../images/logo/style6/logo.png"); <--- sostituiscilo con il tuo
.
.
}
La parte sopra viene gestita praticamente tutta da backend... hai provato a cliccare sul nome del template e a verificare le impostazioni?

[virgus]

Grazie per il logo

Ho controllato, sulle impostazioni non c'è nulla che permetta di cambiare quella parte

Bisognerà sicuramente intervenire sul css?

Non so proprio

[adottauncane]

Sì probabilmente, ma senza un link al tuo sito non è molto facile aiutarti...

[virgus]

scusami 

ma tanto è lo stesso template non ho cambiato ancora nulla aimè 

ecco il mio sito (è per un browser game  )

http://virgus87.altervista.org/

fammi sapere e grazie per la pazienza.

[adottauncane]

Vuoi inserire un'immagine dove adesso hai il grigio scuro?

[virgus]

si esatto al posto  di tutto quel grigiume antracite che delimita la "testata" del sito per intenderci

[adottauncane]

Hai detto niente... 
L'immagine è sempre la stessa ma posizionata in 4 css:

Codice: [Seleziona]

#rt-top {
.

background-image:url("../images/backgrounds/style1/header-bg.png");

}style1.css (riga 14)

Codice: [Seleziona]

#rt-header {
.
.

background-image:url("../images/backgrounds/style1/header-bg.png");

}style1.css (riga 20)

Codice: [Seleziona]

#rt-header {
.
.

background-image:url("../images/backgrounds/style1/header-bg.png");

}style1.css (riga 20)

Codice: [Seleziona]

#rt-header {
.
.

background-image:url("../images/backgrounds/style1/header-bg.png");

}style1.css (riga 20)

in più devi poi cambiare anche l'angolino qui:

Codice: [Seleziona]

#rt-toptab .toptab2 {

background-image:url("../images/body/style1/toptab-l.png");

}style1.css (riga 47)

e qui:

Codice: [Seleziona]

#rt-toptab .toptab {

background-image:url("../images/body/style1/toptab-r.png");

}style1.css (riga 46)

se la sostituisci con un'immagine tipo quella, che si ripete, non è un grosso problema, ma se invece vuoi mettere un'immagine unica, devi dividerla in quattro pezzi sostituire un pezzo alla volta senza il repeat e correggere gli angoli dell'ultima...

Buon lavoro!   

[virgus]

  Porc! Pensavo fosse un unica immagine!

E va bene! Mi rimboccherò le maniche!

Ti devo un favore! 

Grazie ancora gentilissimo! 

[virgus]

ciao ancora

mi sto dilettando a smanettare per cambiare quella parte del template ma quando vado a modificare le immagini divise che mi hai suggerito accade che non si allineano e poichè è un immagine intera che ho spezzato diventa tutto a zig zag e non rende più nulla

come posso fare per allinearle e ridare integrità all'immagine?

[adottauncane]

Eeeee ci devi lavorare un po'... 

Codice: [Seleziona]

#rt-showcase {
background-color:#000000;
background-image:url("../images/backgrounds/style1/top3.jpg");
background-position:center top;
background-repeat:no-repeat;
color:#AAAAAA;
height:168px;
}style1.css (riga 35)

Codice: [Seleziona]

#rt-header {
background-color:#000000;
background-image:url("../images/backgrounds/style1/top2.jpg");
background-position:center top;
background-repeat:no-repeat;
}style1.css (riga 20)

Codice: [Seleziona]

#rt-feature {
background-color:#000000;
background-image:url("../images/backgrounds/style1/top4.jpg");
background-position:center top;
background-repeat:no-repeat;
}style1.css (riga 41)

Codice: [Seleziona]

#rt-top {
background-color:#000000;
background-image:url("../images/backgrounds/style1/top1.jpg");
background-position:center top;
background-repeat:no-repeat;
height:130px;
}style1.css (riga 14)

Codice: [Seleziona]

#rt-toptab {
background-color:#000000;
background-image:url("../images/backgrounds/style1/top5.jpg");
background-position:center top;
background-repeat:no-repeat;
}style1.css (riga 45)

[virgus]

Bene ci sono riuscito anche se l'ultima riga d'immagine mi viene un pò più addossata  sarà colpa del template, di chrome (visto che avviene solo se visito il sito con esso) o della mia ignoranza in materia

Ti devo ringraziare sei sempre disponibile!

Se posso abusare ancora della tua collaborazione, vorrei chiederti altre cose:

dove c'è la data e dove ci sono i menu (con i loro relativi titoli e opzioni) vorrei aggiungere un effetto particolare. Ovvero uno sfondo scuro semi trasparente.

Questo per far risaltare il testo che altrimenti sarebbe difficile da leggere avendo come sfondo un'immagine così variegata.

Ho trovato navigando un pò questo codice che permette di fare quanto appena detto solo che non so proprio come inserirlo sia sulla data che nei vari menu sparsi per la testata.

Per poterlo vedere ti rimando a questo sito:

http://www.mrwebmaster.it/css/articoli/scrivere-testo-con-sfondo-semi-trasparente-sopra-immagine_1240.html

se richiede troppo per te lascia perdere e mandami pure a quel paese 

[adottauncane]

Ma per la parte con il menù prova a sostituire questo:

Codice: [Seleziona]

.backgroundlevel-high #rt-header4, .backgroundlevel-med #rt-header4 {
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.6);
}style1.css (riga 22)

e controlla se si vede su IE e se non cambia anche qualcos'altro.
Per i due menù sotto incolla questo e vedi se inserendo il suffisso css _mio nei due moduli funziona...

Codice: [Seleziona]

.module-surround_mio {
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.6);
  width:35%;
}

[virgus]

Inoltre per quanto riguarda i due menu sotto non trovo il file html per rinominare i moduli in "mio" 

[adottauncane]

Prova a cliccare sul moduli che hai pubblicati in quelle posizioni e in Parametri avanzati - Suffisso classe CSS modulo a scrive _mio. Il codice lo incolli in fondo al file template.css.

[virgus]

ci provo e ti faccio sapere se ci riesco

ho controllato in ie7 si vede solo nero non trasparente e l'ultima voce del menu top non viene orizzontale 

ps: ti dovrò offrire qualcosa solo per la pazienza un giorno 

[virgus]

ci provo e ti faccio sapere se ci riesco

ho controllato in ie7 si vede solo nero non trasparente e l'ultima voce del menu top non viene orizzontale 

ps: ti dovrò offrire qualcosa solo per la pazienza un giorno 

nada non lo applica se inserisco il suffisso dalla gestione moduli in amministrazione.

[adottauncane]

Allora prova così:

Codice: [Seleziona]

.backgroundlevel-high #rt-header4, .backgroundlevel-med #rt-header4 {
background-attachment:scroll;
background-image:url("http://virgus87.altervista.org/templates/ja_purity/images/header-mask.png");
background-position:0 0;
background-repeat:repeat;
}
questa è presa a prestito da Ja-Purity ma puoi farne una simile più chiara.

Per l'altro:

Codice: [Seleziona]

.module-surround_mio {
background-image:url("http://virgus87.altervista.org/templates/ja_purity/images/header-mask.png");
width:35%;
}
Per l'ultima voce però non credo centri con queste modifiche...

[adottauncane]

mmm... allora ti faccio sapere...

[virgus]

Grazie e buonanotte 


Ps: piccola aggiunta prima di andare a nanna. I problemi su IE7 sono stati risolti graziee e per schiarirlo poco mi importa

per i due moduli in basso dove ancora non appare il problema è che non riesco anche andando dall'amministrazione a porre il suffisso _mio 

[adottauncane]

Lascia _mio dove l'hai messo, come i ho scritto prima e aggiungi questo codice:

Codice: [Seleziona]

._mio {
background-image:url("http://virgus87.altervista.org/templates/ja_purity/images/header-mask.png");
width:35%;
}

per i due moduli in basso dove ancora non appare il problema è che non riesco anche andando dall'amministrazione a porre il suffisso _mio 

in che senso?

[virgus]

Buongiorno

Oggi ho riprovato ad inserire nei menu lo sfondo semi trasparente e con il tuo ultimo suggerimento ci ero riuscito solo che ho fatto una prova che  mi ha di nuovo buttato nello sconforto.

Posizionando altri due menu (come puoi vedere nel mio sito) affianco ad uno dei menu già esistenti si scombina tutto.

sarà per l'opzione 35%?

[adottauncane]

E sì,
prova così:

Codice: [Seleziona]

._mio {
background-image:url("http://virgus87.altervista.org/templates/ja_purity/images/header-mask.png");
width:-moz-max-content;
margin-left:-10px !important;
}

._mio1{
background-image:url("http://virgus87.altervista.org/templates/ja_purity/images/header-mask.png");
width:-moz-max-content;
margin-left: 10px !important;
}
dove ai nuovi due moduli metti _mio1 ... poi puoi personalizzare alti moduli sempre come hai fattoper questi...

[virgus]

Perfetto con questa modifica

ho apportato alcune modifiche che ti elenco:

nell'ultimo menu che ho rinominato _mio3 ho impostato la larghezza a 291 px perchè su ie7 rimaneva la larghezza massima.

inoltre nella data ho messo sempre l'url del background perchè in ie7 lo sfondo risultava nero e non semitrasparente.


però ho notato che c'è un ultimo problema

se provi a fare il login sul mio sito senza inserire nessun dato (proprio per fallire l'accesso) esce questo messaggio:

Nome utente e password non sono corrette o non possiedi ancora un account.

ma compare una parte di sfondo nera 

[adottauncane]

e sì... e ti verrà fuori anche se alzassi il menù contenuto in quella fascia...
Ti do anche un'altra brutta notizia... scaricando il template ho visto che in effetti si sarebbe potuto mette un'unica immagine in effetti, lavorando un po' e inserendola nel body... ma non conoscevo ancora il template... facendo così si può ovviare, fino ad un certo limite questo inconveniente, magari lasciando un po' di immagine in più di quella che serve adesso... c'è da rimettere mano a diverse cose, non so... decidi tu cosa vuoi fare... 

[virgus]

se per te non è un problema continuare a seguirmi possiamo rimettere mano allo sfondo della testata del menu tanto ci metto pochissimo a farla intera visto che sono un asso con photoshop (almeno quello lo so usare al contrario dei linguaggi informatici )

dimmi tu di quanto deve essere di larghezza e lunghezza in pixel l'immagine e dove la devo mettere e sopratutto cosa devo cancellare  delle cose che abbiamo aggiunto

[adottauncane]

Intanto metti questo:
style1.css (riga 9)

Codice: [Seleziona]

body {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:#000000;
background-image:url("../images/backgrounds/style1/top.jpg");
background-position:center top;
background-repeat:no-repeat;
color:#3D9FD0;
font-weight:bold;
}

dove top.jpg è la nuova immagine intera (completa) larga come adesso e se mai un 100/150px più alta.

E poi correggi il colore qui così:
gantry.css (riga 74)

Codice: [Seleziona]

body {
.
background-color:#000000;
.
}

Per tutti gli altri che trovi nei post precedenti, salvo le altezze se le vuoi mantenere, cancella tutto ciò che è background qualcosa... Ma non cancella il riferimento tipo:

Codice: [Seleziona]

#rt-top {
height:130px;
}style1.css (riga 14)

oppure
#rt-top {

}
style1.css (riga 14)

basta che prendi il post precedente e guardi le righe in cui sei intervenuto... è possibile che non coincidano più perfettamente perché se ne sono aggiunte...

[virgus]

ci ho provato ma se inserisco l'immagine nel body l'ultima parte non viene integrata nello sfondo (forse non è body?). Inoltre in questo modo quando c'è il messaggio di errore lo sfondo si "allunga" per includere il messaggio (come volevamo) ma quando non c'è lo sfondo si accorcia mangiandosi una parte di dipinto che non ha più ragione di esserci a quel punto.

inoltre l'immagine viene allargata (esce dalla pagina) rispetto di quella che realmente è (l'ho allungata di 100px)

se è troppo complesso torno al punto di prima e quel disguido del messaggio lo ignoro. 

[adottauncane]

Hai solo dimenticato di togliere il nero di qui:

Codice: [Seleziona]

#rt-toptab {
background-color:#000000; <----------
background-image:url("../images/backgrounds/style1/top5.jpg");
background-position:center top;
background-repeat:no-repeat;
}style1.css (riga 61)

Naaa, così è meglio... semmai torna all'altezza di prima e se si allunga il pezzo nero viene in fondo che è molto meglio...

[virgus]

Perfettoooooooooooo su firefox

ora va benissimo!

Ho modificato ancora l'immagine per renderla precisa all'ultimo pixel

solamente ho tolto due menu dei tre allineati (che avevo mostrato per farteli visionare ma saranno per gli utenti registrati) e su chrome lo sfondo semitrasparente ritorna ad essere visionato fino al bordo opposto (su firefox no, sarà per il width?)

inoltre su ie7 l'ultimo menu mi si sovrappone alla seconda sezione (quella nominata santa chiesa...) prima non lo faceva! 

[virgus]

Perfettoooooooooooo su firefox

ora va benissimo!

Ho modificato ancora l'immagine per renderla precisa all'ultimo pixel

solamente ho tolto due menu dei tre allineati (che avevo mostrato per farteli visionare ma saranno per gli utenti registrati) e su chrome lo sfondo semitrasparente ritorna ad essere visionato fino al bordo opposto (su firefox no, sarà per il width?)

inoltre su ie7 l'ultimo menu mi si sovrappone alla seconda sezione (quella nominata santa chiesa...) prima non lo faceva! 

scusate se posto di seguito al mio stesso post ma ho un'aggiunta.

volevo avvisare che ho scoperto di avere tre file css che dovrebbero servire alla compatibilità del template quasar per internet explorer.

si tratta di :

template-ie6.css
template-ie7.css
template-ie8.css

se può essere utile con il mio problema riporto qui i codici dentro di essi.

Ps: ho notato che scompaiono in ie anche le sezioni a fondo pagina che fanno comparire solo l'immagine di sfondo

[adottauncane]

Per il problema della sovrapposizione prova a rimettere così:

Codice: [Seleziona]

#rt-showcase {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
}
al posto di:

Codice: [Seleziona]

#rt-showcase {
height:168px;
}style1.css (riga 51)

e per la larghezza prova a mettere così

Codice: [Seleziona]

._mio {
background-image:url("http://virgus87.altervista.org/templates/ja_purity/images/header-mask.png");
margin-left:-10px !important;
width:350px !important;
}template.css (riga 180)

tanto mi sembra che gli altri due moduli abbiano un css diverso...

[virgus]

Ora ci siamo in tutto e per tutto (c'è solo un piccolo addossamento dell'ultimo menu a quello di sopra in ie7 ma poco mi importa).

non so davvero come ringraziarti adottauncane. Sei stata una persona disponibile, cordiale e preziosa!

Ti devo un favore!

Ancora grazie per tutto quello che hai fatto.

Mi trasferisco nella sezione form...devo realizzare l'ultimo tassello del mio sito 

[adottauncane]

Prego  . Ho messo [RISOLTO] davanti al titolo del primo post... la prossima volta fai tu? Grazie mille.

[virgus]

Certamente e scusami me ne sono dimenticato

[yurisaso]

Ciao, volevo intervenire su questo post;
ho provato a seguire le indicazioni di "adottauncane" per inserire un'immagine di sfondo in quasar, ma purtroppo non mi si visualizza nonostante abbia controllato e ricontrollato i vari percorsi e le modifiche fatte. Inoltre analizzando la pagina con firebug fra i parametri css mi viene riportata la modifica apportata al background e passando sopra con il mouse visualizza anche l'anteprima dello sfondo, escludo quindi un problema di percorso.
Che voi sappiate bisogna per caso attivare o disattivare qualcosa nel pannello di Gantry???

Grazie a tutti

[adottauncane]

Ciao yurisaso,
non ti accodare a vecchi post risolti... Apri un nuovo topic con un link al tuo sito e la spiegazione del problema. Grazie mille.