1 settembre 2014

Template Tamarillo per WebSite X5 Evolution 10

In Rete si possono trovare molti template HTML&CSS utilizzabili gratuitamente.
Noi abbiamo provato ad adattare il template Tamarillo, trovato su templatemo.com, per WebSite X5 Evolution 10 (10.1.10.54).

Per quanto possibile abbiamo usato gli strumenti che WebSite mette a disposizione e, grazie a un po' di righe di codice CSS e JavaScript fatti in casa, abbiamo cercato di renderlo il più simile possibile all'originale e fruibile in modo funzionale anche per dispositivi mobili. Il resto è stato integrato con l'oggetto HTML e Widgets.

A differenza dall'originale il template ottenuto non è responsive.

Il template originale è rilasciato sotto licenza Creative Commons 4.0. Per quanto riguarda il nostro adattamento leggi i termini di utilizzo.

DEMO


La sezione blog è un'anteprima degli ultimi articoli inseriti attraverso il blog del programma: i link agli articoli funzioneranno solo dopo aver esportato il sito online (ricordarsi di cambiare l'indirizzo del sito al passo 1).

Per personalizzazioni della struttura della pagina è necessario consultare i file custom.css, custom.js e customHome.js: tutti i blocchi di codice sono commentati per permettere una facile lettura ed eventuale modifica dei selettori.

Qui il file .iwzip da scaricare: DOWNLOAD

Per problemi di visualizzazione o difficoltà incontrate nelle personalizzazioni, contattateci a questo indirizzo quellidelcucuzzolo@altervista.org oppure attraverso i commenti di questo post.


Post correlati:


16 commenti:

  1. Ciao Ma e ciao Si volevo siccome non riesco a modificare il colore della vs barra di navigazione in html potreste cortesemente spiegarmi come fare. grazie
    Mario

    RispondiElimina
    Risposte
    1. Ciao Mario, le modifiche relative al menu sono presenti nel file custom.css

      Nelle righe di codice successive al commento /*-- testo menu principale -- */ puoi modificare i colori del menu generato dal programma cambiando il valore esadecimale #9E2630 con quello da te scelto.
      Sempre nello stesso file, dopo il commento /* -- header mobile menu -- */ trovi gli altri valori esadecimali relativi al menu mobile.

      Elimina
  2. ok grazie mille rei ipergentile

    RispondiElimina
  3. Ciao sono ancora io Mario, mi spiace rompere la pace sul cucuzzolo, ma avrei un altro problemino. Quando cambio le immagini della main slide, sulla nuova immagine non mi appaiono i puntini per l'avanzamento manuale e nemmeno più il bottone a destra. forse sbaglio qualcosa.
    grazie ancora e complimenti per l'ottimo lavoro.

    RispondiElimina
    Risposte
    1. Ciao Mario,
      probabilmente stai inserendo delle immagini con altezza superiore rispetto a quelle utilizzate nel template. Aumenta l'altezza dell'oggetto HTML oppure ridimensiona le tue immagini e vedrai le parti ora nascoste.

      Elimina
  4. Ciao Maesi.
    Un grande piacere, ho visto il vostro lavoro e mi sento favoloso.
    Ho una preoccupazione. Come fare un link esterno a un altro sito web o altra pagina interna del sito ???
    Grazie e complimenti !!
    Eduardo

    RispondiElimina
    Risposte
    1. Ciao Eduardo, grazie per il tuo messaggio :)

      Non è semplice rispondere alla tua domanda in un commento, quindi abbiamo appena scritto un post dove troverai le indicazioni su come procedere.

      Troverai il link in fondo a questo articolo (Post correlati).

      Elimina
    2. Salve, è possibile portare il tamarillo ad una larghezza pari a 1960px?
      ho provato in website ma il menu hamburger diventa non piu cliccabile e i contenuti non sono mostrati centralmente ma sono allineati tutti a sinistra....riusciremo in questa impresa? VI RINGRAZIO ANTICIPATAMENTE 1000 VOLTE ^_^

      Elimina
  5. Ciao Unknown (Stefano), con la versione 10 si può arrivare ad una larghezza massima di 1920px

    A parte il fatto che una tale risoluzione per un template fisso ci sembra eccessiva, non abbiamo riscontrato i problemi da te descritti.

    Se vuoi/puoi posta un link di riferimento qui o via mail: quellidelcucuzzolo@altervista.org

    RispondiElimina
  6. Salve,
    grazie del vostro prezioso aiuto: complimenti!
    Volevo sapere qual è il file Javascript per visualizzare le anteprime degli articoli del blog nella homepage, per poterlo implementare in un altro progetto.
    Grazie.

    RispondiElimina
  7. Ma e Si prima di tutto grazie per il vostro incredibile lavoro. Siete dei Grandi!!
    Chiedo un supporto tecnico.
    Inserendo qualche contenuto descrittivo in più nella sezione ABOUT, si è spostata la sottile linea grigia presente tra le varie sezione (prima di project, prima di blog, ecc...) ed adesso risulta spostata all'interno dei contenuti e non prima di ogni sezione. Come devo fare per regolarla nella posizione che voglio?

    RispondiElimina
    Risposte
    1. Ciao Riccardo, grazie per il commento.

      Se ti stai effettivamente riferendo al template Tamarillo per la versione 10, quella riga è ottenuta impostando il bordo superiore nello stile della cella degli oggetti testo interessati.
      Controlla da programma tale impostazione.

      Elimina
    2. grazie per la pronta risposta, confermo che si tratta di tamarillo ma su professional 12.
      purtroppo le indicazioni da te fornite non mi permettono di modificare la posizione della linea.

      http://world-permaculture.org/home.html#

      all'indirizzo qui sopra ho caricato il sito, dalla quale puoi vedere il problema. La sottile liena grigia non compare più prima delle varie sezioni (Projects & services, blog, ecc...), ma all'interno delle sezioni stesse (nel caso di project & services), o dopo il titolo (nelle altre sezioni)...
      come posso farla tornare nella posizione originaria?
      grazie ancora del prezioso supporto.

      Elimina
    3. Ciao Riccardo,
      l'indicazione che ti abbiamo dato vale per il template Tamarillo versione WebSite X5 10.
      Se tu avessi commentato l'articolo giusto, avresti ricevuto questa risposta: per cambiare posizione alla riga devi modificare le regole CSS che trovi nel file customHome.css (cerca il commento /* -- bordo e sfondo righe -- */ ).
      La prossima volta ti preghiamo di postare nell'articolo giusto, grazie.

      Elimina
    4. Mi scuso per l'errore e ringrazio immensamente per il supporto.

      Elimina