Header unico in Ja_purityII

[filipposs]

Ciao a tutti amici, oggi ho un altro problemuccio  avrei la necessità di mettere un header unico per tutta la larghezza della pagina, eliminando il tool per il ridimensionamento pagina, ho visto in index.php ma non c'e alcun riferimento riguardo all' header, cosa devo modificare?

[steinberg]

Ciao, anche io ho usato questo template, ma non ho avuto il tuo problema. Comunque scaricati il plugin per firefox "firebug" che ti permette di vedere il codice css delle pagine che stai visualizzando, così sai bene dove mettere mani. Oltre a questo mi spiace non so consigliarti perchè di codice non ne so niente.

Se sei ancora all'inizio del lavoro e devi far un sito semplice, ti consiglio di cambiare template. Io da inesperto l'ho preso perchè mi serviva un menu a tendina già incorporato e ormai ho finito il lavoro con quello.

[filipposs]

Ciao steinberg, grazie per i tuoi consigli, ma mi serve avere un header tutto unico su questo template, cos'ì da poter mettere un'immagine per tutta la larghezza, ho visto un post con lo stesso problema, ma si riferiva a Ja_purity e a quanto pare è molto diverso da Ja_purityII! Ci sarà un modo per cambiarlo, spero qualcuno mi aiuti!

[filipposs]

Nessuno ne sa niente 

[adottauncane]

Ciao filipposs,
se vuoi che Ja Purity II sia fisso e non fluido, devi impostarlo da gestione template.
Qui ti inserisco un po' di istruzioni per intervenire sull'header del template:

Per cambiare colore a tutto l'header intervieni sulla riga
background-color:#333333;
template.css (riga 921)

Codice: [Seleziona]

#ja-header  {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:#333333;
background-image:none;
background-position:0 0;
background-repeat:repeat;
position:relative;
z-index:10;
}
Per togliere quell'effetto sfumato grigio sulle foto cancella questa riga:
background-image:url("../images/header-mask.png");

template.css (riga 969)

Codice: [Seleziona]

.ja-headermask  {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:transparent;
background-image:url("../images/header-mask.png");
background-position:right top;
background-repeat:no-repeat;
display:block;
height:80px;
position:absolute;
right:-1px;
top:0;
width:602px;
z-index:0;
}
Per cambiare immagine cerca qui:
templates/ja_purity_ii/images/header/

Sono tre:
header1.jpg
header2.jpg
header3.jpg

mantenendo l'altezza e li nome puoi mettere le tue della larghezza che vuoi. Se lo usi fisso 1000px.

Per modificare il logo qui:

template.css (riga 937)
background-image:url("../images/logo.gif");

Codice: [Seleziona]

h1.logo a {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:transparent;
background-image:url("../images/logo.gif");
background-position:left center;
background-repeat:no-repeat;
display:block;
height:79px;
width:207px;
}
Per il resto scarica Firebug per Firefox, come suggerito da steinberg, così da poter individuare tutto sul file .css:
Qui il video tutorial
http://www.joomla.it/guide-e-video-guide/video-guide/3645-utilizzare-firebug-con-il-proprio-sito-joomla.html
qui un utilissimo articolo di tonicopi
http://www.joomla.it/articoli-della-community/797-tre-moschettieri-al-servizio-di-joomla.html
e qui lo scarichi
https://addons.mozilla.org/it/firefox/search?q=firebug&cat=all&as=1&appid=1&lver=3.6&atype=0&pp=20&pid=3&sort=weeklydownloads&lup=
Potrai provare le modifiche direttamente da Firefox e poi riportarle sul file template.css

[filipposs]

Forse non capisco io il codice postato, ma io chiedevo di avere un'immagine unica per l'header, senza quei pezzettini aggiunti a sinistra e a destra senza il logo ma solo l'header, cosa si deve modificare del codice?

[adottauncane]

E be, ti servono tutti quei pezzi di codice...  o meglio devi cercare quei pezzi di codice che ho postato e fare come scritto.

Per togliere il logo Joomla cancelli dall'ultimo codice:
background-image:url("../images/logo.gif");

Per inserire la tua immagine al posto delle tre che ruotano devi fare come scritto:

Per cambiare immagine cerca qui:
templates/ja_purity_ii/images/header/

