Technopat Sosyal'in varsayılan ve karanlık temasını geliştirmek için hazırladığım CSS kodları

Ekran görüntüsü 2021-01-12 202236.png


Can sıkıntısından boş vakitlerimde hazırlayıp geliştirdiğim CSS kodları. Temelde aşağıdaki düzenlemeler yapıldı:
  • Header, footer ve "Rapor, Düzenle, Sil, Uyar" gibi mesaj düzenleme paneli düğmelerine ek FontAwesome ikon eklemeleri yapıldı.
  • Karanlık temada çözüm olan mesajların sağ tarafındaki yeşil renk, şu anki karanlık tema için daha uygun renge dönüştürüldü.
  • Sabit konular ayrı renkte gösterildi.
  • Kod bölümünün rengi değiştirildi.
Denemek isterseniz aşağıdaki adımları uygulayabilirsiniz:
  1. StyleBot eklentisini aşağıdan indirin:
    • Chrome/Edge/Vivaldi:
      chrome.google.com

      Stylebot

      Cambia l'aspetto del web all'istante
      chrome.google.com chrome.google.com
      • Opera kullanıcılarının önce Install Chrome Extensions eklentisini kurup sonra StyleBot eklentisini kurması gerekmektedir.
    • Firefox:
      addons.mozilla.org

      Stylebot – Get this Extension for 🦊 Firefox (en-US)

      Download Stylebot for Firefox. Change the appearance of the web instantly
      addons.mozilla.org addons.mozilla.org
    • StyleBot eklentisinden başıma bir şey gelir mi? StyleBot, açık kaynak kodlu bir eklentidir ve kodları GitHub'ta yayınlanmaktadır. Yani başınıza bir şey gelme ihtimali sıfır gibi bir şey.
  2. Eklenti ayarlarını açın.
    Ekran görüntüsü 2021-01-12 203255.png


  3. Sol taraftaki sekmelerden "Styles" sekmesini seçin. Ardından "Add a new style" seçeneğine basın.
    Ekran görüntüsü 2021-01-12 203356.png


  4. "Enter URL" bölümüne technopat.net/sosyal yazın. Alttaki kod paneline de aşağıda vereceğim CSS kodlarını yazın.
    Ekran görüntüsü 2021-01-12 203451.png


Gelelim CSS kodlarına... Aşağıdaki kodlar hem açık, hem karanlık tema hem de Dimension için kullanılabilir:

CSS: 
.p-navEl a::before{
    font-family: 'Font Awesome 5 Pro';
    padding-right: 4px;
}

.p-navEl a[data-nav-id="home"]::before{content: "\f015";}
.p-navEl a[data-nav-id="forums"]::before{content: "\f086";}
.p-navEl a[data-nav-id="whatsNew"]::before{content: "\f0e7";}
.p-navEl a[data-nav-id="xfmg"]::before{content: "\f030";}
.p-navEl a[data-nav-id="xfrm"]::before{content: "\f019";}
.p-navEl a[data-nav-id="members"]::before{content: "\f0c0";}
.p-navEl a[data-nav-id="newPosts"]::before{content: "\f005";}
.p-navEl a[data-nav-id="findThreads"]::before{content: "\f00e";}
.p-navEl a[data-nav-id="watched"]::before{content: "\f06e";}
.p-navEl a[data-nav-id="searchForums"]::before{content: "\f002";}
.p-navEl a[data-nav-id="markForumsRead"]::before{content: "\f070";}
.p-navEl a[href*="blog/"]::before{content: "\f781";}
.p-navEl a[href="https://www.technopat.net/video/"]::before{content: "\f03d";}
.p-navEl a[href="https://www.technopat.net/sistem-tavsiyeleri-2/"]::before{content: "\f4b4";}
.p-navEl a[href*="/ozel-bolumler/cevap-bekleyen-sorular.241/"]::before{content: "\f059";}
.p-navEl a[href*="/etkinlik-akisi/ubs-blog-entries/"]::before{content: "\f044";}
.p-navEl a[href*="/etkinlik-akisi/ubs-comments/"]::before{content: "\f086";}
.p-navEl a[href*="/blog/blog/"]::before{content: "\f03a";}
.p-navEl a[href*="/blog/authors/"]::before{content: "\f4ff";}
.p-navEl a[href*="/izlenen/ubs-blog-entries"]::before{content: "\f06e";}
.p-navEl a[href*="/ara/"]::before{content: "\f002";}
.p-navEl a[href*="/blog/mark-read"]::before{content: "\f070";}


