BTCT

Có thể viết code CSS cho blog của mình thì cảm thấy rất hay và cá tính hơn rất nhiều.

.post {
background: url(http://i106.photobucket.com/albums/m248/pqthai8035/image001-3.gif) no-repeat right bottom;
}



Background của trang Opera của bạn thể hiện ở đoạn mã sau trong file main.css (lưu ý, đối với các theme khác nhau, phần mã này cũng có thể khác nhau):


BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 12px;
BACKGROUND: #b6b8b1;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #111;
LINE-HEIGHT: 145%;
PADDING-TOP: 0px;
FONT-FAMILY: arial,'trebuchet ms',helvetica,sans-serif;
TEXT-ALIGN: center
}


#wrap1 {
BACKGROUND: url(/community/graphics/users/2/wrap1.gif) #acaea7 repeat-y left top;
MARGIN: 0px auto;
max-width: 882px
}

#wrap2 {
BACKGROUND: url(/community/graphics/users/2/wrap2.gif) repeat-y right top
}

#topbar {
BACKGROUND: #fff;
MARGIN: 0px -10px;
OVERFLOW: hidden;
LINE-HEIGHT: 23px;
HEIGHT: 28px;
max-width: 852px
}

#content {
CLEAR: both;
BACKGROUND: #fff;
MARGIN: 0px auto;
POSITION: relative;
TEXT-ALIGN: left;
max-width: 812px;
min-width: 739px
}

#footer {
CLEAR: both;
BACKGROUND: #fff;
MARGIN: 0px auto;
POSITION: relative;
TEXT-ALIGN: left;
max-width: 812px;
min-width: 739px
}


Để cho dễ hiểu, bạn hãy nhìn vào ảnh minh họa sau:



(hình ảnh minh hoạ từ blog của sis:http://my.opera.com/danquynh/blog/show.dml/453731

- Body là phần hiển thị những chiếc lá maples đủ màu;
- Wrap1 là phần border bên trái (repeat-y left: hình nền lập lại theo trục Y, bên trái; Nếu bạn muốn thay đổi border ở trên, thay vì bên trái, bạn có thể sửa đoạn này thành repeat-x top);
- Wrap2 là phần border bên phải (repeat-y right; tương tự, muốn đổi thành border ở dưới cùng, bạn sửa thành repeat-x bottom);
- Topbar là thanh trên cùng của Blog;
- Content là phần hiển thị toàn bộ nội dung của Blog;
- Footer là phần hiển thị hình chiếc lá maple và 3 hạt dẻ.


Bạn muốn thay đổi ảnh nền, hoặc màu nền thì chỉ cần thay đường dẫn ở phần tôi đã in đậm phía trên.

- Màu nền: bạn cần xác định tên màu bằng tiếng Anh hoặc mã màu (cách đơn giản nhất để xác định mã màu là dùng Photoshop để so cho phù hợp với hình ảnh nền mà bạn muốn sử dụng).

- Ảnh nền: bạn phải chỉ đường dẫn đến file ảnh mà bạn đã upload vào My Files. Đường dẫn có thể tuyệt đối, i.e. url(http://my.opera.com/tên-user/tên-directory/tên-file), hoặc tương đối, i.e. url(/tên-user/tên-directory/tên-file). Tuy nhiên, tôi được biết nếu bạn chỉ đường dẫn tương đối thì ảnh có thể không hiển thị trên trình duyệt Fire Fox. Còn lý do tại sao thì tôi không biết

Trong trường hợp bạn đổi vị trí của wrap1 và wrap2 thành top và bottom, và sử dụng ảnh nền cho 2 vị trí này, bạn cần xác định thêm thông số height (chiều cao), để ảnh có thể hiển thị đầy đủ. Bạn cũng phải làm tương tự với footer, nếu bạn muốn thêm ảnh vào, thay vì màu nền mặc định.

Nếu bạn muốn thay đổi background cho từng bài viết của bạn, bạn cần tìm đoạn mã sau đây:


.post {
PADDING-RIGHT: 0px;
BORDER-TOP: #ddd 1px solid;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 10px;
OVERFLOW: hidden;
WIDTH: 100%;
PADDING-TOP: 16px
}

#firstpost {
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
BORDER-LEFT: medium none;
PADDING-TOP: 0px;
BORDER-BOTTOM: medium none
}

#lastpost {
BORDER-BOTTOM: #ddd 1px solid
}

.post .title {
FONT-SIZE: 20px;
MARGIN: 0px 0px 10px;
LINE-HEIGHT: normal
}


Bạn thấy rằng background mặc định của bài viết sẽ theo background của content. Nếu bạn muốn thay đổi, bạn cần thêm đoạn mã về background vào phần post (nội dung bài viết) và post.title (tiêu đề của bài viết), ví dụ:


.post {
background: url(đường dẫn tới file ảnh) no-repeat right bottom;
}


Thuộc tính đi sau đường dẫn để xác định ảnh nền chỉ hiển thị một lần (no-repeat) và nằm ở phía dưới cùng (bottom), bên phải (right). Nếu bạn muốn ảnh nền tự động lập lại thì không thêm thuộc tính no-repeat, hoặc đặt ở các vị trí khác thì thay đổi tương ứng (left, center, top,...).

Nếu bạn muốn tạo border cho từng post, bạn chú ý phần in đậm trong mã post. File main.css của theme dựng sẵn chỉ tạo border cho góc trên của post, không có border cho post đầu tiên (first post), và chỉ có border góc dưới của post cuối cùng (last post). Nếu bạn muốn tạo cả 4 góc, bạn cần thêm vào border-left (trái), border-right (phải), border-bottom (đáy). Thông số đi theo bao gồm màu (color), xác định bằng mã màu; độ lớn (width), tính bằng đơn vị pixel; và kiểu (style) của border. Bạn có thể tham khảo các kiểu border tại W3Schools.

Khi đã tạo border, với mã code mặc định, bạn sẽ thấy nội dung sẽ nằm sát border. Muốn canh lề cho đẹp, bạn chú ý phần in đậm và nghiêng. Theme mặc định không chừa lề cho cả lề trái lẫn lề phải, bạn chỉ cần thay đổi giá trị, tính bằng đơn vị pixel cho phù hợp với sở thích của bạn. Nếu muốn canh lề phải, bạn thêm mã padding-right vào đoạn code nhé.