Trang trí Y!Mash theo sở thích cá nhân
Saturday, 27. October 2007, 20:30:22
Trước tiên, xin lưu ý với các bạn, bài viết này dựa trên CSS của WallPearl. Nếu bạn sử dụng, vui lòng credit cho "ẻm" nhé 
Nếu bạn không thích credit, hãy vào mashfreaks.com để tham khảo CSS, rồi tha hồ... "múa mép" 
Chắc những designers đó không biết được bạn ở đâu mà yêu cầu credit đâu (xin cám ơn Gus về thông tin này 
).
Nếu bạn không thích credit, hãy vào mashfreaks.com để tham khảo CSS, rồi tha hồ... "múa mép" Chắc những designers đó không biết được bạn ở đâu mà yêu cầu credit đâu (xin cám ơn Gus về thông tin này ).File.css này bao gồm các thành phần sau:
body (hiển thị toàn bộ nội dung của Mash)
#colAA (cột bên trái - main column)
#colAA .hd (tiêu để cột bên trái)
#colAA .mod (phần hiển thị từng "box")
#colAA .mod-content (phần nội dung của từng "box")
#colbb (cột bên phải - right column)
#colbb .hd (tiêu đề cột bên phải)
#colbb .mod (phần hiển thị từng "box")
#colbb .mod-content (phần nội dung của từng "box")
#ypf-coreid .bd (box thông tin cá nhân, có ảnh con đường)
#ypf-coreid .vcard (nội dung của thông tin cá nhân)
a:link, a:active, a:visited (liên kết, đang hoạt động, đã xem)
a:hover (liên kết có chuột chạy qua)
Các nhu cầu chỉnh sửa cơ bản bao gồm:
1/ Màu nền, hoặc ảnh nền: nằm trong mã background. Bạn muốn thay ở mục nào thì tìm đến mã background ở mục đó. Nếu đã có sẵn thì bạn thay, không có thì bạn có thể thêm vào.
background:#mã màu url(http address of the image - địa chỉ tuyệt đối của hình ảnh);
Các thuộc tính (properties) của CSS background bao gồm:
- no-repeat: không lập lại, hình ảnh chỉ hiển thị một lần mà thôi. Nếu không ghi thuộc tính này thì đương nhiên ảnh sẽ lập lại cho đến hết chiều dài và chiều ngang của mục.
- repeat-x: lập lại theo chiều ngang (trục X).
- repeat-y: lập lại theo chiều dọc (trục Y).
Ngoài ra, CSS background còn có một thuộc tính là "background-attachment" bao gồm hai lựa chọn:
- fixed: giúp hình nền đứng cố định, không lập lại dù trang web rất dài và cần phải scroll up and down.
- scrolled: phải cuộn thanh trượt lên xuống (mặc định và không cần nêu ra trong file.css).
Vị trí của hình ảnh được xác định dựa vào các thuộc tính sau: top (trên cùng), bottom (dưới cùng), left (bên trái), center (ở giữa theo chiều ngang), right (bên phải) so với các borders của mục.
Ví dụ trong skin minh họa, bạn thấy có một hình hoa văn ngăn cách các "boxes" ở cột bên phải. Bạn phải nghĩ ngay đó là background của một phần nào gần đó - chính là tiêu đề "boxes" (hd - head) phải không? Dựa vào cách hiển thị trên blog, bạn có thể suy ra đoạn mã CSS background cho hình ảnh này là:
#colbb .hd{
background:url(http address of the image) no-repeat top center;
}
Tương tự, nếu muốn thêm hình ảnh vào góc trái phía trên, bạn thêm thuộc tính "top left no-repeat"; góc phải phía dưới - "bottom right no-repeat",...
Khi thêm background vào bất kỳ mục nào, bạn chắc chắn sẽ gặp trường hợp hình ảnh bị che khuất bởi nội dung của mục đó, hoặc các mục đè chồng (overlapped) với nhau. Để khắc phục tình trạng này, bạn thêm thuộc tính margin (canh lề) hoặc padding (tạo vùng đệm) cho background.
- margin: điều chỉnh khoảng cách giữa hai mục, tính từ border ngoài cùng của từng mục. Như vậy, bạn dùng margin để các mục đừng đè chồng lên nhau.
- padding: điều chỉnh khoảng cách giữa border ngoài cùng của một mục với các thành phần trong chính mục đó. Padding giúp nội dung của một mục không che khuất một phần hoặc toàn bộ background của mục đó.
Cả margin và padding đều được xác định dựa vào 4 vị trí (theo thứ tự nếu nêu cả 4 trong một) là top (phía trên), right (bên phải), bottom (bên dưới) và left (bên trái). Tùy thuộc vào hình ảnh background ở vị trí nào trong mục, bạn xác định padding cho phù hợp.
Ví dụ, tôi đặt ảnh làm background cho tiêu đề của boxes ở vị trí trên cùng, tôi sẽ thêm padding-top để nội dung của không che mất background. Độ lớn của padding-top tối thiểu phải bằng chiều cao của tấm ảnh làm background. Ví dụ trong mẫu minh họa là:
#colbb .hd {
background:url(http address of the image) top center no-repeat;
padding-top:40px;
}
Bạn có thể thực hành thêm tại các trang CSS Background, CSS Margin và CSS Padding.
Vậy theo bạn: Làm sao để tạo banner cho Y! Mash?
Trong Theme Light Lotus, banner là background của body
Do đó, để hiển thị đầy đủ, tôi thêm padding-top bằng chính chiều cao (height) của ảnh làm banner.Trong mẫu minh họa ở trên, do tôi dùng một hình ảnh để làm background cho body, nên banner của tôi phải "nằm ké" ở background của #colbb
2/ Chữ và link:
- color: màu sắc chữ, dùng mã màu hoặc tên bằng tiếng Anh;
- text-align: định vị trí, bao gồm left (trái), center (giữa) và right (phải);
- text-transform: hình thức thể hiện, có thể đổi thành uppercase (chữ in hoa);
- text-decoration: bao gồm none (không trang trí) hoặc underline (gạch chân);
- font-weight: bao gồm normal (bình thường), bold (in đậm);
- font-style: italic (in nghiêng)
- font-size: kích cỡ chữ, tính bằng đơn vị pixel;
- font-family: font chữ.
Tương tự như trên, nếu mã đã có sẵn thì bạn thay đổi, không có thì bạn có thể thêm vào, ví dụ khi bạn không thể viết tiếng Việt trong bài viết, bạn thêm font-family với vài font Unicode vào mã content hoặc post,...
Ngoài ra, có thể bạn thắc mắc vì sao layout của tôi không giống mặc định (hai cột đảo vị trí cho nhau, tương tự như Opera Blog). Thật ra, Y!Mash cho phép tự do di chuyển các modules qua lại giữa hai cột
Vì vậy, nếu bạn muốn cột bên trái nhỏ hơn thì bạn điều chỉnh lại độ rộng (width) của cột thôi, hihihi... (mặc định cột trái là 605px; cột phải là 325px).Chúc bạn thành công!
(22%)
WIDGETIZE
PhuongChi # 11. November 2007, 18:46
http://mash.yahoo.com/hoalanchuong_ctn là Mash của em
Chị xem góp ý hộ em với
Thủy Hiền # 12. November 2007, 16:41
myngohuyquyen # 13. November 2007, 12:36
Thủy Hiền # 22. November 2007, 22:27
.: Wall Pearl : # 24. November 2007, 17:04
#ypf-profile, #ypf-mydetails, #ypf-tags {display:none;}Thủy Hiền # 12. February 2008, 05:31
.: Wall Pearl : # 12. February 2008, 16:03
3 tháng xử lý cái Watch 1 lần, chắc có mấy trăm cái news hả chị
Thủy Hiền # 13. February 2008, 00:28
.: Wall Pearl : # 13. February 2008, 16:19
Thủy Hiền # 13. February 2008, 18:27
.: Wall Pearl : # 13. February 2008, 19:04
"Chiến hữu" cũng đang bị quật tả tơi nè, bi h mỗi ngày xử lý gần 50 news còn mệt hơn nguyên thủ quốc gia ấy chứ. Nếu thấy lương ngon, "chiến hữu" ngồi nhà làm nghề quản lý blog luôn
À quên, Happy Valentine's Day!
Thủy Hiền # 14. February 2008, 05:42
.: Wall Pearl : # 15. February 2008, 17:40
Mà không 8 thì cũng buồn, chứ như chồng, con như chị thì ai rỗi mà 8 chứ
linhnhat2810 # 9. April 2009, 04:48