Açıklama
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.
** Anlatım **
- PAGE_CONTAINER
Spoyler: PAGE_CONTAINER
1-) Açma Kapama Butonu
Bu kod kısmını bulun içinde:
kısmından sonra alttaki satırları ekleyin.
SONUCUNDA AŞAĞIDAKİ GİBİ GÖRÜNMELİDİR
1-) Head Tagı
Aşağıdaki satırları bulun
Aşağıdaki kodu ekleyin
2-) Body Tagı
satırlarını bulun üstüne şu kodları ekleyin:
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.
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.
** Anlatım **
- PAGE_CONTAINER
Spoyler: PAGE_CONTAINER
1-) Açma Kapama Butonu
Kod:
<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:
Kod:
undefinedkısmından sonra alttaki satırları ekleyin.
Kod:
<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
1-) Head Tagı
Aşağıdaki satırları bulun
Kod:
<!--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
Kod:
<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ı
Kod:
<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:
Kod:
<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.lessAş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.
Kod:
/* 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;
}