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.
- StyleBot eklentisini aşağıdan indirin:
- Chrome/Edge/Vivaldi:
- 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 instantlyaddons.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.
- Chrome/Edge/Vivaldi:
- 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/sosyalyazı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;
}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;
}
.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:
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.
Son düzenleyen: Moderatör:
