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

yika38 · 12 Ocak 2021

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:

StyleBot eklentisini aşağıdan indirin:
- Chrome/Edge/Vivaldi:
  
  Stylebot
  
  Cambia l'aspetto del web all'istante
  
  chrome.google.com
  - Opera kullanıcılarının önce Install Chrome Extensions eklentisini kurup sonra StyleBot eklentisini kurması gerekmektedir.
- Firefox:
  
  Stylebot – Get this Extension for 🦊 Firefox (en-US)
  
  Download Stylebot for Firefox. Change the appearance of the web instantly
  
  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.
Eklenti ayarlarını açın.
Sol taraftaki sekmelerden "Styles" sekmesini seçin. Ardından "Add a new style" seçeneğine basın.
"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.

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.

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;
}

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

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

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

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:

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:

Sonrası:

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.

Enes3078 · 12 Ocak 2021

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?

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 · 12 Ocak 2021

Enes3078 dedi:
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.

Ben takıntılıyım biliyorsun Firefox'da yazılar farklı diye geçemedim bile.
Ben sadece çözümü mavi yapana geçeyim şimdilik

yika38 · 12 Ocak 2021

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?

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:

Yüklendikten sonra:

Neden karanlık temada denemedin? Karanlık temada navigasyon çubuğundaki düğmeler için alan yetiyor da ondan.

326001 · 12 Ocak 2021

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

Tam anlamadım ama zaten karanlık temadayım. Yapmam gereken adım nedir?

yika38 · 12 Ocak 2021

326001 dedi:
Tam anlamadım ama zaten karanlık temadayım. Yapmam gereken adım nedir?

Kısaca sorun sizden veya eklenti kaynaklı değil. Dolayısıyla yapacak bir şey de yok.

arr05 · 12 Ocak 2021

Mükemmel, faydalı olmuş.

maksu · 12 Ocak 2021

Ç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; } .m--solution .m-cell.m-cell--vote { background: #243c82; } .m-cell.m-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

yika38 · 16 Haziran 2021

@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:

Sonrası:

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

Ayrıntılı düzenleme

Stylebot

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

Enes3078

Exapat

326001

Kilopat

yika38

Terapat

326001

Kilopat

yika38

Terapat

arr05

Hectopat

maksu

Kilopat

yika38

Terapat

Benzer konular