Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Kaynak ikonu

XF 2.1 Eklenti Xenforo Sidebar Konum Geçişi Yapım Kılavuzu

Bu eklenti, add-ons XenForo 2.1.X ile uyumlu ve stabil olarak çalışmaktadır.
Uyumlu XF 2 Sürümleri
AÇIKLAMA
Bu kılavuz ile üyelerinizin kullanabileceği sağ-sol olmak üzere sidebar konum geçişi butonu yapabilirsiniz.
Xenforo varsayılan teması üzerinden anlatılmıştır. Diğer temalar için uyum bilinmemektedir.


ANLATIM

PAGE_CONTAINER
1-) Konum Geçişi Butonu
HTML:
<xf:if is="$xf.visitor.canChangeLanguage()">
    <li><a href="{{ link('misc/language') }}" data-xf-click="overlay" data-xf-init="tooltip" style="color: white; font-weight:500;" title="{{ phrase('language_chooser')|for_attr }}" rel="nofollow"><i class="fa fa-globe" aria-hidden="true"></i> {$xf.language.title}</a></li>
</xf:if>

Bu kod kısmını bulun altına aşağıdaki kodları ekleyin::

HTML:
<li>
    <a href="javascript:void(0)" class="hirqiz-flip-toggle flip" hirqiz-flip='flip'><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
    <a href="javascript:void(0)" class="hirqiz-flip-toggle flipped" hirqiz-flip='flipped'><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
</li>

SONUCUNDA AŞAĞIDAKİ GİBİ GÖRÜNMELİDİR
HTML:
<xf:if is="$xf.visitor.canChangeLanguage()">
    <li><a href="{{ link('misc/language') }}" data-xf-click="overlay" data-xf-init="tooltip" style="color: white; font-weight:500;" title="{{ phrase('language_chooser')|for_attr }}" rel="nofollow"><i class="fa fa-globe" aria-hidden="true"></i> {$xf.language.title}</a></li>
</xf:if>
<li>
    <a href="javascript:void(0)" class="hirqiz-flip-toggle flip" hirqiz-flip='flip'><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
    <a href="javascript:void(0)" class="hirqiz-flip-toggle flipped" hirqiz-flip='flipped'><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
</li>

helper_js_global
1-) Head Tagı

Aşağıdaki satırları bulun
HTML:
<!--XF:CSS-->
<xf:if is="$xf.fullJs">
    <script src="{{ js_url('vendor/modernizr/modernizr.min.js') }}"></script>
    <script src="{{ js_url('xf/preamble.js') }}"></script>
<xf:else />
    <script src="{{ js_url('xf/preamble-compiled.js') }}"></script>
</xf:if>

Altına aşağıdaki kodu ekleyin

HTML:
<script>
    var xfhtml = document.getElementById('XF');
    function addClass(el, className) { if (el.classList) el.classList.add(className); else if (!hasClass(el, className)) el.className += ' ' + className; }
    function getCookie(name) { var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); return v ? v[2] : null; }
    function setCookie(name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); }
    function deleteCookie(name) { setCookie(name, '', -1); }
    var hirqizFlip = getCookie('hirqizFlip');
    if(hirqizFlip){ xfhtml.setAttribute('hirqiz-flip', '' + hirqizFlip + '');    } else { xfhtml.setAttribute('hirqiz-flip', "flip"); }
</script>

HTML:
<form style="display:none" hidden="hidden">
    <input type="text" name="_xfClientLoadTime" value="" id="_xfClientLoadTime" title="_xfClientLoadTime" tabindex="-1" />
</form>

satırlarını bulun üstüne şu kodları ekleyin:

HTML:
<script>
    $(document).ready(function(){
    var html = $('#XF');

    $("a.hirqiz-flip-toggle.flip").on('click', function(){
        var styleid = html.attr('style-id');
        var hirqizFlip = $(this).attr("hirqiz-flip");
        html.attr('hirqiz-flip', '' + hirqizFlip + '');
        setCookie('hirqizFlip', '' + hirqizFlip + '', 30);
    });
    $("a.hirqiz-flip-toggle.flipped").on('click', function(){
        var styleid = html.attr('style-id');
        var hirqizFlip = $(this).attr("hirqiz-flip");
        html.attr('hirqiz-flip', '' + hirqizFlip + '');
        setCookie('hirqizFlip', '' + hirqizFlip + '', 30);
    });
});
</script>

extra.less
Aşağıdaki kodları extra.less dosyanızın içine ekleyin.
CSS:
/* Hirqiz Flip */

.template-forum_list .p-body-main {
    display: flex;
}

.p-body-main--withSidebar .p-body-content {
    flex: 1 1 auto;
    display: block;
    width: calc(100% - 250px);
}

.p-body-main--withSidebar .p-body-sideNav, .p-body-main--withSidebar .p-body-sidebar {
    flex: 0 0 auto;
    display: block;
}

html[hirqiz-flip='flip']{
    .hirqiz-flip-toggle.flipped{display:inline-block}
    .hirqiz-flip-toggle.flip{display:none}
}

html[hirqiz-flip='flipped']{
    .p-body-main--withSidebar .p-body-sideNav, .p-body-main--withSidebar .p-body-sidebar {
        order: -1;
    }
    .p-body-main--withSidebar .p-body-content {
        padding-right: 0px;
        padding-left: 10px;
    }
    .hirqiz-flip-toggle.flip{display:inline-block}
    .hirqiz-flip-toggle.flipped{display:none}
}

@media (max-width: 650px) {.p-body-main--withSidebar .p-body-content {width: 100%;flex:none;}}
@media (max-width: 480px) {.p-body-main--withSidebar .p-body-content {width: 100%;flex:none;}}

@media (max-width: 650px) {.p-body-main.p-body-main--withSidebar{display:block;}}
@media (max-width: 480px) {.p-body-main.p-body-main--withSidebar{display:block;}}

SONUÇ

Normal Hali:
resim2.png



Soldaki Hali:
resim1.png
Yazar
Mbtt
Görüntüleme
1,681
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 2 değerlendirme

Mbtt ait diğer kaynakar

Son incelemeler

ellerinize sağlık

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.