Hướng dẫn sử dụng Yahoo! Mash, chỉnh sửa CSS


  

Để chèn được code CSS vào Mash bạn kéo xuống phần Style this profile và click vào Show advanced CSS sau đó copy mã CSS dán vào khung: Enter custom CSS. No HTML.

 

 

 

(CSS = các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. Xem thêm thông tin trên Wikipedia)


Chú thích code sử dụng phía dưới:
- Chữ màu đỏ: là giá trị cần có nhưng có thể thay đổi được tùy theo ý thích của các bạn.
- Chữ màu tím: Là chú thích của mình về code CSS phía trước, các bạn có thể bỏ, nó không ảnh hưởng gì tới code
- Những chữ còn lại: Bắt buộc phải có và các bạn không nên thay đổi gì nếu không biết về CSS.

Để tiện thay đổi màu sắc trong css, các bạn có thể tham khảo thêm bảng mã màu tại đây hoặc đây

 

Danh sách một số thuộc tính CSS trong Mash:

 

#ypf-coreid : the user photo and the user quote
#ypf-mystuff : My Mash Stuff
#dragLeft : the large left column
#dragRight : the right column
#ypf-guestbook : The Guestbook
#guestbook-entries : Guestbook entries
#ypf-contacts : Your Mash Friends List
#ypf-tags: Your Mash profile tags
#ypf-blurt : The Blurt module
#ypf-profile : “About Me” module
.mod-content : Content of the module that you identify.
.user-name : Your user name
.user-images : your avatar
 

một số thuộc tính khác bạn sẽ khám phá dần qua bài hướng dẫn này



A. NickName:
1. Thay màu và font chữ cho nickname: Các font chữ phổ biến thường dùng là:  Times New Roman, Arial, Comic Sans MS, Tahoma, Verdana, Courier New, Georgia,  Monotype Corsiva, Helvetica, sans-serif   
 

Code:
#ypf-coreid .user-card .user-info .user-name h1 span.nickname {
     color:#ffffff;
     font-family:courier new; /* Phông chữ */
     font-size:16px; /* Cỡ chữ */
     }

2. Thay nickname bằng file hình: (nên dùng dạng .gif hay .png để có nền trong suốt )
 
Code:
#nickname {
display: none; /* Dòng này để ẩn phần nickname bằng chữ */
}

#nickname-edit h1 {
background: url(http://www.yomash.com/images/yomash.gif) no-repeat;  /* link tới hình dùng làm nickname */
/* Lệnh repeat sử dụng cho tất cả trường hợp chèn hình dưới đây: repeat-x: lặp lại theo chiều ngang, repeat-y: theo chiều dọc, no-repeat: không lặp lại, repeat: lặp lại tất cả các hướng */
color: #ffffff;
height: 100px; /* chiều cao hình */
width: 400px; /* chiều rộng hình */
}
Ví dụ:


3. Thay khung ảnh cho Avartar:
 
Code:
#ypf-coreid .user-card .user-images {
     background-image:url('http://www.yomash.com/images/frame.gif'); /* Link ảnh */
     }
DEMO:



B. Background cho Mash (chèn hình nền)

1. Dạng tile: hình nền lặp lại nhìu lần (khuyến cáo nên dùng hình ít màu sắc, ít họa tiết và tương phản với màu chữ, chẳng hạn nền sáng, chữ tối, nền màu tối chữ sáng)
 
Code:
body {
      background-color:#232f39;
 background-image:url('http://www.yomash.com/backgrounds/6.gif'); /* link đến hình làm nền */
     background-attachment:scroll;
     font-family:Verdana, Tahoma, Arial, sans-serif; /* font chữ */
     color:#97bcd0; /* màu chữ */
     }

 

2. Dạng 1 hình cố định: cuộn được (background-repeat:no-repeat;)

 

Code:
body {
     background-color:#232f39; /* Màu nền */
     background-image:url('http://www.yomash.com/backgrounds/pozadina.jpg'); /* link hình */
     background-attachment:scroll;
     background-position:top; /* Vị trí của hình: có thể thay top bằng: left, right, bottom, center */
     background-repeat:no-repeat;
     font-family:Verdana, Tahoma, Arial, sans-serif;
     color:#97bcd0; /* Màu chữ */
     }
