Oldukça çirkin bir görünüme sahip olduğunu görebiliyoruz. Burada CSS yeteneklerimiz devreye giriyor. Yazı içeren sınıf seçicisine padding vermeliyiz, bu sayede yazılar kenarlara bitişik olmayacaktır. Aynı şekilde yazı içerik fontunu değiştirmeliyiz tıpkı navbar ekleme ve düzenleme dersinde yaptığımız gibi. Tarih yazısını "14 Temmuz 2018 Cumartesi" ise kaldırmalıyız zaten yazının post-footer bölümünde zaman bilgisi verilmekte. Bu istenilenlere göre CSS kodunu yazmaya başlayalım.
.main-area{
padding: 20px 40px;
font-family: 'PT Sans', sans-serif!important;
line-height:23px;
font-size: 16px;
}
.main-area h3.post-title{
margin-bottom: 30px;
margin-top:20px;
}
h1, h2, h3, h4, h5, h6{
font-weight:700;
}
h2.date-header{
display: none;
}
Bu işlemlerden sonra görünüm şu hale gelecektir. .post-footer-line-1{
border: 1px solid #555;
background: rgba(255, 255, 255, 0.5);
padding: 5px;
margin: 30px 0 10px 0;
}
.post-footer-line-1 a{
color:#555;
}
.post-footer-line-1 span{
margin-right:20px;
}
.post-labels a{
border:1px solid #555;
padding: 3px;
background: #ccc;
color:#555;
}
Yukarıdaki gibi bir görüntü elde ettik. Bir sonraki yazıda temanın ana sayfasında yer alacak olan blog yayınlarının görünümünü değiştireceğiz. Bu dersin sonuna kadar yazılan tema kodu için tıklayınız.
Hiç yorum yok:
Yorum Gönderme