Allineamento elementi su sezione

[saltri77]

Salve a tutti, ho un problema e non riesco a venirne a capo.
Sito con header (non preimpostato, ma aggiunto da me tramite l'apposita funzione), con 3 colonne (3+6+3).
Su ogni colonna vi è un elemento (sinistra menù, centro logo, destra icone contatti).
Il problema è che, nonostante abbia provato tutte le combinazioni delle grid, non riesco ad allineare soprattutto gli elementi sulla prima e terza colonna come voglio io.
Vi allego due screen, uno (il primo) con l'immagine di come è adesso (tutto sfalsato), l'altro (il secondo) con quello che vorrei ottenere.
Se qualcuno può indicarmi come agire perché non sto riuscendo proprio a capirlo.

[giusebos]

pensi male se credi che con una foto si riesca ad ottenere aiuto.

[saltri77]

pensi male se credi che con una foto si riesca ad ottenere aiuto.

Hai ragione, non ho nemmeno detto che template sto usando. Sto usando Helix ultimate, lo trovo ottimo, ma su certe cose (come questa) mi perdo. La versione di Joomla è l'ultima (3.9.18). Non so se servono altre informazioni.

[Limma]

Più che altro servirebbe un link al sito online, se possibile...


Io uso Helix Ultimate (il pacchetto free blank senza page builder) per il 90% dei siti che realizzo, ma è pur sempre un framework/templare per cui qualche compromesso bisogna sempre accettarlo.
Il template perfetto non esiste, a meno di non farselo da soli.

[giusebos]

Hai ragione, non ho nemmeno detto che template sto usando. Sto usando Helix ultimate, lo trovo ottimo, ma su certe cose (come questa) mi perdo. La versione di Joomla è l'ultima (3.9.18). Non so se servono altre informazioni.

bene, siccome non ho nulla da fare mi faccio un installazione di joomla con il template e poi ti dico

[saltri77]

Più che altro servirebbe un link al sito online, se possibile...


Io uso Helix Ultimate (il pacchetto free blank senza page builder) per il 90% dei siti che realizzo, ma è pur sempre un framework/templare per cui qualche compromesso bisogna sempre accettarlo.
Il template perfetto non esiste, a meno di non farselo da soli.

Purtroppo non posso metterlo online, la cliente preferisce tenerlo offline fino a completamento.


Sì, lo so che il template perfetto non esiste... però avrei preferito poter modificare meglio, non riesco a far funzionare il discorso delle grid..
Vabbè, provo a studiarci ancora un poco ma poi eventualmente, cambierò posizioni

[saltri77]

bene, siccome non ho nulla da fare mi faccio un installazione di joomla con il template e poi ti dico

Davvero? Ti ringrazio davvero 

[giusebos]

Davvero? Ti ringrazio davvero 

scherzi! Siamo qui apposta.

[saltri77]

scherzi! Siamo qui apposta.

Ovviamente avevo capito che stavi scherzando, stavo allo scherzo anche io.

[Limma]

Qualcosa tipo questo?


Ho fatto una prova velocissimamente e guardabile solo su device con minimo 992px in larghezza.

[saltri77]

Qualcosa tipo questo?


Ho fatto una prova velocissimamente e guardabile solo su device con minimo 992px in larghezza.

Ciao, scusami tanto ma non mi ero proprio accorto della tua risposta, davvero scusami.
Comunque,
no, come hai fatto tu (e grazie infinite per aver perso del tempo per me) non è la soluzione desiderata dalla cliente.
Ti allego l'immagine per farti capire come vuole (è uno screenshot del sito che sto adesso realizzando non con joomla dato che non riesco a trovare il modo). Praticamente lei vuole in ogni pagina l'immagine grande, centrale con una piccola cornice bianca intorno, l'hamburger menù a sinistra e le icone per i contatti a destra, entrambi devono coincidere con i vertici dell'immagine. Ed è proprio questo che non riesco a fare con joomla, almeno, non con helix ultimate. Non so se esistano template o framework che mi permettano di spostare gli elementi a mio preciso piacimento...

[Limma]

Tempo ne ho messo poco a fare l'esempio che hai visto, e ancora meno (tipo 5 minuti) a fare quello che puoi vedere ora sempre al link di qualche post fa.Dai un'occhiata...

[saltri77]

Ok, visto, grazie mille è quello che mi serve... sperando che poi anche su macbook e mac si veda così... potresti dirmi come hai fatto? Grazie.

[Limma]

Premetto che ciò che scrivo qui sotto produce l'effetto che hai visto nel link, ma questo non significa che non abbia bisogni di "aggiustamenti" nel tuo caso specifico, e che è applicabile solo a risoluzione da 992px in sù (al di sotto ci sono varie cose da riconsiderare...).


Come hai fatto tu ho creato un header "custom" con 3 colonne (3+6+3) assegnando le posizioni del template, da sinistra a destra, "menu", "logo" e una posizione a piacere tra le tante disponibili.
Ho poi inserito l'immagine con un modulo personalizzato nella posizione "title" del template che nel layout di "base" sta subito sotto l'header (naturalmente puoi crearne una tu nominandola come ti pare).
Usando la posizione "title", come hai visto nel primo esempio che ti avevo linkato, l'immagine si allarga a tutto schermo dato che di defauòt tale row è impostata come "Fluid width", ma basta disabilitare l'opzione e la sua larghezza rientrerà in quella del "Main body), come hai visto nel secondo mio esempio.

Fatto questo, però, bisogna intervenire con un po' di css.

Per allineare a sinistra l'icona del menu offcanvas ho utilizzato questo codice:

Codice: [Seleziona]

#sp-menu {
    display: flex;
    margin-left: -15px;
    margin-top: inherit;
}
Per centrare il logo nella sua colonna:

