CSS

Seçilen Yazının Arkaplan Rengini Değiştirme

Dün Facebook’ta bir arkadaş diğer arkadaşa seçtiğimiz yazıların arka planı kırmızı oluyor onu nasıl yaptın diye, arkadaşta tam olarak nasıl olduğunu anlatmakta güçlük çekmişti. bende sitenin kaynak kodlarına küçük bir gezinti yaptıktan sonra css dosyasının  ::selection kodlarıyla yapıldığını belirtmiştim. bu gün detaylı olarak nasıl yapılacağını anlatacağım.

Bu gün başka bir arkadaşım sitesini gezerken kodların tam olarak nasıl olması gerektiğini anlatan bir yazı gördüm daha önce bilmeme rağmen tam olarak hatırlamadığımı fark ettim ve hem sizlere anlatmak, hem de arşivimde bulunması amacıyla bu konuyu açmaya karar verdim, böylece ihtiyacı olarak arkadaşlara da yardımcı olmuş olurum.

Öncelikle şunu belirtmek isterim her tema da olmasa da wordpress varsayılan olarak ilk görselde göreceğiniz mavi rengi kullanmaktadır, ve dikkat etmeniz gereken bir diğer konu ise kullandığınız temada bunun dışında aynı kodlar kullanılmış ise öncelikle onları kaldırın yada düzenlemeyi onlar üzerinde yapın aksi taktirde çeşitli sorunlar çıkabilir.

Önce (varsayılan);

seçilen-yazının-arkaplanını-değiştirme-önce

Sonra;

seçilen-yazının-arkaplanını-değiştirme-sonra

 

Aşağıdaki CSS kodlarını CSS dosyanızın style.css en altına eklediğiniz de sitenizdeki yazılar ile birlikte seçilen her yer istediğiniz renkte olacaktır.

Ben kendi temama uygun olduğu için #52504b renk kodlarını kullandım sizde istediğiniz renk kodunu kullanabilirsiniz.

WordPress Eklentisiz Sayfalandırma Yapma

Merhaba arkadaşlar bu gün sizin için güzel bir konu daha hazırladım bu konuda WordPress için uygun olan eklentisiz pagenavi görevi yapan sayfalandırma yapmayı ve yapılmış bir örneğini nasıl sitenize eklemeniz gerektiğini anlatacağım buyurun anlatıma geçelim…

Wordpres WP-PageNavi eklentisi sitenizde kurulu olduğunda bu sayfalandırma kodlarının görünümünde olumlu değişiklikler olur ancak eklenti kurulu olmadığında hiç bir sorun çıkmaz bizzat bu sitede denedim çalışma garantisi verebilirim :) öncelikle yapmanız gereken functions.php dosyasını açmak ve aşağıdaki kodu bulmak.

Sonrasında hemen altına şu kodları ekleyip dosyayı kaydedin yada upload edin.
Daha sonra style.css dosyasına aşağıdaki kodları ekleyin.
Yukarıdaki style kodlarını kendi temanıza göre değiştirebilirsiniz.

Şimdi sayfalandırma yapılan numaraların nerede çıkmasını istiyorsanız aşağıdaki kodu oraya ekleyin.

bu kod bir nevi pagenavi eklentisinin kısaltılmış versiyonudur. öyle uzun uzadıya kodlar yerine bunu ekleyerek yaparsanız aynı görevi görecektir.

Görsel olarak nasıl göründüğünü merak edenler için.

Eklensizi Sayfalandırma

CSS İle Yazıyı Kalın Yapma

Merhaba arkadaşlar, bir süredir içerik giremedim ancak arada böyle küçük kod parçalarını sizlerle paylaşmaya devam ediyorum, bu yazımda CSS ile yazının kalın yapılmasından bahsedeceğim, öncelikle yapmanız gereken kalınlaştırmak istediğiniz alanın class‘ını bulmak ve hemen aşağıdaki kodu bu class’a eklemek.

 sizinde anlayacağınız gibi bold kısmı kalınlaştır demek bunun yerine normal derseniz yazı normal olacaktır.

Bir de dikkat etmeniz gereken kısım var, eğer font-weight: komutu daha önce kulalnılmış ise öncelikle ondan kurtulmanız gerekiyor, zira aynı kod olursa hem sağlıksız bir çalışma olur hemde sorunlar yaratabilir.

Sormak istediklerinizi yorum yazarak bana sorabilirsiniz, seve seve size yardımcı olurum :)

CSS’de text-indent kodu ile Paragraf Başı Yapmak

Bu yazımızda paragraflarda ilk satırın soldan bizim belirlediğimiz kadar uzak başlamasını, yani paragraf başı yapmamızı sağlayan text-indent kodundan bahsedeceğiz.

