A. GIỚI THIỆU:

Dưới đây là vài đặc điểm về giao diện mà các bạn cần biết:
- Được phát triển từ theme morden của Nukeviet 3.4.
- Tương thích với các phiên bản Nukeviet 3.4.0.1 và 3.4.0.2
- Được tối ưu CSS để load trang nhanh hơn và khắc phục một số lỗi nhỏ
- Phát triển dành riêng cho website tin tức, giải trí với layout mặc định là left - body
- Tích hợp thêm sider phục vụ việc đăng tải tin quan trọng, sự kiện
- Tích hợp menu CSS3 Ribbon cực nhẹ và đẹp cùng với nút bấm CSS đem đến một giao diện thanh dịu
- Block bài viết mới được tối ưu để cho ra chất lượng vượt trội từ code chính ban đầu.
- Thuật toán SEO được trao chuốt trong từng link để các bạn có thể tiếp cận "bác Google" nhanh chóng.
- Theme được mở rộng ra đến 1024px nên các bạn có thể tận dụng hết chiều ngang của web để quảng cáo, hạn chế bài quá dài, bố cục dễ dàng hơn,...
...

B. DEMO ONLINE VÀ HÌNH ẢNH:

Đây là địa chỉ web và vài hình ảnh để các bạn tham khảo: http://ctsv.ispace.edu.vn/index.php

http://dl.dropbox.com/u/109435534/iSpace/2012.12.12/cong-tac-sinh-vien-ispace-1.png

http://dl.dropbox.com/u/109435534/iSpace/2012.12.12/cong-tac-sinh-vien-ispace-2.png

http://dl.dropbox.com/u/109435534/iSpace/2012.12.12/cong-tac-sinh-vien-ispace-3.png



http://dl.dropbox.com/u/109435534/iSpace/2012.12.12/cong-tac-sinh-vien-ispace-5.png

http://dl.dropbox.com/u/109435534/iSpace/2012.12.12/cong-tac-sinh-vien-ispace-6.png

http://dl.dropbox.com/u/109435534/iSpace/2012.12.12/cong-tac-sinh-vien-ispace-7.png

http://dl.dropbox.com/u/109435534/iSpace/2012.12.12/cong-tac-sinh-vien-ispace-8.png

http://dl.dropbox.com/u/109435534/iSpace/2012.12.12/cong-tac-sinh-vien-ispace-9.png

C. DOWNLOAD VÀ CÀI ĐẶT:

Bây giờ quan trọng chính là theme Merry Christmas 2012 để các bạn tải về và trải nghiệm:
Vì đây là theme đầu tay mình phát triển từ modern nên có gì thiếu sót mong các bạn thông cảm!
Chúc tất cả ngày đặc biệt thật vui vẻ nhé!

Sau khi tải theme về máy, các bạn tiến hành như sau:

- Bước 1: Xả nén file, các bạn sẽ có được các thư mục: css, hot, images, includes, modules, themes
- Bước 2: Upload tất cả các thư mục trên ngang hàng với index.php
- Bước 3: Vào Admin/Quản Lý Giao Diện/ Thiết Lập Layout để chỉnh lại layout cho theme noel là left-body
- Bước 4: Tiến hành cài đặt theme Merry Christmas 2012 bình thường
- Bước 5: Sau khi cài đặt xong, các bạn hãy cài đặt các block cơ bản và cần thiết. Và đừng bỏ lở phần D bên dưới nha!

D. TÙY CHỈNH THEME:

Để được như trang web của mình và tùy biến theo cá nhân, các bạn hãy cùng đọc qua hướng dẫn bên dưới nhé!
1. Menu CSS:
- Menu này chỉ hỗ trợ trình duyệt Chrome 18+, Firefox 14+ và IE 9+ (đối với các trình duyệt khác hoặc phiên bản củ hơn thì menu vẫn hiễn thị nhưng hiệu ứng nhấn mạnh sẽ không được thực hiện)
- Các bạn truy cập vào root/themes/noel 2012/layout, mở file header.tpl lên để chỉnh sửa nội dung của menu (Đoạn menu nằm từ dòng 69 đến dòng 81). Còn muốn chỉnh về CSS, các bạn hãy mở file này root/themes/noel 2012/css/menu.css

