Jump to content

Modificare CSS Template


antares62

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

Link to comment
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

Link to comment
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.

Link to comment
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

Link to comment
Share on other sites

  • 2 weeks later...

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/

Link to comment
Share on other sites

  • marsaldev changed the title to Modificare CSS Template

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

Link to comment
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 😉 

Link to comment
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

Link to comment
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
Link to comment
Share on other sites

  • 6 months later...

Scusate Ragazzi, 

io avrei bisogno solamente di cambiare il colore celeste del template standard.. per intenderci quello che sta attorno alla voce carrello in alto a destra, lo sfondo della parola NUOVO che esce sui featured products e i vari pulsanti in generale dove compare questo azzurro o altre tonalità.... 

Dovrei cambiare anche il font generale standard del sito... 

Dove devo andare a modificare per non impazzire? :) Grazie mille!

Link to comment
Share on other sites

Ciao Ragazzi,

sto cercando di modificare i colori e il font del tema standard... un modo semplice per non dover mettere mano ai css in modo manuale? Oppure se in modo manuale qual'è la sintassi del custom.css ? Non sono molto pratico. Grazie mille

Link to comment
Share on other sites

Ciao,

On 3/31/2020 at 2:43 PM, RawMind said:

un modo semplice per non dover mettere mano ai css in modo manuale

per quel che ne so io non c'è: se vuoi cambiare colori e/o fonts devi modificare il CSS.

On 3/31/2020 at 2:43 PM, RawMind said:

qual'è la sintassi del custom.css ?

Direi che è un po' complicato spiegarti il CSS in una risposta sul forum ...

Per modificare il font di tutto il tema la regola generale è:

body {
      font-family: /*font che vuoi*/
}

Ovviamente devi aver preventivamente caricato il font che desideri applicare, in locale o da Google Fonts per esempio. Non è detto però che con solo questa regola tutti a tutti i testi venga applicato il nuovo font, ci potrebbero però essere altre regole CSS, più specifiche, che la sovrascrivono.

Buona giornata,
Federica

Link to comment
Share on other sites

  • 4 months later...
On 9/13/2019 at 10:52 AM, marsaldev said:

Dalla versione 1.7 va utilizzato webpack per poter compilare i file .scss che trovi nella sottocartella _dev del template.

Chiedo scusa per l'intrusione, sto iniziando da autodidatta con PS 1.7, tramite file manager Aruba la cartella _dev neanche la vedo....è grave? 😄

Grazie

Link to comment
Share on other sites

  • 3 months later...
On 8/16/2020 at 3:59 PM, ClaudioLatorre said:

Chiedo scusa per l'intrusione, sto iniziando da autodidatta con PS 1.7, tramite file manager Aruba la cartella _dev neanche la vedo....è grave? 😄

Grazie

Ciao Claudio, perdonami se ti rispondo adesso.

Gli installer dei provider non installano la versione di GitHub, ma una versione "pacchettizzata" senza cartelle di sviluppo e test, quella cartella la trovi solo scaricando il software da git 😊 

Link to comment
Share on other sites

  • 2 years later...

Ciao a tutti a proposito del file Themes.css , io lo modifico come mi piace e lo salvo e tutto va bene, oggi mi trovo che invece di slavare il file themes.css è stato rinominato e si trova nella cartella cache, perchè come faccio svuotare la cache .

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...