web-dev-qa-db-fra.com

DotNetNuke 7 Tutoriel Skinning

Je recherche un didacticiel décent sur la création de peaux pour DotNetNuke 7. Je n'ai pas été en mesure de trouver quoi que ce soit la version la plus à jour de DNN et même si j'ai eu du succès en modifiant les peaux existantes, ce serait beaucoup plus facile de pouvoir les construire à partir de zéro.

Aucune suggestion?

c#asp.netwebformsdotnetnuke
22
HuwD

Je ne vais pas aller dans trop de détails, mais je définirai certains des éléments clés sur DotNetNuke Skinning et certains des problèmes potentiels que vous pouvez rencontrer.

Une peau peut être écrite de deux manières, html ou un ascx. La manière la plus courante consiste à traverser un ascx.

  • html: Lorsque vous utilisez cette méthode, les modifications que vous apportez dans la peau ne seront pas appliquées avant DotNetNuke analyse de la peau. Lorsque DotNetNuke fait cette analyse, il fera référence à votre manifeste pour analyser correctement toutes les valeurs afin qu'elle s'affiche.

  • ascx: De cette façon n'a pas besoin d'être analysé, les changements que vous faites vont instantanément vivre. Qui facilite la manipulation. Cependant, cela contiendra toujours un manifeste pour définir votre contenu aussi.

Maintenant, le moyen le plus simple d'imaginer DotNetNuke structure passe par Panes et Containers. Essentiellement un Pane sera toujours emballé dans un Container.

Mais comment puis-je concevoir une peau?

Quelques éléments à noter, avec DotNetNuke Vous avez tendance à ne pas concevoir un site pour exactement cette page, vous créez plus de structures élaborées pouvant être utilisées dans un sens plus général. Par exemple:

Image of Web-Site

Donc, avec l'image ci-dessus, vous voyez quelques éléments clés tels que:

  1. Logo
  2. Chercher
  3. Connexion
  4. Menu
  5. Bannière
  6. Regroupement de trois contenus.
  7. Regroupement de quatre contenus.
  8. Un autre élément de contenu.
  9. Pied de page qui est regroupé de quatre aussi.

Donc, essentiellement, nous avons une structure de données assez facile. Qui comprendrait généralement une organisation assez basique. Mais ma question est de savoir comment comptabilisez-vous des périphériques ou des dispositifs mobiles ou des dispositions de page différentes telles que:

Social Profile

Maintenant, vous avez un problème légèrement plus complexe. Eh bien, DotNetNuke _ vraiment gardé quelques considérations - gardez le développeur en tant que développeur, le concepteur en tant que concepteur. Qui permet aux grands groupes de travailler avec un site la flexibilité sans vous détruire l'un de l'autre.

Dans chaque DotNetNuke peau, vous les verrez:

<%@ Control language="C#" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

Quels sont ces? Eh bien, la première est la définition de notre ascx. L'important est le second. Essentiellement DotNetNuke a des jetons disponibles, ces jetons permettront à la peau de refléter les modifications apportées dans DotNetNuke dans son interface.

Donc, lorsque nous référons l'emplacement principal, plutôt un objet statique. Cela permet à l'interface DotNetNuke d'entrer automatiquement le logo à l'emplacement.

WHOA, vous avez perdu-tu - si ce n'est qu'une référence comment spécifiez-nous l'emplacement? 

<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

Va faire référence à notre objet. Pour spécifier l'emplacement sur notre site, vous le feriez:

<div class = "example_logo">
    <dnn:LOGO runat="server" id="dnnLOGO" BorderWidth="0" />
</div>

Nous emballons donc essentiellement notre objet de jeton dans un élément div. Ensuite, nous appelons réellement notre jeton. Cela placera physiquement le logo de DotNetNuke interface sur votre site maintenant.

Cela élimine essentiellement l'approche statique et lui permet de devenir dynamique.

Celles-ci sont donc importantes, mais comment créer la structure? 

<div id="Origin">
    <div class="Wrapper">
         <div id="Origin-Header">
            <div class="Origin-header clearfix">

                 <!-- Header Elements -->
                 <div class=Origin-logo>
                      <dnn:LOGO runat=server" id="dnnLOGO" BorderWidth="0" />
                 </div>
                 <div class="Origin-login">
                       <dnn:LANGUAGE runat="server" id="dnnLANGUAGE" showMenu="false" showLinks="true" />
                       <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="login" /> |                      <dnn:USER runat="server" id="dnnUSER" CssClass="user" />
                       <dnn:SEARCH runat="server" id="dnnSEARCH" UseDropDownList="true" ShowSite="false" ShowWeb="false" />
                  </div>
            </div>
       </div>

        !-- Banner -->
        <div id = "Origin-Banner">
              <div class = "Origin-banner-pane" id="Origin-banner-pane" runat="server" />
        </div>

Donc, ce qui précède est un exemple pour vous aider à démarrer. Comme vous voyez votre utilisation de vos connaissances essentielles pour construire la structure de site. Votre juste remplir le DotNetNuke Tokens dans votre conception. Ensuite, où vous souhaitez que les modules DotNetNuke pour remplir vos sites des données de l'interface DotNetNuke se trouve dans ces Panes.

Maintenant, le prochain aspect important sera l'emballage essentiel de votre peau. Cela s'assurera en fait qu'il fonctionne correctement une fois qu'il est installé.

Vous pouvez obtenir plus d'informations à partir de http://www.dotnetnuclear.com et http://www.dnnchat.com

J'espère que cela fournit les bases pour vous aider à démarrer. Qui laisse l'emballage et manifeste à gauche.

Espérons que cela vous indique dans la bonne direction et aide.

N'hésitez pas à poser des questions ou à suivre ces sites pour essayer d'obtenir plus d'informations sur le sujet.

41
Greg

Votre meilleur pari est probablement de regarder les skins existantes qui expédient avec DotNetNuke comme un début. Pour créer une nouvelle peau, allez à la zone/portails/_default/Skins et copiez-en l'un de ces répertoires Coller et renommez-le à quelque chose d'unique. Cela devrait maintenant se présenter dans votre sélecteur de peau. 90% des fichiers de peau .ascx ne sont que HTML/CSS. Vous pouvez ensuite modifier les fichiers Skin.CSS et les fichiers ASCX si nécessaire pour obtenir votre look souhaité. Pour faire une nouvelle option de peau, créez un nouveau fichier .ascx.

Vous pouvez également acheter une peau ou deux et jeter un coup d'œil à la façon dont ceux-ci ont été développés.

3
Ryan Doom

Comme Chris Hammond souligne dans le premier commentaire, ces tutoriels sont difficiles à trouver. @Chris - Merci d'avoir écrit le modèle de module. La communauté et je l'apprécie.

J'essaie d'apprendre dnn Skins moi-même et rencontré le site Web de DNN Hero qui a un bon tutoriel vidéo de base sur la manière de créer une peau pour un site.

On peut trouver ici: http://www.dnnhero.com/premium/tatuly/tabid/259/articleid/80/1-how-to-create-my-first-skin-in-dotnetnuke- Partie-1-6.aspx

Je ne pense pas que cette série soit dans l'ensemble de vidéos gratuite, vous devrez peut-être vous abonner pour l'obtenir. Je suis un abonné et je n'ai pas été déçu. Si vous avez besoin d'une introduction à Skins ou à quoi que ce soit d'autre, le site est vraiment informatif.

2
RacerNerd