WebSite X5Help Center

 
Gabriele C.
Gabriele C.
User

Variare altezza Header in pagina specifica  it

Autor: Gabriele C.
Visited 365, Followers 2, Udostępniony 0  

Salve ragazzi,

vorrei poter variare altezza Header in una pagina specifica, ovvero editare il paramento inserito in Step 2  (Struttura del Modello > Selezione della Pagina > Header > Altezza).

Qualche consiglio?

P.s. So dell'opzione "Nascondi per questa Pagina" (Step 3 > Proprietà Pagina >Grafica > Header), tuttavia vorrei poter usare sia l'Hedaer che la Sticky Bar.

Posted on the
47 ODPOWIEDZI - 3 USEFUL
Gabriele C.
Gabriele C.
User
Autor

Ho provato con il codice che segue, ma dalle anteprime non funziona:

#imHeaderBg {
height: 0px!important;

}

Czytaj więcej
Posted on the from Gabriele C.
Esse Di
Esse Di
User

#imHeaderBg è il selettore per lo Sfondo dell'Header

il selettore per l'Header è #imHeader 

Il tuo codice dovrebbe essere

#imHeaderBg,  #imHeader {
height: 0px!important;

}

Czytaj więcej
Posted on the from Esse Di
Gabriele C.
Gabriele C.
User
Autor

Buongiorno e grazie!

Ho provato a inserire il codice ma anche questo non funziona. L'unico risultato che ho notato è stato eliminare l'animazione di comparsa della Sticky Bar.

Czytaj więcej
Posted on the from Gabriele C.
Esse Di
Esse Di
User
Gabriele C.
Buongiorno e grazie! Ho provato a inserire il codice ma anche questo non funziona. L'unico risultato che ho notato è stato eliminare l'animazione di comparsa della Sticky Bar.

Io ho solo risposto alla tua richiesta di "agire sul valore del paramento inserito in Step 2 (Struttura del Modello > Selezione della Pagina > Header > Altezza)"

Per fare ciò occorre operare sull'attributo height del selettore #imHeader 

Se le tue esigenze richiedono di intervenire su Sfondo dell'Header, Sticky bar e/o altro (Menu, Hamburger Menu, ....) è chiaro che il codice non è sufficiente.

Czytaj więcej
Posted on the from Esse Di
Gabriele C.
Gabriele C.
User
Autor

Continuo a non comprendere la logica, e chiedo venia, ma credo si possa terminare qui per evitare il continuo di polemiche.

Come da oggetto il mio interesse era impostare a 0px l'altezza dell'Header senza nascondere quest'ultima o intaccare il paramento nello Step 2 per tutte le pagine.

Ringrazio per i consigli gentilmente elargiti.

Czytaj więcej
Posted on the from Gabriele C.
Esse Di
Esse Di
User

Ho l'impressione di non avere capito il problema.

[quote="Gabriele C."] ....... Come da oggetto il mio interesse era impostare a 0px l'altezza dell'Header [/quote]

[/quote][quote="Gabriele C."]

Ho provato con il codice che segue, ma dalle anteprime non funziona:

#imHeaderBg {
height: 0px!important;

}

[/quote]

L'approccio è corretto, è solo errato il selettore: deve essere #imHeader invece di #imHeaderBg

[quote="Gabriele C."]

.................

....... senza nascondere quest'ultima o intaccare il paramento nello Step 2 per tutte le pagine.

[/quote]

Se inserisci il codice nella Scheda Esperto della pagina (passo 3 non passo 1) agisce solo su quella pagina.

Se ho capito male, scusami

Czytaj więcej
Posted on the from Esse Di
Esse Di
Esse Di
User

Ho creato un pasticcio con i quote. Ci riprovo

Gabriele C.
....... Come da oggetto il mio interesse era impostare a 0px l'altezza dell'Heade
Gabriele C.

Ho provato con il codice che segue, ma dalle anteprime non funziona:

#imHeaderBg {
height: 0px!important;

}

L'approccio è corretto, è solo errato il selettore: deve essere #imHeader invece di #imHeaderBg

Gabriele C.

.................

