Phạm Lâm's Blog

Trong tutorial này chúng ta sẽ học:

- Cách đưa độ rộng của skin về 778px
- Cách đóng khung ô viết bài
- Cách đổi hình nền blog
- Cách đưa hình nền vào ô viết bài
- Sửa chữa sidebar
...

Việc trước tiên là phải download file main.css của skin số 2 này. Các bạn có thể download tại đây (nhấn chuột phải chọn save target as). Mở file này bằng Notepad (nhấn chuột phải vào file chọn open with Notepad) và chuẩn bị để sửa chữa. Nếu bạn dùng Macromedia Dreamweaver thì việc sửa chữa sẽ dễ dàng hơn.

1. Thay đổi độ rộng của skin về 778px

- Mở file main.css. Nhấn Ctrl+F để mở hộp thoại tìm kiếm. Gõ vào ô tìm kiếm từ #wrap1. Xóa đoạn max-width:882px; đi.

Đây là đoạn code gốc

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

Đoạn code sau khi thay đổi

#wrap1 {
margin:0 auto;
background:#acaea7 url(/community/graphics/users/2/wrap1.gif) top left repeat-y;
}

- Tiếp tục kéo xuống hoặc nhấn Ctrl+F để mở hộp thoại tìm kiếm. Gõ vào ô tìm kiếm từ #wrap3. Trong dấu {} của #wrap3 tìm đoạn

max-width:832px;
min-width:739px;

rồi thay thế bằng đoạn bằng đoạn: width:758px !important;

Code gốc

#wrap3 {
background:#fff;
margin:0 auto;
max-width:832px;
min-width:739px;
padding:0 10px;
}

Sau khi thay thế sẽ trở thành:

#wrap3 {
background:#fff;
margin:0 auto;
width:758px !important;
padding:0 10px;
}

- Tiếp tục kéo xuống tìm từ #topbar thay thế max-width:852px; bằng width:778px !important;

- Tìm #top xóa

max-width:872px;
min-width:739px;

thay bằng width:778px !important;

- Tìm #content xóa

min-width:739px;
max-width:812px;

thay bằng width:758px !important;

(chú ý có cả dấu chấm phẩy sau chữ px)

Chỉ bằng đấy bước là bạn đã đưa thành công độ rộng của skin thứ 2 thành 778px. Sau khi sửa copy toàn bộ nội dung file đã sửa vào Preferences (phía trên cùng của trang weblog ấy) vào tiếp Web page layoutvào custom style sheet. Paste toàn bộ nội dung đã copy vào ô Enter CSS. Kéo xuống đánh dấu vào ô Only use my custom style sheet và nhấn save.

Chú ý: Nhớ download file main.css từ link phía trên để sửa thì đường dẫn ảnh mới không bị sai. Nếu bạn save trang web về và mở file main.css ra sửa rồi copy vào thì một số ảnh sẽ không hiển thị.

2. Đóng khung ô viết bài.

- Mở hộp thoại tìm kiếm gõ vào từ .post để tìm. Xóa padding:16px 0 10px 0; thay bằng padding:10px 5px;
xóa border-top:1px solid #ddd; thay bằng border:1px solid #2382C7;

Ngoài lề: Border thuộc tính dùng thay đổi đường biên của đối tượng. Border được dùng như sau: border(-top, -right, -bottom, -left): #mã màu (hoặc tên màu) kiểu đường viền độ rộng của đường viền;
Có các kiểu đường viền sau: medium thin, thick, dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid, inherit. Bạn có thể thay đổi lần lượt để biết nó hiển thị ra sao.

Code trước khi thay đổi

.post {
padding:16px 0 10px 0;
margin-bottom:10px;
width:100%;
overflow:hidden;
border-top:1px solid #ddd;
}

Sau khi thay đổi

.post {
padding:10px 5px;
margin-bottom:10px;
width:100%;
overflow:hidden;
border:1px solid #2382C7;
}

