Yahoo!Mash ra đời với nhiều sự đổi mới so với Yahoo 360. Khả năng tùy chỉnh giao diện theo ý của riêng mình là một trong những tính năng được nhiều người sử dụng mong đợi nhất. Trong thủ thuật lần này, HelloICT hướng dẫn các bạn hiểu và tạo một theme Yahoo!Mash như thế nào.
Với Yahoo 360, bạn có thể tạo cho mình một theme đơn giản bằng các thêm ảnh top, bottom, middle,.. theo một trình học thuật cố định của Yahoo. Với Mash, bạn cũng có thể làm như thế. Tuy nhiên, Mash còn cho phép bạn làm nhiều thứ hơn như thể quyết định layout, màu sắc, kích cỡ, hình ảnh trên toàn trang Mash của mình bằng cách nhâm nhập vào CSS (CSS là ngôn ngữ dùng để trang trí trong thiết kế Web).
Để sử dụng CSS của riêng mình trang trí cho trang Mash bạn phải chuyển sang chế độ Advanced CSS
Để tạo được một giao điện đẹp cho Mash, không cách nào bằng hiểu được cấu trúc CSS của Mash để tùy biến CSS này theo phong cách riêng của mình. Mình sẽ hướng dẫn các bạn hiểu một cách đơn giản nhất.
Qui đinh:
Text in đậm là phần chính của CSS
Text in đậm có màu đỏ là giá trị mà bạn có thể thay đổi theo ý mình.
Phần text phía sau dấu // là chú thích. Khi copy vào Mash, bạn nên remove hết các chú thích này.
Cấu trúc CSS của Mash:
1. Thay đổi nền và font của toàn trang:
Mã:
body {
font-family:verdana,sans-serif; //Đây là phần font mặc định của trang. Bạn có thể thay thế bằng Arial hay Times news roman hay font Unicode nào khác
background-image:url('http://www.ketnoitatca.net/img/Logo.jpg' ); //url dẫn đến ảnh nền của mash.
background-repeat:repeat; //nếu bạn chọn ảnh nền là 1 ảnh nhỏ, bạn có thể cho ảnh lặp lại để phủ đầy trang hay chỉ hiện 1 lần bằng cách đổi thành background-repeat: no;
background-color:none; //màu nền. bạn có thể thay "none" bằng bất cứ màu nào. Ví dụ: màu đen: #000000
background-position:top left; //chỉ định chỗ đặt ảnh nền này ở đâu. Bạn có các vị trí:
color:#cccccc; //Màu của chữ-phần nội dung. Bạn có thể chọn màu khác như: đen: #000000, trắng: #ffffff
}2. Thay đổi các thuộc tính của Modules
Module có thuộc tính chính là "mod" và các thuộc tính phụ là: "x1", "x1a", "x2" và "x2a".
2.1 Thuộc tính chính (.mod):
Mã:
.mod {
background-color:none; //thay "none" bằng 1 giá trị màu HEX để tạo màu nền cho Module nếu bạn không dùng ảnh làm nền.
background-image:url('http://www.ketnoitatca.net/img/Logo.jpg'); //Dùng ảnh làm nền cho module, nếu bạn có thể bỏ dòng này hoặc thay đổi url tới ảnh của bạn.
border-style:solid; //là đường viền cho module. Có các loại viền sau: none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-width:2px; //là chiều rộng của đường viền. Bạn có thê tăng hay giảm giá trị 2px này.
border-color:#3C6A90; //Đây là màu viền với giá trị màu HEX.
}2.2 Thuôc tính con x1:
Mã:
.mod .x1 {
background-color: #fafdff;
opacity: 0.6; //Tạo đồ trong suốt cho modules
filter:alpha(opacity=60); //giống như trên nhưng dùng cho IE
display: block; //là chế độ hiển thị cho Module
}2.3 Thay đổi màu của chữ trong Modules:
Mã:
.mod-content {
color:#5c879c; //thay đổi giá trị màu theo ý của bạn
}2.4 Thay đổi tiêu đề của Modules:
Mã:
.hd { color:#004f83; //Màu của text
font-family:arial,sans-serif; //Font chữ
font-size:20px; //cỡ chữ.
}2.5 Thay đổi thuộc tính của Nickname:
Mã:
#ypf-coreid .user-card .user-info .user-name h1 span.nickname {
color:#004f83; //Màu cho tên (nick) của bạn.
}2.6 Thay đổi khung hình Avarta
Mã:
#ypf-coreid .user-card .user-images {
background-image:url('http://www.ketnoitatca.net/img/Logo.jpg') // đường dẫn đến khung hình.
}2.7 Thay đổi font cho tên, nơi ở....
Mã:
#ypf-coreid .user-card .user-info span.age, span.gender, span.locality {
color:#ffffff; //Thay đổi giá trị màu này theo màu của bạn
}Kết hợp tất cả các thuộc tính này vào một phần duy nhất. Các bạn sẽ có 1 CSS theme cho Mash.
Mã:
body {
font-family:verdana,sans-serif;
background-image:url('http://www.ketnoitatca.net/img/Logo.jpg');
background-repeat:repeat;
background-color:none;
background-position:top left;
color:#cccccc;
}
.mod {
background-color:none;
background-image:url('http://www.ketnoitatca.net/img/Logo.jpg');
border-style:solid;
border-width:2px;
border-color:#3C6A90;
}
.mod .x1 {
background-color: #fafdff;
opacity: 0.6;
filter:alpha(opacity=60);
display: block;
}
.mod-content {
color:#5c879c;
}
.hd { color:#004f83;
font-family:arial,sans-serif;
font-size:20px;
}
#ypf-coreid .user-card .user-info .user-name h1 span.nickname {
color:#004f83;
}
#ypf-coreid .user-card .user-images {
background-image:url('http://www.ketnoitatca.net/img/Logo.jpg')
}
#ypf-coreid .user-card .user-info span.age, span.gender, span.locality { //The classes used for age, gender, location
color:#ffffff;
}Copy tất cả vào mục Advanced CSS >> nút Preview để xem trước. Nếu đã hày lòng với Theme của mình, bạn nhấp nút Apply để save lại.
Bạn có thể vào đây đê tìm hiểu về CSS:
You must be registered for see links
Bên dưới là mã màu HEX tham khảo:
