Code CSS cho Mash

Tạo giao diện (theme) cho Yahoo!Mash như thế nào?


Yahoo!Mash ra đời với nhiều sự đổi mới so với Yahoo 360. Khả năng tùy chỉnh giao diện theo ý của riêng mình là một trong những tính năng được nhiều người sử dụng mong đợi nhất. Trong thủ thuật lần này, mình sẽ hướng dẫn các bạn hiểu và tạo một theme Yahoo!Mash như thế nào.

Với Yahoo 360, bạn có thể tạo cho mình một theme đơn giản bằng các thêm ảnh top, bottom, middle,.. theo một trình học thuật cố định của Yahoo. Với Mash, bạn cũng có thể làm như thế. Tuy nhiên, Mash còn cho phép bạn làm nhiều thứ hơn như thể quyết định layout, màu sắc, kích cỡ, hình ảnh trên toàn trang Mash của mình bằng cách nhâm nhập vào CSS (CSS là ngôn ngữ dùng để trang trí trong thiết kế Web).
Để sử dụng CSS của riêng mình trang trí cho trang Mash bạn phải chuyển sang chế độ Advanced CSS.



Để tạo được một giao điện đẹp cho Mash, không cách nào bằng hiểu được cấu trúc CSS của Mash để tùy biến CSS này theo phong cách riêng của mình. Mình sẽ hướng dẫn các bạn hiểu một cách đơn giản nhất.

Qui đinh:

Text in đậm là phần chính của CSS
Text in nghiêng là giá trị mà bạn có thể thay đổi theo ý mình.
Phần text phía sau dấu // là chú thích.
Khi copy vào Mash, bạn nên remove hết các chú thích này.

Cấu trúc CSS của Mash:

1. Thay đổi nền và font của toàn trang:

Trích dẫn:

Trích dẫn :

body {
font-family:verdana,sans-serif; //Đây là phần font mặc định của trang. Bạn có thể thay thế bằng Arial hay Times news roman hay font Unicode nào khác
background-image:url('http://mymashstuff.com/mash_backgrounds/brown/color_brown_39.jpg' ); //url dẫn đến ảnh nền của mash.
background-repeat:repeat; //nếu bạn chọn ảnh nền là 1 ảnh nhỏ, bạn có thể cho ảnh lặp lại để phủ đầy trang hay chỉ hiện 1 lần bằng cách đổi thành background-repeat: no;
background-color:none; //màu nền. bạn có thể thay "none" bằng bất cứ màu nào. Ví dụ: màu đen: #000000
background-position:top left; //chỉ định chỗ đặt ảnh nền này ở đâu. Bạn có các vị trí:
color:#cccccc; //Màu của chữ-phần nội dung. Bạn có thể chọn màu khác như: đen: #000000, trắng: #ffffff
}

2. Thay đổi các thuộc tính của Modules

Module có thuộc tính chính là "mod" và các thuộc tính phụ là: "x1", "x1a", "x2" và "x2a".

2.1 Thuộc tính chính (.mod):
Trích dẫn:

Trích dẫn :

.mod {
background-color:none; //thay "none" bằng 1 giá trị màu HEX để tạo màu nền cho Module nếu bạn không dùng ảnh làm nền.
background-image:url(http://mymashstuff.com/mash_backgrounds/brown/color_brown_39.jpg'); //Dùng ảnh làm nền cho module, nếu bạn có thể bỏ dòng này hoặc thay đổi url tới ảnh của bạn.
border-style:solid; //là đường viền cho module. Có các loại viền sau: none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-width:2px; //là chiều rộng của đường viền. Bạn có thê tăng hay giảm giá trị 2px này.
border-color:#3C6A90; //Đây là màu viền với giá trị màu HEX.
}

2.2 Thuôc tính con x1:

Trích dẫn:

Trích dẫn :

.mod .x1 {
background-color:#fafdff;
opacity: 0.6; //Tạo đồ trong suốt cho modules
filter:alpha(opacity=60); //giống như trên nhưng dùng cho IE
display: block; //là chế độ hiển thị cho Module
}

2.3 Thay đổi màu của chữ trong Modules:
Trích dẫn:

Trích dẫn :

.mod-content {
color:#5c879c; //thay đổi giá trị màu theo ý của bạn
}

2.4 Thay đổi tiêu đề của Modules:
Trích dẫn:

Trích dẫn :

.hd { color:#004f83; //Màu của text
font-family:arial,sans-serif; //Font chữ
font-size:20px; //cỡ chữ.
}

2.5 Thay đổi thuộc tính của Nickname:
Trích dẫn:

Trích dẫn :

#ypf-coreid .user-card .user-info .user-name h1 span.nickname {
color:#004f83; //Màu cho tên (nick) của bạn.
}

