Tự làm giao diện cho trang Yahoo Mash docx

Tự làm giao diện cho trang Yahoo Mash Cũng giống như Yahoo 360, bạn có thể trang điểm cho Mash bằng những phông nền riêng với khả năng tùy biến đa dạng hơn như đổi màu cho nick và các ti

Tự làm giao diện cho trang Yahoo Mash

Cũng giống như Yahoo 360, bạn có thể trang điểm cho Mash bằng những phông nền riêng với khả năng tùy biến đa dạng hơn như đổi màu cho nick và các tiêu đề, chọn font chữ, cỡ chữ, kiểu gầy, béo khác nhau

Công cụ cần chuẩn bị:

- Một tài khoản Yahoo Mash để đăng ký tại

http://mash.yahoo.com Tên tài khoản chính là nick

YM, hòm thư Yahoo và Yahoo 360 sẵn có của bạn

Do còn trong giai đoạn thử nghiệm, Yahoo Mash chỉ chấp nhận những nick được mời từ một tài khoản Mash có sẵn

Đăng ảnh nhanh chóng vào Flickr ngay trên

- Một hình nền có kích cỡ lớn, như

1042 x 768 pixel đã được đăng lên

website nào đó Nếu bạn không có website chứa ảnh riêng, có thể dùng công cụ Flickr của Yahoo hay

Photobucket để đưa ảnh này lên

Thao tác thực hiện

Cách 1 Basic Mode

Trong phần Style this profile, bạn nhập vào ô

Background image URL địa chỉ đường dẫn tới ảnh đã được tải lên trang web nào đó

desktop

Ví dụ: khi mở một bức ảnh trên Flickr, nhấn chuột phải vào ảnh ở mục Large Size, chọn Properties, bạn

sẽ thấy đường dẫn ảnh dưới dạng

http://farm3.static.flickr.com hoặc thấy luôn trong ô Grab the photo's URL Hãy copy đường dẫn này vào

ô Background image URL

Nếu đánh dấu vào ô Fixed position, bức ảnh sẽ luôn ở một vị trí khi bạn trượt thanh cuộn Ngoài ra còn có lựa chọn Tile ("lát nền", nghĩa là bức ảnh sẽ lặp lại ở các vị trí thiếu), Center (ảnh nằm giữa trang)

Sau đó, nhấn Apply để lưu nền này

Cách 2 Dùng mã CSS

Nhấn vào dòng Show Advanced CSS Đây là công cụ dành cho những người hiểu biết về lập trình web để

họ tùy biến theme đa dạng hơn Tuy nhiên, những chỉ dẫn dưới đây sẽ giúp người "ngoại đạo" có thể hiểu

dễ dàng

Một theme sẽ bao gồm nhiều yếu tố như kích thước, màu sắc, phông chữ, được chỉ định bằng những câu lệnh nhập vào trong ô trắng trong mục Style this

profile

- Định màu nền bằng cách gõ

