CSS ile sitemin küçük bir şerit yapmak istiyorum :)

17-09-2015, 01:39:04

Merhaba arkadaşlar, sitemin header kısmının en üstüne aşağıdaki görseldeki gibi sarı bir şerit eklemek istiyorum. CSS bilgim olmadığı için hangi kodları eklemem gerektiğini bilemedim. Wordpress kullanıyorum, sanırım css dosyasına ilgili kodu ekledikten sonra bir de temamın header.php dosyasına html olarak tanımlamam gerekiyor, yardımcı olursanız çok memnun olurum.

Şerit en üst kısımda kalmalı, tema responsive olduğu için responsive yapıya uygun olmalı. Şimdiden teşekkürler...

17-09-2015, 01:43:51

#2

thealiyasar

<div id="cizgi"></div>

#cizgi{
    position:relative;
    width:100%;
    height:8px;
    background:#ffb400;
}

Header'ın başladığı yere div'i koy yeter hocam.

17-09-2015, 01:44:30

#3

FSahin

header.php'yi açıp

<body> tagından sonra

Alıntı

Bunu yazıp kaydedin.

Sonra style.css'i açın ve en alt tarafa inin.

Alıntı

.cubuk {
position: absolute;
top: 0px;
height: 10px;
background: #2d2d2d;
width: 100%;
}

Bunları yazın ve kaydedin. Çubuğun sabit kalmasını istiyorsanız position: absolute olan yeri position: fixed; olarak değiştirin.

İşte bu da yaptığım örnek:

https://jsfiddle.net/r345vv9j/1/

17-09-2015, 01:46:14

#4

grafiemo

Kimlik doğrulama veya yönetimden onay bekliyor.

Merhaba hocam, tema dosyanız içerisinde style.css dosyasındaki body etiketinin içerisine border-top vererek bunu yapabilirsiniz. Örneğin ;

body{
     border-top: 4px solid #FFB400;
}

17-09-2015, 01:49:40

#5

Napolyon

Birdilimask adlı üyeden alıntı: mesajı görüntüle

<div id="cizgi"></div>

#cizgi{
    position:relative;
    width:100%;
    height:8px;
    background:#ffb400;
}

Header'ın başladığı yere div'i koy yeter hocam.

FSahin adlı üyeden alıntı: mesajı görüntüle

header.php'yi açıp

<body> tagından sonra

Bunu yazıp kaydedin.

Sonra style.css'i açın ve en alt tarafa inin.

Bunları yazın ve kaydedin. Çubuğun sabit kalmasını istiyorsanız position: absolute olan yeri position: fixed; olarak değiştirin.

İşte bu da yaptığım örnek:

https://jsfiddle.net/r345vv9j/1/

grafiemo adlı üyeden alıntı: mesajı görüntüle

Merhaba hocam, tema dosyanız içerisinde style.css dosyasındaki body etiketinin içerisine border-top vererek bunu yapabilirsiniz. Örneğin ;

body{
     border-top: 4px solid #FFB400;
}

Hepinize çok teşekkür ediyorum, hemen deneyeceğim.

Peki bunu tek renk değil de 4-5 renkten yapsak oluyor mu? Mesela 10 px kırmızı, 20 px yeşil, 5 px mor, 30 px mavi gibisinden

Hani renkli renkli şeritler oluyor ya onlar da çok hoş duruyor. Çok uğraştıran birşey değilse onun kodlarını da atabilir misiniz? Ama çok uğraştıracaksa hiç yormayayım gece gece sizleri, hepinize R10+ verdim.

17-09-2015, 01:54:20

#6

thealiyasar

Napolyon adlı üyeden alıntı: mesajı görüntüle

Hepinize çok teşekkür ediyorum, hemen deneyeceğim.

Peki bunu tek renk değil de 4-5 renkten yapsak oluyor mu? Mesela 10 px kırmızı, 20 px yeşil, 5 px mor, 30 px mavi gibisinden

Hani renkli renkli şeritler oluyor ya onlar da çok hoş duruyor. Çok uğraştıran birşey değilse onun kodlarını da atabilir misiniz? Ama çok uğraştıracaksa hiç yormayayım gece gece sizleri, hepinize R10+ verdim.

#cizgi{
    position:relative;
    width:100%;
    height:8px;
   background:url('http://dogancocukyuvasi.com/images/color_line.png') repeat-x;
}

elimde olan image bu var hocam adresten kaydedip ftp ye atarsınız.

sorun olursa http basındakı ' kaldırın

17-09-2015, 01:56:37

#7

Napolyon

Birdilimask adlı üyeden alıntı: mesajı görüntüle

#cizgi{
    position:relative;
    width:100%;
    height:8px;
   background:url([url]http://dogancocukyuvasi.com/images/color_line.png[/url]) repeat-x;
}

elimde olan image bu var hocam adresten kaydedip ftp ye atarsınız

Görseli düzenlerim kendim problem olmaz fakat css ile yapımı mümkün mü bunun? Katkınız için teşekkür ederim.

17-09-2015, 01:57:22

#8

FSahin

Napolyon adlı üyeden alıntı: mesajı görüntüle

Hepinize çok teşekkür ediyorum, hemen deneyeceğim.

Peki bunu tek renk değil de 4-5 renkten yapsak oluyor mu? Mesela 10 px kırmızı, 20 px yeşil, 5 px mor, 30 px mavi gibisinden

Hani renkli renkli şeritler oluyor ya onlar da çok hoş duruyor. Çok uğraştıran birşey değilse onun kodlarını da atabilir misiniz? Ama çok uğraştıracaksa hiç yormayayım gece gece sizleri, hepinize R10+ verdim.

http://jsfiddle.net/vjdauage/

Şuradaki örneğe bakarak istediğin şeyi elde edebilirsin hocam

17-09-2015, 01:59:15

#9

Napolyon

FSahin adlı üyeden alıntı: mesajı görüntüle

http://jsfiddle.net/vjdauage/

Şuradaki örneğe bakarak istediğin şeyi elde edebilirsin hocam

Tam olarak bu sanırım.

Çok teşekkür ederim, gece gece uğraştırdım.