....... senza nascondere quest'ultima o intaccare il paramento nello Step 2 per tutte le pagine.

Se inserisci il codice nella Scheda Esperto della pagina (passo 3 non passo 1) agisce solo su quella pagina.

Se ho capito male, scusami

Czytaj więcej
Posted on the from Esse Di
Patrizia B.
Patrizia B.
User

Il codice 

#imHeader {
height: 0px!important;

}

Non lo inserire in esperto della pagina ma, inserisci un oggetto HTML o usane uno se gia esistente nella pagina e inseriscilo nella sezione esperto-->codice css

Czytaj więcej
Posted on the from Patrizia B.
Esse Di
Esse Di
User
Patrizia B.
Il codice  #imHeader { height: 0px!important; } Non lo inserire in esperto della pagina ma, inserisci un oggetto HTML o usane uno se gia esistente nella pagina e inseriscilo nella sezione esperto-->codice css

Sempre per apprendere cose nuove, posso sapere il perché?

Czytaj więcej
Posted on the from Esse Di
Patrizia B.
Patrizia B.
User
Esse Di
Sempre per apprendere cose nuove, posso sapere il perché?

Perchè, per qualche strano motivo (almeno in locale) ho fatto caso che molti codici css inseriti nella sezione esperto della pagina non funzinano, invece, inseriti in oggetto HTML--->esperto--->css si, non mi chiedere perchè, non me lo spiego neanche io, o forse, perchè gli !important devono essere inseriti nel file css

Czytaj więcej
Posted on the from Patrizia B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Patrizia B.
... ... ...  Perchè, per qualche strano motivo (almeno in locale) ho fatto caso che molti codici css inseriti nella sezione esperto della pagina non funzianano,... ... ... 

... per codici EXTRA usati per alterare la struttura predefinita, va usata la sezioni Esperto | /HEAD (3^) opzione del Passo_1/Passo_3  ...con TAG <STYLE>

...  può funzionare anche in Oggetto HTML | sezione CSS senza TAG <STYLE>, ...ma è improprio e si potrebbe dimenticare in quale oggetto sia stato usato...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Patrizia B.
Patrizia B.
User
‪ KolAsim ‪ ‪
... per codici EXTRA usati per alterare la struttura predefinita, va usata la sezioni Esperto | /HEAD (3^) opzione del Passo_1/Passo_3  ...con TAG <STYLE> ...  può funzionare anche in Oggetto HTML | sezione CSS senza TAG <STYLE>, ...ma è improprio e si potrebbe dimenticare in quale oggetto sia stato usato...

OK, il fatto di dimenticarlo è vero ma dover utilizzare il tag <style> (forse per questo alcune volte non mi fnsionavano in quella posizione) quando c'è una sezione css la vedo una cosa poco ortodossa, comunque grazie del consiglio. wink

Czytaj więcej
Posted on the from Patrizia B.
Patrizia B.
Patrizia B.
User
Esse Di
Sempre per apprendere cose nuove, posso sapere il perché?

Allora, siccome sono un pò capocciona e voglio andare a fondo delle cose per imparare (non si finisce mai tongue-out), dopo aver letto/ascoltato KolAsim e riflettendo su quello che mi hai chiesto tu Esse Di, o provato:

<style>
#imHeader {
height: 0px!important;

}
</style>

In sezioni Esperto--->Passo 3 della pagina e così funziona, quindi, per i CSS da mettere in esperto della pagina sempre racchiudere tra i tag <style>...</style>wink

Czytaj więcej
Posted on the from Patrizia B.
Gabriele C.
Gabriele C.
User
Autor

Ho appena provato e funziona, ma in un certo senso è come se mi abilita la voce "Nascondi per questa pagina" relativa all'Header.

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

Pensavo che se avessi impostato l'altezza a 0 px di conseguenza gli oggetti sarebbero "usciti" fuori dall'header e ottenere un risultato come questo:

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

