Đăng nhập | Đăng ký

Danh sách thành viên | Cá nhân | Nhà đất, bất động sản

Diễn đàn    Các Projects Dotnetnuke (DNN)    Cách tạo skin trong DNN

Thành viênNội dung
thu


9  bài
20-08-2008 09: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-08-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
50  bài
21-08-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
50  bài
21-08-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
50  bài
21-08-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
50  bài
21-08-2008 11:05: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
50  bài
21-08-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
50  bài
21-08-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


54  bài
21-08-2008 11:38:02
Tiện thể giới thiệu thêm 1 site = dotnetnuke

http://www.vctel.com/


---
 
misabachhop


7  bài
24-03-2010 04:29:02
Tiện thể giới thiệu thêm 1 site = dotnetnuke

http://www.vctel.com/


---


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 09: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
03-08-2013 12: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.
 

Chủ đề gần đây :

Cùng loại :

 
Tên file Người đăng Ngày Lượt
vspforum.zip
Ma nguon vspforum ngay xua
aspnet 4/18/2023 6:38:37 AM 8
pdfjs.rar
pdfjs 2017 : hiển thị tốt trên iphone 11, 12, 13 không lỗi, bản 2012 sẽ lỗi trên iphone
aspnet 6/21/2022 11:52:48 AM 2
pdfjs2.rar
Xem file pdf bằng viewer.hml cua pdfjs (thư viện chuẩn mozilla) 2012. https://mozilla.github.io/pdf.js/getting_started/#download có thể download bản prebuild tại đây
aspnet 6/21/2022 11:52:04 AM 2
runner.zip
using three.js, orbitcontrol to view an object move random on map. Di chuyển 1 đồ vật ngẫu nhiên trên bản đồ, sử dụng với demo nhân viên di chuyển trong văn phòng. Toàn js download về là chạy
aspnet 12/5/2019 5:55:14 PM 0
gmap.zip
google map + marker
aspnet 7/17/2019 2:25:05 PM 1
vinsmarthomeservice.zip
java post json to api, use AsyncTask, event listener
aspnet 7/9/2019 5:00:10 PM 1
fblogin.zip
Login facebook bang javascript SDK
aspnet 7/9/2019 9:16:37 AM 0
autocomplete-location.zip
autocomplete location geo from google place, html + js
aspnet 7/4/2019 4:37:55 PM 2
WebAPI.zip
api for android access db (v1.0.0)
aspnet 7/4/2019 9:14:17 AM 8
KydientuPdf.zip
Ky dien tu file PDF su dung itextsharp
aspnet 4/9/2019 3:30:37 PM 9
GooglePlusLogin.zip
Login Google Plus account, C#, web asp.net ver2.0. Simple connect google APIs. Send key, get token, get full account info
aspnet 6/1/2018 10:41:12 AM 11
WebApplication1.rar
Sample su dung thuat toan ma hoa tripDES, co khoa bi mat (privateKey)
aspnet 3/30/2018 10:06:35 PM 8
NETMdbToolsTestApp.rar
dotNet MdbTools for Access 2003/2007/2016 without Microsoft Jet Engine, source C#, https://www.codeproject.com/Articles/283626/MsAccess-MdbTools-with-MFC-and-NET
aspnet 3/26/2018 11:43:16 PM 1
Cryptography_MD5_TriDES_src.zip
Thuật toán mã hóa 2 chiều TriDES, gồm Encrypt và Decrypt, aspnet 2.0
aspnet 3/22/2018 11:20:44 AM 3
mvc.rar
sample project MVC on C#
aspnet 3/20/2018 9:25:36 AM 9
EduPortal.rar
Edu portal frame work for VB.NET
aspnet 3/14/2018 12:00:41 AM 13
AutoEntity.rar
Gencode vb.net visual studio 2015. dotnet v2.0
aspnet 3/13/2018 11:59:16 PM 2
GenCode.rar
Gencode XML, XSLT, Info, DAL .. engine enterprise for quick app database
aspnet 2/5/2018 9:37:28 AM 9
DataXml.rar
Read DB from SQL to XML file, Convert string TCVN to Unicode
aspnet 1/29/2018 2:15:45 PM 4
DesktopModules.rar
Module quản lý tin tức, CMS, quản lý nhóm tin trên dotnetnuke 6.x
aspnet 3/7/2013 4:47:49 PM 1715
CODERVN.NET
Công ty cổ phần công nghệ và dịch vụ AWAS
Công ty cổ phần công nghệ và dịch vụ AWAS, cổng thông tin, chính phủ điện tử, phần mềm quản lý điểm, quản lý sinh viên, http://awas.vn, http://awas.com.vn, phần mềm ứng dụng, dịch vụ công trực tuyến, thiết kế website, thiet ke web, thiết kế web, điện lực, phần mềm quản lý đào tạo, cao đẳng, đại học,cổng thông tin tích hợp, cổng thông tin điện tử, webportal, thư viện điện tử, electric library, library online, email, web, quản lý quan hệ khách hàng, CRM, dịch vụ công trực tuyến, phần mềm hành chính một cửa,