Ich habe vor einiger Zeit mal einen CSS-Style für diese Seite erstellt, der mir persönlich das Surfen hier erleichtern sollte. Ich weiß dass die Zukunft dieser Seite hier etwas ungewiss ist, aber ich dachte, es kann ja nicht schaden, das einfach mal zu teilen, falls andere ebenfalls davon profitieren wollen könnten.
Konkret geht es dabei vor allem darum, dass ich für die Seite einen größtenteils vollständigen Darkmode erstellt habe und teilweise Farbgebungen, die es erleichtern sollen, zu erkennen, ob man sich in einem Männlich/Weiblich/Paare/Queer-Forum befindet.
Also erstmal grundlegend für die jenigen, denen CSS gar nichts sagt: Eine Webseite wie diese hier besteht in der Regel aus HTML-, CSS- und manchmal noch JavaScript-Code. HTML ist für den grundlegenden Seitenaufbau und die Inhalte, CSS für das Design der Seite und JavaScript für Codeausführungen. Es gibt aber Browser-Addons, mit denen man den CSS-Code einer Seite für sich privat modifizieren oder ergänzen kann, und somit kann man dann das Design der Webseite ändern. Dabei gibt es auch erstmal keine Sicherheitsbedenken, weil der CSS-Code nichts ausführt, sondern nur Designvorgaben liefert.
Ich erkläre hier am Beispiel vom Firefox-Browser, wie ihr das nutzen könnt. Bei Firefox geht das sowohl am PC als auch am Handy. Wenn ihr das in einem anderen Browser nutzen wollt, müsst ihr euch selbst informieren, wie das dort geht.
Schritt 1: Ihr braucht das passende Addon. Ich kann euch da nur das Addon "Stylus" empfehlen, was Open-Source ist:
https://addons.mozilla.org/de/firefox/addon/styl-us/
Dringend abraten würde ich von der Nutzung von dem ähnlichen Addon "Stylish". Das ist in der Vergangenheit dadurch aufgefallen, den gesamten Browserverlauf mit dem Entwicklerunternehmen zu teilen. Deshalb empfehle ich ausschließlich Stylus.
Schritt 2: Ihr müsst die Erweiterung anklicken, auf "Verwalten" klicken und dann in der neuen Seite auf der linken Seite auf das "+"-Symbol klicken.
Schritt 3: Ein Fenster mit einem großen Textfeld öffnet sich. Darüber ist ein kleines Feld, in dem definiert werden muss, für welche Seite der Style gelten soll. Dort wählt ihr zuerst "URLs beginnend mit:" aus. Dahinter fügt ihr in das Feld folgendes ein:
Code: Alles auswählen
https://klogeschichten.net/Code: Alles auswählen
https://www.klogeschichten.net/Schritt 4: Jetzt könnt ihr schon den Code einfügen. Welchen Code ihr dort einfügen könnt, schreibe ich unten. Kommt auch bisschen drauf an, worum ihr eure Seite erweitern wollt. Alternativ könnt ihr natürlich auch einen eigenen Style entwickeln oder meinen optimieren wie es euch passt.
Schritt 5: Anschließend klickt ihr links auf den gelben "Speichern"-Button. Danach könnt ihr den Tab schließen und der Style sollte angewendet werden.
Und nun zu den Optimierungen die ich selbst verwende.
1. Darkmode
Wenn ihr diesen Code in das Textfeld einfügt, dann wird diese Seite künftig bei euch in einem dunklen Design erscheinen. Der Style hat allerdings keinen Anspruch auf Vollständigkeit, ich stolpere immer mal wieder auf kleinere Inkonsistenzen, die mich aber bisher nicht ausreichend gestört haben, als dass ich den Code geändert hätte.
Code: Alles auswählen
html, body {
color: #abbcd9;
background-color: #000;
}
a {
color: #fff;
}
a:hover {
color: #FF88A5;
}
h2 {
color: #C7CFDD;
}
h3 {
color: #87bcf9;
}
select {
border-color: #aeaeae;
background-color: #464646;
color: #fff;
}
label {
color: #a2cdff;
}
.bg1 {
background-color: #171717;
}
.bg2 {
background-color: #232323;
}
blockquote {
background-color: #2b2a1b;
border-color: #797900;
border-radius: 6px;
}
blockquote blockquote {
background-color: #2b2a1b;
border-color: #808000;
border-radius: 6px;
}
blockquote blockquote blockquote {
background-color: #2b2a1b;
border-color: #818100;
border-radius: 6px;
}
fieldset dl:hover dt label {
color: #fff;
}
dd label{
color: #e8e8e8;
}
.button {
background-image: linear-gradient(to bottom, #0f0f0f 0%,#050505 100%);
-webkit-box-shadow: 0 0 0 1px #4D4D4D inset;
}
.action-bar .pagination .button {
background-color: #171717;
color: #B2C6D9;
}
.panel h2 {
color: #C7CFDD;
}
.panel span {
color: #D9D9D9;
}
.panel dd, strong, em, .bbcode-status {
color: #D9D9D9;
}
.content {
color: #eee;
}
.postbody {
color: #cacaca;
}
.postprofile strong {
color: #cacaca;
}
.postprofile {
color: #fff;
}
.post:target h3 a{
color: #eee;
background-color: #ff00e120;
}
.post:target .content {
color: #eee;
background-color: #ff00e120;
}
.wrap {
background-color: #1a1a1a;
border-color: #42424C;
}
.dropdown-extended .header {
color: #fff;
background-image: linear-gradient(#120e7a, #09105a);
text-shadow: 1px 1px 1px black;
}
.headerbar {
background-image: linear-gradient(#120e7a, #09105a);
}
.inputbox {
background-color: #171717;
color: #ffffff;
}
.message-box textarea {
color: #fff;
}
.navbar {
background-color: #171717;
}
.panel {
background-color: #171717;
}
.forabg {
background-image: linear-gradient(#120e7a, #09105a);
border: 1px;
border-color: #fff;
}
.postlink {
color: #76c0ff !important;
border-bottom-color: #76c0ff !important;
}
.postlink:hover {
color: #619ED4;
border-bottom-color: #619ED4;
background-color: #192733;
}
.username-coloured {
color: #7A7AFF !important;
}
.vp-verified-badge {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(236deg) brightness(105%) contrast(103%);
}
.copyright {
color: #999;
}
.search-header {
box-shadow: 0 0 10px #999;
}
.dropdown .dropdown-contents {
background: #171717;
}
ul.forums {
background-image: linear-gradient(#171717, #171717);
}
ul.topiclist li {
color: #BAC6D9;
}
ul.topiclist dd {
border-left-color: #5E5454;
}
li.row strong {
color: #fff;
}
li.row:hover {
background-color: #303030;
}
dl.details dt {
color: #fff;
}
dl.details dd {
color: #c0d0ec;
}
input.button2 {
border-color: #aeaeae;
background: #464646;
color: #fff;
}
table.table1 td {
color: #eee;
}
.icon.icon-red {
color: #FF86A3;
}
.icon.icon-blue {
color: #76c0ff;
}
.icon.icon-gray {
color: #cacaca;
}
.bg1:hover .bg2:hover {
background-color: #353535;
}
.cp-main .pm {
background-color: #232323;
}
.panel-container .panel {
background-color: #232323;
}
.tabs .tab > a {
background: #252525;
border: 1px solid #828282;
color: #f0f0f0;
}
#navigation a {
background: #252525;
}
.cp-mini {
background: #252525;
}
dl.mini dt {
color: #d2d2d2;
}
.codebox {
background-color: #303030;
}
.codebox code {
color: #BCFFAF;
}Aktuell hat diese Seite das Problem, dass z.B. bei "Kackgeschichten" in vielen Bereichen der Seite nicht auf den ersten Blick ersichtlich ist, welche übergeordnete Kategorie das Forum hat. Das soll dieser Code beheben, indem er erstens bei Weiblich einen hellroten und bei Männlich einen hellblauen Hintergrund für den jeweiligen Schriftzug hinzufügt, sobald man mit der Maus darübergeht, und zweitens indem er ein M, W, P oder Q in Klammern dahinter schreibt. Wenn ihr nur an einer der jeweiligen Darstellungen interessiert seid, könnt ihr auch einfach nur den Bereich bei euch einfügen. Ich persönlich empfehle allgemein eher die Darstellung mit Buchstaben.
Code: Alles auswählen
/* Den folgenden Bereich kopieren für farblichen Hintergrund */
a[href="./viewforum.php?f=2"], a[href="./viewforum.php?f=3"], a[href="./viewforum.php?f=4"], a[href="./viewforum.php?f=5"], a[href="./viewforum.php?f=67"] {
text-shadow: 0px 0px 10px red;
transition: 0.4s;
}
a[href="./viewforum.php?f=2"]:hover, a[href="./viewforum.php?f=3"]:hover, a[href="./viewforum.php?f=4"]:hover, a[href="./viewforum.php?f=5"]:hover, a[href="./viewforum.php?f=67"]:hover {
background-color: pink;
color: black;
transition: 0.4s;
}
a[href="./viewforum.php?f=6"], a[href="./viewforum.php?f=25"], a[href="./viewforum.php?f=7"], a[href="./viewforum.php?f=24"], a[href="./viewforum.php?f=66"] {
text-shadow: 0px 0px 10px skyblue;
transition: 0.4s;
}
a[href="./viewforum.php?f=6"]:hover, a[href="./viewforum.php?f=25"]:hover, a[href="./viewforum.php?f=7"]:hover, a[href="./viewforum.php?f=24"]:hover, a[href="./viewforum.php?f=66"]:hover {
background-color: skyblue;
color: black;
transition: 0.4s;
}
/* Den folgenden Bereich kopieren für Kennzeichnung mit Buchstaben */
a[href="./viewforum.php?f=2"]::after, a[href="./viewforum.php?f=3"]::after, a[href="./viewforum.php?f=4"]::after, a[href="./viewforum.php?f=5"]::after, a[href="./viewforum.php?f=67"]::after {
content: " (W)";
}
a[href="./viewforum.php?f=6"]::after, a[href="./viewforum.php?f=25"]::after, a[href="./viewforum.php?f=7"]::after, a[href="./viewforum.php?f=24"]::after, a[href="./viewforum.php?f=66"]::after {
content: " (M)";
}
a[href="./viewforum.php?f=52"]::after, a[href="./viewforum.php?f=53"]::after, a[href="./viewforum.php?f=54"]::after, a[href="./viewforum.php?f=55"]::after, a[href="./viewforum.php?f=68"]::after {
content: " (Q)";
}
a[href="./viewforum.php?f=43"]::after, a[href="./viewforum.php?f=44"]::after, a[href="./viewforum.php?f=45"]::after, a[href="./viewforum.php?f=46"]::after, a[href="./viewforum.php?f=69"]::after {
content: " (P)";
}Wenn ihr Bilder in Beiträgen nicht sofort sehen wollt sondern euch für jedes Bild selbst überlegen wollt ob ihr es ansehen wollt, dann ist der folgende Style für euch geeignet. Dieser Style stellt alle Bilder so lange verschwommen dar, bis ihr diese mit der Maus berührt. Beim berühren eines Bildes mit der Maus wird es scharf dargestellt. Es gäbe dafür sicher bessere Implementierungen, aber so habe ich es bisher der Einfachheit halber gemacht:
Code: Alles auswählen
.postimage {
transition: 0.3s;
filter:blur(30px);
}
.postimage:hover {
filter:blur(0px);
transition: 0.3s;
}Viele Grüße.