2. Slider
Mình dùng phương pháp chèn iframe vì còn nhiều hạn chế trong lĩnh vực php, các bạn thông cảm cho nhé!
- Tất cả hình ảnh phải có kích thước là 980x300 px
- Trong file nén tải về, có thư mục hot, đấy chính là thư mục để chúng ta làm việc với slider này.
- Giả sử bạn cần đăng 6 tin thì cần phải làm như sau:
+ Chuẩn bị 6 ảnh với kích thước trên, sau đó chép số ảnh này vào thư mục root/hot/images
+ Mở file root/hot/chuoi-chuong-trinh-ispace.html (có thể rename lại theo ý bạn).
+ Bắt đầu hiệu chỉnh từ dòng 43 đến dòng 65.
+ Mặc định là 6 hình, nếu muốn thêm hình, bạn chỉ cần copy thêm 1 đoạn trong cập thẻ <li>...</li>.
- Sau khi chỉnh sửa ưng ý, các bạn quay lại trang chủ và thêm một block iframe phía dưới menu css ribon như hình. Nội dung của iframe chính là đường dẫn đến file root/hot/images/chuoi-chuong-trinh-ispace.html với kích thước là 988x307 px



3. Thành viên:

Để được block thành viên như của mình, các bạn chỉ cần thêm một block html với nội dung như sau là được:

Mã: Chọn hết

<div style="text-align: center;">
<a href="http://ctsv.ispace.edu.vn/users/" style="text-align: center;"><img alt="" src="http://dl.dropbox.com/u/109435534/iSpace/dang-nhap.png" style="width: 20px; height: 20px;" />Đăng Nhập</a><span style="text-align: center;">&nbsp;&nbsp;&nbsp;</span><a href="http://ctsv.ispace.edu.vn/users/register/" style="text-align: center;" target="_blank"><img alt="" src="http://dl.dropbox.com/u/109435534/iSpace/dang-ky.png" style="width: 24px; height: 24px;" />Đăng Ký</a><br style="text-align: center;" />
<br style="text-align: center;" />
<a href="http://ctsv.ispace.edu.vn/users/lostpass/" style="text-align: center;" target="_blank"><img alt="" src="http://dl.dropbox.com/u/109435534/iSpace/quen-mat-khau.gif" style="width: 20px; height: 20px;" />&nbsp;Quên mật khẩu</a><br style="text-align: center;" />
<br style="text-align: center;" />
<a href="#" style="text-align: center;"><img alt="Mạng Xã Hội Google Plus" src="http://dl.dropbox.com/u/109435534/iSpace/google-plus.png" style="width: 25px; height: 25px;" /></a><span style="text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><a href="http://www.facebook.com/iSpaceCollege" style="text-align: center;" target="_blank"><img alt="Mạng Xã Hội Facebook" src="http://dl.dropbox.com/u/109435534/iSpace/facebook_1.gif" style="width: 25px; height: 25px;" /></a><span style="text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><a href="#" style="text-align: center;"><img alt="Mạng Xã Hội Twitter" src="http://dl.dropbox.com/u/109435534/iSpace/twitter_icon.jpg" style="width: 25px; height: 25px;" /></a><span style="text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><a href="http://me.zing.vn/b/uni.ispace" style="text-align: center;" target="_blank"><img alt="Mạng Xã Hội Zing Me" src="http://dl.dropbox.com/u/109435534/iSpace/zingme.png" style="width: 25px; height: 25px;" /></a></div>

4. Hỗ trợ Online:

Cũng giống block thành viên, các bạn hãy thêm đoạn code sau vào block html mới tạo nhé:

Mã: Chọn hết

<div style="text-align: center;">
<img src="http://ctsv.ispace.edu.vn/themes/default/images/hotline.png" /><br />
<a href="ymsgr:sendim?tinhcuoi2011"><img src="http://opi.yahoo.com/online?u=tinhcuoi2011&amp;m=g&amp;t=14" style="border-width: 0px; border-style: solid; width: 80px; height: 62px;" /><br />
<img src="http://ctsv.ispace.edu.vn/themes/default/images/phone.png" title="Bùi Thị Anh Thư" /><b>01694 87 88 89</b></a><br />
<a href="mailto:thubta@ispace.edu.vn" title="Bùi Thị Anh Thư"><b>Bí Thư Đoàn</b></a><br />
<br />
<a href="ymsgr:sendim?dualeo_cachua"><img src="http://opi.yahoo.com/online?u=dualeo_cachua&amp;m=g&amp;t=14" style="border-width: 0px; border-style: solid; width: 80px; height: 62px;" /><br />
<img src="http://ctsv.ispace.edu.vn/themes/default/images/phone.png" title="Nguyễn Thụy Bích Ngọc" /><b>01992 45 78 95</b></a><br />
<a href="mailto:ngocnq@ispace.edu.vn" title="Nguyễn Thụy Bích Ngọc"><b>Hành Chính Thư Viện</b></a><br />
<br />
<a href="ymsgr:sendim?tieumuoivotinh643"><img src="http://opi.yahoo.com/online?u=tieumuoivotinh643&amp;m=g&amp;t=14" style="border-width: 0px; border-style: solid; height: 62px; width: 80px;" /><br />
<img src="http://ctsv.ispace.edu.vn/themes/default/images/phone.png" title="Ngô Hồng Ngọc Huyền" /><b>0974.85.56.43</b></a><br />
<a href="mailto:ngongochuyen10101990@gmail.com" title="Ngô Hồng Ngọc Huyền"><b>Chuyên Viên QHDN</b></a><br />
<br />
<a href="ymsgr:sendim?trieunhut"><img src="http://opi.yahoo.com/online?u=trieunhut&amp;m=g&amp;t=14" style="border-width: 0px; border-style: solid; height: 62px; width: 80px;" /><br />
<img src="http://ctsv.ispace.edu.vn/themes/default/images/phone.png" title="Trương Triều Nhựt" /><b>01689 34 57 11</b></a><br />
<a href="mailto:nhuttt@ispace.edu.vn" title="Trương Triều Nhựt"><b>Chuyên Viên CSSV Q5</b></a><br />
<br />
<a href="ymsgr:sendim?it_nguyenquoctrung_it"><img src="http://opi.yahoo.com/online?u=it_nguyenquoctrung_it&amp;m=g&amp;t=14" style="border-width: 0px; border-style: solid; height: 62px; width: 80px;" /><br />
<img src="http://ctsv.ispace.edu.vn/themes/default/images/phone.png" title="Nguyễn Quốc Trung" /><b>01889 07 40 27</b></a><br />
<a href="mailto:trungnq@ispace.edu.vn" title="Nguyễn Quốc Trung"><b>Cộng Tác Viên</b></a><br />
&nbsp;</div>
<br />

