[RISOLTO]Modifica sfondo cirrus green

[Matt/]

Ciao a tutti,


sto utilizzando il template cirrus green (ecco una demo [size=78%]http://demo.hurricanemedia.net/joomla03/[/size]).
Vorrei mettere un logo trasparente dove c'è company logo. Ho già provato a mettere il logo in Pannello amministrazione/gestione template/cirrus green/opzioni avanzate/logo path però il logo non lascia la sua trasparenza ma si vede evidentemente lo sbalzo di colore, guardate

Quindi, è possibile risolvere questo problema?
Grazie in anticipo

[adottauncane]

Ciao Matt/,
serve un link al tuo sito.

[Giuseppe63]

ciao Matt,
piccola info, il logo è stato realizzato con sfondo trasparente ed in formato .png?

[Matt/]

Al momento non posso fornire un link del sito perchè lo sto sviluppando in locale   
Per quanto riguarda il logo, è un .png con lo sfondo trasparente

[adottauncane]

Togli l'immagine da qui che è sfumata:

Codice: [Seleziona]

#header {    background-image: url("../images/header-bg.png");    background-repeat: no-repeat;    margin: auto auto -1px;    min-height: 150px;    overflow: auto;    width: 900px;}
leva la riga di background e vedi se va meglio. Altrimenti fai un .jpg del tuo logo e mettilo su uno sfondo
#1D1D1D. Dopo aver tolto comunque l'immagine di cui sopra. Fallo .jpg e non altro perché mantiene l'asadecimale identico.

[Matt/]

Allora, ho rimosso la riga di background e modificato il campo width e funziona alla grande! Ora il logo (che ho rimodificato lasciando la scritta) si vede bene



Ovviamente, non esiste nessun modo per allungare le due terminazioni del logo per tutto lo sfondo, giusto?

[Giuseppe63]

Essendo un'immagine puoi modificarla definendo la larghezza ma potrebbe darti qualche problema all'interno dello spazio del template.


Se non leggo male hai una dimensione with=1400px
prova a dimensionare l'immagine aggiungendo le estremità dx e sx fino ad arrivare alla dimensione del div.

[Matt/]

La dimensione a 1400 px è giusto un peletto più grande dell'immagine stessa, che è larga 1325 px.

Prima era a 900 px e l'immagine era tagliata, mettendola a 2096 px, che credo che sia la dimensione del div, l'immagine è a sinistra e non più al centro. Mi basterebbe ingrandire l'immagine però rimane sempre il "vuoto" ai lati modificando lo zoom  . [size=78%] [/size]
Stavo anche guardando su #header-wrap è c'è questo

Codice: [Seleziona]

background color: #1d1d1d;
min-width: 960px;
Non è che si può modificare qualcosa qua in modo che lo sfondo è #1D1D1D ma con aggiunta una semplice linea verde?

[adottauncane]

Se le due righe del marchio fossero alla stessa altezza, potresti inserire una piccola innagine alta come l'heder warp, larga anche solo 2px di colore #1d1d1d con un pezzetto verde esattamente all'altezza della tua riga che si ripeta sulla x. Ovviamente il logo dovrebbe esse un .jpg con sfondo.

Adesso, dato che non sono alla stessa altezza, rispunterebbe in una posizione che non collimerebbe con l'altra linea.

[Giuseppe63]

scusa mi sono espresso male


secondo me è più semplice modificare l'immagine, utilizzando un normalissimo editor immagini che ti permette di aumentare la larghezza di quella base ( non le dimensioni immagini ) cioè, aggiungere ai lati uno spazio per arrivare alla dimensione 1400px, all'interno di queste parti aggiunte, tracci una riga di colore e spessore corrispondente a quelle esistenti.

[adottauncane]

@Giuseppe63,
va anche bene, solo che se il video è più largo gli rimane il problema dello spazio oltre i 1400px, che credo sia quello che ha... facendolo con una piccola immagine ripetuta arriva a qualsiasi larghezza e rimane molto più leggero. Sempre che le righe siano alla stessa altezza, ovviamente.

[Giuseppe63]

@adottauncane,
hai perfettamente ragione, un'immagine definita nelle dimensioni è limitante, la mia era una possibilità nel caso il template abbia i margini definiti.

[Matt/]

Ah, ora ho capito, @Giuseppe63! Il template non ha i margini definiti, infatti è per quello che cercavo un prolungamento praticamente infinito.Però, per applicare l'immagine ripetuta come dice @adottauncane dovrei modificare il logo in modo che le terminazioni siano allo stesso livello  . E' l'unico modo o è possibile creare 2 immagini diverse in #header-wrap, una a dx e una a sx?

[Giuseppe63]

Su questa domanda non saprei darti una risposta giusta, secondo il mio parere puoi realizzare solo una tipologia wrap.


Al limite metti una casetta piccola a destra così da avere la stessa altezza di linea, non mettere il bordo all'immagine altrimenti si vede il punto di giunzione 

[Matt/]

Ok allora, al massimo faccio così, però devo mettere l'immagine jpeg altrimenti con la trasparenza la linea passerebbe in mezzo    il problema è che non so come modificare il background nello header-wrap    come si fa?

[adottauncane]

Codice: [Seleziona]

#header_wrap {    background: url("../images/riga.jpg") repeat-x scroll left top #1D1D1D;    min-width: 960px;}
riga.jpg la metti nella cartella images del template.

[Matt/]

Ho applicato le tue modifiche, ecco il risultato XD

ignorando il fatto che passa in mezzo perchè il logo è ancora trasparente, dovrei spostare in basso la riga ma a quanto pare ritoccandola e spostandola fisicamente nell'immagine in sè sulla pagina web non cambia di posizione    qualcosa mi sfugge...

[Matt/]

Fermi tutti! Dopo aver modificato qualche parametro del css, ho sistemato il tutto:

Bello eh?

Comunque, grazie infinite! Metto il topic come risolto 

[Giuseppe63]

 
Bravissimo!!!!