- 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
helper_js_global
extra.less
SONUÇ
Normal Hali:
Soldaki Hali:
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
Bu kod kısmını bulun altına aşağıdaki kodları ekleyin::
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>
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
Altına aşağıdaki kodu ekleyin
satırlarını bulun üstüne şu kodları ekleyin:
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:
Soldaki Hali: