hướng dẫn thiết kế template joomla responsive

Moderator: hungkhanggl

Locked
vndesign
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Jul 16, 2013 4:05 pm
Contact:

hướng dẫn thiết kế template joomla responsive

Post by vndesign » Tue Jul 16, 2013 5:13 pm

Như các bạn biết, ngày nay người dùng lướt web bằng thiết bị di động ngày một tăng,
Để một trang web chạy tốt trên các thiết bị di động và tự động tùy chỉnh giao diện cho phù hợp với mỗi thiết bị là xu hướng tất yếu của việc thiết kế website.
Mình sẽ trình bày các bước để thiết kế template joomla 3.0 responsive
Bước 1: chuẩn bị
Tải joomla 3.x tại joomla.org
Cài đặt Joomla 3.x lên host hoặc localhost bình thường
Bước 2: tạo template mẫu
Login vào admin web và chuyển đến phần template manager
chọn template bạn muốn chỉnh sửa và set Default
hoặc chọn 1 template nào đó có sẳn như beez3 rồi Duplicate để nhân bản thành 1 bản mới để dể chỉnh sữa.
Bước 3 : design template responsive joomla 3.0
mở file style.css trong thư mục template/tên template vừa tạo/css/style.css
sẽ trông như

Code: Select all

body{ margin:0;  padding:0; font-size:12px; font-family:arial; }.main_container {
}
.mid_container {
 margin:20px 0px;
}
.main_content_area {
}
.right_sidebar {
}
.main_content_area,
.right_sidebar,
.footer,
.header {
 border:1px solid #bbb;
}
Tiếp theo bạn mở file index.php ở thư mục template/tên template vừa tạo/
và sửa lại như sau:

Code: Select all

<?php
/**
 * @package&nbsp;&nbsp;&nbsp;&nbsp; Joomla.Site
 * @subpackage&nbsp; Template.Your_New_template_name
 *
 * @copyright&nbsp;&nbsp; Copyright (C) 2005 - 2013 Joomquery.com.
 * @license&nbsp;&nbsp;&nbsp;&nbsp; GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
?>
<!DOCTYPE html>
<html>
<head>
 <jdoc:include type="head" />
 <<span id="IL_AD8" class="IL_AD">meta name</span>="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
 <!-- main container -->
 <div class='container'>
 <!-- header -->
 <div class='row'>
 <div class='span12'>Header</div>
 </div>
 <!-- mid container - includes main content area and right sidebar -->
 <div class='row'>
 <!-- main content area -->
 <div class='span9'>
 <jdoc:include type="modules" name="position-3" style="xhtml" />
 <jdoc:include type="message" />
 <jdoc:include type="component" />
 <jdoc:include type="modules" name="position-2" style="none" />
 </div>
 <!-- right sidebar -->
 <div class='span3'>
 <jdoc:include type="modules" name="position-7" style="well" />
 </div>
 </div>
 <!-- footer -->
 <div class='row'>
 <div class='span12'>Footer</div>
 </div>
 </div>
</body>
</html>
bây giờ save lại và reload lại trang của bạn để hưởng thụ thành quả nha!
Chúc các bạn thành công
bài viết có sử dụng tư liệu của bác lamvt
cám ơn bác lamvt rất nhiều
Mình sẽ up video hướng dẫn cụ thể trong lần chỉnh sửa tiếp
Please read the Forum rules regarding signatures: http://forum.joomla.org/viewtopic.php?t=65

himlamcholonq6
Joomla! Intern
Joomla! Intern
Posts: 91
Joined: Sat Apr 06, 2013 7:01 am
Location: Căn hộ Hà Đô Centrosa Garden
Contact:

Re: hướng dẫn thiết kế template joomla responsive

Post by himlamcholonq6 » Sun Sep 08, 2013 9:19 am

Có ai làm được chưa, much đích của việc này là đáng nghiên cứu vì tỷ lệ người dùng smart phone ngày càng tăng chóng mặt. Hơi phức tạp mình ko làm được.

MrReal
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Fri Apr 27, 2012 4:15 pm
Contact:

Re: hướng dẫn thiết kế template joomla responsive

Post by MrReal » Tue Sep 17, 2013 3:35 pm

Bài viết hay đấy, để test thử rồi báo lại kết quả cho mọi người. Thanks chủ Topic đã chia sẽ

dinatour
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Oct 17, 2013 11:15 am

Re: hướng dẫn thiết kế template joomla responsive

Post by dinatour » Thu Oct 17, 2013 11:21 am

Chào bác,

Bác nói hay, nếu bác nhận làm nâng cấp
web từ joomla 1.5 lên phiên bản 3.0 responsive như vậy
thì giá khoảng bao nhiêu bác?

Cảm ơn nhiều

Dan Tran
Joomla! Apprentice
Joomla! Apprentice
Posts: 38
Joined: Tue Oct 08, 2013 2:09 am

Re: hướng dẫn thiết kế template joomla responsive

Post by Dan Tran » Wed Nov 05, 2014 3:06 am

mình đang dùng ext, cũng khá ổn định, để mình thử dùng cách của bác xem có làm site nhẹ hơn không. Thanks

tranlonghm1981
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sat Nov 29, 2014 5:37 am
Contact:

Re: hướng dẫn thiết kế template joomla responsive

Post by tranlonghm1981 » Tue Jan 06, 2015 2:09 am

không biết mở file style.css để làm gì nhỉ ? đâu thấy sử dụng file đó đâu, cơ mà trong template beez3/css cũng đâu có file nào như vậy.
Mà hình như cái template beez3 đã có sẵng cái phần responsive rồi hay sao ấy, mình down trên này về dùng làm default template , thấy nó co gãn tốt như responsive template vậy đó, không bể hình vỡ frame gì cả.

winds2070
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Jun 05, 2014 9:00 am
Contact:

Re: hướng dẫn thiết kế template joomla responsive

Post by winds2070 » Sat Jan 31, 2015 7:24 am

code responsive của chủ thớt có thể áp dụng hết tất cả các template khác, được không ạ.


Locked

Return to “Bài viết cũ”