Hỏi về sử dụng CSS trong dựng trang Yahoo! Mash

English | Vietnamese

Rules

Main Forum

Portal

Member Listing

Statistics

Search

Reading Room
[Register]

Login [ | https ]

Forum Index

Thảo luận hệ điều hành Windows

Hỏi về sử dụng CSS trong dựng trang Yahoo! Mash

[Question] Hỏi về sử dụng CSS trong dựng trang Yahoo! Mash	10/12/2007 05:34:48 (+0700) \| #1 \| 103026

ngthu
Member

Joined: 03/06/2007 23:40:34
Messages: 8
Offline

Tôi muốn hỗ trợ kiến thức hoặc nguồn tài liệu về sử dụng CSS, cụ thể trong dựng trang Yahoo! Mash

[Question] Re: Hỏi về sử dụng CSS trong dựng trang Yahoo! Mash	10/12/2007 13:00:48 (+0700) \| #2 \| 103129

blackwidow
Elite Member

Joined: 12/08/2003 05:55:35
Messages: 581
Offline

Code:

http://www.google.com.vn/search?q=CSS+cho+Yahoo+Mash&hl=vi&client=firefox-a&rls=org.mozilla:en-US:official&start=10&sa=N

[Question] Re: Hỏi về sử dụng CSS trong dựng trang Yahoo! Mash	14/12/2007 00:29:39 (+0700) \| #3 \| 103716

mr.itvn
Member

Joined: 10/03/2007 02:05:40
Messages: 1
Offline

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 smilie

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 */
}

Go to:

Users currently in here
1 Anonymous