prosilver SE mobil headerbar

[copyas]

Stil, css kodları vb. konusunda fazla bilgim yok. Temel düzeyde anlatırsanız sevinirim.

phpBB 3.3.0
prosilver Special Edition 3.3.0

Bilgisayar görünümünde herhangi bir sıkıntım yok. Mobil görünümde headerbar resminin bu sitedeki gibi gözükmesini istiyorum. Resim-2 'de gözüken headerbar resminin bilgisayar görünümü resim-1 'deki gibidir. Kırmızı çizgilerin sağ ve sol tarafı kesilerek mobil görünümde orta kısım kalmış.

Benim yaptığımda ise mobilde resmin tamamı gözüktüğü için navbar/menubar arasında beyaz bir boşluk kalmaktadır. Bu boşluğu kaldırmak, resmin de navbara kadar uzanmasını istiyorum. ( resim - 3 ) Kodlardaki % değerleriyle oynayarak yapamadım. Mobilde olsa bile bilgisayar görünümü bozuluyor.

/styles/prosilver_se/theme/stylesheet.css dosyasında headerbar ile ilgili yaptığım değişiklikler :

orijinal kodlar :

Kod: Tümünü seç

.headerbar {
	background-color: #7C8891;
	background-image: -webkit-linear-gradient(top, #6E777F 0%, #505C65 1%, #56626B 20%, #737F88 75%, #7C8891 100%);
	background-image: linear-gradient(to bottom, #6E777F 0%, #505C65 1%, #56626B 20%, #737F88 75%, #7C8891 100%);
	background-repeat: repeat-x;
}

Değiştirilmiş kodlar :

Kod: Tümünü seç

.headerbar {
	background-color: #ffffff;
	background-image: url("./images/bg_header.gif");
	background-size: 100%;	     
	background-repeat: no-repeat;
        height: 100%;
}

1



2



3

[ESQARE]

Sizin sitenizde orada boşluk kalmaması için logonuzun boyutunu yeniden ayarlamanız gerekiyor. Alttaki ekran görüntülerini karşılaştırabilirsiniz. İlk resimde sizin logonuz ile görünen tasarım. Altındakinde ise css kodunuzdan background-image: url(./images/bg_header.gif); kısmını (logonuzu sildiğim de) görünen tasarım...

Eğer logo boyutunuzu tekrar ayarlayamam derseniz background-size:100%; değerini sildiğinizde sorun çözülecektir. Ama bu seferde logonuzda kırpılma görebilirsiniz.

[copyas]

Logo değil de resim idi benim derdim. Söyledikleriniz üzerinden deneme yanılma yöntemiyle bu sitenin kodlarıyla ( zaten bu kodları arıyordum da bulamamıştım ) sorunu çözdüm :

webstyle.css içinde bulunan şu kısmı :

Kod: Tümünü seç

body div.headerlogo {
	background-image: url("images/header-photo.jpg");
	background-size: cover;
	background-repeat: no-repeat;
    background-position: 50% 0;
	max-width: 1092px;
	margin: 0 auto;
    width: 100%;
    height: 129px;
    border-radius: 10px 10px 0 0;
    position: relative;
}

Diğer kodlarla uğraşmadan kendime göre şunları ekleyince sonuca ulaştım :

Kod: Tümünü seç

.headerbar {
	background-color: #ffffff;
	background-image: url("./images/bg_header.gif");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0;
        height: 100%;
}

position: relative; şu satırı anlamadım ne işe yaradığını ? Kullandım ama bir değişiklik göremediğim için sildim.

[ESQARE]

Logo'dan kastım headerdaki kendi yaptığınız paraşüt fotoğrafıydı zaten. Küçük logonun ayarları farklıdır.