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

Elinize sağlık, çözümlerde olan görünüme özellikle bayıldım.

Guthwine · 12 Ocak 2021

İstek tema alıyor musunuz ?

Pithiux · 12 Ocak 2021

Ellerinize sağlık.

326001 · 12 Ocak 2021

Ovv. Senin alacağın olsun. @Enes3078.
Ben sana nasıl mavi yaptın dediğimde uygulama indirdin demiştin.

349398 · 12 Ocak 2021

Cidden çok iyi olmuş hocam emeğinize sağlık.

Enes3078 · 12 Ocak 2021

326001 dedi:
Eki Görüntüle 832445
Ovv. Senin alacağın olsun. @Enes3078.
Ben sana nasıl mavi yaptın dediğimde uygulama indirdin demiştin.

Eklenti ile oluyor demiştim ama size. Yani siz yanlış anlamışsınız ama hadi hayırlısı

yika38 · 12 Ocak 2021

Guthwine dedi:
İstek tema alıyor musunuz?

Şu anlık hayır. Boş vakit bulup CSS ve site tasarım konusunda bilgimi geliştirirsem düşünebilirim.

Guthwine · 12 Ocak 2021

yika38 dedi:
Şu anlık hayır. Boş vakit bulup CSS ve site tasarım konusunda bilgimi geliştirirsem düşünebilirim.

@Steve Rogers para karşılığı Steam vitrini yapıyordu. O tarz bir şey yapabilirsiniz belki.

326001 · 12 Ocak 2021

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?

RPM · 12 Ocak 2021

Elinize sağlık hocam, yaptım ve çok değişik bir hava kattı.

Yapmaya devam ederseniz onları da kullanırım .

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

Petapat

Guthwine

Hectopat

Pithiux

Hectopat

326001

Kilopat

349398

Hectopat

Enes3078

Petapat

yika38

Gigapat

Guthwine

Hectopat

326001

Kilopat

Dosya Ekleri

RPM

Megapat

Benzer konular