Modifica grafica di un sito

18 contenuti / 0 new
Ultimo contenuto
Modifica grafica di un sito

Gentile community,
ho necessità di cambiare nel seguente sito: http://www.artfixlondon.com/ in Drupal, ovviamente la modifica la faccio in locale, quei tre cerchi che vedete e spostarli qualche centimetro sotto in modo che le future foto siano visibili nettamente. Si tratta di qualcosa che gestisco indipendentemente come amministratore (moduli, menù ecc.) o di semplici css? Potreste dirmi cosa e come modificare?
Grazie.

Drupal Version:

Devi gestirli via css.

Nello specifico devi modificare i margini di #block-panels-mini-front-page-panel {.... } ed eventualmente andare ad aggiustare qualche altro elemento che potrebbe di conseguenza sballare.

Il mio consiglio è di installare l'estensione firebug per firefox e con questo ispezionare gli elementi che intendi modificare così da capire quali selettori css devi modificare. Inoltre ti permette di fare prove live al volo così da capire esattamente quale regola devi modificare\aggiungere e con che valore.

PS: noto che il sito online ha giustamente un sistema di caching e compressione attivi, nella tua versione in locale disabilita tutto (dovrebbe trovarsi tutto in Prestazioni) altrimenti ad ogni modifica devi andare necessariamente a svuotare la cache di Drupal.

Buongiorno :)
Grazie del tuo intervento e nello specifico dell'ultima informazione.
Ho installato firebug, e sto iniziando ad ispezionare cambiando relativi valori, cambia il raggio dei cerchi, le indicazioni all'interno ma non si muovono di un centimetro ad ogni modifica; cercherò di fare molta attenzione.

Un'altra cosa, non è che mi sia necessario illustrator e gestirle con tale programma queste entità, o come hai già specificato, intervengo solo sui CSS. Solo una puntualizzazione, porta pazienza.

... aggiungo:
ma i CSS che riferiscono al sito in locale quali sono? Perché trovo nella root più voci con estensione .css e cartelle con CSS.
Nel senso individuata l'area di intervento con bugfix, dove intervengo poi fisicamente in Drupal, quali sono i file .css interessati?

Grazie

Simon wrote:

Ho installato firebug, e sto iniziando ad ispezionare cambiando relativi valori, cambia il raggio dei cerchi, le indicazioni all'interno ma non si muovono di un centimetro ad ogni modifica; cercherò di fare molta attenzione.

All'interno di questo selettore #block-panels-mini-front-page-panel c'è un margin-top con valore negativo, portalo a 0 o altro valore, vedi tu.

Simon wrote:

Un'altra cosa, non è che mi sia necessario illustrator e gestirle con tale programma queste entità, o come hai già specificato, intervengo solo sui CSS. Solo una puntualizzazione, porta pazienza.

[/quote]
No, non serve.

Simon wrote:
... aggiungo:
ma i CSS che riferiscono al sito in locale quali sono? Perché trovo nella root più voci con estensione .css e cartelle con CSS.
Nel senso individuata l'area di intervento con bugfix, dove intervengo poi fisicamente in Drupal, quali sono i file .css interessati?
Grazie

I CSS li trovi all'interno della cartella del tema che stai utilizzando per il sito, dando una veloce occhiata al sito che hai linkato dovresti trovare tutto quello che ti serve in sites/all/themes/artfix

Se come ti ho spiegato prima hai disattivato il caching e\o compressione di Drupal, Firebug ti individuerà il CSS esatto cui un dato selettore fa riferimento.

Allora insieme ad un amico sono riuscito a capire cosa modificare:
#block-panels-mini-front-page-panel
margin-top: -180px;

Ora se io lo modifico su google con inspect o firefox con bugfix la riga disabilitandola o cancellandola, non succede nulla mentre al mio amico quei cerchi vanno giù come mai?
Colpa della cache? Ho Drupal in inglese non riesco a trovare Prestazioni-> Performance o altro nel menu.

Per disabilitare devi andare qui:
http://tuositoinlocale/admin/config/development/performance e disabilitare ogni voce che incontri.

Quello è il selettore che devi modificare, pure io ho fatto una prova sul sito che mi hai linkato e funziona regolarmente.

Prova a disabilitare la cache di Drupal come ti ho indicato e per sicurezza dai pure una pulita alla cache di Firefox e poi aggiorna la pagina.

In ogni caso, vatti a cercare il css che contiene quel selettore (se usi il trova del tuo editor di testo dovresti far prima), nel percorso che ti ho indicato nel post precedente, trova il parametro margin-top: -180px, cambia il valore a 0 o come preferisci e salvi il css. Aggiorna la pagina e vedi che succede.

Risolto ma a differenza di te e del mio amico, sono dovuto intervenire sull'altra classe quella che ha il margine a -100 come mai azzerando quest'ultima a funzionato? E non con margin-top -180px.
Ho settato qualcosa di sbagliato?
Grazie e grazie comunque dell'importante supporto che mi dai.
Simone

