Modifica HTML - CSS

Ritratto di Vanni

Ci sono svariati temi da scegliere per creare un sito che si adatti alle nostre esigenze, ma anche se abbiamo trovato il tema che fa per noi, spesso si devono fare alcune modifiche a livello grafico per ottimizzarlo a nostro piacere. Si puo' inserire nel body della pagina un comando HTML (es. liste, titoli, immagini ecc..), un comando CSS in linea (es. colori, testo corsivo, grassetto ecc..), un piccolo comando in javascript (es. pulsante che apre un banner) o abilitando il relativo modulo si puo' inserire uno script in PHP. Per fare questo basta inserire "Full HTML" mentre si sta creando il contenuto della pagina, tranne che per il PHP per cui si deve scegliere "PHP Code"

modifica grafica con codici HTML e CSS foto 1

Se, invece, si vogliono modificare proprio le impostazioni del tema che si sta usando e non bastano i cambiamenti che si possono apportare tramite la pagina "Impostazioni" del tema, allora, bisogna andare a modificare proprio i fogli di stile con cui e' stato costruito...

Per chi non ha nessuna conoscenza di comandi CSS invito a leggere questa pagina che descrive il modulo Sweaver. Per chi vuole modificare l'aspetto di alcuni blocchi e lasciare inalterati gli altri, invito a leggere questa pagina che descrive il modulo Block Theme. Per chi vuole modificare l'aspetto solamente di alcune pagine senza toccare i fogli di stile del tema originale invito a leggere CCS Injector o Add to Head.

Esempio modifica aspetto tramite HTML e CSS

(io uso come browser chrome, ma si puo' fare con qualsiasi altro)

( E' consigliata la creazione di un sottotema invece di andare a mettere mano ai fogli di stile originali. Volendo si può costruire un tema personalizzato)

Questo era il problema: Il nome di questo sito "IL MIO DRUPAL 7" inizialmente veniva scritto su 2 righe, ho voluto apportare una modifica per farlo scrivere su un'unica riga.

  • attivare il comando strumenti-strumenti per sviluppatori del browser (si apre una finetra sul fondo della pagina)

modifica grafica con codici HTML e CSS foto 2

  • Con il mouse si scorre sulle righe di sorgente della pagina e si evidenzia nella parte superiore dello schermo la parte di pagina interessata
  • Nel caso dell'esempio ho aperto (tramite triangolino laterale sinistro) i vari sottogruppi della pagina, finche' non si e' evidenziato solo il "Titolo"
modifica grafica con codici HTML e CSS foto 3
  • cliccare sul tag che ci interessa e poi spostarsi sulla finestra a destra
  • passaando il mouse sopra ai valori dei CSS ci apparira' la "strada" che dobbiamo fare per recuperare il file che dobbiamo modificare

modifica grafica con codici HTML e CSS foto 4

  • In questo caso era themes/sky/css/page.css
  • Si apre il file con un editor di testo (ad es. notepad) e si apporta la modifica voluta e poi si ricarica la pagina del sito
  • Nel mio caso ho sostituito il comando "max-width= 40%" con 60% e ho cosi' ottenuto il nome del sito tutto sulla stessa riga

modifica grafica con codici HTML e CSS foto 5

Commenti

Ritratto di Vanni

Salve Tommy_92, dipende da

Salve Tommy_92, dipende da cosa devi fare con quell'immagine. Comunque, di primo acchito mi vengono in mente questi moduli:

  • se devi inserire immagini tramite CSS puoi usare il modulo Menù Attributes, dare una classe al link e modificare il foglio di stile (ne parlo nella pagina dei moduli per menu)
  • se devi inserire immagini/video puoi usare Mega Menù
  • se devi inserire icone puoi usare Menù Icon

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
8 + 1 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.