Tự tạo giao diện cho trang riêng violet

Thầy Cô dùng phần mềm tạo ảnh tĩnh hoặc ảnh động để tạo ra một hình ảnh độc quyền hiển thị cuối mỗi khung trong khối chức năng theo kích thước: ngang 190px, cao tùy ý (nhỏ nhỏ thì mới xi[r]

TỰ TẠO GIAO DIỆN VIOLET THEO PHONG CÁCH RIÊNG

Bước 1: Download file nguồn giao diện CSS TẠI http://dongholp.violet.vn

Bước 2: Trong file nguồn CSS, Dongholp đã ghi chú rõ ở cuối dòng cho từng mục cần thay màu Thầy

Cô mở file bằng Notepad và có thể thay đổi màu sắc cho từng mục theo ý thích để tạo phong cách

riêng bằng 2 cách:

- Dùng tên màu chuẩn bằng tiếng Anh (VD: white, red, blue, green, yellow, brown …)

- Dùng mã màu HEX: Thầy cô dùng bảng chọn mã màu để chế tác màu và copy mã màu đó, truy cập vào đây để chọn mã màu: Http://Violet.vn/hocn

Khi đã thay màu thích hợp cho từng mục trên giao diện, Thầy Cô lưu file lại và gởi lên host http://jabry.net (DongHolp thấy host này đang ổn định) hoặc host nào có hỗ trợ Java Script (chằng hạn: http://110mb.com ; http://webng.com) là được

Bước 3: Chèn link file CSS ấy vào mục “Thông tin bản quyền” bằng đoạn code sau:

<link rel="stylesheet" type="text/css" media="screen" href="LINK DẪN ĐẾN FILE CSS"/>

VD: <link rel="stylesheet" type="text/css" media="screen" href=" http://users11.jabry.com/dongholp/skinwebdongholp.css"/>

Nếu chưa ưng ý, Thầy Cô có thể chỉnh sửa và upload lên lại, file mới up lên sẽ được ghi đè lên file cũ trên host Tại trang Violet, Thầy Cô nhấn F5 để xem sự thay đổi

Bước 4: Tạo hình ảnh trên tiêu đề khối chức năng:

Với phần này, Dongholp đã ghi link sẵn dẫn đến hình ảnh Thầy Cô không cần chỉnh sửa link này nếu thích hình đó Tải về tại đây

Nếu không thích hình ấy, Thầy Cô có thể tự tạo cho mình 1 hình khác theo phong cách riêng với kích thước sau: ngang 190px, cao 42px

Bước 5: Tạo hình ảnh cuối mỗi khung ở khối chức năng:

Thầy Cô dùng phần mềm tạo ảnh tĩnh hoặc ảnh động để tạo ra một hình ảnh độc quyền hiển thị cuối mỗi khung trong khối chức năng theo kích thước: ngang 190px, cao tùy ý (nhỏ nhỏ thì mới xinh xinh nhá !)

Bước 6: Tạo khung nền cho các chuyên mục là tài liệu, tư liệu trên khối chính:

- Gồm 2 khung có kích thước: width 168px x height 150px

- Thầy Cô dùng phần mềm đồ họa tạo ảnh và ghi chữ độc quyền cuối mỗi khung

Bước 7: Up các hình trên lên Violet và lấy link thay vào các chỗ DongHoLp đã ghi chú ở các dòng

đầu trang trong file CSS

Bước 8: Upload file css đã hoàn chỉnh và tạo thêm file có đuôi Js đã hoàn chỉnh lên host Cuối

cùng nhấn F5 để refresh lại trang Viole và ngắm nhìn thành quả Cách tạo file js tại đây

VD: Giao diện nhà dongholp đấy !

Sau đây là nội dung file css Thầy cô copy đoạn mã sau đây và dán vào chương trình notepad,

chỉnh sửa và lưu lại với tên là <tên>.css

h2{font-size:16px}#posts{width:100%;overflow-x:hidden;}

#posts li{padding-bottom:10px;

height:auto !important;

height:124px;min-height:124px;

background:#fff url(http://s1051.photobucket.com/albums/s434/dongholp/Khungnoidung-1.gif)

top left no-repeat; /*MÀU NỀN KHUNG TƯ LIỆU - KHỐI CHÍNH*/

}

#smallposts li{padding-bottom:10px;

height:auto !important;

height:54px;min-height:54px;

background:#fff url(http://s1051.photobucket.com/albums/s434/dongholp/khungtruycap.gif) top left no-repeat; /*MÀU NỀN KHUNG TƯ LIỆU KHI RÊ CHUỘT VÀO - KHỐI CHÍNH*/

} title{font-size:13px;

font-weight:bold;

margin:0;

text-transform:uppercase;

overflow:hidden;

}.title a:link,.title a:visited{color:BLUE;}.by{font-size:10px;margin:0 0 2px 0;

color:BROWN;

text-transform:uppercase;

}.txt,.blue{color:#117ca4;}.txt{font-style:italic;

font-size:12px;

padding-left:170px;

}.pic{float:left;

margin:7px 18px 7px 7px;

}

