Jump to content
antares62

Modificare CSS Template

Recommended Posts

Buongiorno,

ne è passato molto di tempo da quando modificavo i temi utilizzando il Global.css :)
Ora mi trovo a dover gestire un sito con il prestashop nuovo e tutto ovviamente è cambiato.
Ho visto che il maggior indiziato per la modifica di colori, font, ecc sia il Theme.css, ma ho letto da qualche parte che si può usare il Bootstrap 4 per fare modifiche e mi servirebbero delle informazioni al volo su come si installa e come si utilizza, senza che mi possa perdere nella ricerca e nella lettura di cose troppo complicate.

Grazie per l'aiuto

bye

Paolo

Share this post


Link to post
Share on other sites

Ciao,

il tema classic di PS 1.7 si basa su Bootstrap 4 che è un framework CSS (info qui: https://getbootstrap.com/), non c'è nulla da installare, è già incluso in theme.css.

Se vuoi fare delle modifiche ti suggerisco di usare il file custom.css (che viene caricato dopo theme.css) scrivendo semplicemente il codice che ti serve.

Buona giornata,
Federica

Share this post


Link to post
Share on other sites

Grazie Fedesib

E' già incluso, e dove lo trovo? O come lo uso? (si lo so mi hai dato il link...in inglese :) )

ho notato la presenza del custom.css, ma anche questo come lo uso?

Inserisco il codice li dentro e poi come se lo carica il tema classic invece di pescare il theme.css ?

Scusa eh, sono un pò arrugginito.

Share this post


Link to post
Share on other sites

Ciao,

- bootstrap: puoi usarlo direttamente (solo se ti serve ovviamente). Una guida in italiano è qui: https://www.html.it/guide/guida-bootstrap/
- custom.css viene caricato per ultimo (dopo theme.css e tutti gli altri eventuali stili di base) quindi serve a scrivere regole aggiuntive rispetto a quelle di base del tema (che sono in theme.css) o a modificare quelle di base

Buona giornata,
Federica

Share this post


Link to post
Share on other sites

Ragazzi, apprezziamo l'aiuto, ma evitiamo di consigliare pratiche di sviluppo non proprio consone 😊

@antares62 il file custom.css deve essere utilizzato esclusivamente per hotfix, tant'è che nel commento del file trovi proprio scritto che un template dovrebbe essere sempre fornito con il file custom.css vuoto.

Dalla versione 1.7 va utilizzato webpack per poter compilare i file .scss che trovi nella sottocartella _dev del template. Quindi vanno modificati i `sorgenti` che sono suddivisi in vari file dopodiché con webpack viene generato il file finale, il famoso `theme.css`, che poi potrai andare a caricare sul server o sul sito in produzione.

Lascio un link alla documentazione ufficiale perché ovviamente non è un discorso facile da snocciolare qui: https://devdocs.prestashop.com/1.7/themes/getting-started/tools-for-theme-designers/

Share this post


Link to post
Share on other sites

Grazie @marsaldev
per la precisazione.
Si alla fine non è un discorso semplice da seguire, e non più tanta voglia di mettermi li a studiare ogni cosa, anche perchè ho visto che le cose si evolvono con velocità, e starci dietro se non lo fai per mestiere è piuttosto dura.
Semmai mi faccio la copia del theme.css e smanetto quello per avere piccoli aggiustamenti.

Grazie ancora

Bye

Share this post


Link to post
Share on other sites

Assolutamente, anzi è stata una mia precisazione della difficoltà del discorso e vorrei evitare il diffondersi di metodi di sviluppo sbagliati (d'altronde la sezione del forum è per sviluppatori) 😊

Però parlo per esperienza, in realtà anche nella 1.6 c'era la possibilità di compilare i sorgenti dei file CSS, ed era sempre quella la strada da seguire per avere codice pulito da manutenere.

Spesso mi è capitato di vedere modifiche fatte su file in produzione, questo rende quasi impossibile (se non impossibile) un eventuale aggiornamento del template(senza perdere modifiche già effettuate), a differenza di lavorare con sorgenti che puoi confrontare, unire, compilare e 'pushare' in produzione 🙂, oppure grazie alla nuova funzionalità della 1.7 dei template parent/child che permette di aggiornare il template principale senza, o con pochissimi, grattacapi.

Per chi fosse interessato al discorso parent/child lascio la guida alla documentazione: https://devdocs.prestashop.com/1.7/themes/reference/template-inheritance/parent-child-feature/

 

Ad ogni modo, se dovessi avere qualche difficoltà o dubbio, non esitare a cercare nel forum, aprire un post se non trovi la risposta, o magari chiedere aiuto a qualche membro della community 👍

Buona giornata 😉 

Share this post


Link to post
Share on other sites

Ciao @marsaldev,

scusa se mi permetto, ma il mio intervento era volto a dare un consiglio valido per piccole modifiche, non per la creazione da zero di un nuovo tema (per la quale sono pienamente d'accordo con le osservazioni che hai fatto).

Infatti, il commento al file custom.css nella documentazione ufficiale (https://devdocs.prestashop.com/1.7/themes/getting-started/asset-management/) dice: "Empty file loaded at the very end to allow user to override some simple style." e io avevo inteso che l'esigenza fosse esattamente questa "override some simple style".

Buon pomeriggio,
Federica

Share this post


Link to post
Share on other sites

Ciao @fedesib,

mai parlato della creazione da zero di un nuovo tema 🙂, anche il classic può essere 'scaricato' con i sorgenti, e anche piccole modifiche vanno sempre effettuate sui sorgenti, compilati nel file theme.css (e theme.js), e pubblicato in produzione; questi sono i passaggi da fare sempre, quando possibile.

Il file custom.css va utilizzato per hotfix, diciamo per 'emergenze' quando c'è da sistemare qualcosa al volo, dopodiché con la dovuta calma si portano nei sorgenti, si compila, e si pusha 🙂

Comprendo che può essere più complicato, ma spesso poi agenzie/freelance/sviluppatori sono i primi a lamentarsi del lavoro altrui perché si mette sempre la "pezza", e la pezza diventa poi l'abitudine nello sviluppo.

Il cambiamento deve partire da noi sviluppatori 💪

Happy coding 😉

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More