Skip to main content
Bel gratis en anoniem 0800 - 0432 of chat

De Kindertelefoon.nl
Hoi allemaal, ik ben momenteel bezig met een zogenaamd "dark"- thema voor het forum! Dit zorgt ervoor dat alle felle lichte kleuren worden vervangen met zachte donkere kleuren. Ik ben bezig om dit te maken voor de website op de computer. Voor de telefoon is dit helaas niet mogelijk.

Het is veel werk en zal wel even duren maar als je het nu al wilt uitproberen kan dat! Je kan in de eerste spoiler zien hoe dit moet.







Wees wel bewust dat dit de allereerste versie is en er nog veel niet klopt/ goed uitziet. Ik zal de code in deze post elke keer dat ik eraan gewerkt heb updaten, dan kunnen jullie hem gewoon kopiëren. Ook zal ik onderaan zetten wat ik heb veranderd.



Ik hoop dat jullie het wel een leuk idee vinden en het misschien uit willen proberen.

Voor degene die het uitproberen zouden jullie willen reageren met wat beter kan/ wat nog mist/ wat anders kan. Alvast heel erg bedankt!



Hoe moet je het installeren:

  • Stylus extensie voor je browser.
Je moet als eerst de extensie Stylus installeren in je browser, deze extensie zorgt ervoor dat je zelfgemaakte thema's kan gebruiken.


  • Mijn thema installeren.
Als tweede stap moet je mijn thema installeren. Dit doe je door naar de instellingen van Stylus te gaan vervolgens op "Manage" te klikken daarna op "Write new style" en vervolgens moet je de code in de volgende spoiler kopiëren en plakken daarna moet je alleen nog op "Save" drukken en dan zou het moeten werken. Als het niet werkt laat dan een reactie achter en zal ik je zo goed mogelijk proberen te helpen.



In de volgende spoiler is de code voor mijn thema te vinden.
code:
body {
 background-color: #272727;
 color: #ffff;
}
.ssi .nav--main, .ssi .navbar {
 background-color: #272727;
}
.ssi .nav--main a {
 color: #ffff;
}
.main-navigation--wrapper {
 background-color: #272727;
 border-bottom: 1px solid #575757;
 border-top: 1px solid #575757;
}
.main-navigation--wrapper .main-navigation--nav-buttons-wrapper .main-navigation-btn-forum {
 color: #ffff;
}
.stats-bar {
 background-color: #272727;
 color: #ffff;
}
.Template-brand-cta .cta-widget {
 background-color: #272727;
}
.widget--cta .list li .list--label {
 color: #ffff;
}
.stats-bar .list strong {
 color: #ff9600;
}
.ssi .topbar {
 background-color: #ff9600;
 color: #fff;
}
.widget--featured-topics .featured-topic {
 background-color: #272727;
 border: 1px solid #575757;
}
.link {
 color: #ffff;
 cursor: pointer;
}
.sections__nav>.tabs--nav__container .tabs--nav .tabs--navigation>.tabs__item>a.is-active, .sections__nav>.tabs--nav__container .tabs--nav .tabs--navigation>li>a.is-active, .sections__nav>.tabs--nav__container .tabs--nav ul>.tabs__item>a.is-active, .sections__nav>.tabs--nav__container .tabs--nav ul>li>a.is-active, .sections__nav>.tabs--navigation>.tabs__item>a.is-active, .sections__nav>.tabs--navigation>li>a.is-active, .sections__nav>ul>.tabs__item>a.is-active, .sections__nav>ul>li>a.is-active {
 color: #ffff;
 border-bottom-color: #ff9600;
}
.notification {
 background-color: #ff9600;
}
.text--meta, .widget--tabs .tabs .widget .box__pad .m-v-S .link {
 color: #ffff;
}
.Sidebarmodule .widget .username {
 color: #ff9600;
}
.ssi .section--subfooter {
 background-color: #ff9600;
 color: #fff;
}
.box {
 background-color: #272727;
}
.thread-list-item .thread-list-block__content a {
 color: #ffff;
}
.thread-list-block__title {
 color: #ffdb83;
}
.thread-list-item {
 border: 1px solid #575757;
}
.load-more-container {
 border: 1px solid #575757;
}
.Template-brand-cta {
 border-bottom: 1px solid #575757;
 background-color: #272727;
}
.twig_site-index .Template-brand-stats {
 border-bottom: 1px solid #575757;
}
.topic__title {
 line-height: 1.2;
 font-weight: 600;
 color: #ff9600;
}
.post--bestanswer {
 border: 1px solid #ff9600;
 background: #272727;
}
.twig_page-topic .box__content>.box {
 border: 1px solid #575757;
}
.list__items--header {
 border-top: 1px solid #575757;
 border-bottom: 1px solid #575757;
}
.answer-field {
 border: 1px solid #575757;
 padding: 16px 32px 16px 48px;
 margin-top: 16px;
 margin-bottom: 16px;
 width: 100%;
 background: #575757;
 position: relative;
}
.forum-list h2 .link {
 color: #ff9600;
}
.link--featured-title, .link--subforum {
 color: #ff9600;
}
.forum-list>.box {
 border-bottom: 0px solid #00bfff;
}
.twig_site-index .forum-list {
 border: 0px solid #00bfff;
}
.wysiwyg-editor .wysiwyg-editor__textarea .ql-editor {
 color: #ffff;
}
.threadCode pre {
    background: #000000;
}
.wysiwyg-editor .wysiwyg-editor__textarea .ql-editor pre.ql-syntax.ql-blockquote-item:not(.ql-quote-spoiler-item):before, .wysiwyg-editor .wysiwyg-editor__textarea .ql-editor pre.ql-syntax.ql-spoiler-item:before {
    background-color: #000;
}
.wysiwyg-editor .wysiwyg-editor__textarea .ql-editor pre.ql-syntax:not(.ql-blockquote-item):not(.ql-quote-spoiler-item):not(ql-spoiler-item) {
    background-color: #000000;
}