Senza "sacrificare" la Sticky Bar, ovvero Header altezza nulla e sfondo personalizzato (es. cangiante come qui https://www.stiac.it/preview/client/)  e al contempo poter sfruttare la Sticky Bar che compare quando il visitatore fa lo scroll verso il basso e viceversa.

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

Ignorantemente, se imposto a 0 px l'altezza dell'Header nello Step 2 (Struttura del Modello) ottengo una cosa analoga.

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

Es:

Se poi si scende, viene mostrata la Sticky Bar:

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

Il dilemma è che impostando tali parametri nello Step 2, incidono su tutte la pagine del progetto, mentre il mio intento era ricreare il tutto in una pagina specifica.

Czytaj więcej
Posted on the from Gabriele C.
Esse Di
Esse Di
User

Qualcuno ha segnalato come abuso i miei due post in cui chiedevo spiegazioni sui post contenenti solo un segno "-"

Mi piacerebbe sapere chi è stato e perché.

Purtroppo Help Center non mi offre questa possibilità.

Czytaj więcej
Posted on the from Esse Di
Gabriele C.
Gabriele C.
User
Autor

Scusate i mille post, ho cercato di spiegare nel dettaglio l'output che mi piacerebbe poter ottenere.

Ho notato questo tipo di grafica a molti siti terzi e mi sarebbe piaciuto poter replicare tale stile con WebSite X5 per curiosità e voglia di espandere la mie skill (ma anche masochismo nel complicarmi la vita).

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor
Esse Di
Qualcuno ha segnalato come abuso i miei due post in cui chiedevo spiegazioni sui post contenenti solo un segno "-" Mi piacerebbe sapere chi è stato e perché. Purtroppo Help Center non mi offre questa possibilità.

Non è stato segnalato alcun abuso. Sono stati semplicemente nascosti tutti i post OT per rendere il post "pulito" in un certo senso. Almeno un futuro utente non si ingarbuglia nel leggere cose sterili e noi non ci perdiamo in argomentazioni futili.

Czytaj więcej
Posted on the from Gabriele C.
Esse Di
Esse Di
User
Gabriele C.
Scusate i mille post, ho cercato di spiegare nel dettaglio l'output che mi piacerebbe poter ottenere. Ho notato questo tipo di grafica a molti siti terzi e mi sarebbe piaciuto poter replicare tale stile con WebSite X5 per curiosità e voglia di espandere la mie skill (ma anche masochismo nel complicarmi la vita).

Sinceramente io non ho capito assolutamente che cosa vuoi ottenere (e, per carità, la mia non è polemica)

Czytaj więcej
Posted on the from Esse Di
Gabriele C.
Gabriele C.
User
Autor

Vorrei ottenere un risultato grafico come sopra spiegato, tenendo sempre presente l'oggetto del post "Variare altezza Header in pagina specifica".

Nello specifico vorrei poter impostare l'altezza a 0px  per l'Header senza usufruire dell'opzione "nascondi" (quella presente nello Step 3 > Proprietà > Grafica > Header).

Semplificato in parole povere vorrei ottenere un output equivalente a questo (https://colorlib.com/preview/theme/br/).

Se non sono stato a bastanza chiaro non ti preoccupare.

Czytaj więcej
Posted on the from Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Esse Di
Qualcuno ha segnalato come abuso i miei due post in cui chiedevo spiegazioni sui post contenenti solo un segno "-" Mi piacerebbe sapere chi è stato e perché. Purtroppo Help Center non mi offre questa possibilità.

... non servono spiegazioni per queste cose...

... comunque, avevo messo un avviso che è durato in chiaro per ben 150 minuti...

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User
 ‪ KolAsim ‪ ‪
Esse Di Qualcuno ha segnalato come abuso i miei due post in cui chiedevo spiegazioni sui post contenenti solo un segno "-" Mi piacerebbe sapere chi è stato e perché. Purtroppo Help Center non mi offre questa possibilità. ... non servono spiegazioni per queste cose... ... comunque, avevo messo un avviso che è durato in chiaro per ben 150 minuti...

Sono in completo disaccordo. Ora come ora (non èstato sempre così) finalmente è possibile sapere chi ha messo "utile".

Personalmente ritengo più utile sapere chi ha oscurato un post e perché, e questo a prescindere se il motivo è valido (?) o meno

Czytaj więcej
Posted on the from Esse Di
Mirko Boschetti
Mirko Boschetti
Moderator
Gabriele C.
Semplificato in parole povere vorrei ottenere un output equivalente a questo (https://colorlib.com/preview/theme/br/). Se non sono stato a bastanza chiaro non ti preoccupare.

Forse non ho capito neanche io, ma se rendi solo lo sfondo trasparente dell'Header in quella pagina?

Czytaj więcej
Posted on the from Mirko Boschetti
Gabriele C.
Gabriele C.
User
Autor

Se rendo lo sfondo trasparente rimane ugualmente l'altezza dell'header che non mi consentirebbe d'impostare ad esempio uno sfondo che cambia come nell'esempio riportato, almeno credo.

Czytaj więcej
Posted on the from Gabriele C.
Esse Di
Esse Di
User
Mirko Boschetti
Forse non ho capito neanche io, ma se rendi solo lo sfondo trasparente dell'Header in quella pagina?

Fermo restando che continuo a non capire quello che effettivamente vuole Gabriele, anche io avevo pensato alla tua soluzione. Solo che così facendo lo sfondo per gli oggetti insriti nell'Intestazione diventa lo sfondo della pagina (o dell'Headerbg)

nel sito https://colorlib.com/preview/theme/br/ questo va  bene, perché lo sfondo della pagina è relativamente scuro

Ora supponiamo che Gabriele si riferisca ad una pagina del suo sito https://www.stiac.it/

In esso sia il colore della pagina sia il colore degli oggetti inseriti nell'Intestazione è bianco. Rendendo trasparente il colore dell'Intestazione il Logo ed il Menu sarebbero illeggibili, essendo di colore bianco su sfondo bianco

P.S. La mia argomentazione è frutto di una prova effettuata sul sito di Gabriele

Czytaj więcej
Posted on the from Esse Di
Gabriele C.
Gabriele C.
User
Autor

Così è comprensibile?

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

Il risultato di questo progetto lo si potrebbe ottenere analogamente impostando a 0px i parametri nello Step 2 a zero.

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

Come dimostrato qui.

La cosa bizzarra è che riaprendo il programma non riesco a replicare nuovamente la stessa grafica.

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

NB.

Non so per quale oscuro motivo ma il programma mi ha traslato in autonomia alcuni oggetti nell'header e ho creduto fosse un errore di codice, tuttavia risultano spostati nello Step 2.

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

Forse ho trovato un punto di svolta.

Se inserisco questo codice funziona:

<style>

#imHeader {
height: 1px!important;
}

#imHeaderBg {
height: 1px!important;
}
</style>

