i'm looking decent tutorial on creating skins dotnetnuke 7. i've not been able find date version of dnn , although i've had success modifying existing skins, lot easier able build them scratch.
any suggestions?
i'm not going go detail, i'll define of key elements dotnetnuke skinning , of potential problems may encounter.
a skin can written in 1 of 2 ways, html or ascx. common way through ascx.
html: when utilize method, changes make within skin not applied untildotnetnukeparses skin. whendotnetnukeparse, reference manifest correctly parse of values displays.ascx: way not need parsed, changes make instantly go live. makes manipulation easier. however, still contain manifest define content well.
now, easiest way imagine dotnetnuke structure through panes , containers. pane wrapped within container.
but how design skin?
a few things note, dotnetnuke tend not design site page- create more elaborate structures can used in more general sense. example:
so above image, see few key elements such as:
- logo
- search
- login
- menu
- banner
- grouping of 3 content.
- grouping of 4 content.
- another piece of content.
- footer grouped 4 well.
so have easy data structure. include basic organization. question is, how account or mobile devices or different page layouts such as:
now have more complex issue. well, dotnetnuke kept few considerations- keep developer developer, designer designer. allows large groups working site flexibility without destroying 1 work.
in every dotnetnuke skin you'll see these:
<%@ control language="c#" autoeventwireup="false" explicit="true" inherits="dotnetnuke.ui.skins.skin" %> <%@ register tagprefix="dnn" tagname="logo" src="~/admin/skins/logo.ascx" %> what those? well, first defining our ascx. important thing second one. dotnetnuke has tokens available, these tokens allow skin reflect changes made within dotnetnuke in it's interface.
so when referencing core location, rather static object. allows dotnetnuke interface automatically input logo in location.
whoa, lost me- if reference how specify location?
<%@ register tagprefix="dnn" tagname="logo" src="~/admin/skins/logo.ascx" %> will reference our object. specify location within our site this:
<div class = "example_logo"> <dnn:logo runat="server" id="dnnlogo" borderwidth="0" /> </div> so wrapping our token object in div element. calling our token. physically place logo dotnetnuke interface site now.
this eliminates static approach, , allows become dynamic.
so these important, how create 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> so above example started. see using essential knowledge build site-structure. filling in dotnetnuke tokens design. you'd dotnetnuke modules fill sites data dotnetnuke interface within panes.
now next important aspect essential packaging of skin. ensure works correctly once installed.
you can more information http://www.dotnetnuclear.com , http://www.dnnchat.com
hopefully provides basics started. leaves packaging , manifest left.
hopefully points in right direction , helps.
feel free ask questions or follow sites try , more information on subject.
Comments
Post a Comment