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

[PVS]

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

Yêu Cầu

• Cài addon Live Search

  http://vnxf.vn/livesearch-1-0-4b-tim-kiem-chu-de-cuc-nhanh.t4163.html

• 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:
  

  @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

  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:

<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:

.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​