Page 1 of 1

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

Posted: Tue Jul 16, 2013 5:13 pm
by vndesign
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

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

Posted: Sun Sep 08, 2013 9:19 am
by himlamcholonq6
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.

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

Posted: Tue Sep 17, 2013 3:35 pm
by MrReal
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ẽ

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

Posted: Thu Oct 17, 2013 11:21 am
by dinatour
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

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

Posted: Wed Nov 05, 2014 3:06 am
by Dan Tran
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

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

Posted: Tue Jan 06, 2015 2:09 am
by tranlonghm1981
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ả.

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

Posted: Sat Jan 31, 2015 7:24 am
by winds2070
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 ạ.