venerdì 18 luglio 2008

DotNetNuke - Creare Skin personalizzate

Oggi vediamo come personalizzare le skin di DotNetNuke per rendere il nuostro portale più accattivante. Intanto diamo un'occhiata a come è strutturato DNN per quanto riguarda l'aspetto grafico.

DotNetNuke prevede due tipologie di oggetti per la customizzazione dell'aspetto: le skin e i container.

La Skin definisce l'aspetto generale del portale, la posizione degli oggetti all'interno delle colonne, dell'header e del footer. Tramite la manipolazione della skin possiamo configurare il nostro portale nella maniera classica (header,tre colonne e footer) oppure sbizzarrirci con dei layout meno convenzionali come ad esempio quelli dei blog che prevedono un header, una colonna per il contenuto, una per i banner e altri box e infine il footer.

Si può dunque partire da un qualsiasi layout per ralizzare le nostre skin, a patto di inserire nei posti giusti gli oggetti di DNN e di nominare le colonne per il corretto posizionamento dei contenuti.

Gli oggetti di DNN che possono essere posizionati sono i seguenti:

  • LOGO: il logo definito in configurazione del portale
  • BANNER: il banner
  • NAV: il menu di navigazione
  • SEARCH: la ricerca sul portale e sul web
  • LANGUAGE: selezione della lingua
  • CURRENTDATE: data di oggi
  • BREADCRUMB: la posizione di navigazione attuale
  • USER: info utente
  • LOGIN: login/logout
  • COPYRIGHT: copyright del portale
  • TERMS: link ai termini e condizioni
  • PRIVACY: link all'informativa sulla privacy
  • DOTNETNUKE: link al sito ufficiale di DotNetNuke

Di seguito uno schema riepilogativo del layout standard con il posizionamenti degli oggetti di DNN.

di seguito la struttura dei file di uno skin:



e qui la definizione degli oggetti da inserire nella pagina ascx dello skin



<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BANNER" Src="~/Admin/Skins/Banner.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/CurrentDate.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="DOTNETNUKE" Src="~/Admin/Skins/DotNetNuke.ascx" %>

La prima riga definisce che il file in questione è un file di skin e le successive servono per registrare gli oggetti/controlli di DNN.


I Container invece definiscono l'aspetto dei singoli moduli all'interno della struttura della skin e possono essere applicati anche container differenti all'interno della stessa pagina.

La conformazione di un container è molto semplice e meno rigida di quella della skin. Anche i conteiner hanno degli oggetti di DotNetNuke da poter posizionare a piacere:

  • ACTIONS: il menu del modulo
  • ICON: l'icona del modulo
  • TITLE: il titolo del modulo
  • ACTIONBUTTON: i pulsanti per definire le azioni del modulo
  • VISIBILITY: l'icona per ridurre il modulo e ampliarlo



di seguito la struttura dei file di un container:


e qui la definizione degli oggetti da inserire nella pagina ascx del container


<%@ Control language="vb" CodeBehind="~/admin/Containers/container.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONS" Src="~/Admin/Containers/SolPartActions.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ICON" Src="~/Admin/Containers/Icon.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON1" Src="~/Admin/Containers/ActionButton.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON2" Src="~/Admin/Containers/ActionButton.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON3" Src="~/Admin/Containers/ActionButton.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON4" Src="~/Admin/Containers/ActionButton.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON5" Src="~/Admin/Containers/ActionButton.ascx" %>
<%@ Register TagPrefix="dnn" TagName="VISIBILITY" Src="~/Admin/Containers/Visibility.ascx" %>


dove la prima riga definisce che il file in questione è un file di container e le successive servono per registrare gli oggetti/controlli di DNN.

Ovviamente sono fondamentali le conoscenze di HTML per realizzare una skin completa e che ci soddisfi a pieno, per non parlare dell'utilizzo dei CSS.

In allegato a questo articolo ho voluto mettere a disposizione uno skin che riepiloga quello che ho appena illustrato: DotNetNuke Ita Skin.
Il file prevede un layout tableless con il posizionamento dei DIV tramite CSS per rendere più flessibile la struttura. Ho, inoltre, inserito accanto al logo del portale anche il nome del portale.

Dimanticavo ... per importare i file di skin e dei container basta accedere a DNN con l'utenza di host e accedere al menù 'Skin'. A questo punto potete importare direttamente i file zip sia per le skin sia per i container e impostarli per il vostro portale.

Buon divertimento.

9 commenti:

Anonimo ha detto...

ciao, solo ora leggo l'articolo.. ..sembra interessante. stasera mi metto a provare. spero tu voglia dare altre piccole perle di saggezza per chi come me si sta avvicinando al mondo DNN
ciao

Anonimo ha detto...

Ciao.
Ho provato ad installare la tua skin, ma mi compare sempre questa frase di errore:

Discarding duplicate skin object for token : Any skin that references this token will utilize the skin control registered first Admin/Skins/user.ascx rather than the one specified by the duplicate (Admin/Skins/Attributes.ascx). The skin may render incorrectly.

che significa?? cosa dovrei fare??

Grazie in anticipo

Daniele Lembo ha detto...

Che versione di DNN stai usando?

Se hai fatto modifiche allo skin assicurati di non aver duplicato le righe di definizione dei controlli all'interno del file 'NoTableLayout.ascx'.

In generale, comunque, questo skin è ottimo per le versioni precedenti alla 5.0.0

sclergio ha detto...

ciao scusa, ma non ho capito se sono riuscito ad inviarti il messaggio poco fa, volevo chiederti se puoi sistemare il link alla skin base perchè purtroppo non funziona!!

Daniele Lembo ha detto...

Grazie della segnalazione ... link aggiornato.

Luca ha detto...

Grazie dell'articolo è stato molto utile per capire il funzionamento generale.

Sai per caso se ci sono molte differenze per DNN 5.1

Grazie

Daniele Lembo ha detto...

E' rimasto sostanzialmente uguale,
non ci sono grosse differenze.

Sim ha detto...

ciao ho provato ad uploadare il tuo skin ma DNN mi dice sempre "No Skin Files Exist In Folder" e non posso quindi fare apply dello skin... come posso risolvere, manca qualcosa??

Daniele Lembo ha detto...

Questo tutorial è valido fino alla versione 4.x.

Per le versioni successive ci sono da fare degli aggiustamenti che pubblicherò presto in un nuovo tutorial.

Su che versione lo stai provando?
Se si tratta di una versione successiva alla 4.x è cambiato il file xml di definizione della skin e quindi non la riconosce.