3. Loại hình nền không cuộn: chỉ cuộn chữ (khuyến cáo loại này nên dùng hình ít màu sắc và section không trong suốt thì chữ sẽ dễ đọc hơn) <background-attachment: fixed;>
 
Code:
body{
background-image:url("http://www.yomash.com/backgrounds/pozadina.jpg"); /* link hình */
background-attachment: fixed;
background-position: center; /* vị trí hình: có thể thay bằng left, right... */
background-repeat:no-repeat; /* nếu muốn hình lặp đi lặp lại thì thay bằng "repeat" */
background-color:ffffff; }
4. Dạng Top & Bottom (giống 360 yahoo blog, gồm có 2 hình trên và dưới):
 
Code:
body
{
	width:921px; /* Chiều rộng của hình nền */
        background-color:#232f39; /* Màu nền */
        background-image:url('http://www.yomash.com/backgrounds/pozadina2.jpg');  /*  Link hình dùng làm TOP */   
        background-position:top left;
        background-repeat:no-repeat;
	padding-top:143px;
        color:#c29157; /* Màu chữ */
}

.col-AA
{
	background:url('http://www.yomash.com/backgrounds/pozadina.jpg'); /*  Link hình dùng làm BOTTOM */ 
        background-position:bottom right;
        background-repeat:no-repeat;
	padding-bottom:133px;
}
Chèn hình nền vào module nick name (các lựa chọn: no-repeat, repeat-x, repeat-y và repeat)

 

Code:
.user-info 
{
    background:url('http://www.yomash.com/backgrounds/hoacuctrang.jpg') repeat-x; /* link hình */
}
 

 

C. Đề mục

1. Đổi font chữ, màu sắc, kích thước của đề mục:
 

Code:
h3 {
     font-family:Verdana; /* tên font */
     font-size:36px; /* Cỡ chữ */
     color:#ffffcc; /* màu sắc */
     }
DEMO:

2. Chèn hình vào đề mục:
-Chèn vào đầu đề mục:
 
