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 …

18 phản hồi

  1. Cho minh hoi sao minh thay khung của avatar, ko cần thiết phải làm khung theo mẫu của mash _ KIRAVTVN
    Code da^u` tien : #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’);
    }
    Song roi` hie.n ra avatar minh` chi? co’ 1 nu~a ah`..”
    ban vao mash minh xem thu~ roi` pm trong do’ cho minmh biet luon nha. thanks nhje`u
    http://mash.yahoo.com/profile.php?id=uIcCBctqxyzcQ58r.uQO

  2. Cám ơn bồ đã ghé thăm Johny Minh.Trả lời cùng bồ nhé: hiện tại mình duyệt web bằng firefox vẫn nhìn thấy avatar của bồ, nhưng hơi lệch về bên trái (left) và hơi cao (top). Vì vậy bạn chỉ việc tăng số left và top lên (không nhất thiết phải là số âm đâu bạn). Chào bạn Johnyminh : http://mash.yahoo.com/johnyminh

  3. ban oi sao neu ma minh cai khung anh cho avatar dc thi xuong duoi minh cai may cai background nay no roi` fong chu~ thi no’ lai hien ko ra..noi chung neu cai cai nay dc thi cai kia ko dc??ko hiu sao nua~

  4. Làm sao để mở lại khung style khi đã giấu hả bạn?

  5. …ban oi minh biet may cai code rui nhung van de la khong bit’ paste may kai code vao dau ca?…. >.<….. nam the nao bi gio ….. tra loi minh nhe!!!!

  6. tra loi minh wa mail: “sp4rkl3_kiu95@yahoo.com”…..thanks nhju`!

  7. Bạn có thể paste khi bạn mở khung làm skin bằng code css.
    Bạn kéo xuống cái khung chèn hình nền cho mash -> Nhấn vào cái dòng ở cuối ô bên trái “…css…..” mình không nhớ kĩ!
    Khi soạn xong, bạn nhấn preview để xem thử và save để lưu!

    Xin chủ Jonyminh trả lời mình giúp! Khi ẩn khung css thì sao để bật lại?

  8. Vâng trả, lời các you nhé: CSS là phần định dạng dùng rất phổ biến cho web, để có thể dùng CSS trên Mash.Yahoo, các bạn chọn khung Style this profile , thường nằm cuối cùng bên dưới trang Mash.Yahoo, click vào dòng switch to basic (CSS) mode hay Show Advance CSS, sau đó các bạn chỉ việc Paste code CSS vào, sao đó nhấn Save hay Preview xem trước, thế là OK.

    Có thể xem thêm tại đây : https://johnyminh.wordpress.com/2007/11/15/c%c6%a1m-them-yahoo-mash-theme-for-yahoomash/
    Chúc các bạn một mùa Giáng Sinh vui vẽ!

  9. Mình vẫn chưa được bạn trả lời!
    Trả lời giúp mình để mình còn dám hide chứ!
    Không hide xong nghỉ đổi theme là tiu!

  10. …vay co ai biet lam the nao de tao 1 module moi khong?
    minh` muon tao 1 module moi de cho page view vao ma cung cha biet kiem page view o dau ca T________T !!!… jup’ minh` nhe’ !

  11. Y!M có đó bạn! Bạn vào phần modules chọn tab y!mash kéo xuống dưới!

  12. Muốn thêm 1 Module cho Mash, bạn vào mục “Customize this page by adding cool stuff!” thường nằm cuối trang, chọn loại Module muốn thêm trong cột 1, chọn vị trí đặt Module mới đó trong cột 2, sau đó nhấn nút Do it ! Thế là Ok nhé, CHÚC CÁC BẠN MỘT MÙA GIÁNG SINH VUI VẼ!

  13. khong phai… y minh la 1 module trang khong co j` de cho page view vao y … voi ca tim cai page view o dau nhi?

  14. ma` johny minh nay`… theme cua minh lay tu 360themes thi co chen them dc n~ thu linh tinh nhu thay doi hinh` trc’ ten module, chen` hinh nen vao guestbook ….

  15. lam` the^’ nao` de^? scoll khung tro` chuye^n. ha ban???

  16. admin co’ the>? chi? to’ lam` nhac nen` mash được ko vậy

  17. eo moi nhan dc môt cai thư moi vao mash ma chang bik lam sao bay em voi …..

  18. Đơn giản thôi, bạn click vào link gởi kèm, sau đó điền đầy đủ thông tin như đăng ký hộp thư yahoo, như vậy là ok !
    Sau đó bạn đăng nhập vào với tài khoản bạn vừa tạo, lúc này bạn đã làm chủ trang Mash của bạn rồi, có thể cài đặt trang trí theo hướng dẫn ở phần Yahoo Mash tại : https://johnyminh.wordpress.com/category/yahoo-mash/ . Chúc bạn thành công. Bye

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: