Updated (add more): Yahoo Mash CSS Trick & Tip

Posted on by Minh Nguyen
Posted in Chưa phân loại

Hum wa ngồi buồn quá chừng nên ngồi vọc CSS với Yahoo Mash xem thế nào, thấy cũng hay hay.

Muốn share lại 1 số trick và tips cho bà con xài Mash.

Trước tiên là phần Body và Module của trang Yahoo Mash, 2 phần này thì không có gì đặc biệt ở đây cả, chỉ định nghĩa style sheet cho tag body, a và class mod. Lưu ý, class thì có dấu . phía trước, còn tag name thì ko có, đối với 1 đối tượng nhất định thì dùng dấu # trước id của control đó.

Cụ thể ví dụ:

body {
background-color:#000000;
color:#ffffff;
font-family: Verdana;
font-size:9pt;
}

.mod {
background-color:#000000;
color:#ffffff;
border-style:solid;
border-color:White;
border-width:1px;
}
a
{
font-family:Verdana;
font-weight:bolder;
text-decoration:underline;
color: #FFFFFF;
}

Đoạn định nghĩa CSS trên sẽ cho ra (theo thứ tự định nghĩa):

  1. 1 cái background màu đen (mã màu #000000), màu chữ là trắng, font Verdana, và kích thước 9points.
  2. Đối với các block module, thì cũng có màu nền là đen, chữ màu trắng, nhưng có border màu trắng độ dày 1px và kiểu boder là liền nét.
  3. Các link sẽ có màu trắng đậm, gạch chân và font chữ Verdana

Đó là 2 thành phần cơ bản của Mash.

Tiếp theo nà, trong Yahoo Mash có khá nhiều Button được sử dụng ví dụ Change Name (ở phần Pet), Add Tag, Preview, Apply và Cancel (Style), muốn define cho các button này nhìn cho tông suyệt tông với cái màu đen ở trên, định nghĩa class button:

.button
{
font-size:13px;
font-family:Tahoma,sans-serif;
font-weight:bold;
color:#FFFFFF;
height:25px;
background-color:#000000;
border-top-style:solid;
border-top-color:#777777;
border-bottom-style:double;
border-bottom-color:#777777;
border-bottom-width:3px;
border-left-style:solid;
border-left-color:#777777;
border-right-style:solid;
border-right-color:#777777;
border-right-width:2px;
}

Kết quả (xem nút …mèo bên dưới):

https://i0.wp.com/img455.imageshack.us/img455/4559/buttonbm9.jpg?w=640

Có 1 cái mà nhiều bạn complain khi xài Guestbook là dễ bị tràn hình khi post hình lớn, CSS cũng support cho việc giới hạn chiều ngang của hình. Thêm đoạn mã CSS sau vào:

.message img
{
max-width:200px;
width:expression(document.body.clientWidth 200? “200px”: “auto” );
}

Đoạn mã này có tác dụng là nếu như có hình trong message của Guestbook thì nó giới hạn chỉ maximum là 200px, dòng đầu tiên dành cho các trình duyệt khác IE6 trở xuống, dòng thứ 2 dành cho IE6 trở xuống.

Muốn làm cho ô nhập Guestbook thêm ấn tượng? Thêm đoạn mã sau:

#guestbook-text
{
width:280px;
height:159px;
opacity:0.9;
filter:alpha(opacity=90);
color:#FFFFFF;
font-weight:900;
background:url(http://img211.imageshack.us/img211/9927/2645847824a8b23d586gg7.jpg) no-repeat;
}

Đoạn mã này cho phép tạo 1 background image cho cái ô nhập Guestbook, có độ trong suốt là 90%, có chiều cao, chiều rộng được định sẵn, font chữ đậm và màu trắng. Xem demo tại Minh Mèo Yahoo Mash Page.
Kết quả:

https://i0.wp.com/img116.imageshack.us/img116/4222/guestbookxg3.jpg?w=640

Ngoài ra, mình có thể thay đổi cái Image Frame cho cái hình của mình bằng cách thêm đoạn mã sau, URL trỏ tới cái frame của mình.

#ypf-coreid .user-card .user-images
{
background-image:url(http://i8.photobucket.com/albums/a13/catchchuotnhat/polaroid_minhmeo2.png);
}

Kết quả:

https://i0.wp.com/img444.imageshack.us/img444/4443/polaroidbu8.jpg?w=640

He he, dưới đây mới là một số trick hay:
Chắc hẳn các bạn khi vào 1 Mash Page của 1 ai đó, bên cạnh cái name luôn có mấy cái link như Report Abuse, Block. Mình có thể ko cho các link này xuất hiện bằng cách thêm các tag sau:

#report-abuse, .block{
display:none;
}

Vậy là các link như Report Abuse hay Block sẽ biến mất

https://i0.wp.com/img391.imageshack.us/img391/1702/blockreportro1.jpg?w=640

Chưa hết, khi các bạn vào các Mash Page khác, các bạn sẽ thấy có mấy cái button Grab it (Tạm dịch là ăn cắp cái module này), muốn cho các module trên trang mình không bị mất cắp, chỉ việc thêm vào:

.grab
{
display:none;
}

là các nút Grab it sẽ bị biến mất, chẳng ai lấy được các module của mình

https://i0.wp.com/img444.imageshack.us/img444/1739/grabbuttonvb6.jpg?w=640

Trong Mash, có 1 phần là About me, phần này có sẵn 1 số câu mà Yahoo Mash đã để sẵn và bạn không thể xóa được, tuy nhiên, với CSS thì mấy cái này cũng…bay theo ý mình

Giả sử mình ko muốn xuất hiện mấy câu:

  • My best features
  • My Celebrity look-a-likes
  • What I’m most likely doing now
  • What I’ll most likely be doing in the future
  • My hobbies
  • If I were a movie character, I would be
  • What’s most likely playing on my iPod Songs sung by
  • The soundtrack of my life
  • My style
  • My talents
  • Things unique about me
  • Words that describe me

He he, thì chỉ việc add cái list sau vào trong phần CSS
UPDATED:

#aboutme-li-best, #aboutme-li-celebrity, #ab
outme-li-doing, #aboutme-li-future, #aboutme-li-hobbies, #aboutme-li-movie_character,
#aboutme-li-music, #aboutme-li-soundtrack, #aboutme-li-style, #aboutme-li-talents, #aboutme-li-unique, #aboutme-li-words
{
display:none;
}
CODE Cũ trên IE để lại 1 khoảng trắng cho những phần bị ẩn đi. Dùng đoạn code mới này sẽ fixed lỗi đó:

#aboutme-li-best, #aboutme-li-celebrity, #aboutme-li-doing, #aboutme-li-future, #aboutme-li-hobbies, #aboutme-li-movie_character,
#aboutme-li-music, #aboutme-li-soundtrack, #aboutme-li-style, #aboutme-li-talents, #aboutme-li-unique, #aboutme-li-words
{
display:none;
}

Kết quả:

https://i0.wp.com/img391.imageshack.us/img391/950/aboutmewh1.jpg?w=640

Tất cả mấy cái trên đều đang apply trên My Mash Page. Nếu ai đang xem entry này bằng Yahoo Mash thì có thể thấy ngay trên trang

Have fun!

Mấy cái này là thêm vào theo yêu cầu của mấy bạn

1. Làm sao để loại bỏ cái Nick name của mình ra khỏi Blurt ?

Thêm đoạn code CSS sau vào phần CSS của trang Mash:

#blurt-inline .nickname
{
display:none;
}

Muốn không cho người khác thấy link sang trang để đọc các blurt cũ, thêm:

#blurt-prev
{
display:none;
}

Xem minh họa ở trang Mash của Minh

2. Làm sao để change được hình Pet.

Hình Pet được thể hiện bởi 6 hình theo 6 trạng thái:

dead
dejected
sad
content
meh
happy

Các trạng thái được thể hiện bởi 1 con số, ví dụ giá trị 0 là dead và giá trị 51-60 là Happy.
Để change cái hình của Pet cho mỗi trạng thái, làm như sau:

– Click vào Change name (kế bên hình Pet)
– Giả sử, mình muốn change cái hình trạng thái của Pet là buồn sẽ ra hình

//farm1.static.flickr.com/185/435697976_9eb27d09ab_m.jpg” cannot be displayed, because it contains errors.

với link là: http://farm1.static.flickr.com/185/435697976_9eb27d09ab_m.jpg
thì mình sẽ gõ vào cái ô name của pet câu lệnh:

banana:img.sad = http://farm1.static.flickr.com/185/435697976_9eb27d09ab_m.jpg

Xong rồi nhấn vào nút Change. Nhấn vào nút change này, thì cái tên của pet vẫn sẽ được giữ nguyên, chỉ có thay đổi các hình cho Pet thôi.

Làm tương tự cho các mood còn lại, lưu ý là từ thể hiện mood phải là chữ thường và đúng như liệt kê ở bên trên.

Xem demo tại trang Mash của Minh.

Sắp qua tháng 11

Ước mơ nhỏ

7 thoughts on “Updated (add more): Yahoo Mash CSS Trick & Tip”

Để lại phản hồi