body { background: #99000;}

Giải thích: #99000 là mã màu "đỏ thẫm" Muốn biết các mã màu khác nhau, có thể tham khảo trong bảng sau

Hoặc cho nền một ảnh riêng bằng cách gõ

body {

background: #333333

url(http://trangweb.com/anh.jpg) no-repeat;

background-position:top center;

}

Giải thích: http://trangweb.com/anh.jpg là đường dẫn tới ảnh đã đăng lên website, lấy tương tự như trong Cách 1

no-repeat là ảnh không lặp lại (không "lát" trên bề mặt trang Mash) Muốn thay đổi, bạn gõ repeat-x (tham số cho chiều ngang) hoặc repeat-y (tham số cho chiều dọc) hoặc repeat-xy (lát cho cả 2 chiều)

#333333 là màu sẽ được hiển thị ngay sau bức ảnh nếu bạn không chọn chế độ lặp ảnh Ví dụ, phần cuối trang bị trống vì ảnh không dài tới đó thì sẽ được chèn màu này vào Nếu không cần, bạn có thể bỏ mã

số này khỏi câu lệnh

top center là vị trí ảnh nền được đặt, ở đây là đặt

chính giữa, phía trên Bạn có thể thay đổi bằng cách dùng các lệnh khác top right (phái trên bên phải), top left (phía trên bên trái), bottom right (phía dưới bên phải), bottom center (ở dưới chính giữa), bottom left (ở dưới bên trái), center (ở giữa), top (bên trên), right (bên phải)

- Định font chữ

body {

font-family: Arial, Georgia, Verdana;

font-size: 12px;

color:#FFFFFF;

font-strength: normal

}

Giải thích: Arial, Georgia, Verdana là font chữ bạn chọn để người khác xem Do không phải tất cả các

máy tính đều có cùng font nên bạn cần chọn hệ thống font được nhiều người dùng nhất

12px là kích cỡ của font chữ, bạn có thể đổi con số tùy theo ý thích

font-strength thường được đặt chế độ normal hoặc nếu không, bạn có thể gõ bold (để có chữ đậm) hoặc oblique (nghiêng)

- Định module chung

.mod {

background:#555555

url(http://trangweb.com/anh.jpg) repeat-x;

border: #33000 2px dashed;

}

- Định module-link

.mod a {color:#990000;}

.mod a:visited {color:#660000;}

.mod a:hover {color:#330000;}

Giải thích: a có nghĩa là link Ở đây, bạn đặt màu khác nhau tùy thuộc vào trạng thái của link, như bình thường thì có màu #990000, khi được bấm vào thì có màu #660000, lúc rê chuột qua thì hiện màu

#330000

- Định module nền

#ypf-coreid mod-content, #dragLeft mod-content,

#dragRight mod-content {

background: url(http://trangweb.com/anh.png) repeat scroll bottom right;

}

Ở đây bạn có thể thay đổi đường dẫn tới ảnh và dùng

mã màu cho nền background:#colorcode

- Định cách hiển thị tiêu đề

#dragLeft hd, #dragRight hd {

background: url(http://trangweb.com/anh.png)

repeat-x scroll top left; color: beige;

}

Giải thích: Bạn có thể đổi hình ở chỗ này và dùng mã màu background:#colorcode;

color:beige là màu của tiêu đề module

Ngoài ra, còn có một danh sách các mã CSS dành cho những module khác:

#ypf-coreid : ảnh hoặc lời trích dẫn của người dùng

#ypf-mystuff : My Mash Stuff

#dragLeft : cột lớn bên trái

#dragRight : cột lớn bên phải

#ypf-mosh-rss2-randomnumber : thay một số ngẫu nhiên bằng số (module cho RSS)

#ypf-guestbook : dành cho Guestbook

#guestbook-entries : các entry cho Guestbook

#ypf-contacts : danh sách bạn bè

#ypf-tags: thẻ hồ sơ Your Mash

#ypf-blurt : module Blurt

#ypf-profile : module About Me

.mod-content : nội dung của module mà bạn xác định .user-name : tên người sử dụng

.user-images : avatar của bạn

Bạn có thể đặt chế độ không cho người khác lấy cắp

"tài sản" như theme, nhạc bằng cách gõ:

.grab

{

display:none;

}

Khi xong việc, nhấn Apply

Theme ví dụ

Dưới đây là một đoạn mã ví dụ, bạn có thể dùng ngay hoặc thay đổi tùy thích:

body { background:

url(http://farm3.static.flickr.com/2135/2028288316_8 c7dded9f0_o.jpg) repeat fixed top center; color:

#FFFFFF; }

body a, a:visited { color: #E5E5E5; }

a:link, #nickname { color: #FF3300; }

.ft a:link { color: #E5E5E5; }

.mod { border: none; }

#ypf-coreid, #dragLeft mod, #dragRight mod {

background:

url(http://farm3.static.flickr.com/2119/2028403034_2 39899173b_m.jpg) repeat scroll top left; border: 1px outset #a9a9a9; }

#ypf-coreid mod-content, #dragLeft mod-content,

#dragRight mod-content { background:

url(http://farm3.static.flickr.com/2098/2027597441_3 610794aa3_m.jpg) repeat scroll bottom right; }

#dragLeft hd, #dragRight hd { background:

url(http://farm3.static.flickr.com/2115/2028403564_0 20cdde828_t.jpg) repeat-x scroll top left; color:

beige; }

#tagline-edit hover, div.hover, #ypf-blurt hover

.blurt-msg { background-color: #9acd32; }

#ypf-blurt hover timestamp { color: #FFFFFF; }