Autore Topic: rendere fluido un template  (Letto 12483 volte)

Offline ariess

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4056
  • Sesso: Maschio
  • uoccinin slomoscion
    • Mostra profilo
    • ricdatalab.net
rendere fluido un template
« il: 11 Nov 2009, 15:19:46 »
ciao,
è possibile modificare un template "fisso" per renderlo fluido?
Il grande fratello ti osserva!! difendi la tua privacy

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12680
  • Sesso: Maschio
    • Mostra profilo
    • tonicopi su google
Re:rendere fluido un template
« Risposta #1 il: 11 Nov 2009, 18:57:14 »
ciao,
è possibile modificare un template "fisso" per renderlo fluido?
Certamente si. Ma talvolta è molto più semplice prendersi un nuovo template fluido e adattare quello piuttosto che adattare un template nato per essere a layout fisso  ;)

Offline mobyclick

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
    • Mostra profilo
    • KWemotions photography
Re:rendere fluido un template
« Risposta #2 il: 12 Nov 2009, 11:24:53 »
Ciao. Mi associo a questo Topic perchè credo di avere lo stesso problema. Avrei bisogno di un template in cui l'immagine di sfondo si adatti alla grandezza della finestra del browser, come ad esempio nel sito www.morlotti.com ma mi accontenterei anche di quello che si vede in www.danone.it. Sareste così gentili da darmi un indirizzo sia nel caso di template da acquistare sia nel caso di template da modificare (ci vorrei provare...). Grazie a tutti!

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12680
  • Sesso: Maschio
    • Mostra profilo
    • tonicopi su google
Re:rendere fluido un template
« Risposta #3 il: 12 Nov 2009, 12:13:46 »
Beh per il sito della Danone è assai semplice. Usa questa immagine:
http://www.danone.it/images/bghome-images/bghome-62.jpg
come sfondo. Centrata con questa regola:
Codice: [Seleziona]
body.home {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/bghome-images/bghome-62.jpg) no-repeat scroll 50% 0;
}
  ;)
L'altro è un oggetto flash che con un javascript assumerà sempre le dimensioni massime del monitor con cui viene aperto. Credo  ;D

Offline mobyclick

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
    • Mostra profilo
    • KWemotions photography
Re:rendere fluido un template
« Risposta #4 il: 17 Nov 2009, 17:53:23 »
Ciao tonicopi e grazie per i preziosi suggerimenti! Sulla base dei tuoi consigli ho provato a cercare un po' in rete ed ho trovato quello che farebbe meglio al caso mio:

http://www.simonedamico.it/2009/10/jquery-supersized-full-screen-background-with-slideshow/

solo che non so come utilizzare tutto questo materiale... qualcuno mi può aiutare con qualche consiglio?

Grazie!

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12680
  • Sesso: Maschio
    • Mostra profilo
    • tonicopi su google
Re:rendere fluido un template
« Risposta #5 il: 17 Nov 2009, 23:06:29 »
Molto bravo quel ragazzo dello script. Adesso provo a contattarlo e gli chiedo se ci fa un plugin per Joomla!  ;)

Offline mobyclick

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
    • Mostra profilo
    • KWemotions photography
Re:rendere fluido un template
« Risposta #6 il: 18 Nov 2009, 09:36:36 »
Sarebbe grandioso  :) :) :) Aspetto con ansia  :) :) :)

Offline dymissy

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
    • Risorse per web designer & developer
Re:rendere fluido un template
« Risposta #7 il: 18 Nov 2009, 10:34:11 »
Salve a tutti ragazzi,
sono l'autore dell'articolo di cui parlate in questo post.

Ho ricevuto ieri sera la richiesta da tonicopi e scrivo qui ciò che ho risposto anche per email. Realizzare un plugin al momento non mi è possibile, troppi impegni e poco tempo per farlo. Posso però fare un piccolo articolo su cui spiego passo passo le azioni da compiere per adattare l'articolo qui linkato a Joomla.

Come ho detto nella mail si potrebbe fare anche per settimana prossima se riesco a liberarmi un paio di orette.

In ogni caso vi farò sapere qualcosa in questo thread.

Buona giornata a tutti! ;)
simonedamico.it - Risorse per web designer & developer

Offline mobyclick

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
    • Mostra profilo
    • KWemotions photography
Re:rendere fluido un template
« Risposta #8 il: 18 Nov 2009, 10:37:30 »
Grazie già da ora per la disponibilità... attendiamo tue notizie su questo post...

Offline dymissy

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
    • Risorse per web designer & developer
Re:rendere fluido un template
« Risposta #9 il: 19 Nov 2009, 20:41:07 »
Ragazzi di nuovo salve a tutti,
torno con una buona e una cattiva notizia.

La cattiva è che il plugin da me presentato nell'articolo non può essere implementato su Joomla a causa del framework su cui è basato. Una sua integrazione è anche possibile ma potrebbe causare problemi con altri plugin per cui sconsiglio a priori il suo utilizzo. Purtroppo mi ero dimenticato che Joomla utilizza Mootools mentre il plugin è realizzato per jQuery.

