Thay đổi css khung search của add-on Live Search
Yêu Cầu
Sau đó vào template openfire_livesearch.css thay hết bằng đoạn code sau:
Vậy là xong.
Chúc các bạn thành công.
Yêu Cầu
- Cài addon Live Search
- Cài font UTM Avo
Đầu tiên bạn download file font_utmavo.zip (đính kèm), sau đó upload lên host rồi giải nén ra (ngang hàng thư mục cài Xenforo nhé). Sau đó vào template EXTRA.css thêm đoạn sau vào:
Mã:@font-face { font-family: 'utmavo'; src: url('./utmavo.eot'); src: local('utmavo'), url('./utmavo.woff') format('woff'), url('./utmavo.ttf') format('truetype'); }
Mã:body { font-family: 'utmavo'; }
Mã:
<xen:if is="{$xenOptions.openfire_livesearch_enable}">
<xen:if is="{$canSearch}">
<xen:require css="openfire_livesearch.css" />
<xen:include template="openfire_livesearch_script.js" />
<xen:if is="{$forum}">
<input type="hidden" name="openfireliveurl" data-openfireliveurl="{xen:link 'forums/live-result', $forum}" />
<xen:elseif is="{$xenOptions.openfire_livesearch_forum_id}"/>
<input type="hidden" name="openfireliveurl" data-openfireliveurl="forums/{$xenOptions.openfire_livesearch_forum_id}/live-result" />
</xen:if>
<div class="livesearch">
<dl id="livesearch_header">
<dd class="main">
<span><xen:hook name="openfire_livesearch_header" /></span>
</dd>
</dl>
<div id="livesearch_bar">
<form class="searchform">
<input type="search" name="keywords" value="" class="textCtrl" placeholder="{xen:phrase openfire_livesearch_enter_search}" id="livesearch_input" />
<button class="searchsubmit">{xen:phrase Search}</button>
</form>
<div id="livesearch_toggle">
<xen:if is="!{$xenOptions.openfire_livesearch_toggle}">
<script type="text/javascript">
var expires = 7; // number of days
expires = new Date(new Date().getTime() + expires * 86400000); // milliseconds in a day
$(document).ready(function ()
{
$(".livesearch").show();
$("#livesearch_toggle").click(function ()
{
$("#livesearch_header").slideToggle(500);
$("#livesearch_input").slideToggle(500);
$("#OpenFireLiveSearch").slideToggle(500);
});
});
</script>
<a class="callToAction" href="javascript:void(0)">
<span>↑ ↓</span>
</a>
</xen:if>
</div>
</div>
<div id="OpenFireLiveSearch"></div>
</div>
</xen:if>
</xen:if>
Sau đó vào template openfire_livesearch.css thay hết bằng đoạn code sau:
Mã:
.livesearch {
margin: 0 auto;
display: block;
max-width: 600px;
}
#livesearch_bar:after
{
clear: both;
content: ".";
display: block;
height: 10px;
visibility: hidden;
}
#livesearch_input
{
vertical-align: top;
width: 90%;
<xen:if is="{$xenOptions.openfire_livesearch_breathing}">
-webkit-animation-name: livesearchPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: livesearchPulse;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-o-animation-name: livesearchPulse;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
animation-name: livesearchPulse;
animation-duration: 2s;
animation-iteration-count: infinite;
</xen:if>
}
#livesearch_toggle
{
display: inline;
vertical-align: middle;
white-space: nowrap;
float: right;
}
.liveresult
{
<xen:if is="!{$xenOptions.openfire_livesearch_maxheight}==0">
max-height: {$xenOptions.openfire_livesearch_maxheight}px;
overflow-y: scroll;
overflow-x: hidden;
</xen:if>
}
.liveresult dd.main span
{
padding: 5px 10px;
display: block;
color: @secondaryDarker;
}
form.searchform {
height: 40px;
border-radius: 3px; background-color: #fff; overflow: hidden;
display: block;
position: relative;
border: 1px solid #ddd;
}
input#livesearch_input {
width: 90%;
padding: 5px 0 12px 1em;
color: #333;
outline: none;
font-size: 20px;
color: #ddd;
border-width: 0;
background: transparent;
font-family: 'utmavo';
}
.searchsubmit {
position: absolute;
top: 0;
right: 0;
height: 40px;
width: 80px;
font-size: 20px;
color: #fff;
text-align: center;
border-width: 0;
background-color: #ddd;
cursor: pointer;
font-family: 'utmavo';
}
.searchsubmit:hover {
cursor: default;
}
@media (max-width:430px) {
.Responsive .livesearch { display:none; }
}
<xen:if is="{$xenOptions.openfire_livesearch_breathing}">
@-webkit-keyframes livesearchPulse {
from { -webkit-box-shadow: 0 0 9px #333; }
50% { -webkit-box-shadow: 0 0 18px {$xenOptions.openfire_livesearch_breathing_color}; }
to { -webkit-box-shadow: 0 0 9px #333; }
}
@-moz-keyframes livesearchPulse {
from { -moz-box-shadow: 0 0 9px #333; }
50% { -moz-box-shadow: 0 0 18px {$xenOptions.openfire_livesearch_breathing_color}; }
to { -moz-box-shadow: 0 0 9px #333; }
}
@-o-keyframes livesearchPulse {
from { -o-box-shadow: 0 0 9px #333; }
50% { -o-box-shadow: 0 0 18px {$xenOptions.openfire_livesearch_breathing_color}; }
to { -o-box-shadow: 0 0 9px #333; }
}
@keyframes livesearchPulse {
from { box-shadow: 0 0 9px #333; }
50% { box-shadow: 0 0 18px {$xenOptions.openfire_livesearch_breathing_color}; }
to { box-shadow: 0 0 9px #333; }
}
</xen:if>
Vậy là xong.
Chúc các bạn thành công.
Nguồn: mamcongnghe.com
Đính kèm
Bài viết liên quan
Được quan tâm
Bài viết mới