Czytaj więcej
Posted on the from Gabriele C.
Patrizia B.
Patrizia B.
User

Prova così, Passo 2--->sfondo della pagina inserisci un'immagine o lascia tutto trasparente come meglio credi

Nelle pagine che vuoi lo sfondo differente nella sezione esperto 3 Prima della chiusura del Tag Head:

#imPageExtContainer {
background-image: url(tuaimmagine.jpg o percorso immagine)!important;
background-size: cover!important;
color: #FFF!imporatnt;
background-repeat: no-repeat!Important;
}

In questo modo però hai solo un'immagine e non una slide

Czytaj więcej
Posted on the from Patrizia B.
Gabriele C.
Gabriele C.
User
Autor

Grazie per la dritta, però non è l'effetto desiderato.

Qui sono riuscito a crearlo nascondendo l'header con la spunta dell'opzione e usando un content slider.

Mentre per creare una cosa leggermente simile con WebSite X5 devo impostare a 0px il paramento relativo all'altezza dell'Header e Sfondo Header (Step 2):

Provando nuovamente con i codici non ci si riesce se ripristino l'altezza dell'header originale. Rimane uno spazio bianco tanto quanto impostato nello step 2:

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

Domanda banale, ma non per me; da cosa è dato lo spazio bianco?

Czytaj więcej
Posted on the from Gabriele C.
Patrizia B.
Patrizia B.
User

Quale spazio bianco ?

