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

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.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.


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
2,822
İlk yayınlama
Son güncelleme
Değerlendirme
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

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.