La buona notizia invece è che comunque una soluzione, anche ben più semplice, esiste ed è facilmente realizzabile. Considerando che sono davvero pochissime righe di codice da utilizzare la scrivo direttamente qui.

Innanzitutto abbiamo bisogno di scaricare un file javascript che potete trovare al seguente indirizzo: fixedbackground

Entrate in ftp sul vostro server e dirigetevi alla seguente cartella:
  /media/system/js/
Inserite al suo interno il file fixedbackground.js che trovate all'interno del file zippato scaricato precedentemente.

Dirigetevi ora alla cartella:
  /templates/__nome_template__/images/
e inseritevi l'immagine che volete utilizzare come sfondo del template.

Nota: __nome_template__ indica il nome del template a cui volete inserire l'immagine di sfondo.


Bene. Siamo già a metà strada. Entriamo ora nell'area di amministrazione di Joomla e andiamo su Estensioni->Gestione Template. Selezioniamo il template che vogliamo modificare e clicchiamo su Modifica in alto a destra. Andiamo ora su Mod.HTML per aprire il sorgente del template.

In questo esempio io ho modificato il template di default, ovvero rhuk_milkyway.
Cerchiamo all'interno del codice la stringa:
</head> e, prima di essa inseriamo il seguente codice:

Codice: [Seleziona]
<script type="text/javascript" src="<?php echo $this->baseurl ?>/media/system/js/fixedbackground.js"></script>

Ora troviamo la stringa:

<body

e scriviamo al suo interno, prima del carattere > di chiusura questo codice:

Codice: [Seleziona]
onload="fixedBackground('<?php echo $this->baseurl ?>/templates/__nome_template__/images/immagine_di_sfondo.jpg');"
stando attenti a inserire correttamente __nome_template__ e immagine_di_sfondo.


Finito! :)

Per il template che ho utilizzato io bisogna fare una piccola precisazione dovuta alla progettazione del template stesso, purtroppo tali modifiche variano da template a template e non posso sapere come sono stati fatti tutti gli altri.

Per chi usa il template rhuk_milkyway bisogna aggiungere un pezzettino di codice prima della stringa </head>:

Codice: [Seleziona]
<style type="text/css">#page_bg,.center {background: transparent;}</style>
In pratica bisogna eliminare lo sfondo della pagina per far visualizzare l'immagine di sfondo. In alcuni template bisognerà fare questa operazione modificando #page_bg e .center con eventuali classi o id a cui è stato dato un colore o un immagine di sfondo.


Ora possiamo salvare tutte le modifiche, uscire dall'area di amministrazione e visualizzare lo sfondo :).

Nella mia prova il risultato è il seguente:




Allego il file index.php del mio template cosi potete scaricarlo e vedere le modifiche effettuate.

Salve a tutti.


Aggiungo una piccola nota. Mi declino da ogni responsabilità per problemi causati dall'utilizzo dello script. Consiglio di fare un backup prima di mettere mano al codice essendo un'azione delicata.

[allegato vecchio più di un anno eliminato automaticamente]
« Ultima modifica: 19 Nov 2009, 21:18:36 da dymissy »
simonedamico.it - Risorse per web designer & developer

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12680
  • Sesso: Maschio
    • Mostra profilo
    • tonicopi su google
Re:rendere fluido un template
« Risposta #10 il: 20 Nov 2009, 00:46:13 »
Grazie al nostro amico Enrico possiamo dire che con grande facilità (le modifiche al codice sono davvero minime e facilissime) potremo d'ora in avanti rendere fluide le immagini di sfondo dei nostri siti! :D

Offline dymissy

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
    • Risorse per web designer & developer
Re:rendere fluido un template
« Risposta #11 il: 20 Nov 2009, 20:09:06 »
Ehm...ciao tonicopi...non so se ti riferivi a me, in questo caso il mio nome è Simone :)
simonedamico.it - Risorse per web designer & developer

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12680
  • Sesso: Maschio
    • Mostra profilo
    • tonicopi su google
Re:rendere fluido un template
« Risposta #12 il: 20 Nov 2009, 22:16:31 »
Ehm...ciao tonicopi...non so se ti riferivi a me, in questo caso il mio nome è Simone :)
Si si proprio a te mi riferivo Simone. Con i maschietti mi capita ancora di confondere i nomi. L'importante è non sbagliare MAI nome con una femmina  ;D
Ancora grazie  e very compliments.
Ho già provato la tua miniguida e devo dire che va alla grande! Dato che ci sono posso chiederti una cosa? Il fixedbackground potrebbe funzionare anche dentro un tag diverso dal body, tipo un div dell'header?

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8919
  • Sesso: Maschio
    • Mostra profilo
    • sito delle prove
Re:rendere fluido un template
« Risposta #13 il: 21 Nov 2009, 15:02:22 »
giorno
avevo gia provato questa modifica tempo fa  trovata in un sito  ma sul mio template non funziona manco se piango in cinese come inserisco il tutto pagina bianca.
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline dymissy

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
    • Risorse per web designer & developer
