Thay đổi css khung search của add-on Live Search

PVS

Generalissimo
Thành viên BQT
Thay đổi css khung search của add-on Live Search

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');
    }
    Bây giờ đã chèn font, bạn chèn thêm vào EXTRA.CSS đoạn sau để hiển thị font trên toàn website
    Mã:
    body { font-family: 'utmavo'; }
Bắt tay vào việc chính. Đầu tiên vào template openfire_livesearch thay hết bằng đoạn code sau:
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>&uarr; &darr;</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

  • font_utmavo.zip
    50.4 KB · Lượt xem: 5

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top