Consiglio Template base per poi crearne altri.

[xenox75]

Buonasera,


Volevo sapere, da chi crea i Template da se, se avete una base di partenza o lo create da zero.
Ho una conoscenza discreta su PHP, HTML, CSS, un pò di javascript, jquery, ecc...


ho usato in passato T3 Framwork per un sito attualmente ancora online, perchè non avevo grosse esigenze e mi andava bene...


vorrei ricreare la grafica del sito, che si ispirerà su una sorta di gioco manageriale di auto.


Ho provato a cercare su alcuni template free e/o a pagamento, ma onestamente non ho trovato nessuno che rispecchi quel che vorrei..
Spendere soldi su un template che poi dovrei per forza modificare non mi va, perchè la vedo una spesa inutile..


Quindi volevo provare a crearne uno per conto mio, ho visto un tutorial su come realizzarli, ma partire proprio da zero mi porterebbe via troppo tempo..


Pensavo di partire da Protostar, farne una copia e modificare il css, ma ho paura che usi un bootstrap vecchiotto e/o che non sia ideale per una struttura base per un template "moderno"..


Secondo voi per un sito "moderno" può andar bene Protostar o avete consigli su cosa usare come base per crearsi un template senza partire proprio da zero?


Grazie

[tomtomeight]

Buonasera
Protostar può andar benissimo specialmente se hai basi  come dici. Altrimenti parti da un template base dei tanti framework esistenti e ci puoi fare tutto a patto di studiarli e conoscerli a fondo. Io uso gantry 5 e finora ho riprodotto tutte le grafiche template che mi occorrevano o che mi hanno richiesto.

[giusebos]

Io mi sono fatto un template di base che non ha nulla dentro il body, poi in base al sito che devo fare inserisco i div interessati insieme alle poche righe di codice che serve a richiamare le posizioni, poi completo con le regole css che servono.

in un primo tempo usavo tutto il bootstrap, ma poi con l'esperienza ho capito che di tutto quel codice ne usavo una frazione minima, quindi perchè avere  tutto sto codice sotto il cofano se ne uso solo un pochino? Così sono andato oltre utilizzando un framevork molto più leggero e ridotto ai minimi termini come www.simplegrid.io, completo tutto con jquery e ontawesome da CDN e qualche volta uso la libreria js AOS (https://michalsnik.github.io/aos/) per ottenere quegli effetti grafici che tanto piacciono ai clienti

La base di questo template non prevede switch o impostazione da backend così che il codice è ridotto al minimo indispensabile, avvantaggiandosene la velocità di caricamento

Sempre in questo template ho inserito tutti i miglioramenti SEO che nemmeno joomla inserisce, tipo  quelli per l'integrazione con i social quali le twitter card e le meta property, poi l'h1 impostato sul titolo dell'articolo (anzichè l'h2) e il tag alt dinamico sul logo in maniera che riceva il titolo dell'articolo della pagina che stiamo visitando, idea copiata da wordpress (chi fa un po di seo sa quanto questo può fare la differenza).

Inoltre uso la riscrittura delle URL quella nuova impostabile da "articoli>>opzioni" con l'eliminazione del'ID dagli articoli, insieme all'installazione del componente SEO ROUTE66, OSmeta e OSmap.

Altro piccolo segreto che ti regalo è un consiglio, che mi consente di non perdere tempo con i capricci del cliente, che spesso prima che dica si al tuo template ti fa sudare sette camice.

Purtroppo dopo tanti anni non riesco più a stare dietro a tutte le cazz... diciamo tutti i capricci del cliente, così gli fornisco del link di directory di template (di qualsiasi tipo) dove può scegliere in autonomia la grafica che più gli piace; grafica che riproduco sul template per joomla.

In fondo i template al netto delle immagini, che spesso svengono sostituite con quelle del cliente, sono pressochè identici, con +/- quelle che possono diventare le varie posizioni riempibili con semplice codice HTML o con i moltissimi moduli disponibili in joomla o scaricabili dalla JED.


Tutto questo non è difficile riprodurlo, ma nemmeno una cosa basica, inoltre per chi come me crea siti per vivere e quindi ha ben chiari i passi da intraprendere, tutto questo procedimento richiede meno risorse e molto meno tempo nell'aggiustare gli inutili e problematici Gantry, T3, Helix e compagnia cantando, utili sopratutto quando forniti con il quick start, ma completamente inefficienti in termini di leggerezza e regolazioni varie.

[xenox75]

Ho provato a creare il template da zero,
ho seguito un tutorial e visto un pò come è fatto Protostar


Dal pannello Amministrativo sono riuscito a mettere la tab Advanced con alcuni parametri che mi personalizzo, tipo Logo, colore di background, ecc (giusto per testarne il funzionamento e vedere come sfruttarli nell'index.php)


Sono riuscito a disabilitare il Bootstrap di joomla (ver 2.X) e a mettere il bootstrap 4.5


Gli articoli, i moduli e il menù si vedono, ma trovo un pò di difficoltà con le personalizzazioni.


In particolare il Menu, mi si vedono come semplici link mentre li vorrei tipo pulsanti (come quelli che ci sono in https://getbootstrap.com/docs/4.5/components/navs/)


L'esempio che vorrei riprodurre è questo:

Codice: [Seleziona]

<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
  <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
  <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
  <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
  </ul>

in pratica:
La classe sulla ul (class="nav nav-pills") sono riuscito a metterla (si può dal modulo menu)
la classe su li (class="nav-item") sono riuscita a metterla mediante una funzione javascript tipo questa

Codice: [Seleziona]

var ul = document.getElementsByTagName("li");
for (var i = 0; i < ul.length; i++) {
    if (ul[i].className.includes("item")) {
        ul[i].className = 'nav-item';
    }
}



ora mi manca invece la parte del link esempio
<a href="/Siti_Prove/joomla_39_Demo/index.php" >Home[/url]


che dovrebbe essere con la classe:
1> class="nav-link active" => se attivo
2> class="nav-link" => se non attivo


Qui trovo difficoltà, qualcuno di voi saprebbe consigliare come fare?
O ci sono metodi differenti che mi facilitano il compito, di cui non sono a conoscenza?


o provato con il javascript cercando l'elemento per TAG "a", ma poi mi modifica tutti i link e non è quello che vorrei.


Poi avrei il problema del modulo di Login che si vede, ma formattato male, ma li penso di risolvere con il semplice CSS, invece il menù mi sfugge come risolvere.


In alternativa ho provato a fare la copia del template di Protostar e poi modificarlo, aggiungendo posizioni, field e un pò di css, ma sarei limitato dal fatto che usa il bootstrap 2.x, io invece volevo provare a rifare tutto da zero, ma per mia inesperienza, qualche difficoltà la sto trovando :-)

[marine]

Un quesito per post, più quesiti più post ed ognuno con un titolo esplicativo.
Ti chiedo la cortesia di seguire questa regola per mantenere il forum più facilmente navigabile per tutti, grazie della collaborazione.

[xenox75]

hai perfettamente ragione, apro un nuovo post...