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

Top