Thay đổi theme theo phương pháp thay đổi link file css:
Trong quá trình thiết kế website, bạn không nên dùng quá nhiều định dạng css phức tạp mà nên “quy hoạch” trước những định dạng để áp dụng cho website.
Vd Font: Sử dụng Verdana cho nội dung, Courier new cho code.
Color: sử dụng #888888 cho nội dung, sử dụng #000000 cho tiêu đề.
Size: 14pt bold cho tiêu đề, 9pt cho nội dung.
Với những lựa chọn trước như vậy, quá trình thiết kế theme cho website sẽ nhanh chóng hơn, đảm bảo cho sự nhất quán trong cách trình bày ở tất cả các trang.
Việc thay đổi theme bằng cách thay đổi link file css khá đơn giản và sử dụng các script ở phia browse để thực hiện. Một ví dụ cho việc thay đổi theme ở phía client là trang yahoo.com, Các theme được chọn và thay đổi ngay trên phía browse của khách viếng thăm mà không cần thiết phải tải lại trang:
- Sau khi đã chọn các sắc thái cho các thành phần chính của website, nên đưa tất cả các định dạng css và tất cả các image liên quan đến css đó vào một folder duy nhất (Lưu ý đường dẫn trong file css. Các đường dẫn đến hình ảnh hoặc file khác được tính từ file css chứ không phải là file html mà css đó định dạng, ví dụ file index.html có file định dạng css là public/css/theme.css, hình nền cho table ở thư mục public/images/hinhnen.jpg, thì định dạng talbe trong css sẽ là background: url(‘../images/hinhnen.jpg’).
- Đưa định dạng css vào trong trang:
Quote
<link rel=”stylesheet” id=”sitetheme” type=”text/css” href=”Path_To_Css/mytheme.css”>
- Viết code javascript để thay đổi theme: Ví dụ bạn có 2 theme, đoạn code dưới đưa một link thay đổi theme bằng javascript vào trang.
Quote
<a href=#theme onclick=”changeTheme(‘Theme_1’); return false”>Theme_1</a>
<a href=#theme onclick=”changeTheme(‘Theme_2’); return false”>Theme_2</a>
Trong một file javascript bất kỳ hoặc ngay trong trang html, bạn viết thêm đoạn code thay đổi theme:
Quote
<script>
function changeTheme(tentheme) {
document.getElementById(‘sitetheme’).src= tentheme + ”/mytheme.css”;
// Thay đổi Path của theme hiện tại thành một path mới
}
</script>
Như vậy, mỗi khi click vào các link Theme_1, Theme_2; đường dẫn của mytheme.css được thay đổi và do đó tất cả các định dạng của website bao gồm cả hình ảnh cũng thay đổi theo.
Tuy vậy, việc thay đổi theme chỉ diễn ra trong khi click lên nút Theme_1 hay Theme_2 và không lưu được trạng thái của theme khi trang được tải lại hoặc chuyển qua trang mới. Chúng ta có thể sử dụng cookie để lưu trạng thái (theme đã chọn) khi chuyển qua các trang tiếp theo, như vậy cứ mỗi lần chuyển trang sẽ phải gọi function setTheme() (<body onload=”setTheme()”>) :
Quote
<script>
function setTheme() {
if(document.cookie(“theme”)) { // Nếu tồn tại cookie tên là theme
document.getElementById(‘sitetheme’).src= document.cookie(“theme”) + ”/mytheme.css”;
}
}
</script>
Và để lưu trạng thái của theme đã chọn, sau khi thay đổi đường dẫn cho file css, cần lưu lại theme đã chọn:
<script>
function changeTheme(tentheme) {
document.getElementById(‘sitetheme’).src= tentheme + ”/mytheme.css”;
document.cookie = "theme=" + tentheme;
var date = new Date();
date.setMonth(date.getMonth()+1);
document.cookie += ("; expires=" + date.toUTCString());
}
</script>
Với việc viết website bằng HTML đơn thuần, sử dụng cách này để đưa chức năng thay đổi theme vào website không mấy tiện dụng, nhưng nếu thiết kế website với các ngôn ngữ như ASP, PHP,... thì với biến theme đã lưu trong cookie, Path_to_css lúc import css vào trang được thực hiện ngay trên server và mỗi khách viếng thăm có thể chọn lưu cho mình một theme ưa thích.
(Sưu tầm)
