[Nghịch CSS] Chỉnh sửa lại button gửi bài mới, gửi trả lời bằng css giống vbb 4.x

[IceFox]

- Lời mở đầu của tác giả:
Trước đây khi vào một forum vbb và nhìn vào button gửi bài mới, gửi trả lời mình cứ tưởng đó là hình ảnh. Định copy về cho về forum FM cho đẹp nhưng không lấy địa chỉ ảnh được. Sau này trình độ lên tay một chút mới đoán ra là nó xài css . Và bây giờ mình lại có ý tưởng làm button này cho FM.
- Mục lục: bao gồm 2 code rất đơn giản, đặt class ở viewtopic_body và thêm thuộc tính ở css
- Chương I: Viewtopic_body
Vào viewtopic_body tìm:

Code:

<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>

Và thay bằng:

Code:

<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><span class="newpost"><font color=#FFFFFF>  <b>+</b> Viết chủ đề mới  </font></span></a>

Tìm tiếp:

Code:

<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

Thay bằng:

Code:

<a href="{U_POST_REPLY_TOPIC}"><span class="newpost"><font color=#FFFFFF>  <b>+</b> Trả lời Chủ đề  </font></span></a>

- Chương II: Css
Vào Css và dán code này vào dưới cùng:

Code:

span.newpost {
filter:alpha(opacity=50);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
padding:6px;
background-color: #488AC7;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
span.newpost:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7;}

----------------------------
- Chú thích:

Code:

background-color: #488AC7;

là nền của button. Thay màu cho phù hợp với 4rum bạn.

Code:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Là đoạn code làm bo tròn góc.

Các bạn có thể làm tương tự ở viewforum_body
----------------------------

Hình ảnh demo: [You must be registered and logged in to see this image.]
Link forum demo:

Code:

http://blogger.chinhphuc.info/t305-topic#707

Link forum vbb demo:

Code:

http://vnstyle.oni.cc/forum/forumdisplay.php?6-Nh%E1%BA%A1c-Vi%E1%BB%87t

- TUT có sử dụng code bo tròn góc của bác hunghsmn

Viết bởi Kyo - CPBlogger - FMvi-Group (HeroKid)

---

Update:
Cái này bạn có thể dùng Script xóa cái ảnh button, như thế đỡ mất công sửa Templates, và có thể áp dụng cho mọi phiên bản forumotion.

Vào Modules > HTML & JAVASCRIPT > Javascript codes management > Creat a new...:

Title * : Button CSS
Placement : In the sub-forums và In the topics
Javascript Code * :

Code:

$(function(){$("a[href*='/post?f='][href$='&mode=newtopic']").html('<span class="newpost"><font color=#FFFFFF>  <b>+</b> Viết chủ đề mới  </font></span>');$("a[href*='/post?t='][href$='&mode=reply']").html('<span class="newpost"><font color=#FFFFFF>  <b>+</b> Trả lời Chủ đề  </font></span>');});

Update bởi baivong - FMvi-Group

[vandonstar]

- TUT có sử dụng code bo tròn góc của bác hunghsmn

Cái này hot nha

[IceFox]

- TUT có sử dụng code bo tròn góc của bác hunghsmn

Cái này hot nha

Lăng-xê bác Hùng thôi .

[notme]

hay quá đi code đẹp

[handsomevip007]

Rất đẹp! Rất hay! Ứng dụng ngay. vote liền tay

[Teeñ]

cái này rất tiện...vote bùm bùm

[quangtrung_it]

Rất đẹp! Rất hay! Ứng dụng ngay. vote liền tay

Hi,bạn này nói nghe văn thơ quá nhĩ

[boyvodich11]

mấy cái nút như : trích, thanks,... làm thế này có được ko pro

[hunghsmn]

1) Mình xin được giải thích một chut nhé. Trong code CSS Thiên lôi có viết 12 dòng này:

Code:

 -moz-border-radius-topright: 10px;
 -khtml-border-radius-topright: 10px;
 -webkit-border-top-right-radius:10px;

 -moz-border-radius-topleft: 10px;
 -khtml-border-radius-topleft: 10px;
 -webkit-border-top-left-radius:10px;

 -moz-border-radius-bottomright: 10px;
 -khtml-border-radius-bottomright: 10px;
 -webkit-border-bottom-right-radius:10px;

 -moz-border-radius-bottomleft: 10px;
 -khtml-border-radius-bottomleft: 10px;
 -webkit-border-bottom-left-radius:10px;

Giải thích: code này mình viết cả 12 dòng là để bạn nào không thích bo tròn 4 góc đều nhau thì có thể sửa con số 10 ở các góc khác nhau thì cũng khác nhau. Ví dụ: muốn nút đó có hình bình hành thì ở góc trên-trái và dưới phải tăng lên 40 hay 50, Hai góc còn lại giảm đi còn 3 hay 1.

Nếu các bạn bo tròn 4 góc đều nhau thì thay vì 12 dòng trên, chỉ cần 2 dòng này là được:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

