Questo articolo contiene risposte per alcune domande frequenti ("Come creare /utilizzare/ nascondere / sovrascrivere / tradurre ...") sul template framework Helix3.
1. Come aggiornare Helix3
Ci sono due modi per aggiornare Helix3:
Metodo #1
Recati in Estensioni>Gestione>Aggiorna: clicca su “Pulisci Cache” (in alto a destra)
- Clicca poi su “Cerca Aggiornamenti”
- Seleziona tutti i plugin di Helix3 nella lista
- Clicca su “Aggiorna” per installare le nuove versioni
Metodo #2
Scarica ed installa il template Helix3, e si aggiornerà anche il framework automaticamente.
2. Come ridurre l’altezza dell’header
Per ridurre l’altezza dell’ header del template Helix3 occorre utilizzare il foglio di stile CSS.
Il valore predefinito è 90px, ma lo si può modificare. Ad esempio possiamo impostarlo a 60px.
Personalizzazione tramite codice CSS:
#sp-header, #sp-header .logo { height: 60px; }
.sp-megamenu-parent > li > a, #offcanvas-toggler { line-height: 60px; }Come ridurre l’altezza dell’header durante e dopo lo scroll della pagina
Se si desidera ridurre l'altezza dell'header solo dopo averlo abbassato, è possibile utilizzare il seguente codice CSS personalizzato:
header.menu-fixed, header.menu-fixed .logo { height: 60px !important }
header.menu-fixed .sp-megamenu-parent > li > a,
header.menu-fixed #offcanvas-toggler { line-height:60px; }
3. Come utilizzare un font diverso da Google Fonts
Per impostazione predefinita, in quasi tutte le nostre QuickStarts dei template JoomShaper, abbiamo utilizzato Google Fonts per la typography, ma non è necessario attenersi a questa scelta. È possibile, infatti, selezionare fonts diversi o semplicemente utilizzare i set di caratteri classici. Nella versione attuale di Helix3, si richiede l’inserimento solo una riga di CSS personalizzato.
Basi del CSS
La font-family,proprietà CSS, consente di specificare un elenco di caratteri prioritari di una font-family e / o nomi di famiglie generiche per l'elemento selezionato.
I tags (body, p, h1, h2, h3 ecc..) devono essere separati da una virgola.
La font-family specifica un elenco di caratteri, dalla priorità più alta a quella più bassa.
Prima solo i font "web safe"(ovvero che sono visualizzati da tutti i browser) potevano essere utilizzati sulle pagine web. Questi tipi di font sono caratteri standard installati nei computer Windows e Mac. Potete trovarne un elenco completo qui: http://www.cssfontstack.com.
Come usare Arial, Verdana, Sans-Serif ecc.
- Nelle impostazioni del template (Estensioni>Template>Stili>shaper_helix3), nella scheda "Typography", disattiva i caratteri Google per il body, e per tutti gli h1,h2 ecc… e per il menu.
- Nella scheda "Custom code" all'interno del campo CSS personalizzato, aggiungi la seguente stringa o qualsiasi altra raccolta di font "web safe":
body, p, h1, h2, h3, h4, h5, h6, a, li, span {font-family: Arial, Helvetica, sans-serif;}
Altri esempi:
body, p, h1, h2, h3, h4, h5, h6, a, li {font-famiglia: Times, "Times New Roman", Georgia, serif; }
body, p, h1, h2, h3, h4, h5, h6, a, li {font-family: Verdana, Arial, Helvetica, sans-serif; }
body, p, h1, h2, h3, h4, h5, h6, a, li {font-family: "Lucida Console", Courier, monospace; }
Si consiglia di utilizzare solo i tags HTML che è necessario modificare.
N.B.: alcuni font popolari, ad esempio Tahoma, appartengono alla Microsoft Corporation, quindi sono installati di default solo in Windows, non in Mac OS X, Linux o Ubuntu!
Come usare CSS personalizzati
Un consiglio utile su come utilizzare CSS personalizzati in Helix3 puoi recarti a questo link qui: https://www.joomshaper.com/documentation/helix-framework/helix3#custom-css-header-code
4. Come aggiungere un nuovo font al modello Helix3
Se non vuoi utilizzare Google Fonts nella sezione “Typography”, né l'Helvetica Neue predefinita, Helvetica o Arial puoi caricare il tuo font personale.
Ad esempio, è possibile integrare un font personalizzato da MyFonts.com, fontspring.com, transfonter.org o fontsquirrel.com o utilizzare WebFonts Generator da esso (metodo consigliato).
Prendiamo ad esempio fontssquirrel.com: importa il file del font di cui vuoi generare il kit; attendi l'elaborazione e poi clicca su downloand per scaricare il kit @font-face.
Tutto quello che devi fare è copiare e incollare i file dei font appena generati e apportare alcune modifiche al tuo file custom.css.
In questo esempio, spiegheremo come è possibile aggiungere il carattere personalizzato gratuito AlexBrush al template JoomShaper. Questo metodo può essere utilizzato con qualsiasi modello basato sul framework Helix3.
Per fare ciò c’è bisogno di collegarsi al server hosting tramite FTP. Puoi connetterti al server da Joomla, se hai installato Phoca Commander; altrimenti, connettiti con Filezilla.
Naviga in pubblic_html>templates>shaper_helix3>fonts
- Decomprimi i file del font, che hai scaricato ( .eot, .woff, .ttf , .svg ) e importali nella cartella fonts del template Helix3, quella che hai raggiunto tramite FTP.
- Dal kit di "Alex Brush" decompresso apriamo stylesheet.css. Dovrebbe presentarsi così:
@font-face {
font-family: 'Alex Brush';
src: url('AlexBrush-Regular.eot');
src: url('AlexBrush-Regular.eot?#iefix') format('embedded-opentype'),
url('AlexBrush-Regular.woff2') format('woff2'),
url('AlexBrush-Regular.woff') format('woff'),
url('AlexBrush-Regular.ttf') format('truetype'),
url('AlexBrush-Regular.svg#AlexBrush-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
Ma abbiamo bisogno di cambiare i percorsi dei file. Si consiglia di utilizzare la seguente modifica (../fonts/):
@font-face {
font-family: 'alex_brushregular';
src:url('../fonts/alexbrush-regular-webfont.woff2') format('woff2'),
url('../fonts/alexbrush-regular-webfont.woff') format('woff'),
url('../fonts/alexbrush-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Ora apri o crea un css file nella cartella / css (nel template JoomShaper) e ed incollaci dentro il codice aggiornato.- Dopo aver aggiunto il carattere alla directory dei caratteri del tuo modello, puoi applicarlo al tuo sito. Ora devi scegliere questo nuovo font per selettori CSS o tag HTML selezionati, anche all'interno del cssfile, ad esempio:
h1, h2, h3 {font-family: 'alex_brushregular', Arial;}
Ecco il mio file di esempio:
- Ricorda di disabilitare Google Font dalla scheda “Typography” di Helix3 per i tags HTML scelti per i quali desideri utilizzare il carattere personalizzato.
Puoi anche sostituire il colore e la dimensione del carattere predefiniti con il colore e le dimensioni del tuo font preferito, utilizzando le regole CSS di base.
Se desideri utilizzare caratteri personalizzati per tag HTML o voci di menu, ecc., disattiva Google Fonts per loro nella scheda "Typography".
Risultato finale sul front-end:
Come cambiare la direzione in RTL (Right-To-Left)
Di default tutti i nuovi template basati su Helix3 hanno stili CSS separati per la direzione Right-To-Left (RTL) in lingue come ebraico, persiano e arabo. Nella cartella "template / css" troverai: bootstrap-rtl.min.css, rtl.css e rtl.less file. Usa questa funzione, se il tuo sito Joomla è impostato su una lingua RTL, cosicchè il foglio di stile RTL Enfold verrà incluso automaticamente.
- Il Generatore di layout di default in Helix3 non ha un layout RTL separato. Ciò significa che bisogna crearne uno. Per prima cosa quindi utilizza la funzione "Duplica" nella sezione "Template>Stili".
- In secondo luogo, all'interno della scheda Layout sostituisci le posizioni del logo e del menu, semplicemente spostandole col mouse.
- Quindi scegli menu diversi per la lingua RTL nella scheda Menu. Non dimenticare di salvare le impostazioni. Naturalmente, è possibile modificare in l'ordine delle voci di menu (Joomla Core Feature). Quindi non dovrebbe essere un problema impostare Home come ultimo elemento nella riga del menu. Se deve essere questo essere il tuo template predefinito, impostalo..
- Se questo template RTL deve essere solo per le lingue selezionate, assegnare questo modello "nuovo" alle voci di menu utilizzate per la lingua RTL.
- Nella scheda Codice personalizzato è possibile utilizzare gli stili CSS personalizzati per risolvere piccoli problemi con componenti o moduli che non supportano RTL.
- Se si desidera allineare il menu più a destra, non a sinistra come di default, si può utilizzare il seguente codice CSS:
body.rtl .sp-megamenu-parent { float : right! important ; }
Modulo per schede SP
Se stai utilizzando il modulo SP Tabs e devi avere lo stile di direzione RTL, utilizza due righe extra di codice CSS:
tab-padding .custom> p {text-align: right; }
ul.tabs_container li.tab {float: right! important;
5. Come aggiungere un modulo personalizzato sopra e sotto l'area del componente
Di default, Helix3 non ti consente di aggiungere un nuovo modulo sopra o sotto l'area del componente. Gestione layout, infatti, ti consente solo di aggiungere nuove righe e colonne.
Ma con piccole modifiche php/xml è possibile aggiungere le due nuove posizioni.
Personalizzazione con poco codice
Se hai già un template JoomShaper o Helix3 già installato, tutto ciò che devi fare è modificare due file (Usa sempre Phoca Downloader):
- plugins / system / helix3 / layouts / frontend / conponentarea.php
- templates / JoomShaper_NAME / templateDetails.xml
Nel file componentarea.php dovresti trovare queste due linee di codice:
$output .= '';
$output .= '';
Aggiungi altre due righe di codice così:
$output .= '';
$output .= '';
$output .= '';
$output .= '';
N.B.:Se la tua versione di Helix3 è antecedente alla 1.4, il file che abbiamo appena modificato lo trovi in plugins/system/helix3/core/helix3.php
Nel secondo file aggiungi queste le due posizioni così:
<position>above</position>
<position>below</position>
Per esempio in questo modo:
<position>above</position>
<position>below</position>
<position>footer1</position>
<position>footer2</position>
<position>comingsoon</position>
<position>offcanvas</position>
<position>pagebuilder</position>
<position>404</position>
<position>debug</position>
</positions>
Non dimenticare di salvare anche questo file. QEcco fatto, ora è possibile utilizzare queste due nuove posizioni in Module Manager per tutti i moduli installati. Fino a quando non sarà incluso nella nuova versione del framework Helix3, puoi utilizzare questa soluzione temporanea ma al 100% funzionante.
N.B. : Qualora il tuo template venisse aggiornato perderai le modifiche e dovrai rifare il procedimento.
Come nascondere queste due posizioni per il mobile
Sfortunatamente, quelle posizioni non hanno tutte le opzioni in Helix3 Layout Manager. Quindi per nasconderli nella vista mobile devi usare unsuffisso di classe addizionale:
hidden-xs hidden-sm
6. Come aumentare la dimensione del Logo
Se nel template basato su Helix3 il tuo logo viene visualizzato troppo piccolo o troppo grande, devi apportare piccole modifiche, inizia con:
- Per Dispositivi Desktop, utilizza l'immagine del logo con altezza finale, ad esempio 100 px. Non usare immagini ENORMI, non ha senso.
- In alcuni template per vedere l'immagine del logo più grande (o in dimensioni normali), devi anche:
- Aumentare la colonna Logo in Impostazioni modello> Layout> Intestazione. Se 3,9 è troppo piccolo, usa 4,8 o layout personalizzato.
- Modifica con il CSS l'altezza del logo logo così:
#sp-header .logo h1 > img {max-height: none; height:100px;}
7. Come trasferire le impostazioni del modello
In questa guida ti mostrerò come trasferire le impostazioni del modello Joomla (anche in base al framework Helix3) da un sito Web a un altro. Non ti preoccupare, è un processo abbastanza semplice richiede solo diversi minuti e utilizza uno strumento aggiuntivo. Ti mostrerò tutti i passaggi, che dovresti seguire:
- Installa il template Joomla basato su Helix3 sul secondo sito, ovviamente con le impostazioni predefinite.
- Sui server in cui è pubblicato il primo sito (A) e il secondo sito (B), apri PHPMyAdmin(dovrebbe trovarsi nel pannello Hosting) Se non riesci a trovarlo, chiedi supporto. Ma puoi usare anche lo script php standalone chiamato Adminer (precedentemente phpMinAdmin) che è uno strumento di gestione completo di MySQL scritto in PHP. Al contrario, phpMyAdmin consiste in un singolo file pronto per la distribuzione sul server di destinazione.
- Apri entrambi i database dei tuoi siti Joomla (A e B).
- Nel database del sito "A" trova la tabella chiamata: PREFIX_template_styles e fai clic su "Seleziona" per sfogliarne il contenuto.
- Sulla lista trovi il nome del tuo template Helix3: clicca sul link "modifica".
- Seleziona e copia l'intera area dal campo "Params" (vedi immagine sopra), scrolla la finestra se necessario.
- Apri in modalità di modifica questa stessa tabella sul database del sito "B" e incolla l'intero codice.
- Quindi fare clic su "Salva" per confermare le nuove modifiche.
- Successivamente nella scheda "Basic" del template verifica se i loghi hanno lo stesso percorso per le relative immagini. In caso contrario, è necessario correggere solo questa parte.
- Se nel tuo primo template hai apportato manualmente alcune modifiche ai file del core come per esempio in: templateDetails.xml usando lo strumento client FTP devi modificarli anche nel server del secondo sito.
Importa ed esporta
Dalla versione v1.2 di Helix3 è consentito di utilizzare una nuova funzione: esporta e Importa le impostazioni. Non è più necessario utilizzare PHPMyAdmin o uno strumento simile per copiare le impostazioni del template dal sito A al sito B. Sul primo sito devi esportare il file json, quindi aprirlo nell'editor di testo, copiare l'intero contenuto e incollarlo sul secondo sito nel campo textarea di importazione.
