20-8-2008 9:27:30
Giờ mình muốn tạo một skin mới trong DNN thì làm thế nào? Mình cso mẫu cần tạo rồi và phải tạo theo mẫu đó. File.css tạo như thế nào? Bạn nào có thể giúp ,mình được không?
Thanks!

20-8-2008 10:14:23
Nghĩa là mình đã có 1 template dạng .html bây giờ mình muốn chuyển nó thành skin thì làm thế nào?
---

21-8-2008 10:22:39
bộ skin của dotnetnuke nằm trong thư mục

\Website\Portals\_default

trong đó có 2 thư mục quan trọng nhất là

\Website\Portals\_default\Containers
\Website\Portals\_default\Skins

Chủ yếu tạo skin là làm việc với 2 thư mục này. Các container là các phần quy định khung bên ngoài của 1 porlet, còn skin quy định khung toàn trang của website.

Đối với container công việc chủ yếu là chọn màu sắc hình ảnh cho giống với thiết kế, web graphics design,

Còn đối với Skins thì việc quan trọng nhất là tạo các vùng Pane. Các vùng cơ bản của dotnetnuke là TopPane, BottomPane, LeftPane, RightPane, CenterPane.

Nếu bạn mở file

\Website\Portals\_default\Skins\DNN-Blue\Horizontal Menu - Fixed Width.ascx

Bạn sẽ thấy

<TABLE cellspacing="3" cellpadding="3" width="100%" border="0">
<TR>
<TD class="toppane" colspan="3" id="TopPane" runat="server" valign="top" align="center"></TD>
</TR>
<TR valign="top">
<TD class="leftpane" id="LeftPane" runat="server" valign="top" align="center"></TD>
<TD class="contentpane" id="ContentPane" runat="server" valign="top" align="center"></TD>
<TD class="rightpane" id="RightPane" runat="server" valign="top" align="center"></TD>
</TR>
<TR>
<TD class="bottompane" colspan="3" id="BottomPane" runat="server" valign="top" align="center"></TD>
</TR>
</TABLE>

Như vậy để tạo một Pane mới bạn chỉ cần dùng

<TD id="Tên Pane" runat="server"></TD>

sau đó sử dụng CSS để điều chỉnh các thông số khác là có 1 Pane mới.

Trên mỗi Pane, bạn có thể đặt nhiều porlet khác nhau : Survey, TextHtml, Links ... Đối với mỗi Porlet bạn có thể thay đổi các loại Container theo ý mình.
---

21-8-2008 10:27:33


Trên hình bạn có thể thấy 2 loại container, 1 loại ở bên trái, 1 loại ở bên phải. Khác nhau bởi màu đậm và nhạt. Ở chính giữa trang là 1 porlet không có conatainer.

Với site này, người quản trị dùng Skin chuẩn, với 3 miếng Pane : Left + Center + Right. Để thay đổi conatainer bạn vào setting của porlet chọn.
---

21-8-2008 10:33:45


Với trang http://thienan.vn thì cấu trúc Skin phức tạp hơn

Nó bao gồm các Pane : LeftPane, BannerPane, Product1Pane, Product2Pane, CenterPane, RightPane.

Bố trí theo hình như sau



code html

<table width="400">
<tr>
<td id="LeftPane">Left
</td>
<td>
<table width="100%">
<tr>
<td id="BannerPane" colspan="2">Banner</td>
</tr>
<tr>
<td id="Product1Pane">Product1</td>
<td id="Product2Pane">Product2</td>
</tr>
<tr>
<td id="CenterPane" colspan="2">Center</td>
</tr>
</table>
</td>
<td id="RightPane">Right
</td>
</tr>
</table>

---

21-8-2008 11:5:49
Để add một porlet vào Pane mong muốn bạn dùng hình dưới đây



Trong hình chúng ta thực hiện add porlet TextHtml vào CenterPane. Mỗi khi bạn tạo 1 skin mới tất cả các Pane trên skin của bạn sẽ được load vào dropdownlist bên phải. Dropdrownlist bên trái là danh sách các porlet bạn có thể add. Danh sách porlet này bạn có thể thêm bớt được bằng cách vào chức năng

Install Additional Modules

Trong dotnetnuke quy định thì mỗi porlet là một module. Và porlet dùng để add vào desktop hiện tại có key là trắng (""). Để hiểu rõ lúc nào có điều kiện mình sẽ nói kỹ hơn về quản lý module, và viết thêm một module cho dotnetnuke.

Mỗi desktop sẽ được chọn 1 skin, mỗi skin chứa trong nó định nghĩa về các vùng (Pane). Dựa trên các vùng đó mà người quản trị website có thể add thoải mái các porlet.

http://localhost/Home/tabid/36/ctl/Edit/mid/348/Default.aspx

Mỗi desktop được chỉ định bởi 2 tham số Home/tabid/36, Home là name, và tabid=3 là mã của Desktop. Trong nhiều trường hợp người việt nam thường gõ tiếng việt vào chỗ Home, dotnetnuke không tìm thấy desktop theo tên sẽ tìm theo tabid.
---
Miệt mài như đầy tớ.
http://awas.vn

21-8-2008 11:10:28
Để quản lý skin của Desktop (Page) bạn có vào Menu -> Admin -> Pages, bạn chọn 1 trang nào đó rồi edit nó bạn sẽ có hình sau



Trong phần Advanced Settings

bạn có thể tìm thấy dễ dàng

Page Skin: Bạn chọn skin của mình vừa tạo trong dropdownlist.


---
Miệt mài như đầy tớ.
http://awas.vn

21-8-2008 11:31:39
Để thay đổi container của từng porlet bạn làm theo các bước

Đăng nhập với admin (hoặc host) -> portlet settings ->





Và chọn container của mình vừa làm.

Để tạo 1 skin mới hoặc 1 container mới khuyến cáo các bạn nên copy những container có sẵn sau đó sửa html trong các container theo ý mình, như thế ít sinh lỗi nhất. Những trường hợp khác bạn có thể gặp lỗi khó kiểm soát.
---
Miệt mài như đầy tớ.
http://awas.vn

21-8-2008 11:38:2
Tiện thể giới thiệu thêm 1 site = dotnetnuke

http://www.vctel.com/


---

24-3-2010 16:29:2

Bạn có thể hwowngs dẫn mình cách tạo treeview như trong hình trên không?

15-10-2011 9:54:20
Cách tạo skin trong DotNetnuke 5.x

Phần 1: kiến thức cơ bản:
http://duyanhpham.wordpress.com/2011/06/27/cach-t%e1%ba%a1o-skin-trong-dotnetnuke-dnn-dotnetnuke-skinning-phan-1/

Phần 2: Xây dựng một skin:
http://duyanhpham.wordpress.com/2011/07/20/cach-t%e1%ba%a1o-skin-trong-dotnetnuke-%e2%80%93-dotnetnuke-skinning-%e2%80%93-ph%e1%ba%a7n-2-xay-dung-mot-skin/

Phần 3: Xây dựng một Container
http://duyanhpham.wordpress.com/2011/10/07/cach-tạo-skin-trong-dotnetnuke-–-dotnetnuke-skinning-–-phần-3-xay-dựng-một-container

3-8-2013 0:18:26
bạn tieuphu ơi có thể hướng dẫn giúp đỡ mình thiết kế skin như trang thienan được không bạn. mình chưa hiểu vấn đề lắm .mình đang phải làm bài tập lớn đây mong bạn giúp đỡ cho mình với.