2) Bổ sung: các bạn có thể tạo bóng cho các nút đó bằng cách thêm vào span.newpost { đoạn sau:
border-top : 1px solid #1F5869;
border-right : 3px solid #1F5869;
border-bottom : 3px solid #1F5869;
border-left : 1px solid #1F5869;
Giải thích: Đoạn này tạo đường viền cho nút:
Cạnh trên và cạnh trái dày 1px, cạnh dưới và cạnh phải dày 3px. Cả 4 cạnh cùng kiểu solid và cùng màu #1F5869. Căn cứ vào lời giải thích này các bạn sửa lại rồi quan sát sự thay đổi của nó.

Các bạn cùng có thể thêm đoạn này vào span.buttondep:hover { nhưng với mã màu khác để khi rê chuột vào thì màu đường viền cũng thay đổi. ( thay #1F5869 bằng #FF8000 thừ coi)


3) Trả lời boyvodich11

mấy cái nút như : trích, thanks,... làm thế này có được ko pro

Không được đâu bạn. Nút trả lời và nút gửi bài mới có 2 phần riêng là : phần lệnh liên kết (<a href="....>) và phần ảnh (<img src="{POST_IMG}"...)
Thiên lôi chỉ thay phần ảnh bằng text, còn phần lệnh vẫn giữ nguyên.

Còn các nút khác thì cả 2 phần đó đều nằm trong {.....}nên không dùng cách trên được. Còn có cách khác hay không ? CHưa biết !

[Zero]

sao lại đổi button thế xài css là đủ rồi

[IceFox]

Cám ơn bác hùng đã giúp cháu tối ưu code
-----------
@Zero: Mục đích của mình là bỏ luôn cái hình ảnh đi. Một số forum không tìm được hình nào đẹp thì làm như trên cũng rất thẩm mĩ. Với lại cái button này hợp với những forum FM mang phong cách vbb

[Sấm]

Cái này được , ráng tiếp tục phát nhé em

[baivong]

Cái này bạn có thể dùng Script xóa cái ảnh button, như thế đỡ mất công sửa Templates, và có thể áp dụng cho mọi phiên bản forumotion. Update bài viết nhé

---

Title * : Button CSS
Placement : In the sub-forums và In the topics
Javascript Code * :

Code:

$(function(){$("a[href*='/post?f='][href$='&mode=newtopic']").html('<span class="newpost"><font color=#FFFFFF>  <b>+</b> Viết chủ đề mới  </font></span>');$("a[href*='/post?t='][href$='&mode=reply']").html('<span class="newpost"><font color=#FFFFFF>  <b>+</b> Trả lời Chủ đề  </font></span>');});

[thuannguyenkt]

hay

[bluehnvn]

bác nào rảnh làm luôn mấy nút edit, delete, quote, vote, mail,.... thì tuyệt

[handsomevip007]

bác nào rảnh làm luôn mấy nút edit, delete, quote, vote, mail,.... thì tuyệt

Mấy nút đó nó dính trong {...} rồi sao mà làm? Với lại mỗi bài thì link mỗi khác nên cũng đâu tạo dc

[bluehnvn]

bác nào rảnh làm luôn mấy nút edit, delete, quote, vote, mail,.... thì tuyệt

Mấy nút đó nó dính trong {...} rồi sao mà làm? Với lại mỗi bài thì link mỗi khác nên cũng đâu tạo dc

mình nghĩ là làm được, vì trong temp có code nhận diện ảnh của nút vote, thaks, edit, xóa,.. nên nếu đặt tên cho nó rồi đưa css ảnh tên đó là được. có điều mik ko biết css lắm

[baivong]

Mấy nút đó nó dính trong {...} rồi sao mà làm? Với lại mỗi bài thì link mỗi khác nên cũng đâu tạo dc

Dùng script xoá mấy nút đó đi rồi thay bằng cái mình cần

[Zero]

Mấy nút đó nó dính trong {...} rồi sao mà làm? Với lại mỗi bài thì link mỗi khác nên cũng đâu tạo dc

Dùng script xoá mấy nút đó đi rồi thay bằng cái mình cần

Kím link ảnh đó rồi replace không được à anh

[baivong]

chú làm không được đâu có nghĩa là ko làm dc

[_Mark_]

lâu k vào toàn hàng ngon à , syn nha

[Nironken]

các bác cho em hỏi CSS thì chèn ở đâu ạ. vào mục nào?

[jack lagger]

các bác cho em hỏi CSS thì chèn ở đâu ạ. vào mục nào?

ACP>Display>Pictures and Colors>Colors>CSS Stylesheet>Paste vào khung css ý

[jack lagger]

bạn ơi...mik làm vs viewforum_body thì cả 2 nút gửi bài trên và dưới của mik đều bị giới hạn chiều ngang nên bị lỗi...
demo
[You must be registered and logged in to see this image.]
live demo:

Code:

http://a1family.forumvi.com/f50-forum

[IceFox]

Một thời gian sau khi viết code mình mới nhận ra khuyết điểm của nó: Không hiện nút "Đã khoá" topic . Vậy nên các bạn chỉ cần đặt class với thêm thuộc tính cho nó có hiệu ứng ở nút gửi mặc định là được rồi.

[Sponsored content]