Sono tre:
header1.jpg
header2.jpg
header3.jpg

mantenendo l'altezza e il nome puoi mettere le tue della larghezza che vuoi. Se lo usi fisso 1000px.

Se è solo una, puoi farla uguale con i tre nomi diversi.

Poi c'è quella parte opaca che immagino non vorrai:
Per togliere quell'effetto sfumato grigio sulle foto cancella questa riga:
background-image:url("../images/header-mask.png");

template.css (riga 969)

Ti rimarrà la parte a destra e a sinistra dell'header che corrisponde al codice template.css (riga 921)

Se provi a fare le prime modifiche e poi posti il link del sito, possiamo vedere che problemi eventualmente incontri. Aiutati anche con Firebug...

[filipposs]

Ho tolto tutto quello che c'era da togliere, ovvero tutto il codice che si riferiva al logo, all'header mask e inserito un'immagine header lunga 1200px, ma mi rimangono lo stesso le 2 fasce laterali, seppur piccole vanno eliminate, come?


[allegato vecchio più di un anno eliminato automaticamente]

[adottauncane]

Tieni conto che tu vedi quei due pezzettini di grigio ma chi, come me, ha una risoluzione maggiore ne vedrà ben di più...
Puoi sostituire con quello segnato (o uno simile) il colore di fondo, in modo da farlo simile allo sfondo della foto:

template.css (riga 921)

Codice: [Seleziona]

#ja-header  {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:#BE9C6F; <-------- questo
background-image:none;
background-position:0 0;
background-repeat:repeat;
position:relative;
z-index:10;
}

oppure mettere l'immagine modificata (almeno 2000px di larghezza) in questo modo:
template.css (riga 921)

Codice: [Seleziona]

#ja-header  {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-image:url("http://www.joomladog.it/templates/ja_purity_ii/images/index.png"); <------
background-position:center top; <--------
background-repeat:no-repeat; <---------
z-index:10;
}
e togliendola da dove l'hai messa ora.
In allegato l'immagine (fatta alla buona) di come devi modificarla...

[allegato vecchio più di un anno eliminato automaticamente]

[filipposs]

Ho inserito questo codice ed è tutto ok nel senso che vedo solo l'immagine unica da me creata, l'unico problema è che a seconda della risoluzione dello schermo l'immagine non si vede tutta!
Cosa dovrei fare per risolvere?

Codice: [Seleziona]

/* HEADER
--------------------------------------------------------- */
#ja-header {
background-image:url("../images/index.png");
background-position:center botton;
background-repeat:no-repeat;
}

#ja-header .main {
height: 200px;
}




/* NAVIGATION
--------------------------------------------------------- */

Questo invece è il codice originale, lo metto perchè è differente rispetto a quello che ha messo "adottauncane"

Codice: [Seleziona]

/* HEADER
--------------------------------------------------------- */
#ja-header { background: #333; position: relative; z-index: 10; }

#ja-header .main {
background-color: #333;
background-position: top right;
background-repeat: no-repeat;
height: 80px;
}

h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1;}

h1.logo, div.logo-text { float: left; z-index: 1; position: relative; }

/* Logo Image ---*/
h1.logo { height: 79px; width: 207px; }

h1.logo a {
background: url(../images/logo.gif) no-repeat left;
display: block;
height: 79px;
width: 207px;
}

h1.logo a span { position: absolute; top: -1000px; }

/* Logo Text ---*/
div.logo-text { margin-top: 8px; }

