- 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
Bununla Değiştirin
Bu kodu bulduktan sonra bu kodun yukarısında aşağıdaki kodları göreceksiniz.
Bu kodların Hemen üstüne aşağıdaki kodları ekliyoruz.
Daha sonra extra.less şablonunu açıyoruz ve aşağıdaki kodları ekliyoruz.
Daha sonra şablonlardan app_body.less şablonunu açıyoruz ve aşağıdaki kodu buluyoruz.
Aşağıdaki kod ile değiştiriyoruz.
İşlemimiz bu kadar arkadaşlar bunları uygulamadan önce mutlaka videolu anlatımı da izlemenizi öneririm.
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.