Để 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;
}và sửa lại như sau:
Code: Select all
<?php
/**
* @package Joomla.Site
* @subpackage Template.Your_New_template_name
*
* @copyright Copyright (C) 2005 - 2013 Joomquery.com.
* @license 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>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