Codice: [Seleziona]

#sp-logo {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}Essendo poi l'altezza del logo maggiore di quella dell'header ho anche impostato (volendo puoi anche impostare l'altezza del logo direttamente nel backend del template):

Codice: [Seleziona]

.logo-image {
    height: 180px !important;
}Per allineare a destra il modulo personalizzato:

Codice: [Seleziona]

#miodivcustom {
    float: right;
    margin-top: 35px;
    margin-right: -15px;
}
Ho impiegato più tempo a scrivere questo testo che a realizzare l'esempio online...

[saltri77]

Grazie Limma per la risposta.
Ho provato a customizzare il file template.css con i tuoi consigli, e in effetti qualcosa si muove devo solo ora trovare il modo di sistemarlo meglio perché con codice che mi hai dato tu mi viene un tantino spostato. Suppongo che sia dovuto al fatto che io ho lasciato la sezione in Full-width e messo la max-width delle immagini anziché al 100% (come da default nel template) al 94%, per ottenere quei bordi bianchi ai lati (se togliessi il full-width sarebbero troppo più ampi).
Detto ciò, per spostarli ho provato a modificare i margin-left e al margin-right... e mentre il menù si allinea perfettamente al vertice dell'immagine, l'altro lato (TEST nel tuo caso, modulo icone contatti nel mio) mi esce fuori, mi va a finire a metà dell'immagine centrale (quella che tu hai messo in Title).
L'effetto che voglio ottenere io è descritto nell'immagine 2.jpg mentre quello che ottengo inserendo il tuo codice è nell'immagine 1.jpg, se modifico i dati, come detto, allineo solo il menù.
Smanetto ancora... sperando di riuscire.

[Limma]

Come ti avevo scritto il mio codice funziona perfettamente nel mio esempio e sarebbero stati necessari aggiustamenti nel tuo layout.
Oltretutto hai ora fornito dati che prima non avevi segnalato.
In ogni caso, usando i miei piccoli codici come riferimento, dovresti trovate la soluzione giusta al tuo caso.


Se il tuo sito fosse visibile online potrei darci un'occhiata.


P.S. Dimenticavo. Ti conviene usare il file custom.css previsto dal template per le tue regole css.

[saltri77]

Come ti avevo scritto il mio codice funziona perfettamente nel mio esempio e sarebbero stati necessari aggiustamenti nel tuo layout.
Oltretutto hai ora fornito dati che prima non avevi segnalato.
In ogni caso, usando i miei piccoli codici come riferimento, dovresti trovate la soluzione giusta al tuo caso.


Se il tuo sito fosse visibile online potrei darci un'occhiata.


P.S. Dimenticavo. Ti conviene usare il file custom.css previsto dal template per le tue regole css.

Dunque, creato il file custom.css. Cercherò di trovare quei piccoli accorgimenti che mi permetteranno di raggiungere l'obiettivo.
Il sito è offline, ma risolviamo subito, ho creato un utente demo affinché si possa entrare per guardare. Ovviamente c'è poca roba qui, ho reistallato joomla e ricominciato dall'inizio, ma non voglio andare avanti se prima non trovo la corretta soluzione. Considera che (non so per quale ragione, essendo il template responsive) sui schermi Mac ho sempre avuto problemi di visualizzazione completamente diversa. Detto ciò:
www.ilcanaledesignhouse.it user demo pass 9874