Thay đổi background của menu bar
Monday, 25. June 2007, 13:33:16
Có nhiều người hỏi tôi cách thay đổi background cho menubar như skin "gờ lin" cho cu Đăng.
Nếu bạn đọc post Main.css và Thêm hình ảnh vào Blog Opera, có thể bạn cũng sẽ làm được. Tuy nhiên bạn có thể sẽ gặp khó khăn trong việc canh chỉnh khoảng cách. Tôi cũng phải tự mò mẫm, thử tới, thử lui mới hiểu sơ sơ cách sử dụng các loại thuộc tính (properties). Mà thật ra, có nhiều cái tôi cũng chưa làm được. Bạn hãy giúp tôi bổ sung những nội dung chưa hoàn chỉnh nhé
Nếu bạn đọc post Main.css và Thêm hình ảnh vào Blog Opera, có thể bạn cũng sẽ làm được. Tuy nhiên bạn có thể sẽ gặp khó khăn trong việc canh chỉnh khoảng cách. Tôi cũng phải tự mò mẫm, thử tới, thử lui mới hiểu sơ sơ cách sử dụng các loại thuộc tính (properties). Mà thật ra, có nhiều cái tôi cũng chưa làm được. Bạn hãy giúp tôi bổ sung những nội dung chưa hoàn chỉnh nhé
Trước tiên, bạn cần chuẩn bị một tấm ảnh làm background, ví dụ trong skin "gờ lin", tôi chọn ảnh Bạn tìm đoạn mã menu (lưu ý đối với các theme khác thì đoạn mã này có thể khác).
#menu {
clear:both;
height:78px;
background:transparent;
margin-left:65px;
}
#menu ul {
padding: 0px;
margin:20px 0 0 0px;;
height:78px;
}
#menu li {
float:left;
line-height:108px;
height:78px;
overflow:hidden;
font-size:11px;
list-style:none;
width:125px;
padding:0;
}
#menu a {
display:block;
height:78px;
color:#3A7E2A;
font-weight:bold;
text-decoration:none;
text-align:center;
background:transparent url(menubg.jpg) bottom center no-repeat;
}
#menu a:hover {
color:#111;
}
#menu a#selected {
text-decoration: none;
color:#3A7E2A;
}
Bạn lưu ý những đoạn mã in đậm.
- Background của từng menu (blog, archive,...) sẽ được thêm vào ID menu a. Nếu bạn muốn có một tấm ảnh hiển thị hết chiều ngang của menu (tất cả các menu), bạn hãy thêm background vào ID menu.
- Thuộc tính height, tính bằng đơn vị pixel, phải tối thiểu bằng chiều cao của tấm ảnh làm background để ảnh hiển thị đầy đủ.
- Thuộc tính line-height dùng để định vị trí phần text trong background (các chữ blog, archive,...). Tùy thuộc vào ảnh làm nền cho menu, bạn chỉnh kích thước cho phù hợp.
- Thuộc tính width cũng tối thiểu bằng chiều ngang của tấm ảnh. Bạn có thể tăng width để chỉnh khoảng cách giữa các menu.
- Margin dùng để định vị trí cho menu, so với bốn borders của banner (top, right, bottom, left), có thể dùng giá trị âm, nhưng bạn cần phải biết cách giải quyết vấn đề cross-browser compatibility, vì đôi khi Internet Explorer không hiểu negative position, hic hic...
Ngoài ra, bạn có thể chỉnh màu sắc cho text (color), thêm phần dẫn đường (list-style) cho từng menu, ví dụ mũi tên nhấp nháy trong blog của elizCua,...
Chúc bạn thành công!
(22%)
WIDGETIZE
Mr. Lemon # 26. June 2007, 10:22
XXVII-XXIV-XIV # 26. June 2007, 11:09
#menu_blog{
background:.....
}
và tương tự với các mục khác. Nhưng không làm sao thay đổi tên mục menu được, như "about" thành "tiểu sử" chẳng hạn. Chị xem thử nhé.
Calvin & Hugo # 26. June 2007, 15:43
Thủy Hiền # 26. June 2007, 15:56
Evaritgaloa, nếu em dùng IE thì không thấy được
Tuoitho, chị đang gặp rắc rối với skin mặc định, hic hic... để chị xem lại tut đã
copdo # 26. June 2007, 18:00
THEME này có ổn chưa nha
Phillip Phú - Hawaii # 27. June 2007, 03:43
Thủy Hiền # 27. June 2007, 06:23
Double808dethuong, chị xem trên IE7 thì không bị gì hết. Chị không có IE6
copdo # 27. June 2007, 07:04
Phillip Phú - Hawaii # 27. June 2007, 07:28
Calvin & Hugo # 27. June 2007, 10:57
XXVII-XXIV-XIV # 27. June 2007, 11:09
Em thử đủ thứ: caption, text, rồi content rồi cũng chả thấy gì, thì ra là tại cái trình duyệt T_T.
Thôi, bỏ ý định luôn, tại em online toàn chỗ có IE thui T_T.
Cám ơn chị lần nữa nhé.
copdo # 27. June 2007, 13:33
Thủy Hiền # 28. June 2007, 02:32
Double808dethuong, nếu để cho người thân ở nước ngoài xem thì chắc ok, vì họ thường xài SW có bản quyền nên đã upgrade IE7 hết rồi, không sao đâu
Mẹ Calvin, em cứ làm giống giống mấy cái skin của em nhé. Màu sắc nhã nhặn, nhìn mát mắt lắm
Phucpoohahn # 21. August 2007, 11:57
Thủy Hiền # 21. August 2007, 18:34
Phucpoohahn # 22. August 2007, 01:14
WorldOfEggs # 17. October 2007, 13:05
Thủy Hiền # 18. October 2007, 13:11
WorldOfEggs, em upload ảnh vào host (ví dụ My Account/ Files), rồi copy đường dẫn (link) của ảnh
minhteovn # 4. December 2007, 14:28
Thủy Hiền # 14. December 2007, 04:51
TUẤNANH # 3. October 2008, 14:05
DORI # 30. November 2008, 06:05
Hải Đường_Tử # 12. February 2009, 12:01
Trần Đức Luân # 28. April 2009, 08:50
minh ket ban nhé ! cám ơn ban nhieu !
Trần Đức Luân # 28. April 2009, 08:51
http://my.opera.com/ducluan1990
Trần Đức Luân # 28. April 2009, 08:54
Alway beside You # 5. August 2009, 11:27
http://my.opera.com/vietchoriengem/blog/