.p-navEl a[data-nav-id="currentVisitors"]::before{content: "\f500";}
.p-navEl a[data-nav-id="newProfilePosts"]::before{content: "\f249";}
.p-navEl a[data-nav-id="latestActivity"]::before{content: "\f086";}
.p-navEl a[data-nav-id="searchProfilePosts"]::before{content: "\f865";}
.p-navEl a[data-nav-id="whatsNewPosts"]::before{content: "\f3e5";}
.p-navEl a[data-nav-id="whatsNewProfilePosts"]::before{content: "\f249";}
.p-navEl a[data-nav-id="whatsNewNewsFeed"]::before{content: "\f09e";}
.p-navEl a[href="https://www.technopat.net/sosyal/konu/technopat-sosyal-kurallari.2762/"]::before{content: "\f02c";}
.p-navEl a[href="https://www.technopat.net/sosyal/etkinlik-akisi/news-feed"]::before {content: "\f09e";}

.p-navEl a[data-nav-id=xfmgWhatsNewNewMedia]::before {content: "\f302";}
.p-navEl a[data-nav-id=xfmgWhatsNewMediaComments]::before {content: "\f086";}
.p-navEl a[data-nav-id=xfrmNewResources]::before {content: "\f019";}
.p-navEl a[data-nav-id=defaultNewsFeed]::before {content: "\f09e";}
.p-navEl a[data-nav-id=defaultLatestActivity]::before {content: "\f086";}
.p-navEl a[data-nav-id=defaultYourProfile]::before {content: "\f007";}
.p-navEl a[data-nav-id=defaultYourAccount]::before {content: "\f4fe"}
.p-navEl a[data-nav-id=defaultLogOut]::before {content: "\f08b";}

.p-navEl a[data-nav-id=xfrmLatestReviews]::before {content: "\f24e";}
.p-navEl a[data-nav-id=xfrmYourResources]::before {content: "\f4fc";}
.p-navEl a[data-nav-id=xfrmWatched]::before {content: "\f06e";}
.p-navEl a[data-nav-id=xfmgNewMedia]::before {content: "\f302";}
.p-navEl a[data-nav-id=xfmgNewComments]::before {content: "\f086";}
.p-navEl a[data-nav-id=xfmgYourContent]::before {content: "\f007";}
.p-navEl a[data-nav-id=xfmgWatchedContent]::before {content: "\f06e";}
.p-navEl a[data-nav-id=xfmgMarkViewed]::before {content: "\f070";}

.p-footer-linkList a[href*="cesitli/contact"]:before {
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
    content: "\f199";
}

.p-footer-linkList a[href*="konu/technopat-site-kullanim-kosullari.10044/"]:before {
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
    content: "\f071" !important;
}

.p-footer-linkList a[href*="konu/gizlilik-bildirimi.10042/"]:before {
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
    content: "\f21b" !important;
}

.p-footer-linkList a[href*="yardim/"]:before {
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
    content: "\f059" !important;
}

.p-footer-linkList a[href="https://"]:before {
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
    content: "\f015";
}

.actionBar-action--edit:before, .actionBar-action--report:before, .actionBar-action--ip:before, .actionBar-action--delete:before, .actionBar-action--spam:before, .actionBar-action--warn:before, .actionBar-action--history:before, .actionBar-action--undelete:before {
    font-family: 'Font Awesome 5 Pro';
    padding-right: 4px;
}

.actionBar-action--report:before {
    content: '\f0f3'
}

.actionBar-action--edit:before {
    content: '\f040'
}

.actionBar-action--delete:before {
    content: '\f1f8'
}

.actionBar-action--ip:before {
    content: '\f601'
}

.actionBar-action--history:before {
    content: '\f1da'
}

.actionBar-action--spam:before {
    content: '\f54c'
}

.actionBar-action--warn:before {
    content: '\f06a'
}

.actionBar-action--undelete:before {
    content: '\f3e5'
}

.menu-linkRow:before {
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
}