Czytaj więcej
Posted on the from Patrizia B.
Patrizia B.
Patrizia B.
User

O.T.: @Gabriele C. ma stai lavorando con la Beta ?

Czytaj więcej
Posted on the from Patrizia B.
Gabriele C.
Gabriele C.
User
Autor

Questo:

Se inserisco codici indicati senza editare i paramenti nello step 2 si vede la barra/spazio bianco.

Sbaglio a inserire il codice?

No, la Beta non l'ho nemmeno scaricata. Hai notato bug?

Czytaj więcej
Posted on the from Gabriele C.
Patrizia B.
Patrizia B.
User

<style>
#imHeader {
height: 0px!important;

}

#imPageExtContainer {
background-image: url(tuaimmagine.jpg o percorso immagine)!important;
background-size: cover!important;
color: #FFF!imporatnt;
background-repeat: no-repeat!Important;
}

</style>

Il codice in grassetto è quello per togliere l'header ma ha me funziona anche senza metterlo, fai delle prove, sopra non ti avevo inserito i tag <style> perchè pensavo fossero sottintesi wink

Per la beta, no io non faccio parte del programma ma ho visto il link che hai postato

https://www.stiac.it/preview/client/

<metaname="generator" content="Incomedia WebSite X5 Pro 2020.1.0 - www.websitex5.com" />

Czytaj więcej
Posted on the from Patrizia B.
Gabriele C.
Gabriele C.
User
Autor

Il codice riportato è inteso sempre come immagine di sfondo relativa all'header, mentre l'output che cercavo era quello di annullare l'altezza dell'header e rendere lo sfondo dipendente dagli oggetti nella pagina, come ad esempio dal content slider.

Forse se imposto un oggetto con il valore di altezza negativo (es. -60px) dovrebbe andare a posizionarsi dietro l'Header?

Non capisco perché se imposto 1px riesco a ottenere una cosa analoga a questa (nello Step 2), ma se provo a bypassare inserendo il codice senza editare i parametri nello Step 2 è come se abilito la spunta nelle impostazioni della pagina per nascondere l'header.

Ah! Mi avevi detto Beta. Sì, in quel caso ho usato la versione in cantiere "Preview", meglio nota come versione alfa.

Ho voluto "rischiare" nel creare una bozza a un cliente e con la scusa ho testato meglio il software per scovare potenziali bug.

Czytaj więcej
Posted on the from Gabriele C.
Gabriele C.
Gabriele C.
User
Autor

In alternativa dovrei nascondere l'header nella pagina e adattare un codice per cambiare il background della Sticky Bar quando viene effettuato lo scroll. Credo sia la soluzione più logica.

Provo ad adattare questo codice trovato online (https://codepen.io/aubort/pen/LeBVzW)

Czytaj więcej
Posted on the from Gabriele C.
Esse Di
Esse Di
User

Questo è il mio primo intervento 

Esse Di
#imHeaderBg è il selettore per lo Sfondo dell'Header il selettore per l'Header è #imHeader  Il tuo codice dovrebbe essere #imHeaderBg,  #imHeader { height: 0px!important; }

Davo per scontato che il codice va inserito tra i tag <style> e </style>

Riepilogando

<style>
#imHeaderBg, #imHeader {
height: 0px!important;
}
</style>

da inserire al passo 3 in "Proprietà Pagina - Esperto -  Prima della chiusura del tag HEAD"

questo, e solo questo, è il codice che serve a te

Esse Di

.....................

Se inserisci il codice nella Scheda Esperto della pagina (passo 3 non passo 1) agisce solo su quella pagina.

Se ho capito male, scusami

Czytaj więcej
Posted on the from Esse Di
Esse Di
Esse Di
User

Cancellare l'ultima frase

Czytaj więcej
Posted on the from Esse Di
Gabriele C.
Gabriele C.
User
Autor

Queste cose basilari più o meno le bazzico.

Czytaj więcej
Posted on the from Gabriele C.
Esse Di
Esse Di
User
Gabriele C.
Queste cose basilari più o meno le bazzico.

Proprio quello davo per scontato

Czytaj więcej
Posted on the from Esse Di