Estoy buscando un tutorial decente en la creación de skins para DotNetNuke 7. No he sido capaz de encontrar nada por la más actualizada versión de dnn y aunque he tenido algún éxito en la modificación de los aspectos ya existentes, sería mucho más fácil ser capaz de construir a partir de cero.

Alguna sugerencia?

  • Por desgracia para DNN Pieles, tutoriales son difíciles de conseguir
  • Este es un gran paso-por-paso tutorial para principiantes: dotnetnuke.com/Resources/Blogs/EntryId/2671/…
  • No estoy seguro de cómo pronto usted necesita esto, pero voy a tratar de escribir un blog acerca de ello.
  • hey.. u hizo encontrar algo útil.. también me necesitan para el diseño de la piel de inicio
InformationsquelleAutor HuwD | 2013-05-06

3 Comentarios

  1. 41

    No voy a entrar en mucho detalle, pero voy a definir algunos de los elementos clave sobre DotNetNuke Skinning y algunos de los posibles problemas que pueden surgir.

    De la piel puede ser escrito en una de dos maneras, html o un ascx. La forma más común es a través de una ascx.

    • html : Cuando usted utiliza este método, cualquier cambio que hagas en la piel no se aplicará hasta que DotNetNuke analiza la piel. Cuando DotNetNuke hace este análisis, se hará referencia a su manifiesto al analizar correctamente todos los valores, por lo que se muestra.

    • ascx : De esta manera no necesita ser analizado, los cambios que realice al instante de ir a vivir. Lo que hace que la manipulación sea más fácil. Sin embargo, esto todavía contienen un manifiesto para definir su contenido.

    Ahora, la manera más fácil de imaginar DotNetNuke estructura es a través de Panes y Containers. Esencialmente un Pane siempre estará envuelto en un Container.

    Pero, ¿cómo puedo diseñar una piel?

    Un par de cosas a tener en cuenta, con DotNetNuke que tienden a no diseñar un sitio para exactamente eso página – crear más elaboradas estructuras que pueden ser utilizados en un sentido más general. Por ejemplo:

    DotNetNuke 7 desollar tutorial

    Así con la imagen de arriba, se ven algunos elementos clave, tales como:

    1. Logotipo
    2. Búsqueda
    3. De inicio de sesión
    4. Menú
    5. Banner
    6. Agrupación de tres de Contenido.
    7. Agrupación de cuatro Contenido.
    8. Otra pieza de Contenido.
    9. Pie de página que se agrupan las cuatro así.

    Así que, esencialmente, tenemos una manera bastante fácil de estructura de datos. Que normalmente incluyen algunas muy básicas de la organización. Pero mi pregunta es, ¿cómo se cuenta o dispositivos móviles o diseños de página diferentes, tales como:

    DotNetNuke 7 desollar tutorial

    Ahora tienes un poco más compleja cuestión. Bueno, DotNetNuke realmente mantener algunas consideraciones – Mantener el desarrollador, programador, diseñador como un diseñador. Que permite que grandes grupos de trabajo con un sitio de la flexibilidad sin destruir el uno al otro trabajo.

    En cada DotNetNuke piel se verá que estos:

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

    ¿Qué son? Bueno, la primera es la definición de nuestra ascx. Lo importante es el segundo. Esencialmente DotNetNuke ha tokens disponibles, estos símbolos se permitirá la piel para reflejar los cambios realizados dentro de DotNetNuke en su interfaz.

    Así que cuando se hace referencia al núcleo de ubicación, en lugar de un objeto estático. Esto permite que la DotNetNuke interfaz automáticamente la entrada de el logotipo en la ubicación.

    Whoa, usted me perdía – Si eso es sólo una referencia, ¿cómo especificar la ubicación?

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

    Hará referencia a nuestro objeto. Para especificar la ubicación dentro de nuestro sitio puede hacer esto:

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

    Así que son esencialmente de envolver nuestro objeto token en un div elemento. A continuación, en realidad estamos llamando a nuestro token. Esta físicamente colocar el logo de DotNetNuke interfaz en su sitio ahora.

    Esto esencialmente elimina el enfoque estático, y que le permite convertirse en dinámico.

    Así que estos son importantes, pero ¿cómo se crea la estructura?

    <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>

    Por lo que el de arriba es un ejemplo para empezar. Como se puede ver el uso de su conocimiento esencial para construir el sitio de la estructura. Tu sólo tienes que rellenar el DotNetNuke Tokens en su diseño. Entonces, ¿de dónde le gustaría que el DotNetNuke módulos para llenar sus sitios de los datos de la DotNetNuke interfaz está dentro de los Panes.

    Ahora el siguiente aspecto importante será la esencial embalaje de su piel. Esto va a asegurarse de que funciona correctamente una vez que está instalado.

    Usted puede obtener más información de http://www.dotnetnuclear.com y http://www.dnnchat.com

    Esperemos que este ofrece lo básico para empezar. Lo que deja el embalaje y el manifiesto de la izquierda.

    Esperemos que esto apunta en la dirección adecuada y ayuda.

    Siéntase libre de hacer preguntas o seguir esos sitios para intentar obtener más información sobre el tema.

    • También puede visitar el DotNetNuke de la biblioteca de vídeo.
    • Sobre todo porque no recuerdo si lo he añadido, pero DotNetNuke requiere un ContentPane a ser definido dentro de la piel.
  2. 3

    Su mejor apuesta es probablemente vistazo a las pieles que se suministran con DotNetNuke como un comienzo.
    Para crear una nueva piel basta con ir a la /Portales/_default/skins área y copia de uno de estos directorios pegar y cambiar el nombre a algo único. Ahora debería aparecer en tu piel selector. El 90% de los .ascx piel archivos son sólo HTML/CSS. A continuación, puede modificar la piel.archivo css y archivos ASCX como sea necesario para conseguir el aspecto deseado. Para hacer una piel nueva opción de simplemente crear una nueva .ascx archivo.

    Usted también puede comprar una piel o dos y echar un vistazo a cómo los han desarrollado.

    • Creo que ese es el camino a seguir. Usted necesita estar familiarizado con el módulo básico de creación de DNN, aunque.
  3. 2

    Como Chris Hammond puntos en el primer comentario, estos tutoriales son difíciles de conseguir. @Chris – Gracias por escribir, el Módulo de la Plantilla. La comunidad y se los agradezco.

    He estado tratando de aprender acerca de DNN pieles de mí mismo y llegó a través de la DNN Héroe sitio web que tiene un bien básico tutorial de vídeo sobre cómo crear un skin para un sitio.

    Se puede encontrar aquí: http://www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/80/1-How-to-create-my-first-skin-in-DotNetNuke-Part-1-6.aspx

    No creo que esta serie es en el juego gratis de videos, así que puede que tenga que suscribirse a conseguir. Yo soy un suscriptor y no han decepcionado. Si usted necesita una introducción a las pieles o cualquier otra cosa DNN, el sitio es muy informativo.

Dejar respuesta

Please enter your comment!
Please enter your name here