.menu-linkRow[href="/sosyal/etkinlik-akisi/news-feed"]:before {
    content: '\f09e';
}
.menu-linkRow[href="/sosyal/hesap/reactions"]:before {
    content: '\f164';
}
.menu-linkRow[href*="/sosyal/ara/member"]:before {
    content: '\f086';
}
.menu-linkRow[href="/sosyal/hesap/account-details"]:before {
    content: '\f4fe';
}
.menu-linkRow[href="/sosyal/hesap/security"]:before {
    content: '\f505';
}
.menu-linkRow[href="/sosyal/hesap/privacy"]:before {
    content: '\f502';
}
.menu-linkRow[href="/sosyal/hesap/preferences"]:before {
    content: '\f4ff';
}
.menu-linkRow[href="/sosyal/hesap/signature"]:before {
    content: '\f5b7';
}
.menu-linkRow[href="/sosyal/hesap/connected-accounts/"]:before {
    content: '\f6ff';
}
.menu-linkRow[href="/sosyal/hesap/following"]:before {
    content: '\f234';
}
.menu-linkRow[href="/sosyal/hesap/ignored"]:before {
    content: '\f503';
}
.menu-linkRow[href*="/sosyal/cikis/"]:before {
    content: '\f08b';
}
.fr-wrapper ::selection {
    background: #2196f3;
    color: #ffffff;
}
Bu kodlar FontAwesome ikon eklemeleri ve ufak bir renk düzenlemesi içermektedir.


Aşağıdaki kodlar, sabit konuların farklı renkte görünmesini sağlar.

Ekran görüntüsü 2021-01-12 204933.png
Ekran görüntüsü 2021-01-12 205212.png


Açık ve karanlık tema için ayrı ayrı kodlar hazırladım. Kullandığınız temaya göre kodu kopyaladıktan sonra altta birkaç satır boşluk bırakarak kullandığınız temaya göre bu kodları kopyalayabilirsiniz:
CSS: 
/*Açık tema ve Dimension için:*/
.structItemContainer-group--sticky {
      background-color: rgb(255, 244, 229);
}

/*Koyu tema için:*/
.structItemContainer-group--sticky {
      background-color: #07385f;
}


Bu kodlar da karanlık temada çözüm olan mesajların sağındaki kutunun rengini karanlık temaya daha uygun hâle getiriyor:
CSS: 
.contentVote-vote.contentVote-vote--up.is-voted {
    color: #63b265 !important;
}

.message--solution .message-cell.message-cell--vote {
    background: #243c82;
}

.message-cell.message-cell--solutionHeader {
    color: #7c9eff;
    background: #243c82;
    border-left: 3px solid #486edc;
}

Bu kodu ekleyince böyle görünüyor:

Ekran görüntüsü 2021-01-12 213337.png


Kod panelinde siyah arka planı sevmediyseniz aşağıdaki kodu ekleyerek rengini açabilirsiniz:
CSS: 
.bbCodeCode {
    background: #42464d !important;
}

Bu kodu ekleyince de böyle görünüyor:

Ekran görüntüsü 2021-01-12 205312.png



Uyarı yediğinizde çıkan uyarı onaylama ekranı karanlık temada gözünüzü mahvediyorsa aşağıdaki CSS kodlarını ekleyebilirsiniz:

CSS: 
.notice.sv_warning_acknowledgement {
    color: rgb(200 200 200);
    background: rgb(30 30 30);
    border: 1px solid rgb(55 55 55) !important;
}

.notice.sv_warning_acknowledgement a:not(.button--sv-acknowledge-warning) {
    color: rgb(112, 171, 203);
}

.sv-warning-acknowledge-notice-icon {
    font-size: 3.4em;
    color: rgb(255 255 255);
}

Bu kodu ekleyince böyle görünüyor:

Öncesi:
1623864531889.png


Sonrası:
1623864540001.png


Kodlar bu kadardı. Bu arada şunu da belirtmek isterim ki, CSS konusunda ciddi bir bilgim yok. Büyük kısmı XenForo ile haşır neşir olduğumda ihtiyaçlarıma göre araştırdığım kodlardan oluşuyor.

Görüşlerinizi bekliyorum. :)
 
Son düzenleyen: Moderatör:
Genişletmek için tıkla...
326001 dedi:
Tek bir beğenmediğim kısmı var. F5 atınca, "indir" yanında üyeler işareti bir anlığına gidip geliyor. Onu düzeltmek mümkün müdür?
1610476654278-png.832463
Genişletmek için tıkla...
O eklenti ile eklendiği için olmuş olabilir. Kim bilir bir gün direkt olarak Sosyal'de bu tarz bir yapı görürüz ve o sıkıntılar da ortadan kalkar. :)
 
326001 dedi:
Tek bir beğenmediğim kısmı var. F5 atınca, "İndir" yanında üyeler işareti bir anlığına gidip geliyor. Onu düzeltmek mümkün müdür?
1610476654278-png.832463
Genişletmek için tıkla...
Normalde belirttiğiniz yerde sağ ok tuşu var, o düğme de sonradan yüklendiğinden (ki ilgili fotoğrafı da site yüklenirken almışsınız) öyle bir durum oluşmuş. Daha çok XenForo ve sitenin yüklenmesi anında görüntüyü almanızdan kaynaklı.

