Kaynak ikonu

Video XenForo 2 Sidebar'ı Sola Almak

Merhaba, arkadaşlar. XenForo 2'de sidebar alanını nasıl sol tarafa almanız gerektiği hakkında video ve makale hazırladım.



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

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

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.

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.

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.

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.
CSS:
    .p-body-main--withSidebar &
    {
        padding-right: @xf-sidebarSpacer;
    }

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

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


İşlemimiz bu kadar arkadaşlar bunları uygulamadan önce mutlaka videolu anlatımı da izlemenizi öneririm.
Yazar
netr0n
Görüntüleme
3.048
İlk yayınlama
Son güncelleme

Puanlar

5,00 yıldız 2 değerlendirme

netr0n ait diğer kaynakar

Son incelemeler

Hu huuuuuuuu :D :D eline sağlık kanka ...
netr0n
netr0n
Eyvallah kanka :D
Kişiselleştirme

Tema editörü

Ayarlar Renkler

  • Mobil kullanıcılar bu fonksiyonları kullanamaz.

    Alternatif header

    Farklı bir görünüm için alternatif header yapısını kolayca seçebilirsiniz.

    Görünüm Modu Seçimi

    Tam ekran ve dar ekran modları arasında geçiş yapın.

    Izgara Görünümü

    Izgara modu ile içerikleri kolayca inceleyin ve düzenli bir görünüm elde edin.

    Resimli Izgara Modu

    Arka plan görselleriyle içeriğinizi düzenli ve görsel olarak zengin bir şekilde görüntüleyin.

    Yan Paneli Kapat

    Yan paneli gizleyerek daha geniş bir çalışma alanı oluşturun.

    Sabit Yan Panel

    Yan paneli sabitleyerek sürekli erişim sağlayın ve içeriğinizi kolayca yönetin.

    Box görünüm

    Temanızın yanlarına box tarzı bir çerçeve ekleyebilir veya mevcut çerçeveyi kaldırabilirsiniz. 1300px üstü çözünürler için geçerlidir.

    Köşe Yuvarlama Kontrolü

    Köşe yuvarlama efektini açıp kapatarak görünümü dilediğiniz gibi özelleştirin.

  • Renginizi seçin

    Tarzınızı yansıtan rengi belirleyin ve estetik uyumu sağlayın.

Geri