5. Block ảnh chạy ngang:

anhyeuviolet đã viết:HIx... mê cái slide ảnh của chủ 2pic quá mà hoài chưa biết làm

Như sau:
Bước 1: Download file đính kèm về xả nén, upload lên host, ngang hàng với index.php
Bước 2:
- Trường hợp 1: Chưa chỉnh sửa file header.tpl, lúc này, các bạn có thể bỏ qua bước 2 vì mình đã thêm code vào trong file header.tpl trong file đính kèm.
- Trường hợp 2: Đã chỉnh sửa file header.tpl.
+ Xả nén file đính kèm xong, vào themes/noel/layout và xóa file header.tpl rồi hẳn upload
+ Mở file header.tpl trên web của bạn và thêm đoạn code sau trong cập thể <head></head>

Mã: Chọn hết

<link href="/themes/forum/css/pic-ngang.css" rel="stylesheet" type="text/css" />
<script src="/themes/forum/js/pic-ngang1.js"></script>
<script src="/themes/forum/js/pic-ngang2.js" type="text/javascript"></script>

Bước 3: Phía dưới slide ảnh to, các bạn thêm một block html với nội dung là:

Mã: Chọn hết

<div class="hovergallery">
<div class="iframe123Mua-kind04">
<div class="topIframe">
&nbsp;</div>
<div class="iframe123Mua-kind04-inside clear">
<div class="contentIframe">
<ul id="slider1">
<li>
<div class="product">
<div class="pic">
<a href="http://thantuongdotkich.nhaccuatui.com/Editor/upload/yearbook/ISPACE/P1050850.jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://thantuongdotkich.nhaccuatui.com/Editor/upload/yearbook/ISPACE/P1050850.jpg" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/P071211_09.25%5B01%5D.jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/P071211_09.25%5B01%5D.jpg" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/_MG_1761.jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/_MG_1761.jpg" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/_MG_1735.jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/_MG_1735.jpg" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/_MG_1470.jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/_MG_1470.jpg" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/_MG_1459.jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/_MG_1459.jpg" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/706004_139020346249212_249733473_o.jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/706004_139020346249212_249733473_o.jpg" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/578965_464904076893966_587466602_n.jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/578965_464904076893966_587466602_n.jpg" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/7.jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://dl.dropbox.com/u/109435534/iSpace/2012.12.17/7.jpg" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://thantuongdotkich.nhaccuatui.com/Editor/upload/yearbook/ISPACE/ispace-ngan%20loi%20tri%20an%20(49).JPG" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://thantuongdotkich.nhaccuatui.com/Editor/upload/yearbook/ISPACE/ispace-ngan%20loi%20tri%20an%20(49).JPG" width="190" /></a></div>
</div>
</li>
<li>
<div class="product">
<div class="pic">
<a href="http://thantuongdotkich.nhaccuatui.com/Editor/upload/yearbook/ISPACE/ispace-10ccht01-cop%20con%20(30).jpg" rel="lightbox"><img alt="Ảnh Đẹp Sinh Viên iSpace - Thần Tượng Đột Kích 2012" height="190" src="http://thantuongdotkich.nhaccuatui.com/Editor/upload/yearbook/ISPACE/ispace-10ccht01-cop%20con%20(30).jpg" width="190" /></a></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<br />


