Toolbar Marquee

Dall'opzione Edit Templates accedete alla pagina di modifica dei Templates. Innanzitutto chiariamo cosa vuol dire TEMPLATE in Cutenews.

Impostare un template in Cutenews vuol dire determinare il modo in cui la vostra news apparirà. Mi spiego meglio: se osservate la pagina principale di Magic Star Design, potete vedere che le mie news sono organizzate in una tabella, con i caratteri di un certo colore e dimensioni, un tipo di background ecc. Ecco, quello è un template.

In cutenews potete creare un infinito numero di templates e si ogni template si può usare come e dove si vuole.

Con questo tutorial procederemo col creare un template "base", molto semplice, per chiarirvi le idee per bene. Io qui non le userò, ma per i più esperti, sappiate che è possibile utilizzare le classi e gli stili del foglio css esterno (se lo usate).

Innanzitutto creiamo un nuovo template. Cliccate su [create new template]. Vi si aprirà una nuova schermata:

"Create new template based on [selezionate DEFAULT] with name [inserite il nome del vostro template, noi lo chiameremo news]"

Adesso, cliccate su "Create template" e ricomparirà di nuovo la finestra precedente. Nel menu a tendina scegliete il vostro nuovo template, "news" , e cliccate su GO:

adesso vi comparirà una finestra come quella sopra, ma al posto di Default trovere scritto "news": state lavorando sul vostro nuovo template! Se adesso cliccate su uno dei menu sottostanti (Active News, Full Story, Comment, Add Comment Form ecc.) vi si aprirà per ognuno una lista di termini e una textarea in cui inserirete il codice del vostro template. Procediamo a crearli uno per uno... per questa operazione vi consiglio di crearvi una pagina html, possibilmente linkata al vostro foglio di stile esterno (se lo avete) in modo da avere subito una anteprima effettiva del template. Per questi template io utilizzo il foglio di stile esterno, quindi, copiando il codice, otterrete subito il template dello stile che vorrete!

Active News è la news, come si presenterà nella vostra pagina: quindi questo template è quello principale, ed è quello su cui lavoreremo di più!

<p> <p> <table width="450" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="middle" scope="col"><div align="center">{title}</div></td> </tr> <tr> <td ><div align="justify"><div style="float: left;"> <p>{avatar}</div>{short-story}<p><p><p><p><p><p><p></p> <p> <p><p><p> <p> <p><p><p><p><p><p><p></p> <p> <p><p><p><p><p><p><p></p> </div></td> </tr> <tr> <td valign="middle" ><div align="center" class="newtitle">News scritta da [mail]{author}[/mail] il {date} - <font>[com-link]({comments-num}) Commenti [/com-link]</font></div> </td> </tr> </table>

il template ci apparirà così:

{title}

{avatar}

{short-story}

News scritta da [mail]{author}[/mail] il {date} - [com-link]({comments-num}) Commenti [/com-link]

Osserviamo i vari tags inseriti e anche quelli disponibili:

{title}: Riporta nel template il titolo della news

{avatar}: mostra l'avatar dell'utente che scrive; se ooservate il codice, l'avatar è contenuto in un div con proprietà "float=left" per essere alla sinistra del testo.

{short-story}: riporta la news scritta dall'utente

{author}: il nome dell'autore della news

[mail]_____[/mail]: riporta il link all'indirizzo email dell'autore; in mezzo ai due tag va scritta la parola del link.

{date}: mostra la data in cui è stata scritta la news

[com-link]_____[/com-link]: all'interno di questi due tag va scritta la parola che linkerà la news ai suoi commenti

{comments-num}: mostra il numero di commenti scritti per quella news

-tags disponibili ma che non ho utilizzato nel template:

{category}: mostra il nome della categoria a cui la news appartiene

{category-icon}: mostra, se c'è, l'icona della categoria a cui la news appartiene

[link]_____[/link]: tra questi due tag va inserito il link alla full story. Questo link comparirà sempre, anche se non ci sarà full story.

[full-link]______[full-link]: tra questi tag va inserito il link alla full story, che però comparirà SE ci sarà full story.

FULL STORY:

Le Active News possono essere una sorta di "Anteprima" alla vera news. Ed è qui che entra in gioco la full story. Ad esempio, voi potete scrivere una Active news in cui riportate solo le prime righe del vero aggiornamento, e poi lasciate un link tipo "READ MORE..." alla full story (ecco che entrano in gioco i tag sopra).

Personalmente io non utilizzo la full story e scrivo tutto in active story, senza utilizzare i tag [link] e [full-link]. Il template può benissimo essere lo stesso della Active News, con gli stessi tag (eccetto [link] e [full-link] ovviamente) e con la differenza che, al posto di {short-story} dovete mettere {full-story}.

COMMENT:

Cutenews offre la possibilità di poter commentare le news: quindi ci dovrà essere un template anche per i commenti e per il form per scriverli; occupiamoci dei commenti:

<p> <p> <div align="center"> <center> <table cellpadding="0" cellspacing="0" width="450" > <tr> <td class="newtitle"> Star by {author} on {date}</td> </tr> <tr> <td class="content"> <img border="0" src="http://magicstardesign.altervista.org/cuteavatars/comments.gif" align="left" width="60" height="60" style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)">{comment}</td> </tr> <tr> <td class="newtitle">THANK YOU FOR SIGNING MSD NEWS</td> </tr> </table> </center></div> <p><p></p>

Commento di {author} scritto il {date}

{comment}

osserviamo i tag:

{author} : mostra l''autore del commento

{date} : mostra la data del commento

{comment}: mostra il commento scritto

{mail}: mostra l'indirizzo email del commentatore

ADD COMMENT FORM:

Per il form di scrittura dei commenti, io consiglio di utilizzare direttamente quello messo a disposizione, magari variando le dimensioni o gli stili:

<p> <p> <div align="center"> <center> <table border="0" width="350" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111"> <tr> <td width="49"> Name: </td> <td width="289" height="1"> <input type="text" name="name" tabindex="1" size="20" style="background-image:url('http://magicstardesign.altervista.org/immagini/sfondo.jpg'); background-repeat:no-repeat; background-position-y:center"></td> </tr> <tr> <td width="49"> http - @ </td> <td width="289"> <input type="text" name="mail" tabindex="2" size="20" style="background-image:url('http://magicstardesign.altervista.org/immagini/sfondo.jpg'); background-repeat:no-repeat; background-position-y:center"> (optional)</td> </tr> <tr> <td width="53"> <p align="left">smile:</p> </td> <center> <td width="291" > {smilies} </td> </tr> <tr> <td width="340" height="1" colspan="2"> <textarea cols="40" rows="6" name="comments" tabindex="3" style="width:350; background-repeat:no-repeat; background-position-y:center">
Remember Me | Forget Me

Non sono veri e propri templates, ma semplicemente mostrano come devono apparire i links in fondo alla pagina, quelli con in numeri 1,2,3, previuos, next ecc... sia per le news che per i commenti:

[prev-link]_____[/prev-link] contiene il link per la news /il commento precedente

[next-link]_____[/next-link] contiene il link per la news/il commento successivo

Name:
http - @	(optional)
smile:	{smilies}
Remember Me \| Forget Me