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

Danh sách thành viên | Cá nhân

Đăng nhập , với với

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
44  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
44  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
44  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
44  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
44  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
44  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


50  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
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 1189
News Ticker Demo.rar
jQuery Carousellite cho cuộn các khối tin nhẹ nhàng mượt mà, sử dụng cho module Tin tức (CMS) hoặc giới thiệu sản phẩm
aspnet 5/7/2011 8:59:52 AM 1006
cms_source_dll_sql_2010.rar
source C# + SQL Script + Dll module CMS trên DNN 5x, (bản chạy ổn định không lỗi)
aspnet 9/5/2010 6:05:54 PM 2692
killforever.rar
Script diệt virus forever.exe (lây nhiễm qua USB) mà không cần cài lại window
aspnet 7/28/2010 6:51:30 AM 372
CSharp Coding Standards.pdf
C# Coding standard, for all user, quy tắc viết mã lập trình c# dotnet.
aspnet 6/1/2010 8:27:39 AM 1744
weather_forex_gold.rar
module DNN : "vàng + thời tiết + tỷ giá ngoại tệ" của seekill
coder 3/11/2010 3:50:09 AM 1550
Training DotNetNuke.zip
Tài liệu hướng dẫn cài đặt DNN, tạo module DNN đơn giản, nâng cao
quanlv 9/30/2009 9:11:36 AM 4055
Viet va them 1 module don gian vao website.doc
Hướng dẫn viết module đơn giản trên DNN (word) có hình, gửi bởi vinahana
aspnet 9/18/2009 6:15:24 PM 1964
Moduel NEWs Demo.zip
Một số module bao gồm: News, WorkScheduler, QA, Comment, Menu, ...
quanlv 8/22/2009 10:44:15 AM 3539
MenuDNN5.rar
Menu DNN 51 Page.aspx
aspnet 7/21/2009 12:22:38 PM 2451
diendan.zip
Cài đặt diễn đàn (VSP) chỉ với 4 bước.
aspnet 6/15/2009 2:18:13 AM 1887
roll_updown.zip
Roll up, roll down news list using javascript, simple, easy to use.
radiogaga 6/1/2009 11:29:51 AM 556
rotator-1.0.0.rar
Auto Scroll News - tự động cuộn tin tức bằng JS
dotnetvn 5/30/2009 3:21:22 PM 812
captcha2.rar
CAPTCHA sinh ngẫu nhiên : size, font, position, color ... vẽ line gây nhiễu chống reCAPTCHA bot.
tieuphu 5/30/2009 2:34:42 PM 799
MenuDNN.zip
Menu Dọc cho DNN (Tác giả Võ Thế Quang)
biennv 5/27/2009 8:07:47 AM 1840
Gioi_thieu_san_pham_unisched4.zip
Giới thiệu phần mềm xếp thời khóa biểu đại học (University Scheduling 4.0) : áp dụng cho mô hình xếp thời khóa biểu niên chế, tại các trường đại học và cao đẳng tại việt nam
khanhjin 5/12/2009 5:00:02 PM 4566
HitCounterInDatabaseASPNET.zip
HitCounter
nguyentx 4/20/2009 4:38:04 PM 721
s3Slide.rar
Slide show chuyên nghiệp, giống tintuconline.com.vn
coder 4/9/2009 9:34:41 AM 2994
XMLPROG.zip
XML Programing C# dotnet
aspnet 4/4/2009 10:02:43 AM 772
menu_vnexpress.rar
Tạo menu giống vnexpress = xsl transform, C# dotnet, javascript(Toàn bộ mã nguồn).
coder 3/30/2009 10:14:50 PM 3103
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,