HTML’de paragraflar <p> kodu ile belirlenir. WordPress kullanıyorsanız yazılarınızdaki paragraflarınız daima <p> ve </p> kodları arasında yer alır. Fakat ilk satır sola yapışıktır. Eğer paragraflarınıza satır başı eklemek istiyorsanız aşağıdaki kodu kullanabilirsiniz.

Yukarıdaki kodda paragraflarımızın ilk satırının soldan 35px sonra başlamasını sağlamış oldu. Ön izlemesini Türkçe bir lorem ipsum örneği ile görelim.

Biber türemiş sıfat dergi koştum orta camisi öyle ki koyun adresini kapının kulu. Filmini mi koştum sıla türemiş sıfat bilgiyasayarı. Sarmal açılmadan dolayı de adresini gitti adanaya. Layıkıyla telefonu dışarı çıktılar telefonu ve sokaklarda şafak bahar ötekinden dolayı koştum türemiş sıfat masanın yazın sevindi.

Yukarıdaki paragrafta gördüğünüz gibi ilk satırın soldan 35 piksel sonra başlamasını sağlayarak satır başı yapmış oldu.

Eğer bu kodu sitenizdeki tüm paragraflare uygulamak istiyorsanız yazının başında verdiğimiz kodu sitenizin CSS’sine ekleyin. Sadece belli bir paragrafta satır başı olmasını istiyorsanız aşağıdaki kodu kullanabilirsiniz.

Bu koda sadece px değil; pt, cm, em ve etc cinsinden de değerler atayabildiğiniz gibi yüzde % de kullanabilirsiniz. Javascript sözdizimindeki karşılığı ise object.style.textIndent=”35px”‘dir.

CSS ile Başlıkların Harflerini Büyük veya Küçük Yapmak

Başlık yazarken bazen ilk harfleri büyük yapmayı unutmuş olabiliriz ya da hiçbir harfi büyük yapmıyoruzdur. Bu başlıkları en baştan düzenlemek yerine tek bir kod ile siz başlıklarınızı yeniden düzenleyene kadar idare edebilirsiniz ya da forumlardaki kullanıcıların başlıkları tamamen küçük harfle yazmasına rağmen kelimelerin ilk harfini büyük yapabilirsiniz. Bunun için text-transform: capitalize; kodunu kullanacağız.

Örnek kullanım

Yukarıda cümlemizin tüm harfleri küçük olmasına rağmen text-transform: capitalize; kodu sayesinde ilk harfleri büyük gösterebiliriz. text-transform: lowercase; ile de TÜM HARFLERİ BÜYÜK OLAN CÜMLELERİN harflerini otomatik olarak küçük gösterebilirsiniz. Örneğin bir sözlük sitesi açacaksanız bu kodu mutlaka kullanırsınız.

Ayrıca text-transform: uppercase; kodu ile de yazılarınızın başlıklarındaki cümlelerin tüm harflerini BÜYÜK yapabilirsiniz.

CSS’de letter-spacing: kodunun kullanımı

CSS kodları ile yeni yeni tanışmaya başlayan kişilerin karşısına mutlaka çıkacak olan bir css elementidir letter-spacing. Peki bu element ne işe yarar. İsterseniz bunu kullanarak öğrenelim…

İlk olarak elimize bir güzel söz alıyoruz.

Gayet normal ve güzel söz. Şimdi bu yazıyı h6 yapalım.

Yazımız h6 içine girince şu şekli aldı:

Hayat bir tiyatro dediler, bana bir rol verdiler. En acısı benimki idi, önce sev sonra unut dediler..

Şimdi h6 kodumuza CSS ile letter-spacing özelliğini katalım ve ne olacağını görelim.

Yukarıdaki stil kodumuzda letter-spacing kullanarak yazımızdaki harfler arasında 2 pixellik boşluk bıraktık. Kodları bir araya topladığımızda şöyle:

Ön izlemelerini görmek istediğimizde ise şöyle:

Hayat bir tiyatro dediler, bana bir rol verdiler. En acısı benimki idi, önce sev sonra unut dediler..

bir sonuç elde ettik. Yani kısaca özetlemek gerekir ise; letter-spacing kodu ile harfler arasına boşluk koymaya gerek kalmaksızın aralarını açabiliyor.

Ayrıca letter: harf, spacing ise aralık demek. Böylece 1 yazıda 2 ingilizce kelime öğrenmiş oldunuz. Kod hakkında ayrıntılı bilgi 2. sayfadadır. Güle güle kullanın.

Sayfa: 1 Toplam: 3123