- Tìm #firstpost xóa padding-top:0; thay bằng padding:10px 5px; và thêm đoạn border:1px solid #2382C7;

- Kéo xuống #lastpost xóa border-bottom:1px solid #ddd; thay bằng border-bottom:1px solid #2382C7;

Tới đây là xong việc đóng khung ô viết bài rồi. Lại copy toàn bộ file main.css vừa sửa copy vào đúng chỗ như ở trên đã chỉ dẫn và save. Để đổi màu đường viền thành màu khác bạn chỉ việc đổi #2382c7 thành mã màu mà bạn thích.

3. Thay đổi nền blog

Vẫn phải chú ý với các bạn chúng ta đang thay đổi skin số 2. Với skin này việc thay đổi nền blog như sau.

- Tìm #wrap1 xóa background:#acaea7 url(/community/graphics/users/2/wrap1.gif) top left repeat-y;

- Tìm #wrap2 xóa background:#transparent url(/community/graphics/users/2/wrap2.gif) top left repeat-y;

- Kéo lên trên cùng tìm thẻ body thay thế hoặc sửa background:#b6b8b1; thành background:#000; . Bạn có thể chọn màu nền mà mình thích để thay vào #b6b8b1. Tôi thay thành #000 là màu đen. Để đưa ảnh nền vào bạn làm như sau. Sửa background:#b6b8b1; thành background:#b6b8b1 url(đường dẫn tới bức ảnh nền) repeat;

Ví dụ:

Code gốc

body {
background:#b6b8b1;
margin:0;
padding:0;
font-family:arial,'trebuchet ms',helvetica,sans-serif;
font-size:12px;
line-height:145%;
text-align:center;
color:#111;
}

Sau khi thay:

body {
background:#000 url(http://my.opera.com/phamlam/homes/nightstyle/bg.gif);
margin:0;
padding:0;
font-family:arial,'trebuchet ms',helvetica,sans-serif;
font-size:12px;
line-height:145%;
text-align:center;
color:#111;
}

Ngoài lề: background là thuộc tính ghi tắt của 5 thuộc tính background-color, background-image, background-repeat, background-position, background-attachment thay dùng để đổi nền đối tượng, thường có cấu trúc như sau:
background: #mã màu (hoặc tên màu, nếu dùng tên màu không có dấu #) url(đường dẫn tới file ảnh làm nền) vị trí đặt của bức ảnh nền trong đối tượng khả năng lặp lại của ảnh nền;
Các kiểu lặp lại của ảnh nền: repeat: lặp lại, no-repeat: Không lặp lại, repeat-x; chỉ lặp lại ảnh theo trục x, repeat-y: chỉ lặp lại theo trục y.

Tới đây đã xong việc đưa ảnh nền vào blog. Lại tiếp tục công việc copy và paste như ở trên và save vào. Mở blog nhấn F5 để xem kết quả.

4. Đưa hình nền vào ô viết bài.

- Tìm .post giống ở trên. Thêm đoạn background:#fff url(đường dẫn ảnh) bottom right repeat-x;

Chú ý: bottom right repeat-x; tức là lặp lại bức ảnh đó theo trục ngang x ảnh bắt đầu ở dưới cùng và bên phải của ô .post và lặp liên tục sang bên trái. Bạn có thể thay đổi cho phù hợp với yêu cầu của bạn.

Ví dụ

.post {
padding:10px 5px;
margin-bottom:10px;
width:100%;
overflow:hidden;
border:1px solid #2382C7;
background:#fff url(http://my.opera.com/phamlam/homes/nightstyle) bottom right repeat-x;
}

Thế là đã xong. Lại copy file main.css đã sửa và save vào như ở trên.

Buồn ngủ đi ngủ đã. Để rảnh viết tiếp...

Hãy đọc kỹ trước khi bạn muốn hỏi.