Re:rendere fluido un template
« Risposta #14 il: 21 Nov 2009, 23:49:58 »
Ehm...ciao tonicopi...non so se ti riferivi a me, in questo caso il mio nome è Simone :)
Si si proprio a te mi riferivo Simone. Con i maschietti mi capita ancora di confondere i nomi. L'importante è non sbagliare MAI nome con una femmina  ;D
Ancora grazie  e very compliments.
Ho già provato la tua miniguida e devo dire che va alla grande! Dato che ci sono posso chiederti una cosa? Il fixedbackground potrebbe funzionare anche dentro un tag diverso dal body, tipo un div dell'header?

Tranquillo, come hai ben detto il problema è non sbagliare mai con le donzelle! :)

Sinceramente non lo so se può funzionare, non ho provato. Anche se sinceramente non vedo grande utilità di usarlo in un header date le ridotte dimensioni in altezza dell'elemento. Difficilmente un header ha dimensioni maggiori di 250px e, in monitor di dimensioni enormi, verrebbe un immagine abominevole. :)

Meglio utilizzare un pattern o un background ripetuto negli header, a meno di lavori particolari!......sempre secondo me! ;)




@conti1
Il tutto dipende dal template che usi e dalla progettazione che è stata fatta del template. Non sempre è possibile effettuare la cosa, soprattutto in layout molto elaborati. Sarebbe da valutare il tipo di template che usi.
simonedamico.it - Risorse per web designer & developer

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8919
  • Sesso: Maschio
    • Mostra profilo
    • sito delle prove
Re:rendere fluido un template
« Risposta #15 il: 22 Nov 2009, 00:30:29 »
ciao clicca sul mondo che lo vedi.
pagina bianca se inserisco il tutto
il template lo fatto io grazie se mi dai una dritta .
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline dymissy

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
    • Risorse per web designer & developer
Re:rendere fluido un template
« Risposta #16 il: 23 Nov 2009, 11:41:31 »
Non capisco come e dove viene inserito lo sfondo ma comunque, scusa se mi permetto, anche tu hai adottato le stesse scelte fatte dal template di default.

Non vedo l'utilità di mettere lo sfondo su un <div> che comunque avrà tutta la dimensione del body. Tanto vale impostarlo al body no? Nel tuo caso il div è #wrapper_bg. Il problema secondo me è li. Non mi sono soffermato molto perchè non ho tempo però sinceramente a occhio non ho ben capito come glielo carichi lo sfondo.

Modificare ora il template mi sembra un pò azzardato. Modifiche in corso d'opera sono complicate e potrebbero portare strascichi. Magari prova in locale prima se proprio vuoi farlo.

Come prima prova toglierei lo sfondo al wrapper_bg e lo metterei al body, magari lo sfondo di una dimensione ridotta per vedere se effettivamente funziona con tale script.
simonedamico.it - Risorse per web designer & developer

Offline mobyclick

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
    • Mostra profilo
    • KWemotions photography
Re:rendere fluido un template
« Risposta #17 il: 23 Nov 2009, 12:02:03 »
Ciao Simone. Grazie per la disponibilità innanzi tutto e ti chiedo scusa se la mia domanda è un po' banale ma la mia conoscenza non è ancora molto vasta... Dunque inserendo le modifiche suggerite non succede nulla! Ovvero la mia pagina resta sempre la stessa. Ho notato che nel tuo allegato alla sezione body c'è del codice in più rispetto all'articolo. Forse manca qualcosa? Io utilizzo il template Fooloo al momento.

Grazie per ogni tuo suggerimento.

Offline mobyclick

  • Nuovo arrivato
  • *
  • Post: 32
  • Sesso: Maschio
    • Mostra profilo
    • KWemotions photography
Re:rendere fluido un template
« Risposta #18 il: 23 Nov 2009, 12:16:29 »
Aggiungo ulteriore commento: ho provato a lavorare con il template che hai usato tu ma senza molto successo. Il risultato é che lo sfondo è bianco. Forse le dimensioni dell'immagine hanno una qualche rilevanza?

Grazie.

Offline dymissy

  • Nuovo arrivato
  • *
  • Post: 7
    • Mostra profilo
    • Risorse per web designer & developer
Re:rendere fluido un template
« Risposta #19 il: 23 Nov 2009, 18:50:33 »
Ciao mobyclick,
non uso molto Joomla e quindi non conosco i template disponibili per tale CMS.

Posso risponderti su quello da me usato in quanto sono sicuro, lo attesta anche l'immagine inserita nell'articolo, che funziona con tale tecnica.

La dimensione dell'immagine sicuramente ha la sua rilevanza. E' ovvio che se usi un'immagine 20x20 non si può pretendere di essere visualizzata benissimo però una dimensione sui 1024x768 è perfetta. Sul fatto che venga visualizzata completamente bianca non saprei dirti da cosa dipende senza vedere il codice. Resta il fatto che, se hai inserito lo script nella giusta posizione e hai sostituito direttamente il file index.php precedente con quello mio e, ovviamente, utilizzato i giusti nomi delle immagini deve funzionare per forza!
simonedamico.it - Risorse per web designer & developer

 

Torna su