Yang
pertama kita lakukan adalah dengan melakukan instalasi DNN 5 atau DNN 6 kalau
kita belum memiliki kita donload terlebih dahulu.gratis kok
setelah
terintalasi kita buka Visual studio kemudiam open website kita arahkan ke DNN yang sudah kita instalasi
seperti gambar di bawah ini
Lalu kita
buka folder portal =>default=>skin.kita buat folder dengan nama Skin12
misalnya dan di dalam folder tersebut kita buat tiga file .seperti gambar di
bawah ini
yang pertama adalah buat folder image untuk
menyimpan file image baik JPG ataupun
PNG
yang kedua buat item baru dengan nama
home12.ascx dengan code berikut ini:
<%@ Control
Language="vb"
AutoEventWireup="false"
Explicit="True"
Inherits="DotNetNuke.UI.Skins.Skin"
%>
<%@ Register
TagPrefix="dnn"
TagName="NAV"
Src="~/Admin/Skins/Nav.ascx"
%>
<%@ Register
TagPrefix="dnn"
TagName="COPYRIGHT"
Src="~/Admin/Skins/Copyright.ascx"
%>
<%@ Register
TagPrefix="dnn"
TagName="LOGIN"
Src="~/Admin/Skins/Login.ascx"
%>
<%@ Register
TagPrefix="dnn"
TagName="LINKS"
Src="~/Admin/Skins/Links.ascx"
%>
<div id="page">
<div id="header">
</div>
<div id="mainMenu">
</div>
<div id="content">
<div id="ContentPane"
runat="server">
</div>
<div id="rightpane" runat="server">
</div>
<div id="leftpanecontent" runat="server">
</div>
<div id="contentbottom" runat="server">
</div>
</div>
<div id="leftpane">
<div id="LeftPanekiri" runat="server">
<dnn:NAV runat="server" ID="nav2" ProviderName="DNNMenuNavigationProvider" IndicateChildren="false"
ControlOrientation="Horizontal" CSSControl="mainMenu" />
</div>
<div id="leftkiribawah" runat="server">
</div>
</div>
<div id="footer">
<div id="footerbottom" runat="server">
<dnn:COPYRIGHT runat="server" ID="dnnCOPYRIGHT" CssClass="footer" />
<dnn:LOGIN runat="server" ID="dnnLOGIN" CssClass="user" />
</div>
</div>
</div>
yang kedua kita add item pada skin 12 tersebut
dengan klik kanan add new item dan pilih file dengan ,xml seperti gambar di
atas dan isi dengan code
<SkinDocType>
<![CDATA[<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]]>
</SkinDocType>
yang ketiga kita buat file sama seperti di atas
dengan.cs kita namai dengan skin.cs dan isi dengan code seperti di bawah ni
body
{
margin: 0;
padding: 8px;
font-family:
Arial, Helvetica,
sans-serif;
font-size: 12px;
background-color:
WhiteSmoke;
}
#page
{
width: 980px;
margin: 0px auto;
padding-top:
76px;
}
#header
{
width: 980px;
background: url(images/jklg.png);
height: 360px;
border: 2px;
background-color:
Transparent;
}
#headerbottom
{
background: url(images/qw1.jpg)no-repeat left
top;
height: 21px;
width: 980px;
clear: both;
}
#footer
{
width: 980px;
background-color:
White;
height: 50px;
clear: both;
}
#dnn_footerbottom
{
width: 980px;
height: 52px;
margin-top: 0;
background-color:
Black;
background: url(images/ANDRI.png);
text-align: right;
font-style: normal;
color: Maroon;
padding-top:
0px;
font-family:
Comic Sans MS;
}
#content
{
width: 809px;
background-color:
White;
float: right;
height: 709px;
}
#leftpane
{
width: 150px;
background-color:
Transparent;
float: left;
height: 0px;
clear: left;
}
#dnn_LeftPanekiri
{
background: url("images/eeq.png");
clear: left;
float: left;
padding-left:
24px;
padding-top:
12px;
padding-bottom:
12px;
width: 146px;
}
#dnn_leftkiribawah
{
background: url("images/batik_04.png");
width: 169px;
height: 300px;
}
#dnn_ContentPane
{
padding-right:
1px;
padding-top:
0px;
width: 803px;
float: right;
background-color:
White;
}
#dnn_contentbottom
{
padding-right:
7px;
padding-top:
10px;
width: 803px;
float: right;
background-color:
White;
}
#dnn_rightpane
{
background-color:
White;
height: 200px;
float: left;
width: 200px;
}
#dnn_leftpanecontent
{
background-color:
White;
height: 200px;
float: right;
width: 550px;
padding-right:
15px;
}
#dnn_LOGIN
{
font-size: medium;
font-style: oblique;
float: right;
font: tahoma;
}
/*--------- dnn menu style ----------*/
/* main menu td */
.mainMenu
{
cursor: pointer;
font-size: 11px;
background: url(images/tablogin_gray.gif)repeat-x top left;
width: 580px;
}
/* Main Menu Normal
*/
.mainMenu .root
{
color: #FFFFFF;
font-size: 9px;
font-weight:
bold;
text-align: center;
padding: 11px 11px 11px 11px;
text-transform:
uppercase;
margin-right:
0px;
white-space:
nowrap;
padding-bottom:
2px;
margin-right:
1px;
float: left;
margin-left:
7px;
border-bottom:
1px solid #FFFFFF;
border-top: 2px solid #000000;
border-top-color:
buttonface;
border-left:
2px solid #FFFFFF;
border-right:
2px solid #FFFFFF;
}
.mainMenu .root
{
display: block;
width: 100px;
height: 22px;
padding-left:
3px;
}
/* Main menu hover */
.mainMenu .hov
{
color: #000000;
width: 100px;
height: 22px;
}
/* Main menu selected */
.mainMenu .sel, .mainMenu .bc
{
width: 100px;
}
.mainMenu table
{
border: 2px solid #002891;
z-index: 5000;
display: block;
}
/* SUB Menu Normal
*/
.mainMenu tr.mi
{
background-color:
#002891;
z-index: 1000;
font-size: 11px;
font-weight:
bold;
text-align: left;
color: #375162;
line-height:
2em;
text-transform:
none;
}
.mainMenu tr.mi td
{
padding: 0 2px;
text-transform:
none;
}
/* SUB Menu hover & selected */
.mainMenu tr.hov
{
background: #CE0D0D url(../images/submenu_hover.png)
repeat-x top left;
}
.mainMenu tr.hov td
{
color: #fff;
}
.mainMenu tr.sel, .mainMenu tr.bc
{
background: #CE0D0D url(../images/submenu_active.png)
repeat-x top left;
width: 125px;
}
.mainMenu tr.sel td, .mainMenu tr.bc td
{
color: #fff;
width: 125px;
}
.main_dnnmenu_break
{
height: 2px;
background-color:
#D5E0FF;
}
/* Module Action Menus */
.ModuleTitle_SubMenu
{
border: 1px solid #C0D6E5;
}
.ModuleTitle_SubMenu td
{
background-color:
#F8FAFF;
white-space:
nowrap;
}
.ModuleTitle_MenuIcon
{
background-color:
#F8FAFF;
border: 12px;
padding: 0px 2px;
}
.ModuleTitle_MenuItemSel td, .ModuleTitle_MenuItemSel .ModuleTitle_MenuIcon
{
background: #CE0D0D url(../images/submenu_hover.png)
repeat-x top left;
color: #fff;
width: 125px;
}
.ModuleTitle_MenuBreak td, .ModuleTitle_MenuBreak .ModuleTitle_MenuIcon
{
height: 2px;
background-color:
#D5E0FF;
}
pada code
skin.cs di atas terdapat penggunaaan file photo baik jpg maupun png yang dapat
di lihat pada url dimana fhoto tersebut bisa di simpan pada folder image yang
terdapat pada folder skin12:
dan untuk
tampilan web nya akan tampil seperti ini:
sekian dan terimakasih
