Wednesday, September 08, 2010

Viewing Category


Skins and Containers

 

    15

    Trên blog của lakhlaniprashant, có thông báo về việc 1 free DNN skin mới đã được đặt trên codeplex. Tên của skin là multiflex5. Ngoài ra, các bạn có thể tìm thêm các skin mới trên Open Source DNN Skins.

    Link:

    http://lakhlaniprashant.blogspot.com/2010/08/free-dnn-skin-multiflex5.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+TrickyCoder%2FDotNetNuke+%28Tricky+Coder%29

    http://osdnnskins.codeplex.com/releases

    http://osdnnskins.codeplex.com/

    [Read the rest of this article...]

    30

    Dưới đây là link để down free DNN skin proLogic 1.0 từ r2idnn. Mình thích tác giả của skin này vì đó là 1 người gốc Việt và thiết kế skin rất đẹp và nổi tiếng trong cộng đồng DNN.

    proLogic is a free DotNetNuke skin package designed and developed by R2i using web standards. The layout is created using XHTML/CSS approach with optimized markup for search engine and performance advantages.

    Link chi tiết:

    http://www.r2idnn.com/Freebies/proLogic.aspx

    [Read the rest of this article...]

    21

    Mấy hôm nay, mình thử làm theo những hướng dẫn của Joe Brinkman tạo 1 skin Dotnetnuke. Mình đã làm theo được và thành công. Rồi mình lại lấy 1 skin khác để chuyển đổi thành skin Dotnetnuke.

    -Đầu tiên, mình down skin Cloudy Water Sport từ http://www.oswd.org/. Giải nén nó ra để 1 chỗ nào đó, ví dụ như thư mục cloudywatersports_.

    -Down source code của tác giả Joe Brinkman cho skin Dreamy trên codeplex. Sẽ có việc dùng nó.

    Giải nén file này ra 1 chỗ nào đó trên máy của bạn, ví dụ như thư mục Dreamy.

    -Tạo 1 site DNN sử dụng DNN starter kit hoặc gói DNN install. Version mình dùng là DNN 5.4.4.

    -Download module DDRMenu từ site dnngarden.com. Nó giúp cho việc tạo menu của skin.

    Cài đặt module này vào site DNN của ta.

    -Làm theo hướng dẫn của Brinkman, mình tạo 1 thư mục CloudyWaterSport trong Portals\_default\Skins.

    -Tạo file index.html trong thư mục CloudyWaterSport.

    Thả đoạn code sau vào file đó và save lại:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    [Read the rest of this article...]

    14

    Dưới đây là link series bài viết hướng dẫn về tạo skin cho DNN site. Tác giả là Joe Brinkman.

    http://blog.theaccidentalgeek.com/post/2010/06/28/DotNetNuke-Skinning-101-%28Part-1%29.aspx

    [Read the rest of this article...]

    11

    Dưới đây là link bài viết tiếng Anh hướng dẫn các bạn cách tạo breadscrumb cho site DNN:

    http://www.r2idnn.com/Blog/BlogEntry/How_to_Create_an_Apple_styled_Breadcrumb.aspx

    Trong bài viết này, tác giả hướng dẫn khá chi tiết và có cung câp source để các bạn tham khảo.

    [Read the rest of this article...]

    12
    Như mình đã có một bài viết, cách đây ít lâu thì DNN đã tổ chức một cuộc thi skin contest cho DNN site. Đã có những nhóm chuyên về skin cho DNN tham gia. Và đến nay thì cuộc thi đã kết thúc, và có kết quả. Các bạn có thể xem kết quả tại site của Dotnetnuke.com
    Một trong những điều hay nữa là các skin tham gia cuộc thi này đã free cho người dùng sử dụng. Mình thấy có 25 skin tất cả. Các bạn có thể xem và down tại link sau:
     

    [Read the rest of this article...]

    01

    Hôm nay, trên forum dotnetnuke, Engage đã thông báo về sự ra mắt của free skin mới có tên Folio. Các bạn có thể down tại:

    http://www.engagesoftware.com/Products/Skins/Downloads.aspx

    Chi tiết thông báo:

    http://www.dotnetnuke.com/Community/Forums/tabid/795/forumid/112/threadid/359988/scope/posts/Default.aspx

    Mình đã thử down và test cả 2 free skin của nó là Folio và Zeen. Theo cảm nhận của mình thì chúng đúng là free skin. ^_^ Chất lượng không tốt lắm. Khi cài xong thì cả 2 bị những lỗi về CSS. Ví dụ như menu chính ở trên bị lệch phải khi view trên Firefox. Hoặc là container nhìn không đẹp. Có lẽ nó thích hợp cho site chỉ dùng HTML thôi. Nhưng đúng là có thể đòi hỏi gì ở 1 free skin chứ? ^_^

     

    [Read the rest of this article...]

    02

    Thời gian gần đây, có 2 sự kiện quan trọng ảnh hưởng đến DNN community:

    -Sự ra đời của DNN 5.1. Với việc ra đời của nó thì skin cũng phải thay đổi cho phù hợp với version mới của DNN.

    -Firefox đã ra version mới 3.5. Điều này chắc chắn ảnh hưởng đến layout của các trang web nói chung và site DNN nói riêng.

    Mấy hôm nay mình thử view các skin của DNN version 5.1 trên FF 3.5 và chứng kiến vấn đề rồi. Có skin mình mua cho DNN 4x trước đây thì bây giờ dùng cho DNN5x trên FF 3.5 đã lỗi khi hiển thị. Trước đó mình cũng view skin đó trên FF 3.5 với DNN 4x thì không có vấn đề gì.

    Mình xem lại 1 số skin free trên mạng, đã cũ rồi thì thấy nó vẫn view tốt. Tuy nhiên, nó lại biến mất 1 số link khi vào các chức năng như Extensions, Skins… trong Host/Admin. Không hiểu được.

    Đúng là 2 thằng này sẽ khiến nhiều người làm skin cho DNN đau đầu đây.

     

    [Read the rest of this article...]

    22

    Sẽ có lúc, khi ta hiển thị nội dung nào đó, yêu cầu có rounded border xung quanh. Khi đó ta phải dùng HTML code với table hoặc div để làm việc đó. Trong bài viết này, mình xin trình bài 2 cách mà mình biết. Cách đầu dùng table. Còn cách 2 dùng div, trong đó có cả jquery nữa.

    Về cách 1, mình dùng table. Nó có khá nhiều code. Mình đã tách nó ra từ 1 container code. Dưới đây là code của nó:
    <table cellspacing="0" cellpadding="0" align="center" border="0" class="RoundedTable" width="200">
    <tr>
        <td class="RoundedTL"><img id="Img1" src="images/spacer.gif" height="12" width="12" alt="" runat="server" /></td>
        <td class="RoundedT"></td><td class="RoundedTR"><img id="Img2" src="images/spacer.gif" height="12" width="12" alt="" runat="server" /></td>
    </tr>
    <tr>
     <td valign="top" class="RoundedL"></td>
     <td valign="top" class="RoundedTM">
               <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
            <td valign="middle" nowrap></td>
            <td valign="middle" width="100%" nowrap class="RoundedTitleCell"></td>
            <td valign="middle" nowrap style="padding-bottom:5px;"></td>
        </tr>
        <tr>
            <td colspan="3" class="RoundedM">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td id="ContentPane" align="center" class="DNNAlignleft" runat="server"></td>
                                </tr>
                                <tr>
                                            <td>
    Text và các nội dung khác được đặt ở đây
                                            </td>
                                </tr>    
                        </table>
                    </td>
                </tr>
        </table>
     </td>

    [Read the rest of this article...]

    05

    Mình có code sau:

    <a runat="server" href="http://www.google.com.vn" class="myex">Testing link</a>
    <br />
    <a id="A1" href="#" target="_self" title="abc">Testing link 1</a>

    Và CSS trong module.css:

    a:link {color: #00FF00}  /* visited link */
    a:visited {color: #00FF00}  /* visited link */
    a:hover {color:Black; font-variant:small-caps; background-color:Yellow;}   /* mouse over link */
    a:active {color: #0000FF}   /* selected link */

    Mình muốn các anchor sẽ bị đổi màu. Thế nhưng thực tế lại không như vậy. Khi hover chuột lên link thì thấy hiệu ứng cho font và background color. Thế nhưng màu chữ lại theo default của skin. Chỉnh sửa mãi mà không được. Không biết lí do của vấn đề nữa. T_T Đành theo cách sau:

    <div class="duc">
    <a runat="server" href="http://www.google.com.vn" class="myex">Testing link</a>
    <br />
    <a id="A1" href="#" target="_self" title="abc">Testing link 1</a>
    </div>

    Và CSS là:

    .duc a:link {color: #00FF00}  /* visited link */
    .duc a:visited {color: #00FF00}  /* visited link */
    .duc a:hover {color:Black; font-variant:small-caps; background-color:Yellow;}   /* mouse over link */
    .duc a:active {color: #0000FF}   /* selected link */

    [Read the rest of this article...]

    15
    Cách đây khá lâu, mình có đọc được 1 article của 1 lập trình viên nước ngoài hướng dẫn cách sao chép skin từ HTML code. Tuy nhiên lúc đó mình không quan tâm và skin thì phức tạp hơn nên mình cũng không bắt chước.
    Trong bài viết hôm nay, mình xin chia sẻ cách thức để copy 1 container từ HTML code có sẵn. Container của DNN thì đơn giản hơn và cũng dễ để copy hơn.
    Input: 1 trang của 1 site đang online có container mà chúng ta muốn copy.
    Tool:
    -Firebug nếu view trang trên Firefox, hoặc IE Developer Toolbar nếu bạn hay làm việc trên IE.
    -Một trình soạn thảo đơn giản như notepad, Editplus…
    -Ngoài ra có thể cần dùng AdBlock trên Firefox nếu gặp phải những container có image được giấu link kĩ.
    Các bước:
    1. Nghiên cứu các thành phần chính trong 1 container:
    Trước khi tạo 1 container, có lẽ bạn nên nắm rõ các thành phần chính trong 1 container. Nếu bạn đã nắm rõ thì tiếp tục bước 2. Còn nếu bạn chưa biết thì nên làm theo các bước sau:
    --Vào \_default\Containers, copy  folder1 container nào đó. Ví dụ như folder MinimalExtropy.
    -Xem 1 container mẫu nào đó. Ví dụ như Title_Blue.ascx.
    -Cố gắng đọc và hiểu chúng.

    [Read the rest of this article...]

    14
    Từ hôm qua đến giờ, mình thử ngồi làm container. Thực chất là mình ngồi copy code 1 cái container đơn giản từ 1 skin mà mình thấy hay hay trên 1 site DNN. Ban đầu, mình view site đó trên Firefox rồi view HTML source. Mình copy đoạn source. Rồi cố gắng lấy mấy cái image nữa. Copy các CSS cần thiết. Cũng vất vả cả ngày cho mấy cái thứ đơn giản như vậy.Chỉnh sửa lại đường dẫn. Bỏ bớt những code thừa. Đặt những DNN token vào… Hết cả 1 ngày rưỡi mới xong được. Test thấy OK trên Firefox. Tưởng thành công rồi. Ai dè khi view trên IE thì thấy lỗi. Giữa các cell thấy có khoảng cách. Xét lại thấy border=0, cellpadding=0, cellspacing=0. Điên tiết kiểm tra code lại nhiều lần. Nhớ lại những kinh nghiệm nhỏ nhoi đã từng trải qua khi thiết kế CSS. Khi đã cảm thấy đuối rồi, muốn bỏ cuộc, mình mới thử cách cuối cùng là đặt runat=server cho các HTML image control. May mắn là nhờ đó các image trong các cell tự gắn kết vào nhau hơn. Do đó, khi các bạn thiết kế container mà có dùng image, hãy đặt runat=server vào code.
    <img src="images/spacer.gif" alt="" height="12" width="14" runat="server">
    Thế là mất 2 ngày cho 1 cái container đơn giản. T_T

    [Read the rest of this article...]

    HomeTrangITForum
    Copyright 2010 by Nguyễn Minh ĐứcDesigned by DyNNamiteTerms Of UsePrivacy Statement