div.logo-text h1 a {
color: #ccc;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

p.site-slogan {
background: #444;
color: #999;
display: block;
font-size: 85%;
letter-spacing: 1px;
margin: 8px 0 0;
padding: 0 5px;
text-align: center;
text-transform: uppercase;
}

/* Header mask ---*/
.ja-headermask {
background: url(../images/header-mask.png) no-repeat top right;
display: block;
height: 80px;
position: absolute;
right: -1px;
top: 0;
width: 602px;
z-index: 0;
}

/* NAVIGATION
--------------------------------------------------------- */

[adottauncane]

E sì... infatti ai lati ti ho suggerito di mettere un colore simile allo sfondo, oppure allungare la foto come ti ho postato, dove solo i margini sono deformati ma l'immagine centrale è integra...

[filipposs]

Ma non c'è un modo per adattare l'header a tutte le risoluzioni come avviene per il resto del template o come avviene in altri template?
Sicuramente si dovrà aggiungere qualche riga di codice che io non conosco!

[adottauncane]

Credo di no, almeno per la foto. Per quel che ho visto la foto nei template fluidi è sempre fissa e sfuma nello sfondo. Così anche per le immagini in background.
D'altra parte, se per assurdo fosse possibile, avresti o una foto alta uguale che si deforma in larghezza o una foto che si deforma in prorozione e quindi si abbassa...

[filipposs]

Mi sono fissato con questo header unico e quindi pensavo, ma se ho messo questa immagine unica in posizione header posso rendere fisso questo benedetto template? Cioè se metto un immagine di 1200px posso fissare il template a questa larghezza?

[adottauncane]

Sì. Entra nella gestione Template e clicca su Ja Purity II. Sulla destra trovi Template_Width. Su Template_Width nella tendina scegli SPECIED PIXEL e sotto scrivi 1200. Solo che 1200 mi sembra un po' troppo, comunque l'utente può rimediare se per il suo schermo è troppo largo, con le scelte di larghezza in alto al template... tieni conto però che per risoluzioni maggiori si vedranno sempre le parti a destra e sinistra... Perché non fai un'immagine tipo quella che ho fatto velocemente io? Andrebbe bene per tutte le risoluzioni e la parte centrale rimarrebbe comunque inalterata... (per la maggior parte dei visitatori).

[filipposs]

Abbandono l'idea di un immagine unica, vediamo se questa è più fattibile come cosa, cioè mantenendo l'header così come si trova, si possono posizionare le due immagini a sinistra e a destra dello schermo senza che vi sia spazio "vedi immagine", quindi qualunque sia la risoluzione le due immagini si troverebbero alle estremità e sarebbe lo spazio al centro a variare.
grazie.

[allegato vecchio più di un anno eliminato automaticamente]

[adottauncane]

Sì, se usi il template fisso andrebbe bene. Solo che Ja_Purity II permette comunque all'utente di adattare il layout del sito al suo browser... Non lo farà nessuno, però verifica cosa accade in quel caso e se mai togli la possibilità di adattarlo...

[filipposs]

C'è solo un piccolo problema! Come faccio a spostare le due immagini alle estremità?

[adottauncane]

Adesso non riesco a controllare, però a naso mi sa che ti conviene fare un'immagine unica con "un buco" della misura dei pixel a cui hai impostato il template.

[filipposs]

Se metto un'immagine unica siamo al punto di prima  , qui serve modificare il codice, sicuramente modificando il Ja-header background, ma non so cosa, se qualcuno vuole contribuire!
Grazie.

[adottauncane]

Be, no... se hai il tempnate fisso e metti un'immagine in questo modo, anche aprendo o chiudendo il browser non si muove... quindi dovresti ottenere l'effetto che vuoi...
template.css (riga 937)

Codice: [Seleziona]

#ja-header  {
background:url("../images/logo.gif") no-repeat scroll center top transparent; <---- così
height:140px;
position:relative;
z-index:10;
}

L'immagine la fai tipo 1800 px di larghezza e la stessa altezza di quella centrale, con 300px a sin e 300px a destra di immagine vera e propria, 1200 di buco (se il template è fisso a 1200, se no della larghezza del template)

[filipposs]

Scusa, ti posto il codice in originale, se puoi farmi le modifiche su questo perchè il tuo mi sembra diverso!
Nell'immagine allegata c'è il risultato di quello che dovrebbe essere, spero così ci capiamo
Grazie

Codice: [Seleziona]

/* HEADER
--------------------------------------------------------- */
#ja-header { background: #333; position: relative; z-index: 10; }

#ja-header .main {
background-color: #333;
background-position: top right;
background-repeat: no-repeat;
height: 80px;
}

h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1;}

h1.logo, div.logo-text { float: left; z-index: 1; position: relative; }

/* Logo Image ---*/
h1.logo { height: 79px; width: 207px; }

h1.logo a {   -------------------------------------------------------------------------   RIGA 937 -----------------------
background: url(../images/logo.gif) no-repeat left;
display: block;
height: 79px;
width: 207px;
}

h1.logo a span { position: absolute; top: -1000px; }

