mercoledì 7 ottobre 2009

Layout blog, croce e delizia...

Ieri ho passato tutto il giorno al computer (povere chiappe!), perché tra un po' mi chiude Geocities e dovevo approntare il nuovo layout per questo blog, quello che non sapevo se farlo bianco e verde o tutto sull'arancione... ricordate? Alla fine ho scelto, il risultato lo vedrete :)

Bene, prima di tutto devo cercare il template da modificare. Ovviamente non posso certo cercarmene uno bell'e fatto, macché, se non personalizzo ogni cosa muoio.
Voglio un layout che non sia a larghezza fissa ma si adatti alle dimensioni della finestra, in modo che mettendo il browser a tutto schermo si sfrutti meglio lo spazio per scrivere. Avendo un monitor in 16:10, anche con la barra laterale aperta mi restava un sacco di spazio riempito solo da un grigetto uniforme assai triste...

Poi l'immagine di sfondo. Mi piace l'idea di usare la scansione di una carta marmorizzata, una di quelle che avevo preparato per i bigliettini del candy. Il problema è che, con un layout a dimensione variabile, anche lo sfondo deve variare di dimensione, oppure devo trovare il modo di attaccarlo ai quattro bordi... eh già, perché il mio sfondo si vede anche sopra e sotto, mica solo di lato come in altri layout! Allora decido di modificare l'immagine in modo da renderla "ripetibile", cioè in modo che affiancandola tante volte in lungo ed in largo non si veda la giunta ogni tot pixel. Ritaglio la porzione d'immagine che, per via della disposizione delle macchie, mi sembra più adatta, e poi con una serie di copia-incolla, timbro clone, sfumino ed aggeggi vari maschero le giunzioni... Ci è voluto un sacco di tempo, ma ecco qua il risultato:

Questa è solo l'anteprima, clic per aprire l'immagine a dimensione reale. Potete scaricarla ed usarla per i vostri sfondi, layout web o scrap digitali. Per rendela pienamente utilizzabile non ci sono firme o filigrane di sorta, quindi posso solo pregarvi di non venderla spacciandola per vostra (cosa che comunque non credo che succederà!)
Ok, su un sito di scrapbooking digitale ne trovate a migliaia migliori di questa, ma questa l'ho fatta io a mano da cima a fondo, non l'ho mica creata in quattro clic! Se permettete sono orgoglisa di mostrarvela!
Se desiderate la versione stampabile trovate la scansione della carta originale, formato A4 a 300 dpi, cliccando questo link.

Ma il peggio deve ancora venire: voglio mettere l'immagine affiancata come sfondo per l'intestazione.
Blogger non te lo fa fare. Cerco il modo per farlo modificando il codice HTML, ma conosco giusto un po' di HTML "vecchio", di CSS non ci capisco un accidente... ricorro allora a Ladybug, un'estensione per Firefox, per capire dove andare a mettere le mani... e con quel programma riesco a fare le mie modifiche, copio il codice per incollarlo al suo posto nel mio template, e mi accorgo che l'HTML del template che trovo scritto su Blogger non è quello che Ladybug mi faceva vedere!!! Perché??? Beh, ad ogni modo trovo il punto in cui incollare il codice, poi mi accorgo che qualsiasi modifica io tenti di fare tramite gli strumenti di blogger non riesce: ovvio, avevo "fissato" il codice html togliendo ogni riferimento ai CSS, e quindi modificando il CSS tramite blogger non succede nulla! Ma non avendo voglia di incazzarmi oltre, lascio perdere e mi metto a lavorare sullo sfondo.

Visto che lo sfondo sembra uscire bene e comincio a capirci qualcosa nel mio CSS, mi viene l'idea di non mettere affatto un'immagine per l'intestazione del blog, ma di lasciare il titolo su sfondo trasparente in modo che emerga lo sfondo globale della pagina, cioè la carta marmorizzata. L'idea era di fare un colore quasi trasparente, in modo da staccare leggermente rispetto allo sfondo ma senza coprirlo. Il problema è che non tutti i browser poi lo visualizzano correttamente. Internet Explorer per esempio passa dal tutto al niente: per fare una trasparenza parziale, ti rende traslucido non solo lo sfondo, ma anche tutto il contenuto, in questo caso il titolo del blog. È lo stesso problema che avevo riscontrato in altri blog o social network che non uso più: anche le foto nei post mi diventavano traslucide e si vedeva lo sfondo attraverso! Che brutto!!!

In conclusione... ho lavorato una giornata per avere solo lo sfondo! Però sto imparando qualcosina in più di linguaggi informatici (e ho un motivo in più per avercela con la Microsoft) e quindi diciamo che ho avuto un risultato comunque...

6 commenti:

  1. aiuto..mi fa male la testa solo per aver letto quello che hai combinato ieri!anche io quando mi ci metto passo la giornata al piccì!!
    Però il risultato mi piace..non vedo l'ora di vederlo applicato al blog!
    purtroppo non posso darti aiuto con CSS & co. perchè ci capisco poco :(

    RispondiElimina
  2. Ciao Dani, hai provato a cercare qualcosa in questo blog:
    http://creareblog.blogspot.com/
    ??
    Da consigli utili per modificare i template.

    RispondiElimina
  3. @Moni: allora ti senti proprio come me, ma senza aver perso tutto quel tempo :)

    @Manuela: uhm, uhm, interessante... gli butto subito un occhio...

    RispondiElimina
  4. °O° Ma è il blog di Tenebrae!
    Come diceva qualcuno chi si ricorda più chi, "il papà di tutte noi"! E sfido...

    RispondiElimina
  5. Sono una schiappa con codici e modifiche varie quindi non sono riuscita a decifrare quello che hai combinato, non mi resta che attendere curiosa il risultato finale, certa che ci stupirai con effetti speciali!!!
    Alessandra

    RispondiElimina
  6. Son contenta che tu sia riuscita a trovare il lato positivo in tutto quel marasma col pc.. son curiosa di vedere il tuo nuovo layout... a quando?

    RispondiElimina