Hướng dẫn tạo khung tìm bài viết theo ID cho XenForo 2

Admin

Administrator
Thành viên BQT
#1
Hướng dẫn tạo khung tìm bài viết theo ID cho XenForo 2

Bài viết sẽ hướng dẫn các bạn cách thêm khung tìm kiếm bài viết theo ID cho XenForo 2.

Các bạn chỉ việc vào Widget > Add Widget > chọn loại HTML > vào thiết lập thông tin các ô "Widget key", "Title" và chọn các vị trí hiển thị tùy theo ý thích của bạn.

Sau đó ở ô Template, các bạn thêm vào đoạn code sau:
Mã:
<div class="form-searchid">
<form class="searchid" action="threads/" method="get" id="form_search_topic">
    <div class="inputid"><input size="20" type="text" value="" placeholder="Nhập ID topic"></div>
    <div class="submitid"><input type="button" value=" Tìm " onClick="$('#form_search_topic').attr('action', '{{$xf.homePageUrl}}/threads/'+$('#form_search_topic .inputid input').val()); $('#form_search_topic').submit();" style="height:25px; font-size:13px"></div>
</form>
</div>
Các bạn có thể tham khảo ở hình ảnh sau:

search-bar.png

Tiếp theo các bạn vào EXTRA.less thêm đoạn code sau vào:
Mã:
.form-searchid .searchid {
background: url(/images/bgntp1.png) no-repeat;
width: 187px;
height: 36px;
margin-left: 1px;
margin-top: 5px;
margin-bottom: 5px;
}


.form-searchid {
width: 190px;
margin: 2px;
padding: 3px;
height: 45px;
}


.form-searchid .searchid .inputid input {
font-size: 13px !important;
font-family: Arial, Helvetica, sans-serif !important;
color: #5e5e5e !important;
width: 100px;
padding: 2px 5px 2px 5px;
border: 1px solid #0e93ad;
margin: 7px 0 0 36px;
float: left;
}


.form-searchid .searchid .submitid input {
font-size: 14px !important;
font-family: Arial, Helvetica, sans-serif !important;
color: #fff !important;
font-weight: bold;
border: 0;
background: none;
float: left;
text-transform: uppercase;
text-shadow: 0px 1px 2px #007891;
margin-top: 5px;
display: block;
cursor: pointer;
}
- Cuối cùng là upload ảnh ở file đính kèm vào thư mục images, sửa url trên đoạn css nếu upload ảnh ở nơi khác.

Demo:

demo-search-bar.png

Chúc các bạn thành công.


PVS - VNXF.VN
 

Đính kèm

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top