Massimo P.

User

Creare siti Responsivi con Website x5...

Autor: Massimo P.

Visitado 2361, Followers 2, Compartido 0

Tags: responsivo,responvivo,sito,website,website x5 professional 11

Usando le pseudoclassi ho creato una sorta di reset per Website x5 per farlo diventare responsivo. Il codice funziona abbastanza bene ma non è perfetto e va migliorato, quindi se qualcuno vuole dare il suo contributo ben venga.

Per testarlo suggerisco di procedere così:

1) apri un nuovo progetto e imposta il template base (punto 1>scelta delò modello>nuovo modello)

2) Inserire il codice di responsivizzazione (riportato sotto) nella HEAD della pagina che volete creare (o se èpreferite nella HEAD di tutte le pagine al punto 4)

3) in creazione della pagina create una griglia con 12 colonne (agendo sul tasto aggiungi colonna)

4) iniziate ad inserire i vari elementi nella pagina

ATTENZIONE: se inserite più elementi in una riga dovete specificare quanto spazio in percentuale deve occupare ogni oggetto presente nella riga ossia dovete aggiungere una linea di codice nella HRAD della pagina specificando la % di larghezza del singolo elemento presente in una determinata riga.

Ad esempio:

[code]

#imContent div[style^="width:"]:nth-of-type(3) div[style^="float:"]:nth-of-type(2) {width:60% !important; float:left !important; } /* richiama la terza riga e il 2° elemento in essa presente ("nth-child(2)") e gli assegna una larghezza del 60% */

[/code]

Ricordate che ogni spazio vuoto lasciato tra gli oggetti inseriti in una riga, è considerato un “elemento” a se e va conteggiato come tale specificando la sua larghezza % come tutti gli altri oggetti.

PROBLEMI RISCONTARTI:

- la galelria immagini non viene responsivizzata (forse è meglio usare un altro plug-in responsivo per le gallerie immagini inserendo in un “oggetto html”)

- allineamenti degli oggetti non sempre perfetti (occorrerebbe migliorare il codice da qualche parte)

CODICE di Responsivizzazione:

[code]

<!-- Elementi che compongono il flusso normale della pagina (ossia elementi statici e relativi):
- "html" è la pagina intera cioè la finestra del browser (ossia lo sfondo)
- "imPage" è l'elemento contenitore di tutti gli altri facenti parte del flusso normale
- "imHeader"(ossia intestazione), "imContent" e "imFooter"(ossia piè pagina), sono gli elementi contenuti che si susseguono

Elementi absolute staccati dagli altri (si rapportano all'html ossia finestra del browser):
- "imHeaderBg" è lo sfondo dell'Header (ossia sfondo intestazione)
- "imMnMn" è il menù
- "imContentGraphics" è lo sfondo dei contenuti (tutti i contenuti)
- "imFooterBg" è lo sfondo dell Footer (ossia sfondo piè pagina)

-->

<style>

html, body {height:100%; width:100%; margin: 0px, padding: 0px; }
html { } /* Eventuali personalizzazioni */
body { margin: 0 auto !important; }/* Eventuali personalizzazioni */

* {margin: 0 auto !important; }

#imPage {min-height:100%; width:100%; margin: 0px; padding: 0px; z-index:1000003 !important; }
#imHeader, #imHeaderBg { width:100%; margin: 0px 0px; left: 0; top: 0; }

#imMnMn {position: absolute; top: 150px; margin: 0xp; padding:0px; width: 100%; }
#imMnMn > ul { text-align: left; }
#imMnMn li {display: inline; }

#imContent {
height:90%;
min-height:200px;
width:100%;
margin:0;
margin-top: 40px;
padding:0px;
overflow:hidden;
}
#imContentGraphics { position:absolute; top:190; left:0; width:100%; }

#imFooter, #imFooterBg {
height:10%;
width:100%;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}

#imFooPad { } /* Mappa del sito di fine pagina */

img, embed, object, video { max-width: 100%; } /* Per evitare lo sbordamento di immagini, video... dal loro box contenitore */

</style>

