c# asp.net webforms dotnetnuke

c# - DotNetNuke 7 skinning tutorial



asp.net webforms (3)

Estoy buscando un tutorial decente sobre la creación de máscaras para DotNetNuke 7. No he podido encontrar nada para la versión más actualizada de dnn y, aunque he tenido cierto éxito al modificar las máscaras existentes, sería mucho Más fácil poder construirlos desde cero.

¿Alguna sugerencia?

Como señala Chris Hammond en el primer comentario, estos tutoriales son difíciles de encontrar. @Chris - Gracias por escribir la plantilla del módulo. La comunidad y yo lo apreciamos.

He estado tratando de aprender sobre las pieles de DNN y encontré el sitio web de DNN Hero que tiene un buen tutorial básico en video sobre cómo crear una máscara 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 esté en el conjunto gratuito de videos, por lo que es posible que tenga que suscribirse para obtenerla. Soy suscriptor y no me ha decepcionado. Si necesita una introducción a las máscaras o cualquier otra cosa DNN, el sitio es realmente informativo.

Probablemente, lo mejor es mirar las pieles existentes que se incluyen con DotNetNuke como un comienzo. Para crear una nueva máscara, vaya al área / Portals / _default / skins y copie uno de estos directorios, péguelo y cámbiele el nombre a algo único. Esto ahora debería aparecer en su selector de piel. El 90% de los archivos de máscara .ascx son solo HTML / CSS. Luego puede modificar el archivo skin.css y los archivos ASCX según sea necesario para obtener el aspecto deseado. Para hacer una nueva opción de skin simplemente crea un nuevo archivo .ascx.

También puedes comprar una o dos carcasas y echar un vistazo a cómo se desarrollaron.

No voy a entrar en demasiados detalles, pero definiré algunos de los elementos clave sobre DotNetNuke Skinning y algunos de los posibles problemas que puede encontrar.

Una máscara se puede escribir de una de las dos formas, html o ascx . La forma más común es a través de un ascx .

  • html : cuando utilice este método, los cambios que realice dentro de la piel no se aplicarán hasta que DotNetNuke analice la piel. Cuando DotNetNuke este análisis, hará referencia a su manifiesto para analizar correctamente todos los valores para que se muestren.

  • ascx : De esta manera no es necesario analizarlo, los cambios que realice se activarán instantáneamente. Lo que facilita la manipulación. Sin embargo, esto también contendrá un manifiesto para definir su contenido también.

Ahora, la forma más fácil de imaginar la estructura de DotNetNuke es a través de Panes y Containers . Esencialmente, un Pane siempre se envolverá dentro de un Container .

Pero, ¿cómo diseño una piel?

Algunas cosas a tener en cuenta, con DotNetNuke , tiende a no diseñar un sitio para exactamente esa página: crea estructuras más elaboradas que se pueden usar en un sentido más general. Por ejemplo:

Así que con la imagen de arriba, ves algunos elementos clave como:

  1. Logo
  2. Buscar
  3. Iniciar sesión
  4. Menú
  5. Bandera
  6. Agrupación de tres contenidos.
  7. Agrupación de cuatro contenidos.
  8. Otra pieza de contenido.
  9. Pie de página que está agrupado por cuatro también.

Así que esencialmente tenemos una estructura de datos bastante fácil. Lo que usualmente incluiría alguna organización bastante básica. Pero mi pregunta es, ¿cómo cuentas o dispositivos móviles o diferentes diseños de página como:

Ahora tienes un problema un poco más complejo. Bueno, DotNetNuke realmente mantuvo algunas consideraciones: mantener al desarrollador como desarrollador, al diseñador como diseñador. Lo que permite a grupos grandes trabajar con un sitio la flexibilidad sin destruirse el trabajo.

En cada skin de DotNetNuke verás esto:

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

¿Que son esos? Bueno, lo primero es definir nuestro ascx . Lo importante es lo segundo. Esencialmente, DotNetNuke tiene tokens disponibles, estos tokens permitirán que la máscara refleje los cambios realizados dentro de DotNetNuke en su interfaz.

Entonces, cuando estamos haciendo referencia a la ubicación central, en lugar de a un objeto estático. Esto permite que la interfaz DotNetNuke ingrese automáticamente el logotipo en la ubicación.

Whoa, me perdiste ... Si eso es solo una referencia, ¿cómo especificamos 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 usted haría esto:

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

Así que esencialmente estamos envolviendo nuestro objeto token en un elemento div . Entonces estamos llamando a nuestro token. Esto colocará físicamente el logotipo de la interfaz DotNetNuke en su sitio ahora.

Esto esencialmente elimina el enfoque estático, y permite que se vuelva dinámico.

Entonces, estos son importantes, pero ¿cómo creo 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>

Así que lo anterior es un ejemplo para comenzar. A medida que vea su uso de su conocimiento esencial para construir la estructura del sitio. Estás completando los DotNetNuke Tokens en tu diseño. Entonces, donde le gustaría que los módulos DotNetNuke llenen los datos de sus sitios desde la interfaz de DotNetNuke está dentro de esos Panes .

Ahora el siguiente aspecto importante será el empaque esencial de tu piel. Esto asegurará que funcione correctamente una vez que esté instalado.

Puede obtener más información en http://www.dotnetnuclear.com y http://www.dnnchat.com

Esperemos que esto proporcione lo básico para comenzar. Lo que deja el envase y se deja manifiesto.

Esperemos que esto te apunte en la dirección correcta y ayude.

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