Ho dato una sguardo più dettagliato al codice è noto che che vengono usati dei mediaquery (per farla breve dei filtri per dare regole diverse ai selettori CSS in base alle dimensioni del dispositivo), quindi è possibile che stiamo guardando il sito con due risoluzioni\dimensioni diverse.

Prova a ridimensionare il browser e vedi cosa succede.

Qui trovi approfondimenti su cosa sono i media query:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/...

Molte grazie della info, ma quando modificherò il sito influirà la scelta di una o l'altra opzione?
forse bisognerà fare del testing.

Potreste consigliarmi una guida online o da scaricare per prendere dimestichezza poi con Drupal, intendo una che magari tenete di riferimento.

Grazie.

Simon wrote:
Molte grazie della info, ma quando modificherò il sito influirà la scelta di una o l'altra opzione?
forse bisognerà fare del testing.

Non ho ben capito cosa intendi.
Comunque è ovvio che c'è bisogno del testing.

Simon wrote:

Potreste consigliarmi una guida online o da scaricare per prendere dimestichezza poi con Drupal, intendo una che magari tenete di riferimento.

Grazie.


Personalmente io in Italiano online conosco poco, su amazon esiste un un buon libro su D7 per iniziare.
In Inglese trovi molto, soprattutto l'handbook di Drupal è molto completo: https://www.drupal.org/documentation
Interessante pure http://www.wdtutorials.com/

Ma trovi pure parecchia roba su youtube, soprattutto:
https://www.youtube.com/channel/UCwY8NJJnQtMs1NBbOTvHdmQ
https://www.youtube.com/user/Lullabot

Qui trovi pure un PDF con risorse che possono tornarti utili.

gp][quote=Simon wrote:
Molte grazie della info, ma quando modificherò il sito influirà la scelta di una o l'altra opzione?
forse bisognerà fare del testing.

Non ho ben capito cosa intendi.
Comunque è ovvio che c'è bisogno del testing.

Intendevo la scelta del margin tra quello a -180px e l'altro a -100.
Se influisce il cambio di uno rispetto all'altro. Ovviamente test.

Molte grazie dei riferimenti inizierò a spulciarmeli appena posso.

Buon fine settimana, dovrei non dare noie per il we :)
Grazie ancora a tutti.

Buonasera,
la domanda è semplice, dovrei fare ora in modo che il sito linkato inizialmente http://www.artfixlondon.com/ sia trasformato così:
http://uploadpie.com/foYuX

Chiedo, a spanne è tutta una questione di CSS o dovrei intervenire con Drupal?

Grazie

Non so se ho capito bene la tua richiesta ma i CSS in questo caso non centrano nulla, devi semplicemente copiare il tutto nella nuova posizione e andare ad aggiustare la configurazione di Drupal (nome del sito ed eventuali impostazioni del filesystem).

come come fammi capire, ma prima non avevamo spostato quei cerchi in basso.
Ora chiedono un menù più piccolo sulla destra e qualcosina altra, sono impostazioni di drupal o dei CSS come in precedenza.
Per esempio la pagina 'Support' che si trova in basso nella Home, dovrebbe figurare così:
http://uploadpie.com/ImFm5

Ho anche dei file in illustrator appartenenti al sito, le quali forse sono le maschere, sono quelle che devo modificare e poi introdurre in drupal, i CSS (come in precedenza per quei tre cerchi) o delle entità (moduli) in Drupal?
Potreste spiegarmi cortesemente?
Grazie

Scusa ma non avevo assolutamente capito prima. :-)

Beh, non è semplice spiegarti in due parole.

A spanne posso dirti che l'aspetto grafico dipende dai CSS (posizione e dimensione dei cerchi, font, dimensione font, aspetto menu, etc...), i contenuti invece da Drupal (ma non so cosa hanno usato).

I file di Illustrator credo siano dei mockup o al più dei loghi\immagini da esportare ed incorporare poi sul sito tramite CSS o Drupal stesso (dipende anche qui da diversi fattori... ma se si tratta di layout al 90% via CSS).

Ovviamente devi anche capire che non conoscendo la struttura interna del sito (moduli, viste e tutto le n-mila possibili configurazioni possibili) mi risulta impossibile dare dei suggerimenti specifici.

Al massimo posso darti dei suggerimenti per risolvere singole situazioni che ti si propongono di volta in volta.

Molte grazie, se non sarò una noia posterò qui i problemi che incontrerò, se c'è modo di passarti il tutto lo farei subito subito :) o al limite posso mandarti gli screenshot interni quando entro da amministratore in base al problema da risolvere.
Davvero gentile da parte tua questa disponibilità.
Quindi ci sentiamo.

Buonanotte,
Simone