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!

Nasıl yapılır ? header genişliği

Mete_

xFanatik
SMS onaylı
Kullanıcı
Katılım
30 Ara 2016
Mesajlar
332
Çözümler
6
Header kısmını nasıl daraltabiliriz. forum çizgileri ile aynı olması için.

1.PNG


Böyle olmasını istiyorum header bölümü forum genişliği ile aynı

2.PNG
 

Nasıl yapılır ? header genişliği

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

HTML:
<body data-template="{$template}">

Hemen altına aşağıdaki kodu ekleyin.

HTML:
<div class="xen-content-wrapper">

Aynı şekilde PAGE_CONTAINER şablonunda aşağıdaki alanı bulun

HTML:
</div> <!-- closing p-pageWrapper -->

Hemen altına aşağıdaki kapanış divini ekleyin.

HTML:
</div> <!--xen-content-wrapper-->

extra.less şablonunu açın ve aşağıdaki kodları ekleyip kayıt edin.

CSS:
.xen-content-wrapper
{
    max-width: @xf-pageWidthMax;
    margin: 0 auto;
}

.p-body-inner{
    padding: 0 !important;
}


.p-breadcrumbs {
    margin-top: 20px;
    margin-bottom: 20px;
}

.p-breadcrumbs.p-breadcrumbs--bottom {
    margin-bottom: 20px !important;
}
...
Biliyorum orjinali öyle de .. Css ile daraltmanın bir yolu yok mu ?
 
Default tema mı kullanıyorsunuz ona göre kodları yazayım?
 
PAGE_CONTAINER Şablonunu açın ve aşağıdaki kodu bulun

HTML:
<body data-template="{$template}">

Hemen altına aşağıdaki kodu ekleyin.

HTML:
<div class="xen-content-wrapper">

Aynı şekilde PAGE_CONTAINER şablonunda aşağıdaki alanı bulun

HTML:
</div> <!-- closing p-pageWrapper -->

Hemen altına aşağıdaki kapanış divini ekleyin.

HTML:
</div> <!--xen-content-wrapper-->

extra.less şablonunu açın ve aşağıdaki kodları ekleyip kayıt edin.

CSS:
.xen-content-wrapper
{
    max-width: @xf-pageWidthMax;
    margin: 0 auto;
}

.p-body-inner{
    padding: 0 !important;
}


.p-breadcrumbs {
    margin-top: 20px;
    margin-bottom: 20px;
}

.p-breadcrumbs.p-breadcrumbs--bottom {
    margin-bottom: 20px !important;
}

Örnek Ekran;

XenForo.png
 
Çözüm
Konuyu hortlamış gibi oldum ama benimde ufak bir sorunum var. Ben default temasını kullanmıyorum. Shades Of Blue temasını kullanıyorum. netr0n netr0n hocamızın deault teması için paylaşmış olduğu kodları uyguladım istediğim gibi oldu ama mobilden girince sanki tam oturmamış gibi oluyor ve sağa sola elle biraz kayabiliyor. Tam oturması için acaba ne yapmam lazım.
 
Konuyu hortlamış gibi oldum ama benimde ufak bir sorunum var. Ben default temasını kullanmıyorum. Shades Of Blue temasını kullanıyorum. netr0n netr0n hocamızın deault teması için paylaşmış olduğu kodları uyguladım istediğim gibi oldu ama mobilden girince sanki tam oturmamış gibi oluyor ve sağa sola elle biraz kayabiliyor. Tam oturması için acaba ne yapmam lazım.
Canlı olarak görmemiz gerekli bu olamayan alanları.
 

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.