La personalizzazione degli stili è una funzionalità avanzata. Se non scrivi manualmente il codice HTML e i fogli di stile per il sito non utilizzarla.
Normalmente il box con le notizie contiene tutte le informazioni che ne definiscono l'aspetto (tipo di caratteri, dimensioni e colore).
Se per il tuo sito utilizzi dei fogli di stile puoi personalizzare l'aspetto del box. In tal caso scegli l'opzione "Utilizza stili predefiniti".
I vari elementi dell'HTML generato avranno solamente degli ID e delle classi, e potrai definirne l'aspetto nel foglio di stile.
L'HTML generato avrà questo formato (nota: a seconda delle opzioni che scegli potrebbero non esserci tutti gli elementi, ad esempio il testo breve della notizia).
<div id="aonet"> <p class="news"> <a class="title" target="_blank" href="LINK_A_NOTIZIA">Data - Titolo</a> <br /> <a class="prev" target="_blank" href="LINK_A_NOTIZIA"> Testo breve della notizia Testo breve della notizia </a> [<a class="dett" target="_blank" href="LINK_A_NOTIZIA">Leggi</a>] </p> </div>
Riportiamo due esempi di stili da aggiungere al vostro CSS
Esempio 1: titoli in colore rosso, grossetto, centrati.
div#aonet a.title, div#aonet a.title:link,
div#aonet a.title:visited, div#aonet a.title:hover
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #CC0033;
text-decoration: none
}
div#aonet a.prev, div#aonet a.prev:link,
div#aonet a.prev:visited, div#aonet a.prev:hover
{
font-weight: normal;
color: black;
text-decoration: none;
}
div#aonet a.dett, div#aonet a.dett:link,
div#aonet a.dett:visited, div#aonet a.dett:hover
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: black;
text-decoration: none;
}
div#aonet p
{
text-align: center;
font-weight: bold;
color: black;
}
div#aonet p.ptitle
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #CC0033;
}
Esempio 2: testo in colore bianco e rosso, su sfondo nero
body {
background-color: black;
}
div#aonet a.title, div#aonet a.title:link,
div#aonet a.title:visited, div#aonet a.title:hover
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: white;
text-decoration: none
}
div#aonet a.prev, div#aonet a.prev:link,
div#aonet a.prev:visited, div#aonet a.prev:hover
{
font-weight: normal;
color: black;
text-decoration: none;
}
div#aonet a.dett, div#aonet a.dett:link,
div#aonet a.dett:visited, div#aonet a.dett:hover
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: white;
text-decoration: none;
}
div#aonet p
{
text-align: left;
font-weight: bold;
color: black;
}
div#aonet p.ptitle
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #CC0033;
}