Lấy lại mật khẩu Admin trong Bo-blog
Tích hợp bộ gõ tiếng việt vào Bo-Blog
Nov
26
Cách edit skin cho Bo-Blog
11:56 
Bo-blog là một mã nguồn blog rất chuyên nghiệp và có nhiều tính năng vượt trội. Với mã nguồn này, bạn dễ dàn tìm được cho mình một skin ưng ý trong số hàng chục skin được share trên mạng. Tuy vậy, không ít người trong số chúng ta muốn tự edit một skin mang phong cách riêng của mình. Vậy bạn phải làm gì?
Về phần hình ảnh trong skin của bạn:
1. Trước khi bắt tay vào edit, bạn nên có một phác thảo nhất định về cấu trúc của skin, màu sắc, độ rộng hẹp...
2. Bạn cũng nên chú trọng vào tương quan màu sắc giữa các mục. Ví dụ, menu bạn design màu đỏ mà textbox lại màu xanh thì e rằng sẽ rất khó coi.
3. Bạn không nên để dung lượng file hình ảnh quá lớn, khiến cho việc load site sẽ rất chậm chạp. Khuyến cáo nên sử dụng định dạng .jpg, độ phân giải 72 pixels/inch, save file với quality = 8...
Bắt đầu edit file .css. bạn hãy mở file styles.css của mình bằng UltraEdit
1. Phần body: (quy định nền cho blog, màu sắc cơ bản cho text)
2. Chữ và mầu chữ cho các link. (ở đây bạn tạm hiểu là tất cả các phần có link, ví dụ như phân loịa bài viết, các menu khác hay link trong các bài viết.)
3. Khung nhập liệu. Bạn có một số vị trí hiện thị khung nhập liệu như: nhập comment, nhập ký tự mã kiểm tra...
4. Phần quy định độ rộng của site.
5. Mục quy định đầu trang.
6. Chân trang
Đánh giá bài viết
Về phần hình ảnh trong skin của bạn:
1. Trước khi bắt tay vào edit, bạn nên có một phác thảo nhất định về cấu trúc của skin, màu sắc, độ rộng hẹp...
2. Bạn cũng nên chú trọng vào tương quan màu sắc giữa các mục. Ví dụ, menu bạn design màu đỏ mà textbox lại màu xanh thì e rằng sẽ rất khó coi.
3. Bạn không nên để dung lượng file hình ảnh quá lớn, khiến cho việc load site sẽ rất chậm chạp. Khuyến cáo nên sử dụng định dạng .jpg, độ phân giải 72 pixels/inch, save file với quality = 8...
Bắt đầu edit file .css. bạn hãy mở file styles.css của mình bằng UltraEdit
1. Phần body: (quy định nền cho blog, màu sắc cơ bản cho text)
body {
Font-size: 13px; (Kích thước font chữ mặc định cho toàn site)
Font-family: Tahoma, Arial; (Font chữ có thể hiển thị)
Background: url('images/bg.png') #2a3725; (nền của blog, có thể ko dùng ảnh mà dùng mã màu)
Background-attachment: fixed;
Margin: 0px;
Padding: 0px;
Color: #b5c0d7;
Text-align: center;
}
Font-size: 13px; (Kích thước font chữ mặc định cho toàn site)
Font-family: Tahoma, Arial; (Font chữ có thể hiển thị)
Background: url('images/bg.png') #2a3725; (nền của blog, có thể ko dùng ảnh mà dùng mã màu)
Background-attachment: fixed;
Margin: 0px;
Padding: 0px;
Color: #b5c0d7;
Text-align: center;
}
2. Chữ và mầu chữ cho các link. (ở đây bạn tạm hiểu là tất cả các phần có link, ví dụ như phân loịa bài viết, các menu khác hay link trong các bài viết.)
a {
Text-decoration: none;
Color: #269C08; (Màu chữ hiển thị thông thường)
}
A:hover {
Text-decoration: none;
Color: #FF9024; (Màu chữ hiển thị khi ta rê chuột lên link)
}
Text-decoration: none;
Color: #269C08; (Màu chữ hiển thị thông thường)
}
A:hover {
Text-decoration: none;
Color: #FF9024; (Màu chữ hiển thị khi ta rê chuột lên link)
}
3. Khung nhập liệu. Bạn có một số vị trí hiện thị khung nhập liệu như: nhập comment, nhập ký tự mã kiểm tra...
input.text {
Height: 20px;
Padding: 1px;
Border: 1px solid #CFB88C;
Color: #000;
Background-color: #F0F3DE;
}
Input.button {
Height: 20px;
Border: 1px solid #CFB88C;
Border-left: 4px solid #CFB88C;
Color: #000000; (Màu chữ hiển thị khi ta rê chuột lên link)
Font-weight: bold;
Background-color: #F0F3DE; (Màu nền hiển thị của nút bấm, chẳng hạn như nút Gửi đi, Làm lại, bạn cũng có thể thay màu nền bằng hình ảnh)
Textarea {
Border: 1px solid #CFB88C;
Background: #d5eafe;(Màu nền hiển thị trong ô nhập liệu, bạn cũng có thể thay màu nền bằng hình ảnh)
Font-family: Tahoma, Arial;
Font-size: 12px;
Color: #000;
}
}
Height: 20px;
Padding: 1px;
Border: 1px solid #CFB88C;
Color: #000;
Background-color: #F0F3DE;
}
Input.button {
Height: 20px;
Border: 1px solid #CFB88C;
Border-left: 4px solid #CFB88C;
Color: #000000; (Màu chữ hiển thị khi ta rê chuột lên link)
Font-weight: bold;
Background-color: #F0F3DE; (Màu nền hiển thị của nút bấm, chẳng hạn như nút Gửi đi, Làm lại, bạn cũng có thể thay màu nền bằng hình ảnh)
Textarea {
Border: 1px solid #CFB88C;
Background: #d5eafe;(Màu nền hiển thị trong ô nhập liệu, bạn cũng có thể thay màu nền bằng hình ảnh)
Font-family: Tahoma, Arial;
Font-size: 12px;
Color: #000;
}
}
4. Phần quy định độ rộng của site.
#wrapper {
Margin:0 auto;
Width: 776px; (Kích thước này áp dụng khi bạn design site ở độ phân giải 1024x768)
Position: relative;
Text-align: left;
}
#innerWrapper {
Background: #1e1e1e; (màu nền của toàn bộ site)
Width: 100%;
Border: 0px solid #444; (Đường bao quanh)
}
Margin:0 auto;
Width: 776px; (Kích thước này áp dụng khi bạn design site ở độ phân giải 1024x768)
Position: relative;
Text-align: left;
}
#innerWrapper {
Background: #1e1e1e; (màu nền của toàn bộ site)
Width: 100%;
Border: 0px solid #444; (Đường bao quanh)
}
5. Mục quy định đầu trang.
#header {}
#innerHeader {
Background: #1e1e1e url('images/bg_header.jpg') no-repeat;
Padding-left: 10px;
Padding-right: 10px;
Height: 270px;
}
#innerHeader {
Background: #1e1e1e url('images/bg_header.jpg') no-repeat;
Padding-left: 10px;
Padding-right: 10px;
Height: 270px;
}
6. Chân trang
#footer {
Margin-top: 20px;
Clear: both;
Background: #1e1e1e url('images/bg_footer.jpg') no-repeat;
Height: 165px;
}
#innerFooter {
Padding: 16px;
Padding-top: 12px;
Font-size: 12px;
Text-align: right;
Color: #0c06fb;
}
#innerFooter a{
Color: #FF9024;
Font-weight: bold;
}
Margin-top: 20px;
Clear: both;
Background: #1e1e1e url('images/bg_footer.jpg') no-repeat;
Height: 165px;
}
#innerFooter {
Padding: 16px;
Padding-top: 12px;
Font-size: 12px;
Text-align: right;
Color: #0c06fb;
}
#innerFooter a{
Color: #FF9024;
Font-weight: bold;
}
Đánh giá bài viết
RSS 
