Tạo 1 danh sách skin cho forum

theo yêu cầu của bạn nào ngày trước hỏi ý
[You must be registered and logged in to see this image.]
Các bước thực hiện:

Chuẩn bị CSS
Tạo script
Chèn vào diễn đàn
Bước 1 - Chuẩn bị CSS :

*Cách 1 : lấy CSS từ những skin trên [You must be registered and logged in to see this link.]

Nếu bạn không thể tự tạo 1 file CSS theo ý mình, hãy sử dụng những tài nguyên có sẵn trên hitskin

Vào [You must be registered and logged in to see this link.]
Mở notepad hoặc chương trình tương tự để ghi lại mã skin.
Tìm những skin những skin bạn thích.
[You must be registered and logged in to see this image.]
Mở trang skin mà bạn chọn, chú ý mã số của skin trên thanh address
[You must be registered and logged in to see this image.]
Copy số này vào notepad và sửa lại theo mẫu sau:

Code:

http://link diễn đàn của bạn/(mã số)-ltr.css

VD:

Code:

http://vietfm.forumvi.net/132762-ltr.css

Tìm thêm skin bạn thích và lặp lại các bước trên
Khi hoàn thành bạn có thể chuyển qua bước 2.

**Cách 2 : tự tạo 1 css của riêng mình :

Nếu bạn có 1 kiến thức cơ bản về CSS, hoặc là những skin bạn đã sử dụng qua đã được bạn tối ưu trong CSS.

Copy CSS của bạn vào Notepad và lưu với định dạng *.css
Upload file CSS của bạn lên 1 filehost nào đó hỗ trợ link trực tiếp
Thực hiện cho đến khi hoàn thành danh sách của mình
Bạn cũng có thể kết hợp 2 phương pháp trên để tạo ra 1 danh sách skin vừa ý .
Bước 1 - Tạo script :

Tạo 1 trang html
Copy đoạn sau vào trang html

Code:

var type = getCookie('template1');
var temsel = document.getElementById('temsel');
temsel.innerHTML ='<select onchange="changeskin(this.options[this.selectedIndex].value);window.location.reload();"><option> Chọn skin </option><option value="valeur1"> Skin 1 </option><option value="valeur2"> Skin 2 </option><option value="valeur3"> Skin 3 </option></select>';




if (type == 'valeur1')
{
   document.write('<link rel="stylesheet" type="text/css" href="link css skin 1.css">');
}
else if (type == 'valeur2')
{
   document.write('<link rel="stylesheet" type="text/css" href="link css skin 2.css">');
}
else if (type == 'valeur3')
{
   document.write('<link rel="stylesheet" type="text/css" href="link css skin 3.css">');
}


function changeskin(change) {
   var scheme = change;
   var name = 'template1';
   var pathname = location.pathname;
   //var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
   var ExpDate = new Date ();
   ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
   setCookie(name,scheme,ExpDate,'/');
}
function getCookie(name){
   var cname = name + "=";
   var dc = document�cookie;
   if (dc.length > 0) {
      begin = dc.indexOf(cname);
      if (begin != -1) {
         begin += cname.length;
         end = dc.indexOf(";", begin);
         if (end == -1) end = dc.length;
         return unescape(dc.substring(begin, end));
      }
   }
   return null;
}
function setCookie(name, value, expires, path, domain, secure) { 
   document�cookie = name + "=" + escape(value) +
   ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
   ((path == null) ? "" : "; path=" + path) +
   ((domain == null) ? "" : "; domain=" + domain) +
   ((secure == null) ? "" : "; secure");
}

Chú ý : script được lấy từ forum hỗ trợ tiếng Pháp nên mình giữ nguyên chữ "valeur" tiếng Pháp. Điều này không ảnh hưởng đến chức năng của script. Hạn chế sửa nội dung script này bạn chỉ nên sửa đổi những phần dưới đây ...
Thay tên skin trong danh sách của bạn. Chú ý đoạn:

Code:

<option> Chọn skin </option><option value="valeur1"> Skin 1 </option><option value="valeur2"> Skin 2 </option><option value="valeur3"> Skin 3 </option></select>

Ở đây mình có tên 3 skin. Cùng cấu trúc đó, bạn có thể thêm bớt skin cho mình.

Thay link những file CSS của bạn. Thay vào đoạn:

Code:

if (type == 'valeur1')
{
    document.write('<link rel="stylesheet" type="text/css" href="http://newbieq.forumvi.net/132762-ltr.css">');
}
else if (type == 'valeur2')
{
    document.write('<link rel="stylesheet" type="text/css" href="http://newbieq.forumvi.net/147757-ltr.css">');
}
else if (type == 'valeur3')
{
    document.write('<link rel="stylesheet" type="text/css" href="http://newbieq.forumvi.net/115621-ltr.css">');
}

Bạn cũng có thể thêm bớt theo ý mình

Cuối cùng - lưu lại trang html
[You must be registered and logged in to see this image.]
Bước 3 - Chèn Danh sách skin vào forum:
- Với phiên bản phpBB3 hoặc invision có thể chèn vào :
ACP > Display > Homepage > Generalities
- Với phiên bản phpBB2 hoặc punBB, có thể chèn vào template với vị trí thích hợp hơn
Chèn đoạn sau - thay bằng link trang html vừa ghi lại:

Code:

span id="temsel"></span><script type="text/javascript" src="link trang html"></script>

Cuối cùng tận hưởng thành quả của bạn.
Demo : [You must be registered and logged in to see this link.]

Còn nhiều cách nữa là sử dụng skin trong Temporary themes và Hitskin, có thể thay đổi hình ảnh được, thậm chí đổi được cả phiên bản luôn nhưng nhược điểm duy nhất là khi post bài sẽ bị trở về mặc định. Cái này đã cùng Ea của CP nghiên cứu nhưng vô phương khắc phục.
Vì vậy cách thay đổi CSS hiện nay là tối ưu rồi !

Trước đây Huylord cũng đã từng làm multy skin kiểu này rồi ... (pro thật)

Ý tưởng và tham khảo từ hướng dẫn script CSS Switcher. (google search)
Ý tưởng sử dụng Hitskin bởi Etana (forum hỗ trợ Pháp).
script được chỉnh sửa bởi Etana
(khi có ý tưởng này thì Etana đã làm trước mình rồi nên xin phép được lấy script trong bài của Etana)