/* Logo Text ---*/
div.logo-text { margin-top: 8px; }

div.logo-text h1 a {
color: #ccc;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

p.site-slogan {
background: #444;
color: #999;
display: block;
font-size: 85%;
letter-spacing: 1px;
margin: 8px 0 0;
padding: 0 5px;
text-align: center;
text-transform: uppercase;
}

/* Header mask ---*/
.ja-headermask {
background: url(../images/header-mask.png) no-repeat top right;
display: block;
height: 80px;
position: absolute;
right: -1px;
top: 0;
width: 602px;
z-index: 0;
}

/* NAVIGATION
--------------------------------------------------------- */
[allegato vecchio più di un anno eliminato automaticamente]

[adottauncane]

Be, sì l'ho fatto su quello che uso io, magari sul tuo hai già fatto modifiche... prova cosi:

Codice: [Seleziona]

#ja-header { background:url("../images/logo.gif") no-repeat scroll center top transparent; position: relative; z-index: 10; }
Dove a logo.gif sostituisci il tuo sfondo.

Certo se avessi un link al sito che stai modificando... 

[filipposs]

Fatto ma non va!

Codice: [Seleziona]

/* HEADER
--------------------------------------------------------- */
#ja-header { background:url("../images/logounico.gif") no-repeat scroll center top transparent; position: relative; z-index: 10; }

#ja-header .main {
background-color: #;
background-position: top right;
background-repeat: no-repeat;
height: 80px;
}

h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1;}

h1.logo, div.logo-text { float: left; z-index: 1; position: relative; }



h1.logo a span { position: absolute; top: -1000px; }

/* Logo Text ---*/
div.logo-text { margin-top: 8px; }

div.logo-text h1 a {
color: #ccc;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

p.site-slogan {
background: #444;
color: #999;
display: block;
font-size: 85%;
letter-spacing: 1px;
margin: 8px 0 0;
padding: 0 5px;
text-align: center;
text-transform: uppercase;
}



/* NAVIGATION
--------------------------------------------------------- */

http://tuttooggi.altervista.org/

Anche se specifico da gestione template qualsiasi larghezza il risultato non cambia.

[adottauncane]

Ti assicuro che funziona, almeno a me funziona, adesso non so quali modifiche hai fatto e quali no, comunque...
1. L'immagine, come ti ho scritto, deve essere 1800 punti e il buco 1200 se hai il template impostato così... ma la parte destra e quella sinistra devono ovviamente essere uguali. Se le misure fossero quelle sopra 300px +1200px + 300px, altrimenti rimane scentrato.
2. Devi mettere il tuo logo nella parte centrale o la tua immagine, ovviamente... se ripercorri i post dovresti trovare il punto dove inserirla.
Adesso non posso dirti di più, perché sono fuori ufficio...

[filipposs]

Non funziona! Se guardi il sito l'immagine non è centrata e poi come dici tu si dovrebbe vedere solo la parte centrale è così non è, almeno io vedo questo:

[allegato vecchio più di un anno eliminato automaticamente]

[adottauncane]

Mi sa che ci siamo ingarbugliati un po' dopo tanto passaggi.
L'immagine unica nell'header è possibile, infatti la parte rosa non si muove rispetto alla parte utile del tamplate. Naturalmente la parte destra e sinistra si vedranno più o meno a seconda dell'ampiezza e della risoluzione del video. Ma questo l'avevamo già appurato... Ma anche questo è una condizione che non possiamo alterare.
Quindi le soluzioni sono due: o fai un'immagine unica centrando bene la parte in corrispondenza dello spazio utile del template e la metti come adesso, oppure fai due immagini una di sfondo e una che carichi dove hai quella attuale e una nella parte centrale sopra al template... ma a seconda delle risoluzioni la parte sinistra e destra si vedranno più o meno, non c'e modo di ridimensionare l'immagine, come già detto.
Prova a guardare questo sito:
http://www.nexusjournal.com/index.php
Dove vedi il verde si può mettere la tua immagine di sfondo e dove c'è il marchio, spostando il blocco l'altra immagine. Oppure dove adesso c'è il bianco.
Mi sembra che tu non abbia fatto altre modifice sul file template.css. Fai un bel mestiere, ricarica il file template originale e ripartiamo da capo...