Bài 4
Hướng dẫn chỉnh sửa và thiết kế
giao diện web Joomla
Bài 4
Hướng dẫn chỉnh sửa và thiết kế
giao diện web Joomla
Nhắc lại bài cũ
• Joomla có những loại thành phần mở rộng nào?
• Việt hóa Joomla CMS như thế nào?
• Thay đổi giao diện website như thế nào?
• Quản lý đa phương tiện tại Media Manager;
• Có mấy nhóm thành viên trong website Joomla;
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Mục tiêu bài học
• Tìm hiểu chi tiết cách thức quản lý giao diện website
Joomla thông qua phần Template Manager;
• Chỉnh sửa một template có sẵn để tạo giao diện web
như ý muốn;
• Hiểu rõ cấu trúc của một Template, những kiến thức căn
bản để xây dựng 1 Template cho website Joomla.
• Tìm hiểu chi tiết cách thức quản lý giao diện website
Joomla thông qua phần Template Manager;
• Chỉnh sửa một template có sẵn để tạo giao diện web
như ý muốn;
• Hiểu rõ cấu trúc của một Template, những kiến thức căn
bản để xây dựng 1 Template cho website Joomla.
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Template Manager
Quản lý giao diện website Joomla bằng Template
Manager
-Giao diện website Joomla bao gồm 2 loại: giao diện cho trang frontend và giao

Sửa dòng <name>beez</name> thành <name>mynewtemplate</name>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Lựa chọn Template mynewtemplate làm template
mặc định
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Thay đổi màu sắc giao diện bằng cách thay mã màu trong
CSS của Template
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Các file CSS trong template - Thay đổi mã màu trong các
file này
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Thay đổi Logo:
-Thiết kế 1 file ảnh định dạng .gif có tên là logo.gif có
kích thước 300x97px
-Copy file ảnh trên và dán vào thư mục
/template/mynewtemplate/images
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Thay đổi màu sắc trên giao diện web bằng cách sửa CSS:
Để sửa CSS của Template, vào Template Manager, lựa chọn
tenplate cần sửa rồi chọn Edit CSS
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Danh sách các file CSS của Template:
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez

Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Xây dựng 1 Template mới
Phân tích file Templatedetails.xml:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template
1.0//EN" " /><install version="1.5" type="template">
<name>Day Thiet Ke Web Joomla</name>
<creationDate>31/08/2012</creationDate>
<author>Dao Trung Hieu</author>
<authorEmail></authorEmail>
<authorUrl></authorUrl>
<copyright>Dao Trung Hieu</copyright>
<license></license>
<version></version>
<description>Day Thiet Ke Web Joomla Tai POLY</description>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template
1.0//EN" " /><install version="1.5" type="template">
<name>Day Thiet Ke Web Joomla</name>
<creationDate>31/08/2012</creationDate>
<author>Dao Trung Hieu</author>
<authorEmail></authorEmail>
<authorUrl></authorUrl>
<copyright>Dao Trung Hieu</copyright>
<license></license>
<version></version>
<description>Day Thiet Ke Web Joomla Tai POLY</description>
Xây dựng 1 Template mới
<files>

Xây dưng 1 Template mới
<params>
<param name="banner_daohieu" type="list"
default="banner1.PNG" label="Chon banner:"
description="Chon banner cho template">
<option value="banner1.PNG">daohieu 1</option>
<option value="banner2.PNG">daohieu 2</option>
<option value="banner3.PNG">daohieu 3</option>
</param>
<param name="banquyen" type="text" default="Nhat Nghe"
label="Ban Quyen Thuoc Ve" description="Nhap ten ban
quyen" />
</params>
</install>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
<params>
<param name="banner_daohieu" type="list"
default="banner1.PNG" label="Chon banner:"
description="Chon banner cho template">
<option value="banner1.PNG">daohieu 1</option>
<option value="banner2.PNG">daohieu 2</option>
<option value="banner3.PNG">daohieu 3</option>
</param>
<param name="banquyen" type="text" default="Nhat Nghe"
label="Ban Quyen Thuoc Ve" description="Nhap ten ban
quyen" />
</params>
</install>
Xây dựng 1 Template mới
Phân tích file index.php

style="xhtml" /></div>
<div id="footer">
</div>
</div>
</body>
</html>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
<body>
<div id="wrapper">
<div id="top"><img
src="templates/daohieu/images/banner.jpg"></div>
<div id="left"><jdoc:include type="modules" name="left"
style="xhtml" /></div>
<div id="content"><jdoc:include type="component" /></div>
<div id="right"><jdoc:include type="modules" name="right"
style="xhtml" /></div>
<div id="footer">
</div>
</div>
</body>
</html>