bài viết nguồn từ trangnhat.com
Để 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:
[COLOR="Red"]- Chữ màu đỏ:[/COLOR] là giá trị cần có nhưng có thể thay đổi được tùy theo ý thích của các bạn.
[COLOR="Magenta"]- Chữ màu tím: [/COLOR]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 http://www.yomash.com/tools/color.php hoặc http://www.yomash.com/tools/colors.htm.
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
[SIZE="6"]A. NickName:[/SIZE]
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:
[SIZE="6"]B. Background cho Mash (chèn hình nền)[/SIZE]
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)
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 */
}
[SIZE="6"]C. Đề mục[/SIZE]
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 */
}
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 */
}