Bước 4: Thay đổi đổi link ảnh phù hợp với nhu cầu các bạn nhé!
Download file: http://forum.nukeviet.vn/viewtopic.php?f=148&t=25662&p=131139#p131139
6. Một số block, modul được tích hợp:

Trong theme Merry Christmas 2012 còn tích hợp các block như: Like Fanpge Facebook, Comment Facebook, Bản tin mới, Liên hệ, Thống Kê... và những module như: Video Clip, Get Tin, Danh Ngôn, Download, News,...

Mình cũng không biết viết gì thêm, trong quá trình cài đặt và sử dụng nếu có thắc mắc thì mình sẽ cố gắng hỗ trợ trong khả năng kiến thức
Chúc tất cả vui vẻ nhé!

P/S: Đã cập nhật lên store với phiên bản v1.1.00, chúc cả nhà Giáng Sinh an lành nhé!

Theme khá ấn tượng! ^^ Nhưng cài lên mak hok chỉnh sửa gì thì ko thể đẹp như trag gốc của bạn được! Với cái nữa là tên folder theme mình viết liền, chứ có khoảng trắng thì hệ thống nó ko chịu nhận.

Dưng nói chung là đẹp cái đã!

anhyeuviolet đã viết:Theme khá ấn tượng! ^^ Nhưng cài lên mak hok chỉnh sửa gì thì ko thể đẹp như trag gốc của bạn được! Với cái nữa là tên folder theme mình viết liền, chứ có khoảng trắng thì hệ thống nó ko chịu nhận.

Dưng nói chung là đẹp cái đã!

Các bạn cứ yên tâm, nếu thiếu gì thì cứ nói mình sẽ hỗ trợ hết mình. Vì nhận thấy từ lâu rồi Nukeviet không có theme noel nào được chia sẻ cả. Mình đã thức đúng 48h để cho ra sản phẩm này. Nếu nói giỏi thì mình không dám nhận nhưng chúng ta cùng nhau sẽ hiểu được hết các vấn đề và nếu được, cùng phát triển theme hoàn chỉnh hơn.

À, theme vẫn chỉnh sửa bình thường, không có gì cá nhân (ngoại trừ logo, favicon, mấy cái slide ảnh)

Ak. Mình có xem lại ùi. Favicon thì vẫn là của mình ^^ vì cái đó nằm trong root mak.
Còn cái header có cái khúc " trang chủ - iSpace..." ý, thì hình như bạn chỉnh trong CSS phải hok ? vì mình thấy nội dung đó là cố định chứ hem có sửa được. Footer cũng rứa, mak đầu tư time chắc sẽ rất đẹp.

Với quên hỏi cái nữa là cái hình to ơi là to trên đầu là chèn ntn ý nhỉ ? @>@ chưa xem kỹ!

anhyeuviolet đã viết:Ak. Mình có xem lại ùi. Favicon thì vẫn là của mình ^^ vì cái đó nằm trong root mak.
Còn cái header có cái khúc " trang chủ - iSpace..." ý, thì hình như bạn chỉnh trong CSS phải hok ? vì mình thấy nội dung đó là cố định chứ hem có sửa được. Footer cũng rứa, mak đầu tư time chắc sẽ rất đẹp.

Với quên hỏi cái nữa là cái hình to ơi là to trên đầu là chèn ntn ý nhỉ ? @>@ chưa xem kỹ!

Hi hi... CSS chỉ dùng để căn chỉnh hình ảnh, bố cục, font chữ thôi.
1. Bạn muốn chỉnh tiêu đề website thì vào Admin/Cấu Hình/ Cấu Hình Site: trong này bạn có thể chỉnh tiêu đề, chú thích cho web, từ khóa tìm kiếm,...
2. Cái footer, bạn vào trong thư mục noel 2012/layout: mở file footer.tpl và sữa lại theo ý thích.
P/s: các bạn chờ xíu, mình ra quán cafe để có NET mạnh mới up tiếp các phần hướng dẫn để theme hoàn thiện hơn.

^^ Không phải ai cũng nhiệt tình như bạn ! Tuyệt quá đi!

anhyeuviolet đã viết:^^ Không phải ai cũng nhiệt tình như bạn ! Tuyệt quá đi!

Mình đang viết hướng dẫn và cập nhật lại theme, bạn vui lòng tải lại file đính kèm mới nhé!

ấn tượng đấy nhỉ, vote cho 1 phiếu

em cài lên nhưng trong phần hiển thị các giao diện nó ko hiển thị ra nên không biết kích hoạt như thế nào? Em dùng source mới nhất.

Có cách nào chỉ làm footer động thôi ạ?