2.6 Thay đổi khung hình Avarta
Trích dẫn:

Trích dẫn :

#ypf-coreid .user-card .user-images {
background-image:url('http://mymashstuff.com/mash_css/polaroid.png') // đường dẫn đến khung hình.
}

2.7 Thay đổi font cho tên, nơi ở....
Trích dẫn:

Trích dẫn :

#ypf-coreid .user-card .user-info span.age, span.gender, span.locality {
color:#ffffff; //Thay đổi giá trị màu này theo màu của bạn
}

Kết hợp tất cả các thuộc tính này vào một phần duy nhất. Các bạn sẽ có 1 CSS theme cho Mash.
Trích dẫn:

Trích dẫn :

body {
font-family:verdana,sans-serif;
background-image:url('http://mymashstuff.com/mash_backgrounds/brown/color_brown_39.jpg');
background-repeat:repeat;
background-color:none;
background-position:top left;
color:#cccccc;
}

.mod {
background-color:none;
background-image:url('http://mymashstuff.com/mash_backgrounds/brown/color_brown_39.jpg');
border-style:solid;
border-width:2px;
border-color:#3C6A90;
}

.mod .x1 {
background-color: #fafdff;
opacity: 0.6;
filter:alpha(opacity=60);
display: block;
}

.mod-content {
color:#5c879c;
}

.hd { color:#004f83;
font-family:arial,sans-serif;
font-size:20px;
}

#ypf-coreid .user-card .user-info .user-name h1 span.nickname {
color:#004f83;
}

#ypf-coreid .user-card .user-images {
background-image:url('http://mymashstuff.com/mash_css/polaroid.png')
}

#ypf-coreid .user-card .user-info span.age, span.gender, span.locality { //The classes used for age, gender, location
color:#ffffff;
}

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

**Ngoài ra còn nhiều code khác như

NICKNAME
1. Màu và Font cho nick: Ko nên dùng font VNI

Trích dẫn :

#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 )

Trích dẫn :

#nickname {
display: none; // Dòng này để ẩn phần nickname bằng chữ
}

#nickname-edit h1 {
background: url(link hình); // link tới hình dùng làm nickname
background-repeat:no-repeat;
color: #ffffff;
height: 100px; // chiều cao hình
width: 400px; // chiều rộng hình
}

Background:
1. Dạng tile: hình nền lặp lại nhiề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!)

Trích dẫn :

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

Trích dẫn :

body {
background-color:#232f39; // Màu nền
background-image:url(link hình); // 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)

Trích dẫn :

body{
background-image:url(link hình); // 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. Loại hình nền dạng Top & Bottom:

Trích dẫn :

body
{
font-family: Verdana, Arial, Tahoma;
background-image:url(link hình top);
background-repeat:no-repeat;
padding-top:256px;
background-position:top center;
background-color:#fff ;
}

.col-AA
{
background:url(link hình bottom);
background-position:bottom right;
background-repeat:no-repeat;
padding-bottom:222px;
}

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

Trích dẫn :

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:

Trích dẫn :

h3 {
font-family: Tahoma, serif;
font-size: 26px;
font-weight: normal;
padding-left: 40px; //khoảng cách từ hình đến đề mục
background-image:url(link hình); // link hình
height: 50px; // chiều cao hình
background-position:left;
background-repeat:no-repeat; }

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

Trích dẫn :

.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(link hình) no-repeat;
}
}

About me:

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

Trích dẫn :

#ypf-profile {
background: url(link hình); // 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. Ẩn đi About me: có nhiều lúc bạn cảm thấy phần này "chiếm đất" quá, mà mình lại ko bít ghi gì trên đó! Bạn chép đoạn code sau, paste lên trên các đoạn code còn lại.

Trích dẫn :

#ypf-profile {display:none;}

3. Thanh cuộn trong About me:

Trích dẫn :

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

Yahoo Mash section:

1. Chèn hình nền và khung vào section:

Trích dẫn :

.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:

Trích dẫn :

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

**Một số mã khác

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

Trích dẫn :

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