#smallposts pic{margin:5px 18px 7px 5px;}.pos1{clear:both;}

#letters{line-height:2;padding-bottom:2px;}.size1

{font-size:10px;}.size2{font-size:12px;}.size3{font-size:15px;}.size4{font-size:17px;}.size5{font-size:22px;font-weight:bold;

}.pager{float:left;clear:both;

width:100%;padding:10px 10px 10px 10px;}.pager float-right{float:left;}.float-left{float:left;

}.float-right{float:right;margin-right:20px;}.comments{padding:0px;

width:528px;_width:100%;color:#3333FF }.comments navigator{color:#3366FF;

font-size:11px;margin:0px 0px 0px 0px;float:left;}.comments comment2

{width:100%;border:1px solid #DDDDDD;margin:0px 0px 10px 0px;padding:10px 10px 10px 10px;

float:left;text-color:RED;

}.comments comment1{width:100%;background-color:#f6f6f6;

border:1px solid #DDDDDD;

margin:0px 0px 10px 0px;padding:10px 10px 10px 10px;float:left;

text-color:#3366FF;

}.comments avatar{width:60px;height:60px;border:1px solid #CCCCCC;

background-color:#FFFFFF;

padding:3px 3px 3px 3px;margin:5px 5px 5px

5px;text-align:center;float:left;}.comment-edit{text-align:left;

}.comment-author{text-align:right;}.document li{display:block;text-align:center;float:left;

background-color:#FFFFFF;

margin:0px 0px 5px 0px;

padding:0px 0px 0px 0px;width:174px;

height:150px;cursor:pointer;

background:url(http://s1051.photobucket.com/albums/s434/dongholp/Khungnoidung-1.gif)

no-repeat; /*MÀU NỀN KHUNG TƯ LIỆU - KHỐI CHÍNH*/

background-position:center 0px;overflow:hidden;}.document over

{background:transparent url(http://s1051.photobucket.com/albums/s434/dongholp/khungtruycap.gif) no-repeat center

0px; /*MÀU NỀN KHUNG TƯ LIỆU KHI RÊ CHUỘT VÀO - KHỐI CHÍNH*/

}.document a,.document a:visited{color:#777777;text-decoration:none;}.document

a:hover{text-decoration:underline;cursor:pointer;

}.document li label{text-align:center;line-height:1em;

font-size:0.8em;margin:4px 12px 2px 12px;

display:block;

}.document li img{display:block;

background-color:#FFFFFF;text-align:center;

margin:10px auto 0px auto;

padding:0px 0px 0px 0px;

cursor:pointer;

}.shortdesc{width:259px;float:left;text-align:left;padding:10px 0px 0px 0px;}.shortdesc

img{float:left;margin-right:10px;}.shortdesc h3 {padding:0px;margin:0px;font-size:12px;line-height:normal;}

.docgroup h2, entrygroup h2, entry h2, doc h2 {

padding: 10px 10px 0px 10px;

margin: 0px 0px 0px 0px;

min-height: 25px;

clear: both;

background: transparent url() repeat-x top left;

background: YELLOW; /*MÀU NỀN KHUNG TIÊU ĐỀ - KHỐI CHÍNH*/

overflow-x: hidden;

font-size: 14px;

}

.docgroup content, entrygroup content, entry content, doc content {

background: #5FFEA1; /*MÀU NỀN KHUNG NỘI DUNG - KHỐI CHÍNH*/

}

.entrygroup, entry, doc { background: BLACK;

}

#side h2{_width:190px;margin:0px 0px 0px 0px;font-size:13px;text-align:center;font-family:Times

New Roman,arial,sans-serif;background:url(http://s1051.photobucket.com/albums/s434/dongholp/Tieudetren.gif) no-repeat center top;padding:5px;height:42px;color:#ffffff;text-transform:uppercase;font-weight:bold;clear:both} /*HÌNH ẢNH HIỂN THỊ PHÍA TRÊN KHUNG KHỐI CHỨC NĂNG*/

#side content { _width: 190px;

margin:0px 0px 0px 0px;

background: #5FFEA1; /*MÀU NỀN KHUNG NỘI DUNG - KHỐI CHỨC NĂNG*/

display:block;

padding: 1px;

border-left: 4px solid #FFFFFF; /*MÀU ĐƯỜNG KẺ TRÁI KHUNG KHỐI CHỨC NĂNG*/ border-right: 4px solid #FFFFFF; /*MÀU ĐƯỜNG KẺ PHẢI KHUNG KHỐI CHỨC NĂNG*/ border-top: 4px solid #FFFFFF; /*MÀU ĐƯỜNG KẺ TRÊN KHUNG KHỐI CHỨC NĂNG*/

border-bottom: 4px solid #FFFFFF; /*MÀU ĐƯỜNG KẺ DƯỚI KHUNG KHỐI CHỨC NĂNG*/

padding-bottom: 3px;

padding-top: 3px;

} selected { background: BROWN;

}

#side bottom{_width:190px;margin:0px 0px 10px 0px;background:url(http://s1051.photobucket.com/albums/s434/dongholp/tieudeduoi.gif) no-repeat center top;height:23px;display:block;clear:both;} /*HÌNH ẢNH HIỂN THỊ PHÍA DƯỚI

KHUNG KHỐI CHỨC NĂNG*/

}

#side content a { height: 15px;

}

#side content li a { color: BLUE; /*MÀU CHỮ LINK Ý KIẾN THÀNH VIÊN - KHỐI CHỨC NĂNG*/

}

#side content li { color: BLUE; /*MÀU CHỮ TRONG MỤC THỐNG KÊ Ở KHỐI CHỨC NĂNG*/

border-bottom: dotted 1px #FFFFFF;

}

#side content { color: BLUE; /*MÀU CHỮ NỘI DUNG Ở KHỐI CHỨC NĂNG*/

} leftmenu {

line-height:15px;

}

.leftmenu ul { padding: 0px;

margin: 0px;

}

.leftmenu li { display:block;

padding: 0px;

margin: 0px;

border-bottom: 2px dotted white; /*MÀU ĐƯỜNG KẺ PHÂN CÁCH TRONG MỤC Ý KIẾN THÀNH

VIÊN - KHỐI CHỨC NĂNG*/

}

.menutop { background:url() repeat-x center center;

background-color: #0325FD; /*MÀU NỀN PHẦN CÒN DƯ CỦA MENU*/

border: 2px solid YELLOW; /*MÀU ĐƯỜNG KẺ TRÊN VÀ VIỀN TRÁI CỦA MENU*/

font-weight: normal;

border-bottom: 2px solid YELLOW; /*MÀU ĐƯỜNG KẺ DƯỚI CỦA MENU*/

} menutop a:hover { background:url() repeat-x center center;

background-color: RED; /*MÀU NỀN MENU KHI RÊ CHUỘT VÀO*/

} menutop a { background:url() repeat-x center center;

background-color: #0325FD; /*MÀU NỀN MENU*/

border-RIGHT: 2px solid YELLOW; /*MÀU ĐƯỜNG KẺ PHẢI CỦA MENU*/

} menutop li { border-right: 0px solid YELLOW; /*MÀU ĐƯỜNG KẺ TRÁI CỦA MENU*/

}

#top a:link { color: white; /*MÀU CHỮ MENU KHI CHƯA NHẤN CHUỘT VÀO*/

}

#top a:visited { color: WHITE; /*MÀU CHỮ MENU KHI ĐÃ NHẤN CHUỘT VÀO*/

}

#welcome a { background: GREEN; /*MÀU NỀN CHỮ THOÁT CẠNH TÊN THÀNH VIÊN GÓC PHẢI TRÊN*/

}

.dropmenudiv { font:normal 12px Verdana;

line-height:18px;

}

.dropmenudiv ul { border: 0px solid BROWN; /*MÀU KHUNG MENU XỔ XUỐNG*/

}

.dropmenudiv a { font-size: 11px; /*CỠ CHỮ TRONG MENU XỔ XUỐNG*/

color: WHITE; /*MÀU CHỮ MENU XỔ XUỐNG*/

}

.dropmenudiv li { border-bottom: dotted 2px #03FE39; /*MÀU ĐƯỜNG KẺ PHÂN CÁCH LINK TRONG MENU XỔ

XUỐNG*/

background: BLUE; /*MÀU NỀN TRONG MENU XỔ XUỐNG*/

} dropmenudiv a:hover { /*THEME CHANGE HERE*/

background:YELLOW; /*MÀU NỀN KHI RÊ CHUỘT CHỌN LINK TRONG MENU XỔ XUỐNG*/

text-decoration:underline;

}

#wrap3 { background: #057CFB; /*MÀU NỀN CHUNG CHO CẢ TRANG*/

border:1px solid YELLOW; /*MÀU KHUNG CHUNG CHO CẢ TRANG*/

border-width:0 2px;

overflow-x: hidden;

}

.comments comment2 { background-color: #FF9999; /*MÀU NỀN MỤC Ý KIẾN 2*/

}

.comments comment1

{ background-color: lightyellow; /*MÀU NỀN MỤC Ý KIẾN 1*/

} body { background: #057CFB; /*MÀU NỀN BÊN NGOÀI TRANG*/

}