| Thành viên | Trả lời |
thu
9 bài
| 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!
|
thu
9 bài
| 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?
---
|
tieuphu
Thống chế Erich von Manstein
51 bài
| 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.
---
|
tieuphu
Thống chế Erich von Manstein
51 bài
| 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.
---
|
tieuphu
Thống chế Erich von Manstein
51 bài
| 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>
---
|
tieuphu
Thống chế Erich von Manstein
51 bài
| 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
|
tieuphu
Thống chế Erich von Manstein
51 bài
| 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
|
tieuphu
Thống chế Erich von Manstein
51 bài
| 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
|
awas
57 bài
| 21-8-2008 11:38:2
Tiện thể giới thiệu thêm 1 site = dotnetnuke
http://www.vctel.com/
---
|
misabachhop
7 bài
| 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?
|
duyanhphamkiller
3 bài
| 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
|
cavana
1 bài
| 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.
|
 |