Modify sidebar : bo góc header và tạo border (đường viền) cho các widget ở sidebar - 10 July 2010 - All 4 You
Monday, 23-Jan-2017, 2:21 AM
Welcome Guest | RSS
Main » 2010 » July » 10 » Modify sidebar : bo góc header và tạo border (đường viền) cho các widget ở sidebar
10:42 PM
Modify sidebar : bo góc header và tạo border (đường viền) cho các widget ở sidebar
[FD's BlOg] - Một cách khá phổ biến cho việc trang trí các widget ở sidebar là bo các góc. Ở bài viết này mình sẽ giới thiệu một thủ thuật nhỏ để bo góc cho header của widget với ảnh nền, và trang trí 1 chút cho khung hiển thị nội dung với việc tạo đường viền.


Hình ảnh minh họa :


Ở trong hình minh họa ta thấy có 2 phần cần phải chỉnh sửa, đó là phần headervà content của widget, do đó ta sẽ tìm trong code CSS của template 2 classsau: ".sidebar h2" và ".sidebar .widget" .(hoặc class tương tự)

☼ Ta bắt đầu với thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Tìm đọan code CSS sau (hoặc tương tự):

.sidebar h2 {
margin:0;
padding:0;
color:$sidebarHeaderColor;
font: $headerFont;
}

- Thay thế nó bằng code bên dưới:

.sidebar h2 {
background: #CCCBB9 url(http://img133.imageshack.us/img133/3540/h2bgwn2.png) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}

- Lưu ý : bạn nên download ảnh nền (code màu xanh) trong code về, và thay đổimàu sắc cũng như độ rộng để phù hợp với blog của bạn. Việc này khá đơn giản với các phần mềm đồ họa.

5. Tiếp tục tìm đọan code như bên dưới (hoặc tương tự):

.sidebar .widget {
font-size:86%;
margin-top:6px;
margin-$endSide:0;
margin-bottom:12px;
margin-$startSide:0;
padding:0;
line-height: 1.4em;
}

- Và thay thế nó bằng code như bên dưới :

.sidebar .widget {
font-size:86%;
border-left: 3px solid #CCCBB9;
border-right: 3px solid #CCCBB9;
border-bottom: 3px solid #e0d5c2;
padding: 10px;
line-height: 1.4em;
}

- các code màu xanh chính là code tạo đường viền cho khung hiển thị nội dung của widget.

6. Save template.

Chúc các bạn thành công.
Category: Design | Views: 1022 | Added by: all4u | Rating: 1.0/1
Total comments: 2
2  
Thanks for being on point and on <a href="http://cqdnxzldxqg.com">tagter!</a>

1  
By :By :By :By :By :RE: Not covered tgruohh INSURANCE.you didn't answer my question. there is no check on their demand for healthcare. everyone essentially does have insurance. why then does healthcare cost so much less than in the US?What do you mean there is no check on their demand? The government prescribes what is allowed. Health care is rationed just about everywhere on the planet.health insurance companies do the same here only much much worse. millions have lost their healthcare coverage and it hasn't dented costs. should we do away with our employer based system and that would fix that problem? your plan doesn't work and it isn't working.My plan isn't working? Obamacare is more of what we have! what we have now is millions of people losing their health insurance and 40,000 dying a year from lack of healthcare. the obama plan adds 30 million to the inurance rolls. I don't know how that is more of what we have?you think less insurance will solve the problem. each year less people have healthcare and it's caused obamacare to pass. your plan isn't working. Rate this comment: 0 0

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page