StyleBot'u devre dışı bırakıp aydınlık temada F5 atınca benzer durum bu sefer de "Üyeler" düğmesinin sağındaki ok tuşu için oldu.

Site yüklenirken:
Ekran görüntüsü 2021-01-12 214443.png


Yüklendikten sonra:
Ekran görüntüsü 2021-01-12 214454.png


Neden karanlık temada denemedin? Karanlık temada navigasyon çubuğundaki düğmeler için alan yetiyor da ondan.
Ekran görüntüsü 2021-01-12 214802.png
 
yika38 dedi:
Normalde belirttiğiniz yerde sağ ok tuşu var, o düğme de sonradan yüklendiğinden (ki ilgili fotoğrafı da site yüklenirken almışsınız) öyle bir durum oluşmuş. Daha çok XenForo ve sitenin yüklenmesi anında görüntüyü almanızdan kaynaklı.

StyleBot'u devre dışı bırakıp aydınlık temada F5 atınca benzer durum bu sefer de "Üyeler" düğmesinin sağındaki ok tuşu için oldu.

Site yüklenirken:
Eki Görüntüle 832483

Yüklendikten sonra:
Eki Görüntüle 832485

Neden karanlık temada denemedin? Karanlık temada navigasyon çubuğundaki düğmeler için alan yetiyor da ondan.
Eki Görüntüle 832486
Genişletmek için tıkla...
Tam anlamadım ama zaten karanlık temadayım. Yapmam gereken adım nedir? :)
 
Çok güzel olmuş hocam. Elinize sağlık.

Ufak bir sorum olacak ama. Ben aşağıda belirttiğim kısımdaki kısımdaki tonlamaları pek sevemedim. Bu renk kodlarını bu linkten ayarladığım bir renk ile istediğim gibi değiştirebilir miyim?

yika38 dedi:
Bu kodlar da karanlık temada çözüm olan mesajların sağındaki kutunun rengini karanlık temaya daha uygun hâle getiriyor:
CSS: 
.contentVote-vote.contentVote-vote--up.is-voted {
    color: #63b265 !important;
}

.message--solution .message-cell.message-cell--vote {
    background: #243c82;
}

.message-cell.message-cell--solutionHeader {
    color: #7c9eff;
    background: #243c82;
    border-left: 3px solid #486edc;
}

Bu kodu ekleyince böyle görünüyor:

Eki Görüntüle 832470
Genişletmek için tıkla...
 
@maksu kodlar üzerinde kendi tercihinize göre istediğiniz gibi oynayıp geliştirebilirsiniz. 👍


Ufak bir güncelleme: Uyarı yediğinizde çıkan uyarı onaylama ekranı karanlık temada gözünüzü mahvediyorsa aşağıdaki CSS kodlarını ekleyebilirsiniz:

CSS: 
.notice.sv_warning_acknowledgement {
    color: rgb(200 200 200);
    background: rgb(30 30 30);
    border: 1px solid rgb(55 55 55) !important;
}

.notice.sv_warning_acknowledgement a:not(.button--sv-acknowledge-warning) {
    color: rgb(112, 171, 203);
}

.sv-warning-acknowledge-notice-icon {
    font-size: 3.4em;
    color: rgb(255 255 255);
}

Bu kodu ekleyince böyle görünüyor:

Öncesi:
1623864755482.png


Sonrası:
1623864761877.png
 
Son düzenleyen: Moderatör:

Benzer konular

L
  • Çözüldü
Sosyal'in Temasını Değiştirme
Mesaj
3
Görüntüleme
732
Varona
Varona
E
  • Anket
Sosyal'in yeni siyah temasını sevdiniz mi?
2 3
Mesaj
26
Görüntüleme
876
Linuxginar
L
Murat Salmanow
Technopat Sosyal'in önemi ve sohbet
Mesaj
8
Görüntüleme
313
Melih0192
Melih0192
OnePC
  • Kilitli
  • Makale
Technopat Sosyal'in Artıları ve Eksileri
2 3
Mesaj
24
Görüntüleme
1B
Linux Aliskanligi
Linux Aliskanligi
onlinee
  • Anket
Hangi "Technopat" temasını kullanıyorsunuz?
2 3 4
Mesaj
33
Görüntüleme
2B
Kernelginar
Kernelginar

Yeni konular

Yeni mesajlar

Geri
Yukarı