Categories: Chưa phân loại

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

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

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

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

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

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

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

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

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.

Minh Nguyen

View Comments

  • Rất hay, đã áp dụng thử rồi, cám ơn Minh nhiều.

    Sẵn cho San hỏi tí, sao trên mash nó cứ hiển thị cái entry cũ trong blog của mình hoài vậy mặc dù đó không phải là entry mới nhất. Đã thử copy & paste lại RSS blog nhưng đâu lại vào đấy, hix.

  • @A San: theo em nghĩ, cái cơ chế của Y! Mash nó ko load liền data từ site cấp RSS mà nó lấy về rồi để cache. Chắc chừng nửa ngày sau là nó update à. :D

  • chào anh, em là ...người lạ :D
    anh cho em hỏi là em lỡ del luôn con pet rồi thì làm sao summon nó dậy được nữa? T_T

  • cảm ơn anh :D nói ra thì em còn nặng lòng với 360 lắm. giận Yahoo vô cùng.

  • Ths Minh nha, đang loay hoay với cái đống CSS, chả biết nó là gì? Để nghiên cứu bài của Minh rồi làm thử xem thế nào

Leave a Comment
Share
Published by
Minh Nguyen
% ngày trước

Recent Posts

Báo cáo Xu Hướng và hành vi tiêu dùng nghành FnB 2020 – 2030

Thay đổi lớn trong hành vi người tiêu dùng (NTD) Sự thay đổi lớn nhất…

% ngày trước

Bài Học Chính Trị Đầu Tiên – An Introduction to Political Philosophy

Cuốn sách cơ bản, dễ hiểu, luận chứng thuyết phục nhập môn về Triết học…

% ngày trước

Hiệu Quả Truyền Thông 38 Nền Tảng Công Nghệ Số Việt Nam trong 2020

Trong năm 2020 đã có 38 nền tảng công nghệ số được đánh dấu là…

% ngày trước

Báo cáo Tổng Quan Thị Trường Kỹ Thuật Số 2021

Đến hẹn lại lên, #WeAreSocial lại công bố báo cáo mới nhất về tổng quan…

% ngày trước

Báo cáo phân tích nền Kinh tế số Đông Nam Á do Google, Temasek và Bain

Ngày 3/10/2019, Google công bố bảng nghiên cứu thị trường cho nền Kinh tế Số…

% ngày trước

Định giá start-up công nghệ và fintech

Làn sóng start-up công nghệ toàn cầu đang nổi lên với những giá trị doanh…

% ngày trước