Bộ sưu tập CODE CSS dành cho Mash !

Tạo CSS Theme Yahoo Mash trực tuyến : http://www.helloict.com/mash/

Trước khi đọc bài viết bên dưới chú thích 1 chút về màu chữ trong các đoạn code:
- 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ỏ, ko bỏ cũng chẳng sao, nó ko ả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 ko nên thay đổi gì nếu ko biết về CSS.

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 (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ữ */

}DEMO:
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://i153.photobucket.com/albums/s237/kelangthang182000/nickname.png);

background-repeat:no-repeat;
color: #ffffff;
height: 100px; /* chiều cao hình */

width: 400px; /* chiều rộng hình */

}DEMO:

3. Thay khung ảnh cho Avartar:

Code:

#ypf-coreid .user-card .user-images {
background-image:url(‘http://i153.photobucket.com/albums/s237/kelangthang182000/khunghinh.png‘);

}DEMO:

- CODE này để thay khung của avatar, ko cần thiết phải làm khung theo mẫu của mash _ KIRAVTVN

Code:

#ypf-coreid .user-card .user-images{ /* Hey IE! FUCK OFFFFFF */
width: 227px;
height:251px;
position:absolute;
top:-30px;
left:-80px;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://i189.photobucket.com/albums/z254/ngocvtvn/BG_Ava.png’, sizingMethod=’scale’);
}
#ypf-coreid .user-card .user-info .user-name h1 span.nickname{
color:#660000;
}
#ypf-coreid .user-card .user-images span.photo,
#ypf-coreid .user-card .user-images .controls a.add-photo{
margin-left: 0px;
}
#ypf-coreid .user-card .user-images span.photo{
margin-top: 5px;
}
#ypf-coreid .user-card .user-info{
padding:0pt 0pt 65px 245px;
}

#ypf-coreid .user-card .user-images[class]{ /* FF only */
background: transparent url(http://i189.photobucket.com/albums/z…tvn/BG_Ava.png) no-repeat scroll 0pt;
}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, 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(‘http://209.85.12.234/1046/116/upload/p8472559.gif’);

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(’http://209.85.12.234/1046/116/upload/p8472559.gif‘);

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(“http://209.85.12.234/1046/116/upload/p8472559.gif“);

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; }C. Đề mục

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

Code:

h3 {
font-family:Words of love; /* 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://i153.photobucket.com/albums/s237/kelangthang182000/emotion-magic1.png); /* link hình */

background-position:left;
background-repeat:no-repeat; }DEMO:

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

Code:

.x1{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://i153.photobucket.com/albums/s237/kelangthang182000/emotion-magic1.png‘/* 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;
}
}DEMO:

Ngoài ra nếu bạn biết CSS bạn có thể thay các đề mục trên Máh bằng hình ảnh của mình !

D. About me:

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

Code:

#ypf-profile {
background: url(http://i153.photobucket.com/albums/s237/kelangthang182000/aboutme.png); 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 */

}E. Link

- Trái tim bay lên khi rê chuột vào 1 liên kết:

Code:

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:

Code:

.mod {
background-color:none; /* màu nền */

background-image:url(’http://www.myspacelayoutsupport.com/myspace-backgrounds/images/bricks/bricks03b.jpg‘);

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:

Code:

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

}G. Một số mã khác:

- Thay nền cho khung viết Guestbook:

Code:

#ypf-guestbook .form-wrapper textarea
{
background-image:url(http://img297.imageshack.us/img297/9261/gif34gifre8.gif);

}- Làm cho các Section mờ mờ trong suốt

DEMO:

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, gái 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;
}- Đó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 */

}==========NICOLAS==========

1 – Code giấu khung style (khung chứa CSS). ( làm nó ẩn đi đấy )

Code:

#ypf-style
{
display:none;
}Để sửa chữa CSS thì click vào chữ this is fugly (ở module chứa nick name), nó sẽ chuyển qua 1 trang khác (giống trang phụ) với nền màu trắng, sửa chữa CSS ở trang đó xong thì click vào show me shiny (ở module chứa nick name) để trở về trang chính.

2 – Chèn hình nền vào các đề mục

DEMO

Tạo 1 file hình có kích thước khoảng 35 x 30px (cái này tùy từng người, sao cho đẹp là được)

Code:

.hd
{
text-align:right;
background-image: url(link hinh);
font-weight:bold;
padding:7px;
color: #ffffff; /* Màu của các đề mục */

background-color:#FFFFFF; /* màu nền các đề mục (ko quan trọng) */

}3 – Đổi màu các button trong Mash
DEMO

Code:

#ypf-guestbook input, #ypf-add-mod input, input.button
{
background:#000000; /* màu của button*/

border:none;
color:#FFF;
padding:2px 4px;
margin-right:2px;
width:auto !important;
font-weight:bolder;
}- Các bạn cũng có thể chèn hình vào các button (nếu thích màu dùng gradient)

Code:

#ypf-guestbook input, #ypf-add-mod input, input.button
{
background:#ffffff url(link hinh) left top repeat-x;
border:none;
color:#FFF;
padding:2px 4px;
margin-right:2px;
width:auto !important;
font-weight:bolder;
}4 – Đổi màu, cỡ chữ của tuổi và giới tính (dưới nick name)
DEMO

Code:

#age.age, #sex.gender
{
color: #f58f03; /*màu chữ*/

font-size: 14px; /* cỡ chữ*/

font-weight:bold;
}5 – Chèn hình nền vào module nick name (làm no nổi bật chút) DEMO

Code:

.user-info
{
background:url(link hình)repeat;
}Dựa theo CODE ẩn module Style CSS thì cũng có 1 số module mặc định ko thể remove có thể dấu đi như Tags, Profile, Coreid …