Click per tornare alla pagina Home
I Forum di GiapCMS
Consulta i nostri Forum, troverai gli interventi e le soluzioni dei nostri esperti.
Partecipa anche tu alle discussioni, indicando le tue personali scoperte e trucchi.
Torna alla Home Page
Cerca nel forum:
Categoria:
N.B. Per poter intervenire nel forum devi prima registrarti oppure effettuare il login.
Forum > Stili > Come faccio a creare una semplice linea orizzontale
RisoltoCome faccio a creare una semplice linea orizzontale

Giove8808/09/2011
Non riesco a trovare nessun tool che mi permetta di tracciare una semplice linea orizzontale, possibilmente di lunghezza variabile tramite una operazione di trascinamento.

Santori12/11/2011
Ciao Giove88, l'operazione da te richiesta non è espletabile con un tool apposito, come ad esempio nei programmi di grafica dov'è presente lo strumento "linea".
Nel caso di GiapCMS, l'operazione può essere fatta utilizzando una HtmlBox, alla quale assegnerai un modello apposito, il cui stile grafico è finalizzato esclusivamente al tracciamento di una linea.
Vediamo, passo-passo, come fare questa operazione:
1) Dalla toolbar dei moduli clicca sulla seconda icona (HtmlBox), facendo così aprire la dialog delle proprietà di una nuova HtmlBox.
2) Clicca sulla scheda "Proprietà modello" e quindi sul pulsante "+ Modello", in modo da creare un nuovo modello.
3) Dai un nome a questo nuovo modello (esempio "Linea orizzontale"), assegna la zona di validità (consiglio "Qualsiasi") ed abilita sia "Ridimensionamento" che "Trascinamento", quindi fai click sul pulsantino "New..." posto alla destra del campo "Stile".
4) Apparirà la toolbar "Style Editor". In questa clicca sulla icona con il "+" posta accanto a "Nome Stile", assegnando un nome (ad esempio "linea orizzontale") ed una classe (ad esempio ".lineahorz") a questo nuovo stile. Fai attenzione a scrivere il punto iniziale nel campo "classe", questa è una regola del Cascading Style Sheet, ed è tutto quello che dovrai conoscere di questo linguaggio. Quindi clicca sul pulsantino con la "v" per salvare questo nuovo stile.
5) Clicca sulla linguetta verde riportante la dicitura "Box" ed imposta il bordo superiore, come da screenshot sotto riportato. Ovviamente sei libera di assegnare colore e spessore che ritieni più giusti per il tuo progetto.
6) Clicca sul pulsante "Applica" in basso a destra. Questo nuovo stile verrà riportato all'interno del campo "Stile" nella dialog che abbiamo lasciato aperta al punto 3.
7) Clicca sul pulsante "Salva" in questa dialog, avendo prima tolto la spunta sulla opzione "Chiudi finestra dopo aver salvato".
8) Torna sulla scheda "Proprietà" della HtmlBox e seleziona il modello appena creato (Linea orizzontale).
9) Passa alla scheda "Contenuto", nella quale dovresti già vedere la linea. Inserisci uno spazio, visto che una HtmlBox non può risultare vuota.
10) Passa alla scheda "Posizione e Dimensioni" ed imposta Larghezza attuale pari a 100 e altezza pari a 10, valori che potrai poi modificare con operazioni di resize direttamente nell'editor. Clicca sul pulsante "Salva", reimpostando la spunta sulla opzione "Chiudi finestra dopo aver salvato".
 
A questo punto dovresti avere una nuova HtmlBox in pagina, che però è disposta nell'angolo in alto a sinistra della zona attiva, prendila con il puntatore del mouse e trascinala dove vuoi, potendo anche ridimensionarla in modo da avere la linea lunga quanto desideri.

Cordiali Saluti
Paola Santori
GiapCMS team

Giove8808/09/2011
Quindi se volessi tracciare linee di colore differente dovrò creare molti modelli, ciascuno con uno stile che utilizza un differente colore?
Mi sembra un pò contorto, non vi pare?

Santori12/11/2011
Si, se vuoi usare il modello devi creare un modello per ogni colore.
Il modello ha un senso, però, se pensi di riutilizzare tale linea in vari punti del sito, cosa che non ti costringerebbe a riprogrammare la linea ogni volta e, soprattutto, ti permetterebbe di variarne lo stile in qualsiasi momento sull'intero sito (colore, spessore, tipo di linea).

Esiste comunque una seconda possibilità per poter creare una linea in maniera più veloce, ma questa procedura richiede la conoscenza, sia pur minima, del linguaggio cascading style sheet.
Si tratta di inserire nel contenuto della HtmlBox, il codice css che permette di tracciare la linea. In pratica si deve accedere al contenuto "Html" dell'editor di contenuto ed inserire le seguenti istruzioni:

<style>
.mialinea
{
border-top: solid 1px #aa0000;
width:100%;
}
</style>
<div class="mialinea"></div>

Come vedi non è proprio "user-friendly" come la procedura descritta sopra, ma per chi è più "smanettone" potrebbe essere una soluzione più veloce.

Cordiali saluti
Paola Sartori
GiapCMS team