/* RICHIAMO di RIGHE e COLONNE SPECIFICHE QUANDO SI INSERISCONO PIù ELEMENTI IN UNA RIGA:
#imContent div[style^="width:"]:nth-of-type(2) { width:100% !important; } richiama la 2° riga (ossia il secondo figlio di quel tipo (riga)
#imContent div[style^="width:"]:nth-of-type(1) div[style^="float:"]:nth-of-type(3) {width:100% !important; float:left !important; } /* richiama la 3° colonna della prima riga("nth-child(2)")
*/
</style>

div[id^="imHTMLObject_"] {width:100% !important; } /* elementi contenitori oggetti HTML */

div[id^="imTextObject_"] {width:100% !important; } /* elementi style contenitori TESTO */
div[id^="imTableObject_"] {width:100% !important; } /* elementi style contenitori TABELLA */
div[class^="text-container"] {width:100% !important; } /* (eventuali schede) contenitori dei contenitori SCHEDE */
div[class^="text-tab-content"] {width:100% !important; } /* (eventuali schede) elementi contenitori SCHEDE */
div[class^="text-inner"] {width:98% !important; } /* elementi testi oggetti testo */
table { width:100% !important; } /* elementi tabella (ognuna identificata con un id ) */
tr { } /* righe tabella (non identificate univocamente, usare le pseudoclassi strutturali per richiamrle singolarmente: ad ES. "tr:nth-child(4) td {...}") */
td { } /* colonne tabella (identificate complessivamente con la classe "imVc" ma non identificate univocamente (vale il discorso fatto sopra per il richiamo singolare delle righe) */

div[id^="imObjectImage"] {width:100% !important; } /* elementi contenitori oggetti IMMAGINE */
img[id^="imObjectImage"] {width:100% !important; height: auto !important;} /* IMMAGINI contenute nel oggetto contenitore */

div[id^="imObjectGallery"] {width:100% !important; } /* elementi contenitori oggetti GALLERY */

div[id^="imObjectVideo"] {width:100% !important; } /* elementi contenitori oggetti VIDEO */

*[id^="imObjectForm"] {width:100% !important; } /* elementi contenitori oggetto FORM */
*[id^="imObjectForm"] fieldset.first div {width:99% !important; } /* elementi contenuti nell' oggetto FORM */

div[id^="imObjectSocialNetwork"] {width:100% !important; } /* elementi contenitori oggetto SOCIAL */

div[id^="GuestBookObject"] {width:100% !important; } /* elementi contenitori oggetto GUESTBOOK */

div[id^="imObjectMap"] {width:100% !important; } /* elementi contenitori oggetto MAPPA */

div[id^="imObjectFlash"] {width:100% !important; } /* elementi contenitori oggetto ANIMAZIONE FLASH */

div[id^="imProductList"] {width:100% !important; } /* elementi contenitori oggetto CARRELLO PRODOTTI */

div[id^="dynObj"] {width:100% !important; } /* elementi contenitori OGGETTO DINAMICO */
div[id^="dynamic-object-text"] {width:100% !important; } /* elementi TESTO OGGETTO DINAMICO */

</style>

<!--
ESEMPIO di stili per operare nei singoli elementi del contenuto della pagina (richiamandoli col proprio id)

div[style="float: left; width: 320px;"] { width:31.3% !important; margin:1%; }
#imCell_2 { width:100% !important; }
#imCellStyle_2 { width:100% !important; }
#imCellStyle_2 .text-inner { width:88% !important; }
#imCell_2 img{ width:100% !important; height: auto !important; }

#imCell_3 { width:100% !important }
#imCellStyle_3 { width:100% !important }
#imCellStyle_3 .text-inner { width:88% !important; }
#imCell_3 img{ width:100% !important; height: auto !important; }

#imCell_4 { width:100% !important }
#imCellStyle_4 { width:100% !important }
#imCellStyle_4 .text-inner { width:88% !important; }
#imCell_4 img{ width:100% !important; height: auto !important; }
</style>

-->

[/code]

Publicado en 25/08/2015 12:17:19

11 RESPUESTAS