08 | Tháng Mười Một | 2007

Mash còn khá mới mẻ với mọi người. Lúc mởi bắt tay vào làm, vì chỉ là dân amateur nên mình cũng ko biết CSS là j. Tham khảo trên mạng và ý kiến bạn bè thì cơ bản ko có j khó. Bài này mình tổng hợp lại các code, nếu có j chưa đầy đủ, mọi người free cho ý kiến nha.

A. NickName:

1. Thay màu và font chữ cho nickname: Cái này có 1 giới hạn là nếu máy người xem có font chữ đó thì mới hiện chính xác được 8-| (khuyến cáo ko dùng font VNI)
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(link hình);
background-repeat:no-repeat;
color: #ffffff;(tuỳ chọn)
height: 100px; /* chiều cao hình */
width: 400px; /* chiều rộng hình */
}

3. Thay khung ảnh cho Avatar:

#ypf-coreid .user-card .user-images {
background-image:url(‘link ảnh’);

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, có màu tối và phải làm nổi bật màu chữ, ko dùng section trong suốt sẽ gây mỏi mắt cho người xem !)
Code:

body {
background-color:#232f39;
background-image:url(‘link hình 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

Code:

body {
background-color:#232f39; /* Màu nền */
background-image:url(‘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…hoặc ai rành CSS thì dùng % hay px để canh chính xác hơn */
background-repeat:no-repeat;
font-family:Verdana, Tahoma, Arial, sans-serif;
color:#97bcd0; /* Màu chữ */
}

3. Loại hình nền ko 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 ko trong suốt thì chữ sẽ dễ đọc hơn)
Code:

body{
background-image:url(“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 ( 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(‘link hình); /* 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(‘link hìnhdùng làm bottom’);
background-position:bottom right;
background-repeat:no-repeat;
padding-bottom:133px;
}

C. Đề mục

1. Đổi font chữ, màu sắc, kích thước của đề mục:
h3 {
font-family:Words of love; /* 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(link hình);
background-position:left;
background-repeat:no-repeat; }

-Chèn hình trên đề mục:

.x1{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’link hình’, sizingMethod=’scale’);
height: 104px; /* chiều cao hình */
width: 98px; /* chiều rộng hình */
display: block;
position:absolute;
top: -30px;
left:10px;
z-index: 20;
}
.x1[class]{
background: transparent url(http://i153.photobucket.com/albums/s237/kelangthang182000/emotion-magic1.png /* link hình */) no-repeat;
}

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

#ypf-profile {
background: url(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:

#ypf-profile .bd
{
width:394px; /* Chiều rộng */
height:332px; /* Chiều cao */
padding:0;
position:relative;
overflow:auto;
}

E. Link
– Trái tim bay lên khi rê chuột vào 1 liên kết:
a:hover
{
position:relative;
right:1px;
top:1px;
text-decoration:none;
color:#D570EE;
text-decoration:none;
font-weight:bold;
border-bottom:1px dotted #D570EE;
background-image:url(http://img216.imageshack.us/img216/7128/traitimbayuw8.gif);
}

F. Yahoo Mash section:
1. Chèn hình nền và khung vào section:
.mod {
background-color:none; /* màu nền */
background-image:url(‘link hình’); /* hình nền */
border-style:solid; /* kiểu khung */
border-width:2px; /* độ dày của khung */
border-color:#3C6A90; /* màu khung */
}

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

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

G. Guestbook:

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

#ypf-guestbook {
background-color:#232f39; /* Màu nền */
background-image:url(‘link hình nền’);
background-position:left 40px;
background-repeat:no-repeat;
}

2.Thay nền cho khung viết Guestbook:

#ypf-guestbook .form-wrapper textarea
{
background-image:url(link hình);

3.Thiệp 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;
}
4.Hình đẹp cho my pet

div#ypf-pet .bd img {
background:url(LINK HÌNH – có đầy đủ http://)
transparent no-repeat bottom center;
width:0px;
height:0px;
padding:120px 100px 0px 0px;(kich thước tuỳ chọn )
}

Mã màu cơ bản

Mới sưu tầm được từ em —†ζღ maybe-:¦:-º.·´) Để từ từ tham khảo mai mốt trang trí nhà.

Bổ sung (Ruby8x):

Copy tất cả vào mục Advanced CSS >> nút Preview để xem trước. Nếu đã hày lòng với theme của mình, bạn nhấp nút Apply để save lại.