Tạo giao diện (theme) cho Yahoo!Mash như thế nào?

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:

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.helloict.com/images/ ..../color_brown
_39.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):

.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.helloict.com/images/../color_brown
_39.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:

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

.mod-content {


color:#5c879c; //thay đổi giá trị màu theo ý của bạn


}

 2.4 Thay đổi tiêu đề của Modules:

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

#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

#ypf-coreid .user-card .user-images {

background-image:url('http://www.helloict.com/images/.. yahoomash/polaroid.png') // đường dẫn đến khung hình.


}

 2.7 Thay đổi font cho tên, nơi ở....

#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.

body {
font-family:verdana,sans-serif;
background-image:url('http://www.helloict.com/http://helloict.com/images/stories/gallery/yahoomash/color_brown_39.jpg');
background-repeat:repeat;
background-color:none;
background-position:top left;
color:#cccccc;
}

.mod {
background-color:none;
background-image:url('http://www.helloict.com/http://helloict.com/images/stories/gallery/yahoomash/color_brown_39.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.helloict.com/http://helloict.com/images/stories/gallery/yahoomash/polaroid.png')
}

#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: http://www.w3schools.com/css/default.asp


Bên dưới là mã màu HEX tham khảo:



{emailalert}