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

<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>

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

<b>Bước 1: Download file nguồn giao diện CSS TẠI .</b>

<b>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 </b>
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 …)

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

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
(DongHolp thấy host này đang ổn định) hoặc host nào có hỗ trợ Java Script (chằng
hạn: ; ) là được.

<b>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:</b>
<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="
/>

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>Bước 4: Tạo hình ảnh trên tiêu đề khối chức năng:</b>

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

Hình đây: (Hình gif tự thay đổi màu nền sau mỗi 10 giâ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>Bước 5: Tạo hình ảnh cuối mỗi khung ở khối chức năng:</b>

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>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: </b>
- 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.

VD: Khung 1: Khung 2:

<b>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 </b>
đầu trang trong file CSS.

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

<b>Bước 8: Upload file css đã hoàn chỉnh và tạo thêm file có đi .Js đã hồn chỉnh lên host. Cuối </b>
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

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

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( />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( />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;

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

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;

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

background:url(
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( 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;

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

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(
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*/

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

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(
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*/
}

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

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;

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

}
.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Ữ THỐT CẠNH TÊN THÀNH VIÊN GĨC PHẢI TRÊN*/
}

.dropmenudiv {

font:normal 12px Verdana;
line-height:18px;

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>

.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*/

</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>

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 {

</div>

<!--links-->