Go Back   Diễn Đàn Bo-Blog Việt Nam > Bo-Blog > Kiến Thức Cơ Bản Về CSS



About Me
Your Avatar

 
Trả lời Gởi Ðề Tài Mới
 
Ðiều Chỉnh Kiếm Trong Bài
  #1  
Old 23-02-2010, 11:06 PM
ROPking's Avatar
ROPking is offline
Senior Member
 
Tham gia ngày: Feb 2010
Bài gởi: 199
Gửi tin nhắn qua Yahoo chát tới ROPking
Cool Cách sửa 1 skin đẹp cho bo-blog

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. Mã nguồn này, bạn dễ dàng tìm được cho mình một skin ưng ý trong số hàng trăm 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ì?

Muốn edit 1 skin ưng ý các bạn phải có 1 bộ đồ nghề cũng thật đơn giản, bao gồm 2 công cụ chính sau đây :

1. Photoshop: tất nhiên là bạn phải biết sử dụng rồi. Ngoài photoshop ra thì bạn cũng có thể dùng một vài soft khác đơn giản hơn nhưng tất nhiên không pro bằng PS được.
2. Một chương trình edit file css. Cũng có nhiều, ở đây tôi dùng UltraEdit & editplus.

*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 hoặc editplus.

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;
}
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ại bài viết, các menu khác hay lick 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)
}
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;
}

}
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)
}
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;
}
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;
}
Trả Lời Với Trích Dẫn
  #2  
Old 23-02-2010, 11:10 PM
CafeSua's Avatar
CafeSua CafeSua is offline
Senior Member
 
Tham gia ngày: Feb 2010
Đến từ: Hà Tĩnh
Bài gởi: 440
Default

" Cách sửa 1 skin đẹp cho bo-blog "
Cái này là bố cục trong CSS thì đúng hơn, có thấy hướng dẫn làm skin đẹp đâu >.<
Skin đẹp là tùy vào bố cuc, hình ảnh và cách trình bày chứ!...hic
Trả Lời Với Trích Dẫn
  #3  
Old 23-02-2010, 11:24 PM
ROPking's Avatar
ROPking ROPking is offline
Senior Member
 
Tham gia ngày: Feb 2010
Bài gởi: 199
Gửi tin nhắn qua Yahoo chát tới ROPking
Default Cách sửa 1 skin đẹp cho bo-blog

Trích:
Nguyên văn bởi vnsad.net View Post
" Cách sửa 1 skin đẹp cho bo-blog "
Cái này là bố cục trong CSS thì đúng hơn, có thấy hướng dẫn làm skin đẹp đâu >.<
Skin đẹp là tùy vào bố cuc, hình ảnh và cách trình bày chứ!...hic
theo ý của bạn thì cũng đúng .Nhưng theo mình là : những yếu tố trên góp phần làm đẹp cho blog
Trả Lời Với Trích Dẫn
  #4  
Old 23-02-2010, 11:27 PM
CafeSua's Avatar
CafeSua CafeSua is offline
Senior Member
 
Tham gia ngày: Feb 2010
Đến từ: Hà Tĩnh
Bài gởi: 440
Default

Trích:
Nguyên văn bởi t2m1991 View Post
theo ý của bạn thì cũng đúng .Nhưng theo mình là : những yếu tố trên góp phần làm đẹp cho blog
ừ! Mà đúng ra là cách sữa 1 skin đẹp
Chứ không phải cách làm 1 skin đẹp
Trả Lời Với Trích Dẫn
  #5  
Old 24-02-2010, 12:25 AM
HTLove's Avatar
HTLove HTLove is offline
Moderator
 
Tham gia ngày: Feb 2010
Bài gởi: 144
Default

Cách sửa skin đơn giản nhất:
Tìm 1 skin chuẩn (2 cột thì nhiều, 3 cột thì dùng yeyo6).
Sau đó thay cái img, có thể chép đè lên
Ít nhất cũng phải bik 1 chút về css (vd: phải biết copy, past, )
Có pts hoặc fontpage để lấy mã màu hoặc làm nhìu chuyện khác ..
Trả Lời Với Trích Dẫn
  #6  
Old 24-02-2010, 12:34 AM
dejinvn's Avatar
dejinvn dejinvn is offline
Senior Member
 
Tham gia ngày: Feb 2010
Bài gởi: 180
Default

Trích:
Nguyên văn bởi HTLove View Post
Cách sửa skin đơn giản nhất:
Tìm 1 skin chuẩn (2 cột thì nhiều, 3 cột thì dùng yeyo6).
Sau đó thay cái img, có thể chép đè lên
Ít nhất cũng phải bik 1 chút về css (vd: phải biết copy, past, )
Có pts hoặc fontpage để lấy mã màu hoặc làm nhìu chuyện khác ..
Mình thấy 2 skin YeYo không chuẩn lắm. Vì trên IE 6 toàn bị tụt cột giữa
Trả Lời Với Trích Dẫn
  #7  
Old 24-02-2010, 12:38 AM
ROPking's Avatar
ROPking ROPking is offline
Senior Member
 
Tham gia ngày: Feb 2010
Bài gởi: 199
Gửi tin nhắn qua Yahoo chát tới ROPking
Default Cách sửa 1 skin đẹp cho bo-blog

Trích:
Nguyên văn bởi dejinvn View Post
Mình thấy 2 skin YeYo không chuẩn lắm. Vì trên IE 6 toàn bị tụt cột giữa
Chứ bạn ko để ý trên các bo-blog thường hay có câu : Hiển thị tốt nhất trên FireFox hay sao ???
Trả Lời Với Trích Dẫn
  #8  
Old 24-02-2010, 12:33 PM
hieu-md's Avatar
hieu-md hieu-md is offline
Member
 
Tham gia ngày: Feb 2010
Đến từ: Quảng Ninh
Bài gởi: 95
Gửi tin nhắn qua Yahoo chát tới hieu-md
Default

người mới bắt đầu hoặc không chuyên muốn có một skin đẹp thì phải đầu tư thời gian ngâm và test code của các skin mẫu ...
Nên tìm hiểu thêm về pts và đặc biệt phải có tí con mắt thẩm mĩ để bố trí các khối module và màu sắc ... Chắc thế là cũng đủ rồi !!!
Trả Lời Với Trích Dẫn
  #9  
Old 24-02-2010, 01:28 PM
HTLove's Avatar
HTLove HTLove is offline
Moderator
 
Tham gia ngày: Feb 2010
Bài gởi: 144
Default

IE 6 bây giờ ít ai sài lắm, chủ yếu là tiệm net thời xưa thôi, chứ tiệm net thời nay tệ nhất cũng là IE 7 hoặc IE 8 rồi ..
P/S: Mình vẫn sài IE 6 để làm skin
Trả Lời Với Trích Dẫn
  #10  
Old 25-02-2010, 03:14 PM
buihai's Avatar
buihai buihai is offline
Junior Member
 
Tham gia ngày: Feb 2010
Bài gởi: 14
Default

Trích:
Nguyên văn bởi HTLove View Post
P/S: Mình vẫn sài IE 6 để làm skin
thế mà bảo ít ao sài
Trả Lời Với Trích Dẫn
Trả lời Gởi Ðề Tài Mới

Tags
bo-blog, cách, cho, sửa, skin, đẹp

Ðiều Chỉnh Kiếm Trong Bài
Kiếm Trong Bài:

Kiếm Chi Tiết

Chuyển đến


Múi giờ GMT. Hiện tại là 05:55 AM.
Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
vdata

Bo-Blog Việt Nam

Bo-blog
9.9 10 13259