WordPress Yararlı CSS ler

WordPress Css Kodları

Merhaba, zaman içinde biriktirmiş ve kullanmış olduğum yararlı css tricklerini bu sayfada paylaşacağım.

Bu sayfa sürekli güncel olacak ve wordpress css ve genel css konularını ihtiva edecektir.

---

Google reklamlarda kenarları sarı çıkan yerlerin sarı kısımlarını şeffaf renk yapar.

/*
Google reklamlarda kenarında çıkan sarı yerleri transparan yapar
*/
ins {
background: transparent;
text-decoration: none;
}
ins.adsbygoogle {
background: transparent !important;
}

---

Bu kod renkleri ters çevirmeye yarar

mix-blend-mode: difference;

---

Üye girişinde farklı, Misafir girişte farklı gösterim…

body.logged-in
{
background-color: #BEBEBE !important;
}


body.logged-in .yourclassname
{
display:none!important
};

---

Zebra stil tablo (Tablolara ara renk eklemek)

tr:nth-child(even) {
  background-color: #f2f2f2
}

Bu kod ile tablolarınızı anlaşılır bir biçimde sunabilirsiniz. Sadece bu kodu eklediğinizde düz beyaz olan tablolarınız bir düz bir gri renk olarak görünerek okunması kolaylaşır.

Aslında wordpress içinde bu kod otomatik olarak kendini ekliyor ama siz modifiye etmek için kullanabilirsiniz.

No:	İsim	Puan
1	Utku	100
2	Cem	94
3	Mahmut	67

Kaynak: Link

---

Border çizgisini yazı uzunluğunca kısaltma

Örnek:

border-bottom: 4px double #2d92b7;
box-shadow: 0px 3px 0px 0px white, 0px 4px 0px 0px red;
display: inline-block;

---

Komşu Seçici – Öğenin sonrasında bulunan öğeye etki eder

ul + p {
  color: red;
}

Bu kodu baz alarak aşağıdaki örneğin açık kodu...

<style>
ul + p {
color: red;
}
</style>
<ul>
<li> Liste </li>
<li> Liste </li>
<li> Liste </li>
</ul>
<p> Listeden sonraki yazı kırmızı renk olacaktır. </p>

Canlı Demo:

• Liste
• Liste
• Liste

Listeden sonraki yazı kırmızı renk olacaktır.

---

Komşu Seçici 2 – Öğenin sonrasında bulunan her etki eder

ul ~ p {
   color: red;
}

ul den sonra gelen her bir p öğesini seçer.

---

Öğenin İçindeki Hangi Öğeye Etki Edeceğini Belirtmek

.ornekdiv > ul {
  border: 1px solid black;
}

burada örnek div içinde iki öğe varsa bunlardan sadece listeye border uygula dedik

Canlı Demo:

---

Özel Link Stili Tanımlama

Sadece belli bir link için stil tanımlar.

a[href="https://100numaraliadam.com"] {
  color: red; /* 100numaraliadam diye link olursa bu kırmızı renk olur */
}

---

Özel Link Stili Tanımlama 2

İçinde belli bir terim geçen her linki seçtiğiniz stile büründürür.

a[href*="numarali"] {
  color: red;
/* içinde numarali geçen tüm linkleri kırmızı yapar. örneğin 100numarliadam.com veya numaralilar.net gibi */
}

---

Diğer Öğe Seçici (Not Selector)

div:not(.ornekdiv) {
      color: blue;
}

*:not(p) {
      color: red;
}

Burada şunu dedik. örnek div içindeki yazılar mavi olsun ama ornekdiv haricindeki tüm p öğelerini kırmızı renk yap.

---

Öğenin İlk Harfi veya Satırına Etki Eden Css

İlk Satıra Etki

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

İlk Harfe Etki

p::first-letter {
   float: left;
   font-size: 3em;
   font-weight: bold;
   font-family: arial;
   padding-right: 20px;
}

---

X sırasına özel stil uygulama

Örneğin li etiketi ile yaptığımız bir listeleme kodumuz var ve bu listenin ikinci olana denk gelen yazıyı kırmızı olsun istiyoruz. Örneğe göre 2 rakamını istediğiniz gibi değiştirebiliriz.

li:nth-child(2) {
   color: red;
}

---

X sırasına özel stil uygulama (sondan erişme)

Yukarıdaki örneğin bu sefer tersinden gidiyoruz. Bu kodu listenin son sırası şöyle olsun gibi kullanabilirsiniz.

Aşağıdaki örnek şunu söyler. Listenin sondan ikincisi kırmızı olsun.

li:nth-last-child(2) {
   color: red;
}

---

X sırasına özel stil uygulama (Genel erişim)

Bu kod ile dedik ki ayrı ayrı listelerimiz var ve baştan 3. sıradaki listemizin tümünün etrafını kırmızı çerçeve yap.

ul:nth-of-type(3) {
   border: 3px dotted red;
}

Bu da sondan 3. sıradaki listemizin tümünün etrafını kırmızı çerçeve yap.

ul:nth-last-of-type(3) {
 border: 3px dotted red;
}

---

İlk ve Son Border Kaldırmak İçin

Genellikle sıralı listelerde ilk ve son border kaldırılmazsa çiftter çifter görünüyor bu kod tam ilaç.

li:first-child { border-top: none; }
li:last-child { border-bottom: none; }

---

Öğe İçinde tek bir öğe varsa yalnızca buna etki eder.

Kod biraz karışık gelebilir. Örnek vermek gerekirse sayfada bir sürü div var. div içinde p satırları halinde yazılar var. Bir div içinde 3 – 5 satır var. Ama sadece bir divde tek satır var ise bu kod ona etki eder.

<div>
<p> div içinde ilk satır yazı. </p>
<p> div içinde ikinci satır yazı </p>
<p> div içinde üçüncü satır yazı </p>
</div>

<div>
<p> div içinde tek satır yazı. </p>
</div>
 
<div>
   <p> div içinde ilk satır yazı </p>
   <p> div içinde ikinci satır yazı </p>
</div>

 

div p:only-child {
  color: red;
}

---