Tháng tám 2009
Admin's Blog
Nỗ lực hết mình vì những ước mơ...
3 trả lời • Trang 1 trên 1
Blog của admin
Hướng dẫn tự xây dựng Blog
gửi bởi admin vào ngày CN 09 Tháng 8, 2009 11:48 am
MangXD.VN cung cấp cho bạn công cụ để bạn xây dựng một trang Web cá nhân (một dạng nhật ký trực tuyến, hay còn gọi là Blog).
Đây là một dịch vụ miễn phí, cung cấp cho mọi thành viên của mangxd.vn.
Để sử dụng dịch vụ này, bạn cần có tài khoản trên mangxd.vn, việc đăng ký rất dễ dàng và hoàn toàn miễn phí. Nếu chưa có tài khoản trên mangxd.vn, bạn có thể đăng ký tại đây: ucp.php?mode=register
Nếu đã có nick rồi, bạn hãy đăng nhập vào hệ thống. Sau khi đăng nhập bạn có thể sử dụng đầy đủ các tính năng của mangxd.vn, có thể tham gia diễn đàn và tạo Blog riêng cho mình.
Sau khi đăng nhập bạn sẽ được đưa vào diễn đàn, tại đó bạn sẽ thấy các menu của hệ thống như sau:
Nhấp chuột vào link "Blogs" bạn sẽ được đưa tới trang chủ Blog của mangxd.vn, tại đây sẽ hiển thị tất cả các blog đang hoạt động trên mangxd.vn
Để vào Blog của bạn, hãy nhấp vào link "My Blog" cạnh đó.
Đây là một dịch vụ miễn phí, cung cấp cho mọi thành viên của mangxd.vn.
Để sử dụng dịch vụ này, bạn cần có tài khoản trên mangxd.vn, việc đăng ký rất dễ dàng và hoàn toàn miễn phí. Nếu chưa có tài khoản trên mangxd.vn, bạn có thể đăng ký tại đây: ucp.php?mode=register
Nếu đã có nick rồi, bạn hãy đăng nhập vào hệ thống. Sau khi đăng nhập bạn có thể sử dụng đầy đủ các tính năng của mangxd.vn, có thể tham gia diễn đàn và tạo Blog riêng cho mình.
Sau khi đăng nhập bạn sẽ được đưa vào diễn đàn, tại đó bạn sẽ thấy các menu của hệ thống như sau:
Nhấp chuột vào link "Blogs" bạn sẽ được đưa tới trang chủ Blog của mangxd.vn, tại đây sẽ hiển thị tất cả các blog đang hoạt động trên mangxd.vn
Để vào Blog của bạn, hãy nhấp vào link "My Blog" cạnh đó.
Tags: Hướng Dẫn Quản Lý Blog • Blogger Xây Dựng
Lời bình
Hướng dẫn gửi bài viết vào Blog của bạn.
gửi bởi admin vào ngày CN 09 Tháng 8, 2009 6:24 pm
Để vào blog của mình, bạn hãy đăng nhập vào hệ thống mangxd.vn rồi truy cập link "My Blog"
Bạn cũng có thể truy cập trực tiếp tới Blog của mình tại địa chỉ: http://mangxd.vn/forum/blog/Tên_Bạn
Trong đó "Tên_bạn" là Username bạn đã đăng ký trên mangxd.vn
Lần đầu tiên truy cập, bạn sẽ thấy giao diện Blog của bạn như sau:
Để gửi bài lên Blog, nhấp chuột vào nút "Chủ đề mới"
Trang gửi bài viết hiện ra, bạn nhập tiêu đề và nội dung bài viết, sau đó nhấp nút "Xem trước" để xem thử, nhấp nút "Chấp nhận" để gửi bài đi. Blog của bạn lúc này đã có bài mới (xem hình dưới)
Xem tiếp: Hướng dẫn trình bày bài viết trên Forum và Blog
gửi bởi admin vào ngày CN 09 Tháng 8, 2009 6:24 pmBạn cũng có thể truy cập trực tiếp tới Blog của mình tại địa chỉ: http://mangxd.vn/forum/blog/Tên_Bạn
Trong đó "Tên_bạn" là Username bạn đã đăng ký trên mangxd.vn
Lần đầu tiên truy cập, bạn sẽ thấy giao diện Blog của bạn như sau:
Để gửi bài lên Blog, nhấp chuột vào nút "Chủ đề mới"
Trang gửi bài viết hiện ra, bạn nhập tiêu đề và nội dung bài viết, sau đó nhấp nút "Xem trước" để xem thử, nhấp nút "Chấp nhận" để gửi bài đi. Blog của bạn lúc này đã có bài mới (xem hình dưới)
Xem tiếp: Hướng dẫn trình bày bài viết trên Forum và Blog
Hướng dẫn đổi giao diện cho Blog
gửi bởi admin vào ngày CN 09 Tháng 8, 2009 6:44 pm
Khi Blog của bạn đã có nhiều bài viết, có thể bạn sẽ muốn trang trí Blog của mình trông bắt mắt hơn.
Hệ thống Blog của mangxd.vn cung cấp cho bạn 2 cách để thay đổi giao diện: Sử dụng giao diện dựng sẵn hoặc xây dựng giao diện mới.
Sử dụng giao diện dựng sẵn là cách đơn giản nhất để thay giao diện cho Website. Để chọn một giao diệnbạn làm các bước sau:
1: bạn vào mục Thiết lập cá nhân
2: Chọn bảng Blog (link trực tiếp là: ucp.php?i=205
3: Chọn "Kiểu dáng Blog" trong danh sách, giả sử chọn giao diện có tên "Coda" (xem hình dưới)
Sau khi chọn xong hãy nhấp nút "Chấp nhận". Lúc này, quay lại Blog cua bạn bạn sẽ thấy giao diện thay đổi(xem hình dưới)
Ngoài ra bạn còn có thể sử dụng các mã CSS chèn thêm vào bên dưới phần "Kiểu dáng Blog" để tạo giao diện độc đáo cho Blog của bạn. (Cách này sẽ giới thiệu sau.)
Hiện nay Blog mạng Xây dựng có sẵn các kiểu giao diện sau:
Blogger Clone
Coda
Green Lizard
gửi bởi admin vào ngày CN 09 Tháng 8, 2009 6:44 pmHệ thống Blog của mangxd.vn cung cấp cho bạn 2 cách để thay đổi giao diện: Sử dụng giao diện dựng sẵn hoặc xây dựng giao diện mới.
Sử dụng giao diện dựng sẵn là cách đơn giản nhất để thay giao diện cho Website. Để chọn một giao diệnbạn làm các bước sau:
- 1: bạn vào mục Thiết lập cá nhân
2: Chọn bảng Blog (link trực tiếp là: ucp.php?i=205
3: Chọn "Kiểu dáng Blog" trong danh sách, giả sử chọn giao diện có tên "Coda" (xem hình dưới)
Sau khi chọn xong hãy nhấp nút "Chấp nhận". Lúc này, quay lại Blog cua bạn bạn sẽ thấy giao diện thay đổi(xem hình dưới)
Ngoài ra bạn còn có thể sử dụng các mã CSS chèn thêm vào bên dưới phần "Kiểu dáng Blog" để tạo giao diện độc đáo cho Blog của bạn. (Cách này sẽ giới thiệu sau.)
Hiện nay Blog mạng Xây dựng có sẵn các kiểu giao diện sau:
Blogger Clone
Coda
Green Lizard
Hướng dẫn sử dụng CSS tự thay đổi Giao diện Green Lizard
gửi bởi admin vào ngày T.Năm 20 Tháng 8, 2009 1:19 am
Bài viết này sẽ hướng dẫn bạn sử dụng CSS để tùy ý thay đổi Giao diện Green Lizard đã chọn ở trên bằng một giao diện do bạn tự thiết kế.
Đây là đoạn code CSS của giao diện Green Lizard, bạn có thể sửa nó tùy ý (thay đổi hình ảnh tự thiết kế, Font chữ, cỡ chữ... cho Blog của bạn)
- Mã: Chọn tất cả
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
background-color: #CDCD9B;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#fff;
}
#page {
width: 994px;
margin: 0 auto;
padding: 0;
}
#header {
background: url(http://mangxd.vn/forum/blog/styles/greenlizard/images/header.jpg) no-repeat top center transparent;
height: 205px;
width: 994px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
}
#contentframe{
background: url(http://mangxd.vn/forum/blog/styles/greenlizard/images/repeater.jpg) repeat-y top center transparent;
width: 994px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
}
#footer {
background: url(http://mangxd.vn/forum/blog/styles/greenlizard/images/footer.jpg) no-repeat top center ;/*transparent#707E81 */
width: 994px;
height: 175px;
padding: 0px 0px 0px 0px;
margin: -15px auto;
}
#titel{
font-size: 2.5em;
font-style: italic ;
font-weight: bold;
text-align:right;
margin: 10px 100px 0px 0px;
color: #415c15;
}
#topmenu {
background: url(http://mangxd.vn/forum/blog/styles/greenlizard/images/menu.jpg) no-repeat top center transparent;
height: 35px;
width: 994px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
}
#topmenu_line {
height: 30px;
width: 800px;
padding: 0px 94px 0px 100px;
margin: 0 auto;
}
#content {
<!-- IF USER_MENU_EXTRA -->
width: 595px;
<!-- ELSE -->
width: 994px;
<!-- ENDIF -->
text-align: left;
margin: 0px 0px 0px 35px;
padding: 0px 0px 0px 75px;
color:#fff;
}
/*
* Tag styles --------------------------------------------------------------------------------------
*/
a:link {
color:#CDCD9B;
text-decoration:none;
}
a:visited {
color:#CDCD9B;
text-decoration:none;
}
a:hover {
color:#FFC125;
text-decoration:underline;
}
h1 {
font-size: 1.8em;
border-bottom: 1px solid #E1D4C0;
color: #CDCD9B;
font-weight: normal;
margin-bottom: 3px;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 0.9em;
}
img, fieldset {
border: 0;
}
hr {
margin: 10px 0;
}
/*
* Class styles, starting from the first used to the last used -------------------------------------
*/
/* Header Classes */
.nav {
background-color: #114477;
height: 30px;
padding: 0 5px;
border-bottom: 1px solid #000000;
}
.nav a {
color: #9CCEFF;
}
.nav a:hover {
color: #FFFFFF;
text-decoration: none;
}
.nav_icon {
float: left;
margin-top: 2px;
}
.nav_search {
float: left;
}
.nav_search_input {
float: left;
margin: 4px 0 0 5px;
height: 13px;
font-size: 12px;
}
.nav_search_submit {
float: left;
height: 17px;
margin: 5px 0 0 5px;
background-color: #cdcd9b;/*#114477*/
border: 1px solid #4477AA;
color: #000;
font-size: 12px;
}
.nav_search_submit:hover {
background-color: #660000;
color:#fff;
}
.nav_links {
width: 600px;
border-bottom:1px solid #CDCD9B;
float: left;
margin: 6px 0 0 100px;
color: #CDCD9B;
}
.nav_links a{
color: #CDCD9B;
}
.nav_links a:hover {
color: #FFC125;
text-decoration: none;
}
.nav_links_right {
float: right;
margin: 6px 10px 0 5px;
color: #94A8D4;
}
.nav_links_right a {
color: #CDCD9B;
}
.nav_links_right a:hover {
color: #FFC125;
text-decoration: none;
}
.feed_icon {
float: left;
padding: 1px 3px;
}
#frame a, img {border: none;}
#header a, img {border: none;}
#headimg a {text-decoration: none;}
/* Main Classes */
.blog_description {
padding: 10px;
margin: 20px 0px 20px 0px;
background: #CDCD9B;
border-right: 1px solid #999;
border-bottom: 1px solid #ccc;
color: #415c15;
}
/* Pagination */
.pagination {
float: right;
}
/* Sidebar */
#sidebar {
float: right;
width: 150px;
color: #cc3333;
font-size: 11px;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 0px 100px 0px 05px;
}
#sidebar a{
color: #300;
}
#sidebar a:hover{
color: #c33;
text-decoration:none;
}
#sidebar .post {
margin-bottom: 15px;
padding-bottom: 10px;
/* border:1px solid #000;*/
background: #eee;
border-right: 1px solid #999;
border-bottom: 1px solid #ccc;
}
#sidebar .inner {
}
#sidebar .left_menu_title {
text-align: center;
color: #415c15;
background: #CDCD9B;
font-size: 130%;
}
#sidebar dl dd {
padding: 5px;
border-color: #E1D4C0;
border-style: none solid;
border-width: medium 0px;
}
#sidebar dl .panel dd {
border: 0;
}
#sidebar .topiclist {
list-style: none;
}
/* Blog Classes */
.blog {
}
.blog_rating {
float: right;
}
.blog_title a {
color: #D4D0C8;
font-weight: normal;
text-decoration: none;
}
.blog_title a:hover {
color: #331000;
}
.blog_date {
}
.blog_text {
padding: 10px 0;
}
.edited_message {
}
.deleted_message {
}
.signature {
border-top: 1px dotted #7C756A;
}
.blog_bottom_right {
}
.blog_bottom_left {
margin-bottom: 4px;
}
/* Reply Classes */
#replies {
margin-top: 15px;
}
.reply {
padding: 5px;
margin-bottom: 15px;
}
.reply_title {
font-size: 1.1em;
}
.reply_date {
}
.reply_text {
min-height: 30px;
}
.reply_bottom_right {
}
.reply_bottom_left {
margin-bottom: 4px;
}
/* Footer Classes */
.bottom_links {
}
.copyright {
margin-top: 0px;
padding: 5px;
text-align: center;
color: #D4D0C8;
}
/* Extra Classes */
.deleted {
padding: 5px;
background-color: #A19CA6;
}
.reported {
background-color: #FFF36F;
padding: 5px;
}
/*
* Poll/BBCode/Attachment/Other board styles ------------------------------------------------------------
*/
/* Poll Styles */
.poll_info {
}
fieldset.polls {
margin: 5px 5px 10px 5px;
}
fieldset.polls dl {
margin-top: 5px;
border-top: 1px solid #DCDEE2;
padding: 5px 0 0 0;
height: 18px;
color: #666666;
}
fieldset.polls dl.voted {
font-weight: bold;
color: #000000;
}
fieldset.polls dt {
text-align: left;
float: left;
display: block;
width: 30%;
border-right: none;
padding: 0;
margin: 0;
font-size: 1.1em;
}
fieldset.polls dd {
float: left;
width: 10%;
border-left: none;
padding: 0 5px;
margin-left: 0;
font-size: 1.1em;
}
fieldset.polls dd.resultbar {
width: 50%;
}
fieldset.polls dd input {
margin: 2px 0;
}
fieldset.polls dd div {
text-align: right;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
padding: 0 2px;
overflow: visible;
min-width: 2%;
}
.pollbar1 {
background-color: #AA2346;
border-bottom-color: #74162C;
border-right-color: #74162C;
}
.pollbar2 {
background-color: #BE1E4A;
border-bottom-color: #8C1C38;
border-right-color: #8C1C38;
}
.pollbar3 {
background-color: #D11A4E;
border-bottom-color: #AA2346;
border-right-color: #AA2346;
}
.pollbar4 {
background-color: #E41653;
border-bottom-color: #BE1E4A;
border-right-color: #BE1E4A;
}
.pollbar5 {
background-color: #F81157;
border-bottom-color: #D11A4E;
border-right-color: #D11A4E;
}
/* Quote block */
blockquote {
background: #CDCD9B url("http://mangxd.vn/forum/blog/styles/greenlizard/images/quote.gif") 6px 8px no-repeat;
border: 1px solid #DBDBCE;
font-size: 0.95em;
margin: 0.5em 1px 0 25px;
overflow: hidden;
padding: 5px;
color: #415C15;
}
blockquote blockquote {
/* Nested quotes */
background-color: #EFEED9;
font-size: 1em;
margin: 0.5em 1px 0 15px;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #EBEADD;
}
blockquote cite {
/* Username/source of quoter */
font-style: normal;
font-weight: bold;
margin-left: 20px;
display: block;
font-size: 0.9em;
}
blockquote cite cite {
font-size: 1em;
}
blockquote.uncited {
padding-top: 25px;
}
/* Code block */
dl.codebox {
padding: 3px;
background-color: #FFFFFF;
border: 1px solid #C9D2D8;
font-size: 1em;
}
dl.codebox dt {
text-transform: uppercase;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 3px;
font-size: 0.8em;
font-weight: bold;
display: block;
}
blockquote dl.codebox {
margin-left: 0;
}
dl.codebox code {
/* Also see tweaks.css */
overflow: auto;
display: block;
height: auto;
max-height: 200px;
white-space: normal;
padding-top: 5px;
font: 0.9em Monaco, "Andale Mono","Courier New", Courier, mono;
line-height: 1.3em;
color: #2E8B57;
margin: 2px 0;
}
.syntaxbg { color: #FFFFFF; }
.syntaxcomment { color: #FF8000; }
.syntaxdefault { color: #0000BB; }
.syntaxhtml { color: #000000; }
.syntaxkeyword { color: #007700; }
.syntaxstring { color: #DD0000; }
/* Attachments */
.attachbox {
width: auto;
margin: 5px 5px 5px 0;
padding: 6px;
background-color: #FFFFFF;
border: 1px dashed #C9D2D8;
}
.attachbox dt {
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
.attachbox dd {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid #C9D2D8;
}
.attachbox dd dd {
border: none;
}
.attachbox p {
line-height: 110%;
color: #666666;
font-weight: normal;
}
.attachbox p.stats
{
line-height: 110%;
color: #666666;
font-weight: normal;
}
.attach-image {
margin: 3px 0;
width: 100%;
max-height: 350px;
overflow: auto;
}
.attach-image img {
border: 1px solid #999999;
/* cursor: move; */
cursor: default;
}
/* Inline image thumbnails */
div.inline-attachment dl.thumbnail, div.inline-attachment dl.file {
margin-bottom: 4px;
}
div.inline-attachment p {
font-size: 100%;
}
dl.file {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
dl.file dt {
text-transform: none;
margin: 0;
padding: 0;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
dl.file dd {
color: #666666;
margin: 0;
padding: 0;
}
dl.thumbnail img {
padding: 3px;
border: 1px solid #666666;
background-color: #FFFFFF;
}
dl.thumbnail dd {
color: #666666;
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.attachbox dl.thumbnail dd {
font-size: 100%;
}
dl.thumbnail dt a:hover {
background-color: #EEEEEE;
}
dl.thumbnail dt a:hover img {
border: 1px solid #368AD2;
}
#blog_searchform{
padding: 2px 0px 0px 0px;
}
#message {
background-color: #CDCD9B;
color: #000:
}
Tất nhiên đây mới chỉ là code gốc, dành cho những ai có chút hiểu biết về CSS có thể tự tìm hiểu. Trên nền code gốc này, hy vọng các bạn giỏi code sẽ thiết kế được những giao diện đẹp để chia sẻ cho cộng đồng. Đối với những bạn chưa biết sử dụng CSS, mình sẽ có một bài hướng dẫn dành cho những bạn muốn biết tí chút về CSS để có thể tự mình tùy biến giao diện.
gửi bởi admin vào ngày T.Năm 20 Tháng 8, 2009 1:19 amĐây là đoạn code CSS của giao diện Green Lizard, bạn có thể sửa nó tùy ý (thay đổi hình ảnh tự thiết kế, Font chữ, cỡ chữ... cho Blog của bạn)
- Mã: Chọn tất cả
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
background-color: #CDCD9B;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#fff;
}
#page {
width: 994px;
margin: 0 auto;
padding: 0;
}
#header {
background: url(http://mangxd.vn/forum/blog/styles/greenlizard/images/header.jpg) no-repeat top center transparent;
height: 205px;
width: 994px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
}
#contentframe{
background: url(http://mangxd.vn/forum/blog/styles/greenlizard/images/repeater.jpg) repeat-y top center transparent;
width: 994px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
}
#footer {
background: url(http://mangxd.vn/forum/blog/styles/greenlizard/images/footer.jpg) no-repeat top center ;/*transparent#707E81 */
width: 994px;
height: 175px;
padding: 0px 0px 0px 0px;
margin: -15px auto;
}
#titel{
font-size: 2.5em;
font-style: italic ;
font-weight: bold;
text-align:right;
margin: 10px 100px 0px 0px;
color: #415c15;
}
#topmenu {
background: url(http://mangxd.vn/forum/blog/styles/greenlizard/images/menu.jpg) no-repeat top center transparent;
height: 35px;
width: 994px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
}
#topmenu_line {
height: 30px;
width: 800px;
padding: 0px 94px 0px 100px;
margin: 0 auto;
}
#content {
<!-- IF USER_MENU_EXTRA -->
width: 595px;
<!-- ELSE -->
width: 994px;
<!-- ENDIF -->
text-align: left;
margin: 0px 0px 0px 35px;
padding: 0px 0px 0px 75px;
color:#fff;
}
/*
* Tag styles --------------------------------------------------------------------------------------
*/
a:link {
color:#CDCD9B;
text-decoration:none;
}
a:visited {
color:#CDCD9B;
text-decoration:none;
}
a:hover {
color:#FFC125;
text-decoration:underline;
}
h1 {
font-size: 1.8em;
border-bottom: 1px solid #E1D4C0;
color: #CDCD9B;
font-weight: normal;
margin-bottom: 3px;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 0.9em;
}
img, fieldset {
border: 0;
}
hr {
margin: 10px 0;
}
/*
* Class styles, starting from the first used to the last used -------------------------------------
*/
/* Header Classes */
.nav {
background-color: #114477;
height: 30px;
padding: 0 5px;
border-bottom: 1px solid #000000;
}
.nav a {
color: #9CCEFF;
}
.nav a:hover {
color: #FFFFFF;
text-decoration: none;
}
.nav_icon {
float: left;
margin-top: 2px;
}
.nav_search {
float: left;
}
.nav_search_input {
float: left;
margin: 4px 0 0 5px;
height: 13px;
font-size: 12px;
}
.nav_search_submit {
float: left;
height: 17px;
margin: 5px 0 0 5px;
background-color: #cdcd9b;/*#114477*/
border: 1px solid #4477AA;
color: #000;
font-size: 12px;
}
.nav_search_submit:hover {
background-color: #660000;
color:#fff;
}
.nav_links {
width: 600px;
border-bottom:1px solid #CDCD9B;
float: left;
margin: 6px 0 0 100px;
color: #CDCD9B;
}
.nav_links a{
color: #CDCD9B;
}
.nav_links a:hover {
color: #FFC125;
text-decoration: none;
}
.nav_links_right {
float: right;
margin: 6px 10px 0 5px;
color: #94A8D4;
}
.nav_links_right a {
color: #CDCD9B;
}
.nav_links_right a:hover {
color: #FFC125;
text-decoration: none;
}
.feed_icon {
float: left;
padding: 1px 3px;
}
#frame a, img {border: none;}
#header a, img {border: none;}
#headimg a {text-decoration: none;}
/* Main Classes */
.blog_description {
padding: 10px;
margin: 20px 0px 20px 0px;
background: #CDCD9B;
border-right: 1px solid #999;
border-bottom: 1px solid #ccc;
color: #415c15;
}
/* Pagination */
.pagination {
float: right;
}
/* Sidebar */
#sidebar {
float: right;
width: 150px;
color: #cc3333;
font-size: 11px;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 0px 100px 0px 05px;
}
#sidebar a{
color: #300;
}
#sidebar a:hover{
color: #c33;
text-decoration:none;
}
#sidebar .post {
margin-bottom: 15px;
padding-bottom: 10px;
/* border:1px solid #000;*/
background: #eee;
border-right: 1px solid #999;
border-bottom: 1px solid #ccc;
}
#sidebar .inner {
}
#sidebar .left_menu_title {
text-align: center;
color: #415c15;
background: #CDCD9B;
font-size: 130%;
}
#sidebar dl dd {
padding: 5px;
border-color: #E1D4C0;
border-style: none solid;
border-width: medium 0px;
}
#sidebar dl .panel dd {
border: 0;
}
#sidebar .topiclist {
list-style: none;
}
/* Blog Classes */
.blog {
}
.blog_rating {
float: right;
}
.blog_title a {
color: #D4D0C8;
font-weight: normal;
text-decoration: none;
}
.blog_title a:hover {
color: #331000;
}
.blog_date {
}
.blog_text {
padding: 10px 0;
}
.edited_message {
}
.deleted_message {
}
.signature {
border-top: 1px dotted #7C756A;
}
.blog_bottom_right {
}
.blog_bottom_left {
margin-bottom: 4px;
}
/* Reply Classes */
#replies {
margin-top: 15px;
}
.reply {
padding: 5px;
margin-bottom: 15px;
}
.reply_title {
font-size: 1.1em;
}
.reply_date {
}
.reply_text {
min-height: 30px;
}
.reply_bottom_right {
}
.reply_bottom_left {
margin-bottom: 4px;
}
/* Footer Classes */
.bottom_links {
}
.copyright {
margin-top: 0px;
padding: 5px;
text-align: center;
color: #D4D0C8;
}
/* Extra Classes */
.deleted {
padding: 5px;
background-color: #A19CA6;
}
.reported {
background-color: #FFF36F;
padding: 5px;
}
/*
* Poll/BBCode/Attachment/Other board styles ------------------------------------------------------------
*/
/* Poll Styles */
.poll_info {
}
fieldset.polls {
margin: 5px 5px 10px 5px;
}
fieldset.polls dl {
margin-top: 5px;
border-top: 1px solid #DCDEE2;
padding: 5px 0 0 0;
height: 18px;
color: #666666;
}
fieldset.polls dl.voted {
font-weight: bold;
color: #000000;
}
fieldset.polls dt {
text-align: left;
float: left;
display: block;
width: 30%;
border-right: none;
padding: 0;
margin: 0;
font-size: 1.1em;
}
fieldset.polls dd {
float: left;
width: 10%;
border-left: none;
padding: 0 5px;
margin-left: 0;
font-size: 1.1em;
}
fieldset.polls dd.resultbar {
width: 50%;
}
fieldset.polls dd input {
margin: 2px 0;
}
fieldset.polls dd div {
text-align: right;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
padding: 0 2px;
overflow: visible;
min-width: 2%;
}
.pollbar1 {
background-color: #AA2346;
border-bottom-color: #74162C;
border-right-color: #74162C;
}
.pollbar2 {
background-color: #BE1E4A;
border-bottom-color: #8C1C38;
border-right-color: #8C1C38;
}
.pollbar3 {
background-color: #D11A4E;
border-bottom-color: #AA2346;
border-right-color: #AA2346;
}
.pollbar4 {
background-color: #E41653;
border-bottom-color: #BE1E4A;
border-right-color: #BE1E4A;
}
.pollbar5 {
background-color: #F81157;
border-bottom-color: #D11A4E;
border-right-color: #D11A4E;
}
/* Quote block */
blockquote {
background: #CDCD9B url("http://mangxd.vn/forum/blog/styles/greenlizard/images/quote.gif") 6px 8px no-repeat;
border: 1px solid #DBDBCE;
font-size: 0.95em;
margin: 0.5em 1px 0 25px;
overflow: hidden;
padding: 5px;
color: #415C15;
}
blockquote blockquote {
/* Nested quotes */
background-color: #EFEED9;
font-size: 1em;
margin: 0.5em 1px 0 15px;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #EBEADD;
}
blockquote cite {
/* Username/source of quoter */
font-style: normal;
font-weight: bold;
margin-left: 20px;
display: block;
font-size: 0.9em;
}
blockquote cite cite {
font-size: 1em;
}
blockquote.uncited {
padding-top: 25px;
}
/* Code block */
dl.codebox {
padding: 3px;
background-color: #FFFFFF;
border: 1px solid #C9D2D8;
font-size: 1em;
}
dl.codebox dt {
text-transform: uppercase;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 3px;
font-size: 0.8em;
font-weight: bold;
display: block;
}
blockquote dl.codebox {
margin-left: 0;
}
dl.codebox code {
/* Also see tweaks.css */
overflow: auto;
display: block;
height: auto;
max-height: 200px;
white-space: normal;
padding-top: 5px;
font: 0.9em Monaco, "Andale Mono","Courier New", Courier, mono;
line-height: 1.3em;
color: #2E8B57;
margin: 2px 0;
}
.syntaxbg { color: #FFFFFF; }
.syntaxcomment { color: #FF8000; }
.syntaxdefault { color: #0000BB; }
.syntaxhtml { color: #000000; }
.syntaxkeyword { color: #007700; }
.syntaxstring { color: #DD0000; }
/* Attachments */
.attachbox {
width: auto;
margin: 5px 5px 5px 0;
padding: 6px;
background-color: #FFFFFF;
border: 1px dashed #C9D2D8;
}
.attachbox dt {
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
.attachbox dd {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid #C9D2D8;
}
.attachbox dd dd {
border: none;
}
.attachbox p {
line-height: 110%;
color: #666666;
font-weight: normal;
}
.attachbox p.stats
{
line-height: 110%;
color: #666666;
font-weight: normal;
}
.attach-image {
margin: 3px 0;
width: 100%;
max-height: 350px;
overflow: auto;
}
.attach-image img {
border: 1px solid #999999;
/* cursor: move; */
cursor: default;
}
/* Inline image thumbnails */
div.inline-attachment dl.thumbnail, div.inline-attachment dl.file {
margin-bottom: 4px;
}
div.inline-attachment p {
font-size: 100%;
}
dl.file {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
dl.file dt {
text-transform: none;
margin: 0;
padding: 0;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
dl.file dd {
color: #666666;
margin: 0;
padding: 0;
}
dl.thumbnail img {
padding: 3px;
border: 1px solid #666666;
background-color: #FFFFFF;
}
dl.thumbnail dd {
color: #666666;
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.attachbox dl.thumbnail dd {
font-size: 100%;
}
dl.thumbnail dt a:hover {
background-color: #EEEEEE;
}
dl.thumbnail dt a:hover img {
border: 1px solid #368AD2;
}
#blog_searchform{
padding: 2px 0px 0px 0px;
}
#message {
background-color: #CDCD9B;
color: #000:
}
Tất nhiên đây mới chỉ là code gốc, dành cho những ai có chút hiểu biết về CSS có thể tự tìm hiểu. Trên nền code gốc này, hy vọng các bạn giỏi code sẽ thiết kế được những giao diện đẹp để chia sẻ cho cộng đồng. Đối với những bạn chưa biết sử dụng CSS, mình sẽ có một bài hướng dẫn dành cho những bạn muốn biết tí chút về CSS để có thể tự mình tùy biến giao diện.
3 trả lời • Trang 1 trên 1
Blogger Clone by EXreaction
Vietnamese translation by nedka
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group