Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

XenForo 2 Sidebar'ı Sola Almak Resimli Anlatım

Admin

S.E.O
Administrator
Katılım
30 Eki 2016
Mesajlar
6,910
Beğeniler
12
Puanları
18,020
Konum
Zonguldak
Ad Soyad
Turhan Karabulut
Meslek
Emlak
Yaş
45
Merhaba, arkadaşlar. XenForo 2'de sidebar alanını nasıl sol tarafa almanız gerektiği hakkında resimli anlatım ve makale hazırladım.


PAGE_CONTAINER şablonunu açın ve aşağıdaki kodu bulun

Kod:
HTML:
<xf:if is="$sidebar">
    <div class="p-body-sidebar">
    <xf:ad position="container_sidebar_above" />
    <xf:foreach loop="$sidebar" value="$sidebarHtml">
    {$sidebarHtml}
    </xf:foreach>
    <xf:ad position="container_sidebar_below" />
    </div>
</xf:if>


Bununla Değiştirin


Kod:
HTML:
<xf:if is="$sidebar">
    <div class="p-body-sidebar SidebarSag">
    <xf:ad position="container_sidebar_above" />
    <xf:foreach loop="$sidebar" value="$sidebarHtml">
    {$sidebarHtml}
    </xf:foreach>
    <xf:ad position="container_sidebar_below" />
    </div>
</xf:if>


Bu kodu bulduktan sonra bu kodun yukarısında aşağıdaki kodları göreceksiniz.

Kod:
HTML:
<div class="p-body-content">
    <xf:ad position="container_content_above" />
    <div class="p-body-pageContent">{$content|raw}</div>
    <xf:ad position="container_content_below" />
</div>

Bu kodların Hemen üstüne aşağıdaki kodları ekliyoruz.

Kod:
HTML:
<xf:if is="$sidebar">
    <div class="p-body-sidebar SidebarSol">
    <xf:ad position="container_sidebar_above" />
    <xf:foreach loop="$sidebar" value="$sidebarHtml">
    {$sidebarHtml}
    </xf:foreach>
    <xf:ad position="container_sidebar_below" />
    </div>
</xf:if>


Daha sonra extra.less şablonunu açıyoruz ve aşağıdaki kodları ekliyoruz.

Kod:
CSS:
.SidebarSag{
    display:none !important;
}

@media (max-width:@xf-responsiveNarrow)
{
    .SidebarSol{
        display:none !important;
    }
 
    .SidebarSag{
    display:block !important;
    }
}

@media (max-width:@xf-publicNavCollapseWidth)
 
{
    .SidebarSol{
        display:none !important;
    }
 
    .SidebarSag{
    display:block !important;
    }
}

Daha sonra şablonlardan app_body.less şablonunu açıyoruz ve aşağıdaki kodu buluyoruz.

Kod:
CSS:
    .p-body-main--withSidebar &
    {
        padding-right: @xf-sidebarSpacer;
    }

Aşağıdaki kod ile değiştiriyoruz.

Kod:
CSS:
    .p-body-main--withSidebar &
    {
        padding-left: @xf-sidebarSpacer;
    }

İşlemimiz bu kadar arkadaşlar bunları uygulamadan önce mutlaka videolu anlatımı da izlemenizi öneririm.
 
Üst Alt
erotik film izle sex filmleri izle hdd dolum çaycuma satılık daire çaycuma satılık daire - filyos satılık daire