Vediamo come realizzare uno skin personalizzato partendo dalle basi.
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.