Code:
h3 { 
font-family: Tahoma, serif; 
font-size: 26px; 
font-weight: normal; 
padding-left: 40px; 
background-image:url(http://www.yomash.com/backgrounds/emotion.png); /* link hình */
background-position:left;
background-repeat:no-repeat; }
 

 

- Chèn hình nền vào các đề mục
 
Code:
.hd 
{
    background-image: url(http://www.yomash.com/backgrounds/toppe.gif) repeat-x; /* link hình */
}




D. About me:
1. Thay đổi font chữ, màu chữ, chèn hình nền và đóng khung About me:
 

Code:
#ypf-profile {
background: url(http://www.yomash.com/backgrounds/[yomash.com]Stone3.jpg); /* link hình */
background-repeat:no-repeat; /* nếu muốn hình lặp lại thì thay bằng "repeat" */
background-position:bottom right; /* vị trí hình: phía dưới và bên phải */
font-family: serif; /* font chữ */
font-size: 26px; /* cỡ chữ */
color: #ffffcc; /* màu chữ */
border-top: 3px double #efefef; /* kích thước và màu khung trên */
border-left: 3px double #efefef; /* kích thước và màu khung trái */
border-bottom: 3px double #efefef; /* kích thước và màu khung dưới */
border-right: 3px double #efefef; /* kích thước và màu khung phải */
}
2. Thiết lập chiều rộng, chiều cao mặc định cho About me:
 
Code:
#ypf-profile .bd
{
	width:394px; /* Chiều rộng */
	height:332px; /* Chiều cao */
	padding:0;
	position:relative;
	overflow:auto;
}
 

F. Yahoo Mash section (module):
1. Chèn hình nền và khung vào section:
 

Code:
.mod {
     background-color:none; /* màu nền */
     background-image:url('http://www.yomash.com/backgrounds/[yomash.com]Stone3.jpg'); /* hình nền */
     border-style:solid; /* kiểu khung */
     border-width:2px; /* độ dày của khung */
     border-color:#3C6A90; /* màu khung */
     }
Nếu bạn muốn section trong suốt (nhìn thấy rõ hình nền của trang) thì dùng code sau:

 

Code:
.mod { 
     border:1px solid #000000; /* Màu của khung */
}

.mod .x1 {
background:#fafdff; /* Màu nền section */
opacity:0.1;  /* Độ trong suốt, giá trị càng nhỏ thì càng trong suốt */
filter:alpha(opacity=10); /* Giá trị trong suốt, cái này tỉ lệ với độ trong suốt bên trên nếu trên là 0.1 thì dưới là 10, 0.2 : 20, 0.3:30... */ 
display:block;
}
Nếu bạn chỉ cần đóng khung cho các section thôi thì chỉ cần chèn code sau:
 
Code:
.mod { 
     border:1px solid #000000; /* Màu của khung */
}
Đổi màu module khi di chuột qua
 
Code:
.mod-content:hover {  
background: #fcdfff; /* Mã màu /*
}
Hoặc thay màu bằng hình ảnh

 
Code:
.mod-content:hover {  
background:url(http://www.yomash.com/backgrounds/marketing.gif) /* Link ảnh /*
}

 

2. Thay màu nền cho tiêu đề của khung:
 

Code:
.hd {
     background-color:#3C6A90; /* màu nền của phần tiêu đề */
     }

3. Tạo thanh cuộn cho Modules:
 

Code:
#ypf-guestbook .bd{
position:relative;
height:350px;//độ dài của modules
overflow:auto;
}
 

G. Guestbook:
1. Chèn hình nền cho phần Guestbook:
 

Code:
#ypf-guestbook {
     background-color:#232f39; /* Màu nền */
     background-image:url('http://www.yomash.com/backgrounds/[yomash.com]Stone3.jpg'); /* link hình nền */
     background-position:left 40px;
     background-repeat:no-repeat; 
}
2.Thay nền cho khung viết Guestbook:
 
Code:
#ypf-guestbook .form-wrapper textarea
{
background-image:url(http://www.yomash.com/backgrounds/[yomash.com]Stone3.jpg); /* link hình */
}
3.Thiết lập chiều dài mặc định cho phần Guestbook: (sẽ xuất hiện thanh cuộn khi có nhiều Entry)
 
Code:
#ypf-guestbook .bd
{
	height:600px; /* Chiều dài */
	position:relative;
	overflow:auto;
}

H/ Linh tinh

 

Để ẩn đi Style box, bạn thêm đoạn code này: (khi đó, bạn phải nhấn vào This is fugly - ở module chứa nickname, để chỉnh sửa CSS )

#ypf-style 
{
display:none;
}

 

Chỉnh sửa font chữ (size, màu sắc...) cho Blurt

Code:
}
#ypf-blurt .nickname,#ypf-blurt .blurt-msg {
font-size:105%; /* kích cỡ */
font-style:italic; /* in nghiêng */
font-weight:strong; /* chọn chữ đậm, xóa dòng này để chọn chữ bình thường*/
color:#00BADF; /* màu chữ*/
}

Vậy là mình đã trình bày qua một số nét cơ bản về sử dụng css cho Yahoo Mash

Bạn có thể xem ví dụ một css hoàn chỉnh như ví dụ này (kéo xuống phần Style this profile)

 

Nếu bạn muốn tìm hiểu thêm nữa về CSS, thì đây là lớp học miễn phí. Nắm vững CSS, bạn hoàn toàn có thể tùy biến giao diện Yahoo! Mash như mong muốn.

 

Chúc bạn có những sáng tạo thật thú vị với Yahoo Mash!

Nhớ gửi cho mình xem thành quả của bạn nhé! (nick yahoo mình là yomash4u ;)  )

 

 

Sưu tầm và bổ sung. Bài viết của Trangnhat.net, ghi rõ nguồn khi phát hành lại thông tin từ trang này

 

 

Bạn có thể yêu cầu một thư mời tại đây (hoặc gửi tin nhắn tới nick yahoo yomash4u , đừng quên cho biết email và tên của bạn )

 

 

 

Trang web hiển thị tốt nhất với trình duyệt Firefox. Download phiên bản mới nhất của trình duyệt này tại đây.