My OperaThay đổi background của menu bar
Monday, June 25, 2007 1:33:16 PM
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!
You must be 
(21%)
Mr. Lemonchanhpc # Tuesday, June 26, 2007 10:22:35 AM
XXVII-XXIV-XIVevaritgaloa # Tuesday, June 26, 2007 11:09:44 AM
#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 & Hugotuoitho # Tuesday, June 26, 2007 3:43:49 PM
Thủy Hiềndanquynh # Tuesday, June 26, 2007 3:56:00 PM
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 # Tuesday, June 26, 2007 6:00:38 PM
Phillip Phú - Hawaiidouble808dethuong # Wednesday, June 27, 2007 3:43:20 AM
Thủy Hiềndanquynh # Wednesday, June 27, 2007 6:23:45 AM
Double808dethuong, chị xem trên IE7 thì không bị gì hết. Chị không có IE6
copdo # Wednesday, June 27, 2007 7:04:32 AM
Phillip Phú - Hawaiidouble808dethuong # Wednesday, June 27, 2007 7:28:53 AM
Calvin & Hugotuoitho # Wednesday, June 27, 2007 10:57:55 AM
XXVII-XXIV-XIVevaritgaloa # Wednesday, June 27, 2007 11:09:22 AM
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 # Wednesday, June 27, 2007 1:33:34 PM
Thủy Hiềndanquynh # Thursday, June 28, 2007 2:32:25 AM
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
Phucpoohahnlamnhatphuc # Tuesday, August 21, 2007 11:57:27 AM
Thủy Hiềndanquynh # Tuesday, August 21, 2007 6:34:55 PM
Phucpoohahnlamnhatphuc # Wednesday, August 22, 2007 1:14:56 AM
WorldOfEggs # Wednesday, October 17, 2007 1:05:47 PM
Thủy Hiềndanquynh # Thursday, October 18, 2007 1:11:15 PM
WorldOfEggs, em upload ảnh vào host (ví dụ My Account/ Files), rồi copy đường dẫn (link) của ảnh
minhteovn # Tuesday, December 4, 2007 2:28:13 PM
Thủy Hiềndanquynh # Friday, December 14, 2007 4:51:15 AM
TUẤNANHHuaTuanAnhPro # Friday, October 3, 2008 2:05:52 PM
DORIdoriteddy # Sunday, November 30, 2008 6:05:00 AM
Hải Đường_Tửlittleo0ol0ve4U # Thursday, February 12, 2009 12:01:53 PM
Trần Đức Luânducluan1990 # Tuesday, April 28, 2009 8:50:18 AM
minh ket ban nhé ! cám ơn ban nhieu !
Trần Đức Luânducluan1990 # Tuesday, April 28, 2009 8:51:36 AM
http://my.opera.com/ducluan1990
Trần Đức Luânducluan1990 # Tuesday, April 28, 2009 8:54:23 AM
Alway beside Youvietchoriengem # Wednesday, August 5, 2009 11:27:42 AM
http://my.opera.com/vietchoriengem/blog/
beethuyhoney # Wednesday, September 8, 2010 7:55:36 AM
Đây là code css mình dùng:
#menu a {
color:#0BB605;
display:block;
height:35px;
width:180px;
font-weight:bold;
font-size:18px;
text-decoration:none;
text-align:center;
background:transparent bottom center no-repeat;
}
#menu a:hover {
color:#097306;
}
#menu a#selected {
text-decoration: none;
color:#0BB605;
}
Còn đây là blog của mình www.my.opera.com/beethuyhoney. Check giúp mình với nhe, cám ơn rất rất nhiều