2. Trái tim bay lên khi rê chuột vào 1 liên kết: cái này là hình khi rê chuột vào link.

Trích dẫn :

a:hover{
background: url(http://img1.aznphotos.com/img1/005ltnjuf.gif);
color: ping;
}

3. Thay hình cho con Pet:

Trích dẫn :

}
div#ypf-pet .bd img {
background:url(link hình) transparent no-repeat bottom left;
width:0px;
height:0px;
padding:66px 66px 0px 0px; { // Phần này nhớ điền đủ, cái đầu tiên là chiều cao còn cái thứ 2 là chiều rộng của pet, ko điền nó thì pet sẽ bị thiếu trước hụt sau
}

4. Tắt chức năng "grap it!"

Trích dẫn :

.grab
{
display:none;
}

5. Remove từng thành phần trong About me

Trích dẫn :

#aboutme-field-animal {display:none;}
#aboutme-li-animal {display:none;}
#aboutme-li-best {display:none;}
#aboutme-li-celebrity {display:none;}
#aboutme-li-doing {display:none;}
#aboutme-li-future {display:none;}
#aboutme-li-hobbies {display:none;}
#aboutme-li-movie_character {display:none;}
#aboutme-li-music {display:none;}
#aboutme-li-nicknames {display:none;}
#aboutme-li-say {display:none;}
#aboutme-li-something {display:none;}
#aboutme-li-soundtrack {display:none;}
#aboutme-li-style {display:none;}
#aboutme-li-talents {display:none;}
#aboutme-li-unique {display:none;}
#aboutme-li-words {display:none;}

Sưu tầm.

6. Giấu khung Style this profile

Nhiều lúc, bạn tốn bao công sức để làm 01 cái hình đẹp, thía là bỗng một hum dạo mash, thấy cái hình của mình đâu đó trên trang mash lạ hoắc, mà người này lại ko để lại comment cho khổ chủ bít là "mượn" về xài , nên bạn muốn giấu cái khung code đi. Thật ra có đến 03 chỗ để thấy khung code:

6.1. Khung Style this profile, cái này thì khỏi phải bàn, nếu bạn ko dùng code giấu thì hiển nhiên nó hiện ra. Để giấu nó, bạn dùng đoạn code sau:

Trích dẫn :

#ypf-style
{
display:none;
}

6.2. Sau khi giấu khung code đi rồi, bạn muốn chỉnh sửa lại cái mash, mà ko biết mở nó ra chỗ nào? Chính là dòng This is fugly trong khung avatar của bạn. Khi click vào đây, trang mash sẽ trở về dạng ko có bất kỳ hiệu ứng nào cả, nhưng bạn đừng lo sợ là các hiệu ứng đã mất, chỉ khi nào bạn click vô dòng switch to basic mode ngay dưới khung Style this profile thì các đoạn code mới thật sự bị mất. Muốn thấy lại đc các hiệu ứng, ngay trong khung avatar, bạn click vào dòng show me shiny.

Để giấu This is fugly, bạn dùng đoạn code sau:

Trích dẫn :

.view-options {display:none;}

6.3. Ở góc dưới, bên phải, có dòng chữ this profile is fugly, click vào đó thì sẽ hiện ra khung code thôi, cái này thì ko có code để giấu.

7. Giúp bạn tránh sự tràn lề khi ai đó post hình kích cở lớn trên profile của bạn

Trích dẫn :

.message img
{
max-width:200px;
width:expres​sion(document.body.clientWidth 200? "200px": "auto" );
}

8.Thanh cuộn cho My stuff

Trích dẫn :

#ypf-mystuff .bd {
height: 500px; position:relative;
overflow:auto; }

9. Thanh cuộn cho guest book

Trích dẫn :

#ypf-guestbook .bd {
height: 500px; position:relative;
overflow:auto; }

Sưu tầm.

Sao BC sưu tầm mừ hem ghj rõ nguồn dzị. Đề nghị BC lần sau ghj rõ nguồn nghen. ko là Tj cho nó"bay" gáng chju àh nghen.

nguồn từ nhiều website quá, ghi sưu tầm cho nhanh keke

sad_0nljn3 đã viết:

biK' j` vỀ maSh chÍt luÔn >"< pÀy e lÀm vỚi đạI kA oàY :-ss

Hẻm bik chổ nào,nói anh bày nà, đừng nói hẻm bik tất nha, buồn lắm đó