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.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
Kaynak ikonu
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 geniş-dar olmak üzere sayfa genişliği geçiş butonu yapabilirsiniz.
Xenforo varsayılan teması üzerinden anlatılmıştır. Diğer temalar için uyum bilinmemektedir.


ANLATIM

PAGE_CONTAINER
1-) Açma Kapama Butonu
HTML:
<footer class="p-footer" id="footer">
    <div class="p-footer-inner">
        <div class="p-footer-row">
            <xf:if contentcheck="true">
                <div class="p-footer-row-main">
                    <ul class="p-footer-linkList">
                        <xf:contentcheck>

Bu kod kısmını bulun içinde:

HTML:
<xf:contentcheck>

kısmından sonra alttaki satırları ekleyin.

HTML:
<li>
    <a href="javascript:void(0)" class="hirqiz-resize-toggle close" expand-state='expanded'><i class="fa fa-expand" aria-hidden="true"></i></a>
    <a href="javascript:void(0)" class="hirqiz-resize-toggle open" expand-state='expand'><i class="fa fa-compress" aria-hidden="true"></i></a>
</li>

SONUCUNDA AŞAĞIDAKİ GİBİ GÖRÜNMELİDİR
HTML:
<footer class="p-footer" id="footer">
    <div class="p-footer-inner">
        <div class="p-footer-row">
            <xf:if contentcheck="true">
                <div class="p-footer-row-main">
                    <ul class="p-footer-linkList">
                        <xf:contentcheck>
                            <li>
                                <a href="javascript:void(0)" class="hirqiz-resize-toggle close" expand-state='expanded'><i class="fa fa-compress" aria-hidden="true"></i></a>
                                <a href="javascript:void(0)" class="hirqiz-resize-toggle open" expand-state='expand'><i class="fa fa-expand" aria-hidden="true"></i></a>
                            </li>
                            <xf:if is="$xf.visitor.canChangeStyle()">
                                <li><a href="{{ link('misc/style') }}" data-xf-click="overlay"
                                data-xf-init="tooltip" style="color: white; font-weight:500;" title="{{ phrase('style_chooser')|for_attr }}" rel="nofollow">
                                <i class="fa fa-paint-brush" aria-hidden="true"></i> {$xf.style.title}
                            </a></li>
                            </xf:if>
                            .
                            .
                            ...

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>

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 expandCookie= getCookie('expandState');
    if(expandCookie){ xfhtml.setAttribute('expand-state', '' + expandCookie+ '');    } else { xfhtml.setAttribute('expand-state', "expand"); }
</script>

2-) Body Tagı
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-resize-toggle.open").on('click', function(){
            var styleid = html.attr('style-id');
            var expandState = $(this).attr("expand-state");
            html.attr('expand-state', '' + expandState + '');
            setCookie('expandState', '' + expandState + '', 30);
        });
        $("a.hirqiz-resize-toggle.close").on('click', function(){
            var styleid = html.attr('style-id');
            var expandState = $(this).attr("expand-state");
            html.attr('expand-state', '' + expandState + '');
            setCookie('expandState', '' + expandState + '', 30);
        });
    });
</script>

extra.less
Aşağıdaki satırlarda

"@resize-expand" kısmı karşısında bulunan 1180px değerini istediğiniz darlık derecesiyle değiştirebilirsiniz (1080px yada daha farklı değerler ile.)

"@resize-expanded" kısmı karşısında bulunan 1366px değerini istediğiniz genişlik derecesiyle değiştirebilirsiniz (1280px yada daha farklı değerler ile.)

Tavsiyem eğer temanızda varsayılan olarak geniş ölçü kullanıyorsanız bu varsayılan ölçüyü geniş değere yazın darlık değerine ise kendi belirlediğiniz değeri.

Eğer ki
varsayılan olarak dar ölçü kullanıyorsanız tam tersini yaparak bu varsayılan ölçüyü dar değere yazın genişlik değerine ise kendi belirlediğiniz değeri.

CSS:
/* Resize */
@resize-expand: 1180px;
@resize-expanded: 1366px;

a.hirqiz-resize-toggle {
    font-size: 15px !important;
    margin-top: -2px !important;
    background: rgba(0,0,0,0.2);
    padding: 1px 5px !important;
}

@media (max-width:650px) { a.hirqiz-resize-toggle {display: none !important;} }
@media (max-width: 480px) { a.hirqiz-resize-toggle {display: none !important;} }

html[expand-state='expand']{
    .p-staffBar-inner  {max-width: @resize-expand;}
    .p-header-inner {max-width: @resize-expand;}
    .p-nav-inner {max-width: @resize-expand;}
    .p-sectionLinks-inner {max-width: @resize-expand;}
    .p-body-inner {max-width: @resize-expand;}
    .p-footer-inner {max-width: @resize-expand;}
    .hirqiz-resize-toggle.close{display: inline-block;}
    .hirqiz-resize-toggle.open{display:none;}
}

html[expand-state='expanded']{
    .p-staffBar-inner  {max-width: @resize-expanded;}
    .p-header-inner {max-width: @resize-expanded;}
    .p-nav-inner {max-width: @resize-expanded;}
    .p-sectionLinks-inner {max-width: @resize-expanded;}
    .p-body-inner {max-width: @resize-expanded;}
    .p-footer-inner {max-width: @resize-expanded;}
    .hirqiz-resize-toggle.open{display: inline-block;}
    .hirqiz-resize-toggle.close{display:none;}
}

.p-header-inner, .p-body-inner, .p-footer-inner, .p-nav-inner, .p-sectionLinks-inner {
    transition: 0.2s ease;
}

SONUÇ

Dar Hali:
7719



Geniş Hali:
7720
Yazar
Mbtt
Görüntüleme
1,992
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 1 değerlendirme

Mbtt ait diğer kaynakar

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.