Sağdan sola geçişli banner alanı

[Ranthiel]

Aşağıda bulunan ekran görüntüsünde kırmızı kare içerisindeki alana sağdan sola hareketli bir şekilde geçecek bir alan nasıl yapabilirim? Bahsettiğim şeyin örneğini de aşağıya bıraktım.

Bahsettiğim alan;


Örnek;
http://www.z-roleplay.com/

[tarantula901]

Şu kodları kullanabilirsin.

Kod Seç Genişlet

<div id="subheader" data-type="background" data-speed="3">
<div class="mover"></div>
</div>
css kodu

Kod Seç Genişlet

#subheader {
height: 160px;
display: block;
width: 100%;
margin: 0 auto 0px auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}


#subheader > div {   
    width: 6340px;
    background: url('resimlinki');
    background-position: -20px;
    top: 0;
    left: 0;
    height: 100%;
    transform: translate3d(0, 0, 0);
}
#subheader .mover {
animation: moveSlideshow 80s linear infinite;
}

@keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}

#subheader-inner {
height: 160px;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}

#subheader .site-name {
color: #ffffff;
font-size: 3.077em;
margin: 0 auto;
text-align: center;
display: none;
}

#subheader p.site-description {
font-size: 1.538em;
margin: 0 auto;
text-align: center;
float: none;
height: auto;
}
resimlinki kısmına eklemek istediğiniz resmi ekleyebilirsiniz.

[Ranthiel]

Aşağıdaki kodu nereye ekliyeceğim? Ayrıca editlediğim tema geek temasıdır.

Kod Seç Genişlet

<div id="subheader" data-type="background" data-speed="3">
<div class="mover"></div>
</div>

[tarantula901]

İndex.template.php eklenecek değişiklik yapabilmem için sitenin aktif ve index.template.php eke eklemeniz gerekiyor.

[Ranthiel]

İndex.template.php eklenecek değişiklik yapabilmem için sitenin aktif ve index.template.php eke eklemeniz gerekiyor.

Özel ileti yoluyla size gönderdim.

[Ranthiel]

Konu günceldir. index.template ek de mevcuttur. @tarantula901

[tarantula901]

Ben bunu yapmamismiydim iki kisimi bu ozelligi istiyor.

[Ranthiel]

Ben bunu yapmamismiydim iki kisimi bu ozelligi istiyor.

İlk ben demiştim, ardından arkadaşta konu açmış ama forum temaları çok farklı ben geek temasını geliştiriyorum.
https://www.ranthiel.com/forum/index.php

[tarantula901]

index.template.php dosyasında şunu arat.

Kod Seç Genişlet

<div id="main_b">
<div class="wrapper">
<div id="main_content">';
üstüne ekle

Kod Seç Genişlet

<div id="subheader" data-type="background" data-speed="3">
<div class="mover"></div>
</div>
sonra css kodlarını temanın ccs en altına ekleyin.

sonra şunuda ekleyin.

Kod Seç Genişlet

div#subheader {
    height: 200px;
}

[Ranthiel]

Bunu üst kısıma bir türlü alamadım yardımcı olurmusun?

[Ranthiel]

Konu güncel üst kısımdaki sorun hala devam etmektedir, resmi kırmızı dikdörtgen olan yere taşıyamadım.

[tarantula901]

Aktif olan sitenizi görmem gerek başka türlü yardımcı olamam

[Mert ッ]

Aktif olan sitenizi görmem gerek başka türlü yardımcı olamam

Merhaba hocam kişinin web site bölümünde yazıyor www.ranthiel.com/forum

[tarantula901]

index.template.php dosyasında şu kodu aratın

Kod Seç Genişlet

<div id="bar">
        <div class="wrapper">
', template_menu(), '
</div>
şu kodu altına ekleyin

Kod Seç Genişlet

<div id="subheader" data-type="background" data-speed="3">
<div class="mover"></div>
</div>

[Ranthiel]

index.template.php dosyasında şu kodu aratın

Kod Seç Genişlet

<div id="bar">
        <div class="wrapper">
 ', template_menu(), '
 </div>
şu kodu altına ekleyin

Kod Seç Genişlet

<div id="subheader" data-type="background" data-speed="3">
 <div class="mover"></div>
 </div>

Aşağıdaki gibi oldu, eğer vaktiniz var ise FTP adresini size özel ileti yoluyla ileteyim? @tarantula901

ESKİ HALİ

YENİ HALİ

[Ranthiel]

Yukarıda ki yorumda belirttiğim hatayı düzelttim, kodları yanlış yere eklemişim. Şimdide ufak bir sorunum var şu Logo ve sağ kısımda bulunan profil avatar kısmı bannerin altında kalmış onu nasıl bannerin üstüne alacağım?

[tarantula901]

css dosyasına şunu ekle

Kod Seç Genişlet

div#logo {
    position: absolute; 
}
sadece logoyu görebildiğim için loğu için ayar çekebildim.

[Ranthiel]

css dosyasına şunu ekle

Kod Seç Genişlet

div#logo {
    position: absolute; 
}
sadece logoyu görebildiğim için loğu için ayar çekebildim.

Banneri küçülttüm, şu kırmızı alandaki kısmı bannerin üstüne alıp daha sonra arkaplana da aşağıdaki 2. görüntüdeki gibi gölgelik ekleyebilirmiyiz?

ŞUANKİ HALİ

DEÃ,,Å¾İŞTİRİLECEK HALİ

[tarantula901]

cssde şunu arat

Kod Seç Genişlet

#header .user {
    float: right;
    width: 380px;
    height: 70px;
    margin: 0;
    margin-top: 15px;
    padding: 10px;
    color: #bbb; 
   
}
şununla değiştir.

Kod Seç Genişlet

#header .user {
    float: right;
    width: 380px;
    height: 70px;
    margin: 0;
    margin-top: 15px;
    padding: 10px;
    color: #bbb;
    position: absolute;
    right: 0;
}

[Ranthiel]

Resimdeki gibi arka plana gölge belirleyici bir şey ekliyebilirmiyiz? Bir site yapmıştı Geek temasıydı oda aynısıydı fakat şuan başka tema kullanıyorlar. Bahsettiğim şey şu arka plana siyah kutucuk tarzı bir şey. Fotoğrafın bir altında demo hesabı var giriş yapabilmeniz için.

Demo hesabı
k.adı : test
Şifresi : test

[Ranthiel]

Tamamdır, onuda yaptım. Konu kilit.  [ Yukarıdaki ekran görüntüsünde bulunan kırmızı daire içindeki arkaplan gölge efektinin kodları aşağıda ]

İNDEX CSS de değiştirilecek kod

Kod Seç Genişlet

#header .user {
box-shadow: -10px 4px 19px 3px rgba(0,0,0,0.75);
    float: right;
    width: 250px;
    height: 100px;
    margin: 0;
    padding-top: 10px;
    margin-top: 5px;
    padding-left: 0px;
    color: #bbb;
    background-color: #000;
    opacity: 70%;
}