XenForo 2 Sidebar'ı Sola Almak Resimli Anlatım


iZurdea

Üye
Üye
15 Ocak 2019
105
60
28
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:
Kod:
<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:
Kod:
<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:
Kod:
<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:
Kod:
<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:
Kod:
.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:
Kod:
.p-body-main--withSidebar &
{
padding-right: @xf-sidebarSpacer;
}
Aşağıdaki kod ile değiştiriyoruz.

Kod:
CSS:
Kod:
.p-body-main--withSidebar &
{
padding-left: @xf-sidebarSpacer;
}
İşlemimiz bu kadar arkadaşlar bunları uygulamadan önce mutlaka videolu anlatımı da izlemenizi öneririm.
 
  • Beğendim
Tepkiler: EmreOZCELIK