Veranderingen in de code zijn hieronder te vinden:25-4-2019 Eerste versie;

Alle witte kleuren in de achtergrond veranderd naar grijs/zwart

Alle paarse kleuren veranderd naar oranje

Alle tekst veranderd van donkergrijs naar wit
Het ziet er interessant uit.

Heel wat andere sites en apps hebben die optie al, wat zeker fijner is bij lagere licht-niveau's.

Ik vraag mij af of het huidige kleurenpalet wel goed uitkomt met het donkere thema, maar wat je nu hebt gedaan lijkt te werken.
Hey!



Wauw, cool dat je zo bezig bent met dit soort programmatie, en dat je het op de KinderTelefoon wilt uittesten! Ik vind het ook echt mooi gelukt!
Ik heb hier even de download links voor stylus op een rijtje gezet:

Verder heb ik nog een aantal kleine dingen geupdate:

-Opties voor reacties zijn nu ook zwart. (Link naar reactie/ rapporten)

-Profiel witte randen veranderd

-Overige dropdown-menus kleuren aangepast

-Sticky-posts kleuren aangepast.



Om een of andere reden kan ik mijn originele post niet bewerken dus voor nu post ik de updates in de reacties.
code:
.tooltip--day.tooltip .tooltip__content, .tooltip--day.tooltip .tooltip__content--left, .tooltip .tooltip__content--publish-date, .wysiwyg-editor__mention--tooltip {
    background: #272727;
    color: #575757;
}
.dropdown {
    background: #272727;
    border: 1px solid #575757;
}
.Sidebarmodule .widget .widget-title {
    color: #ff9600;
}
.box--user-activities {
    border: 1px solid #575757;
}
.table .table__cell, .table .table__row--thead>.table__cell {
    border-bottom: 1px solid #575757;
}
.userprofile-personal {
    border: 1px solid #575757;
}
.user-statistics {
    border: 1px solid #575757;
}
.box--profile-fields, .box--user-badges {
    border: 1px solid #575757;
}
.main-navigation--wrapper .main-navigation--nav-buttons-wrapper .dropdown--forums-overview .list--collapsible .has--child>ul {
    background-color: #272727;
}
.main-navigation--wrapper .main-navigation--nav-buttons-wrapper .dropdown--forums-overview * {
    color: #fff;
}
.thread-list-item.thread--feature-sticky {
    border-top: 1px solid #575757;
    border-bottom: 1px solid #575757;
    background: #272727;
}
.list__items--header {
    border-right: 1px solid #575757;
    border-left: 1px solid #575757;
}
.thread--unread .thread-list-block__title {
    color: #ffdb83;
}


Deze code moet je gewoon achteraan de originele code plakken.
Hoi,



Leuk dat je dit doet!



Om een of andere reden kan ik mijn originele post niet bewerken... Dat komt omdat je je post maar een beperkte tijd kan bewerken en daarna kan het niet meer. Ik weet ook niet precies hoe het werkt.



Gr. Pin
Gebruik samsung internet op je telefoon, bij mij is dit forum altijd al zwart xD
Gebruik samsung internet op je telefoon, bij mij is dit forum altijd al zwart xD

Nee man, ik kom 90% van de tijd op dit forum als ik op m'n pc zit. En bovendien gebruik ik de opera browser op mijn telefoon en computer waardoor ik nooit advertenties heb, ingebouwde VPN en gesynchroniseerde tabbladen ook heb ik WhatsApp geïntegreerd op de pc, ik denk niet dat ik ooit zal veranderen 😂.
Gebruik samsung internet op je telefoon, bij mij is dit forum altijd al zwart xD

Ik gebruik ook Samsung Internet, maar bij mij is alles gewoon wit.
Ik ben benieuwd of iemand al geprobeerd heeft om het thema te installeren :P



Als iemand het geprobeerd heeft maar niet gelukt is reageer met wat er niet goed ging en misschien kan ik dan helpen.

Reageer


Toon alle badges
ForumvoorwaardenCookie instellingen
Bel gratis en anoniem
0800-0432 of kom chatten

Elke dag van 11:00 tot 21:00 uur
Of praat met anderen op het forum