PAGE_CONTAINER şablonunu açın ve aşağıdaki kodu bulun
<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
<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.
<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.
<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.
.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.
.p-body-main--withSidebar &
{
padding-right: @xf-sidebarSpacer;
}
Aşağıdaki kod ile değiştiriyoruz.
.p-body-main--withSidebar &
{
padding-left: @xf-sidebarSpacer;
}
İşlemimiz bu kadar arkadaşlar bunları uygulamadan önce mutlaka videolu anlatımı da izlemenizi öneririm.