WoltLab Cloud Style: DarkMode 5.5.2

Purchase Style: DarkMode

SPECIAL OFFER! Offer ends on October 31, 2023

-10%
EUR 19.99
EUR 17.99

A dark design in contrasting colours and an appealing layout for an individual community.

Style: DarkMode

A dark design in contrasting colours and an appealing layout for an individual community.


Only for a short time: €5, - discount! (€14,99 instead of €19,99)

Highlights

  • Dark theme in modern layout
  • More overview in the forum list
  • Color adjustments simply possible via style editor
  • Alternative format-filling design for the teaser slideshow
  • nice parallax scroll effect for the teaser slideshow (Demo!)
  • Your community becomes a impressive eye-catcher!

Recommended

WoltLab Cloud
File

Alternative "Who's on?" Box

A modern alternative to the "user online" box.
Darkwood.Design
May 11, 2022 at 11:08 AM
WoltLab Cloud
File

Gamification Box (user progress)

Provides a new box to motivate the user to level up to the next user rank.
Darkwood.Design
July 11, 2022 at 10:25 AM
WoltLab Cloud
File

Teaser Slideshow Pro

Allows you to create a modern slideshow with teaser as an eye catcher in your dashboard and/or forum.
Darkwood.Design
May 12, 2023 at 10:15 AM

Images

  • Version 5.5.2

    Fixed a script error that could occur in rare cases.

  • Version 5.5.1

    Missing package identifier was added

  • Version 5.5.0

    * Requires at least WoltLab Suite 5.5

  • Version 5.4.2

    the page logo is now also displayed on mobile

  • Version 5.4.1

    minor improvements

  • Version 5.4.0

  • Version 5.2.0

    Support for WoltLab Suite 5.2

  • Version 3.1.1

    • Profile information is now displayed in the profile
    • Icon size of "removed" icons has been corrected
    • SCSS was optimized
    • "messageSidebarWidth" can now be adjusted via SCSS variable
    • corrected white hover colors in some tables
    • "contentHeader" is now displayed on all pages

  • Version 3.1.0

December 16, 2020 at 3:50 PM

Ist das normal, dass die Labels in der Forenübersicht wie angelegt angezeigt werden, aber in der Themenübersicht dann nur einheitlich grau sind? Im Beitrag selber sind die Farben dann wieder wie angelegt :/
December 16, 2020 at 8:01 PM
Author

Melde dich gerne bei uns im Support-Bereich. Dann wird das geprüft. https://darkwood.design/support/
September 10, 2020 at 1:42 PM

Hallo,

wie kann ich auf der Startseite / Dashboard die Pfadleiste angezeigt bekommen? Auch wenn da nichts drin steht, möchte ich diese der Optik wegen drin haben.
September 10, 2020 at 2:40 PM
Author

Was genau meinst du mit "Pfadleiste"? Die Breadcrumbs (Verlaufsnavigation) sollte bereits wie gewohnt angezeigt werden. Wenn das bei dir nicht der Fall ist benötige ich einen Link zur Seite.
May 22, 2020 at 6:02 PM

Bei Umfragen sind keine Balken zu sehen, ist das so beabsichtig?
May 25, 2020 at 8:30 PM
Author

Nein, das wäre natürlich nicht ganz benutzerfreundlich. Erstelle dazu am besten ein Support-Ticket mit Link zur betroffenen Seite und einem Account um den Fehler zu reproduzieren: https://darkwood.design/support/
April 7, 2020 at 12:32 PM

Hallo, ich hätte da mal eine Frage. Wie aktiviere ich den Banner der auch auf den Screenshots zu sehen ist?

Wenn es dort eine möglichkeit gibt, freue ich mich über eine Antwort.

Liebe Grüße Firegun!
April 10, 2020 at 6:08 PM
Author

Wenn du den großen Slider meinst, kannst du das mit diesem Plugin in der Box-Position "Hero" umsetzen: Teaser Slideshow
February 25, 2020 at 12:34 AM

Die Navigationsleiste zeigt SoftCreatr's Scroll Down Pfeil nicht an, auch das Symbol für Collapsed Sidebar wird nicht Angezeigt.
October 7, 2019 at 6:49 PM

Hallo, ist es möglich einen Banner hochzuladen?

Wenn ja wie?
October 8, 2019 at 8:47 AM
Author

So wie in allen anderen Stilen auch über das interne Boxsystem an beliebiger Stelle. Für ein großflächiges "Banner" wie in den Screenshots empfehle ich das Plugin Teaser Slideshow in der Position "Hero".
February 2, 2019 at 3:04 PM

Hey ich habe ein problem, ich würde gerne eine Farbe ändern es sollte eigentlich $wcfTabularBoxBackgroundActive sein. Aber wenn ich das verändere sieht es ist es immer noch so.

Hier ist die Seite: https://piraty.net/statistics/ wenn man über die statistiken streicht, sieht man das die Farbe so weiß ist aber ich kann mir selbst nicht weiter helfen

Lg
February 3, 2019 at 7:28 AM
Author

Das kannst du am schnellsten via CSS lösen. z.B. so

Code
.htmlContent table tr:hover > td, .messageBody > .messageText table tr:hover > td, .messageSignature > div table tr:hover > td, .redactor-layer table tr:hover > td, .table tr:hover > td {
    background-color: red;
}
February 3, 2019 at 9:13 AM

Danke sehr
December 27, 2018 at 6:57 PM

Es lässt sich kein mobiles Logo anlegen.

December 29, 2018 at 2:40 PM
Author

Fehlermeldungen bitte direkt auf unserer Seite: https://darkwood.design/support/index/25-darkmode/

Das geht hier sonst unter.
December 27, 2018 at 6:43 PM

Hast du einen Tipp wie ich die Avatare im Dashboard (Letzte Aktivitäten) größer bekomme? Die sind sehr klein.
December 29, 2018 at 2:37 PM
Author

Per css. .userAvatarImage ist der Selektor, den du suchst.
February 15, 2019 at 12:24 PM

Hallo, ich komme nochmal darauf zurück. Ich möchte nur die Avatare im Dashbord größer bekommen. Der Selektor macht sie überall größer.
February 15, 2019 at 1:38 PM
Author

Dann musst du einfach die id der gewünschten Seite aus dem <body> nehmen. z.B:

#tpl_wcf_cms .userAvatarImage
December 27, 2018 at 6:33 PM

Hallo, wie bekomme ich die MessageSidebar in der Höhe auf die gleiche Höhe wie der Beitrag. Das sieht so leider etwas abgehackt aus,
December 29, 2018 at 2:36 PM
Author

per css.

z.B:

Code
.messageSidebar {
    align-self: stretch;
}
December 29, 2018 at 8:49 PM

Danke, das klappt
December 10, 2018 at 2:23 AM

Moin,

vielen Dank für diesen tollen Skin.

Ich habe drei Fragen bezüglich Anpassungen, die ich gerne machen möchte.

1. Wie passe ich die Farben der Buttons an (bspw. der Registrierungs- oder der Antwortbutton sind im Style-Editor selbst nicht angegeben)? Ich habe mit dem Code aus einem der anderen Kommentare außerdem die Hintergrundfarbe der aktuell gewählten App in der Navigation angepasst, das hat aber nur bei nicht-mobiler Darstellung funktioniert, im Ausklappmenü ist es noch immer blau, wie passe ich das an?

2. Gibt es eine Möglichkeit, die Avatare nicht rund zuzuschneiden, sondern (so wie sie hochgeladen werden) in viereckig darzustellen und am besten noch dafür zu sorgen, dass sie automatisch auf eine gewisse Größe skaliert werden?

3. Hier bin ich mir nicht sicher, ob das überhaupt durch den Stil gesteuert wird, aber gibt es die Möglichkeit, Forenposts grundsätzlich im Blocksatz darzustellen?

Vielen Dank!

Mit freundlichen Grüßen
December 15, 2018 at 9:56 AM
Author

1. Die Buttons und mobile Navigation verwendet einen Farbverlauf, welcher im individuellen CSS angelegt ist. Möchtest du diesen ändern musst du im CSS ganz oben die Variable $darkwoodBlue überschreiben.

2. Ja gibt es.

Code
.userAvatarImage {
border-radius: 0;
}

3. Geht alles ;)

Code
.messageBody > .messageText p {
text-align: justify;
}
December 25, 2018 at 8:04 PM

Moin,

vielen Dank für deine Antwort.

1: Das funktioniert leider nicht, irgendwas mache ich falsch. Ich habe in der ersten Zeile beim Stil/individuelles (S)CSS $darkwoodBlue: #333333; angegeben, bspw. der Registrierungsbutton sieht aber auch nach Löschen von Foren- und Browsercache so aus.

Die anderen Sachen haben problemlos funktioniert, danke dafür.

Mit freundlichen Grüßen
November 30, 2018 at 3:23 PM

Echt schöner Skin, doch leider mit ein paar Anzeigefehlern welche mich sehr stören: http://prntscr.com/lozs7o http://prntscr.com/loztrr

Kann ich das irgendwie fixen?
November 30, 2018 at 5:25 PM
Author

Da müsstest du vorerst selbst mit CSS etwas nachhelfen:

CSS
Gelöscht Icon anpassen:
.messageGroupList .messageDeleted .columnAvatar::before, .messageGroupList .messageDisabled .columnAvatar::before {
font-size: 24px!important;
}

.messageGroupList .messageDeleted .columnAvatar::before {
left: 4px!important;
}

Breite der Sidebar erhöhen:

CSS
@include screen-lg {
.messageSidebar {
flex: 0 0 180px!important;
}
}
November 30, 2018 at 5:29 PM

Danke, ich werd mal rumprobieren :) Wird das ganze dann irgendwann noch im Style selbst geändert?
November 30, 2018 at 5:34 PM

Trotzdem danke, hat erstmal geholfen! (:
November 30, 2018 at 5:37 PM
Author

Ein fix per Update ist geplant.
November 30, 2018 at 5:48 PM

Ok danke :)
October 25, 2018 at 12:23 AM

Hello,

When you create a table and point your cursor it highlights the row using white colour - like this:

https://image.ibb.co/grGxbV/Screens…at-23-21-50.png

So you have white text on white background - difficult to read.

How can we change the colour that is used to highlight the row?

Thank you.
October 29, 2018 at 7:06 PM

Anyone?
November 1, 2018 at 12:33 PM
Author

Please specify exactly which table row do you mean.
November 4, 2018 at 11:21 PM

Please see screenshot. When you highlight a row it highlights in white colour. How to change this color to something else?

https://i.imgur.com/DsFl35E.png
November 6, 2018 at 10:50 AM
Author

I see a white bar on the screen. Please specify exactly where you are and provide a screenshot of the complete screen.
November 6, 2018 at 11:46 PM

I am simply creating a new thread/post with a table inside of it.

https://i.imgur.com/agZ9inG.png
October 7, 2018 at 6:33 PM

Kannst Du bei Gelegenheit noch einen Fix für die Thread Übersicht nachschieben? Oder einen CSS Code?

https://i.imgur.com/dGkmnrG.png

Die Threads innerhalb eines Forums sehen ziemlich "verloren" aus. Danke!
October 12, 2018 at 4:53 PM
Author

Kann ich bei mir nicht nachvollziehen. Wurde an dem CSS oder Template etwas verändert? Falls nicht, benötige ich einen Adminaccount.
October 7, 2018 at 4:10 PM

Vermutlich nicht die letzte Frage (aus Dank haben wir bereits die Branding Free Version gekauft):

Einige Buttons bleiben "blau", obwohl in den Settings (via Color Palette) die Farben angepasst sind. Wie kann ich diese Buttons einfärben?

z.B.

Register Button

https://i.imgur.com/Ioa2hGA.png

Post / Reply Buttons

https://i.imgur.com/Flygjac.png
October 7, 2018 at 1:31 AM

Und: Hast Du einen CSS Tipp, wie wir die Avatar in der Thread-Ansicht im Forum etwas größer darstellen? Aktuell verdeckt die "Online" Anzeige zB. gut 1/3 des Avatars.
October 7, 2018 at 8:57 AM
Author

z.B: so

CSS
.columnAvatar .userAvatarImage {
    width: 36px!important;
    height: 36px!important;
}
October 7, 2018 at 2:52 PM

Danke!
October 7, 2018 at 1:05 AM

Und noch eine Frage zu den Farbeinstellungen: Die Active Farbe des Main Menus lässt sich offenbar nicht mit der Woltlab Color Palette einstellen. Hast Du den passenden CSS Code zur Hand, um das Orange zu verändern? Danke!
October 7, 2018 at 8:55 AM
Author

Das Menü verwendet die Farbe "$darkwoodRed", welche im CSS des Stil definiert ist. Den Farbcode dafür kannst du entweder global ändern (dann bekommt alles mit dieser Variable eine andere Farbe), oder du änderst das direkt im CSS des Menüs.

Suche dafür folgenden Code:

Und ersetzte $darkwoodRed mit deinen gewünschten Farbcode (z.B. $wcfHeaderMenuLinkActive oder #ff0000;)
October 7, 2018 at 1:03 AM

Eine Frage zu den Vorschau Bildern in der Theme Beschreibung. Da hat das Menü eine Hintergrund Grafik und darunter eine Box mit dem selben Hintergrund und Text samt "Mehr erfahren"-Box. Ist das nur ein Beispiel für eine selbst zu erstellende Box, oder ist das Template mit enthalten und ich finde es nur nicht? Nach Installation ist es bei uns jedenfalls nicht zu sehen (https://dayzmodz.com/forum/). LG
October 7, 2018 at 8:49 AM
Author

Dabei handelt es sich um diesen Punkt aus den Highlights "Alternatives formatfüllendes Design für die Teaser Slideshow" - damit ist dieses Plugin gemeint:

woltlab.com/pluginstore/file/1557/

Sobald du den Slider in der Position "Hero" einfügst, passt er sich automatisch entsprechend der Vorschaubilder an.
October 6, 2018 at 11:51 PM

Hey.

Habe eine Frage zum Design. Beim erstellen eines neuen Threads schreibt man den Content praktisch auf dem Hintergrund.

Gibt es eine Möglichkeit die Box genauso anzupassen wie Subjects bzw. Tags?

Siehe Bild für Verständnis > Bild

Auf der Seite "Search Users" haben die Boxen ebenfalls einen weißen Hintergrund und keinen "grauen".

Gibt es hier auch die Möglichkeit dies abzuändern? > Bild
October 7, 2018 at 4:11 PM

Ja, das interessiert mich auch.

In der Thread Übersicht eines Forums fehlen m.M. nach auch "Führungsoutlines" zur Orientierung:

https://i.imgur.com/rxwr634.png

Wirkt sonst etwas verloren..
February 24, 2019 at 4:01 AM

Gibt es dafür eine Lösung? Würde es auch gerne mit einem Rahmen versehen.
February 24, 2019 at 9:00 AM
Author

Das könnt ihr per CSS anpassen. z.B. so:

CSS
.redactor-layer {
padding: 10px;
border-radius: 4px;
border: 1px solid rgba(59, 62, 67, 1) !important;
background: rgba(41, 42, 44, 1) !important;
color: rgba(209, 213, 216, 1) !important;
}
October 5, 2018 at 6:23 PM

Hey! Gibt es die Möglichkeit, die ganz linke Spalte (Username etc.) woanders hinzuschieben? Wir würden gerne 2-spaltig bleiben, sprich Content (z.B. Forum) u. Boxen.
October 6, 2018 at 10:22 AM
Author

Ja natürlich. Das Layout kann wie gewohnt pro Seite beliebig konfiguriert werden. Egal ob 1,2 oder 3 Spalten. Dafür müssen nur die Seiten/Boxen im ACP entsprechend konfiguriert werden.
October 6, 2018 at 11:35 AM

Vielen Dank! Dann sind wir restlos überzeugt :)
July 28, 2018 at 2:22 PM

Wie geht es Version 3.1.0?

Ich hab Version 3.0.16
July 29, 2018 at 9:36 AM
Author

Ich verstehe die Frage nicht. Alle Informationen zur Kompatibilität findest du in der Übersicht des Plugins.
July 18, 2018 at 7:44 PM

Hallo,

in der Vorschau ist der Teaser im "Breitbild" Format.
Bei mir im Forum, ist es jedoch nur sehr begrenzt, wirkt mehr nach "4:3".

https://share.syntafin.de/fotos/images/7…44a3bfafaa2.png

Wie genau kann man den so breit wie die Seite anzeigen lassen?
July 19, 2018 at 10:33 AM
Author

Die Box ist als "Hero" eingestellt?

Womöglich muss du die Abmessungen in den Einstellungen des Teaser-Sliders noch anpassen oder das hochgeladene Quellbild in passenden Auflösung hochladen.
July 19, 2018 at 2:39 PM

Bilder sind im 16:9 Format (3840x2160). Teaser ist "entsprechend eingestellt". Soweit wie möglich jedenfalls.
July 19, 2018 at 5:27 PM
Author

Dann bitte mal Link mit Adminaccount schicken.
July 20, 2018 at 10:39 PM

Ähm Link zum Forum, mit Admin-Account dazu?

Forum wäre:

https://zimboard.de
July 21, 2018 at 5:19 PM

Ein Fehlverhalten bei der Artikel-Ansicht konnte ich auch feststellen:

https://zimboard.de/index.php?arti…es-wsc-connect/

Als Beispiel :)
June 19, 2018 at 9:57 PM

Toller Stil.

Nur als Problem mit der "Angemeldet als" - Box, das zulange Namen nach unten in das "Badge" rutschen. Wie kann man die vergrößern oder gleich die komplette Leiste?

http://i.epvpimg.com/YTFFbab.png
June 28, 2018 at 11:03 AM
Author

Je nach Länge wirst du immer wieder das "Problem" haben - wobei ich finde, dass das gut passt. Solltest du die Seitenleiste dennoch auf Kosten des Content-Bereich verbreitern möchten, kannst du das per CSS tun.

Code
.sidebar.boxesSidebarLeft {
flex: 0 0 168px;
}
June 6, 2018 at 12:50 AM

Can someone please explain how to add a background image in the header? And how to enable parallax scroll effect ?

Thank you
June 6, 2018 at 8:51 AM
Author

You need this Plugin:

woltlab.com/pluginstore/file/1557/

- and add it at "Hero" Position.
June 6, 2018 at 11:56 AM

Sorry i could not get this to work.

1) I created new slided and added picture to it: https://i.imgur.com/aELvihe.jpg

2) Teaser Slideshow is a "Hero" box : https://i.imgur.com/pF0XRPh.jpg

3) Configured to show image: https://i.imgur.com/8a7Vkcu.jpg


But i have no image in the header. What am i doing wrong ?
June 6, 2018 at 1:09 PM
Author

Did you select a page and checked the group permissions?
June 6, 2018 at 2:23 PM

Thank you! I did not set it to be "Visible"

Thanks again1
June 7, 2018 at 1:37 AM

Is it possible to remove the Text from the slide image and Blue line? I cannot add slider image without title.

Thank you
May 25, 2018 at 3:17 PM

Kann man das Menü oben nicht ganz Tranparent machen das man ganz leicht denn hintergrund sehen kann sonst muss da immer was änderen wenn neues bild zeige .... http://farsight-tv.de
May 25, 2018 at 5:16 PM
Author

Ich versteh die Frage nicht. Unter dem Link von dir sehe ich auch nichts.
May 25, 2018 at 5:46 PM

Wenn z.b ein Kino Wallpaper oben reinstelle dann kann das Menü nicht sehen .....Aber das ich es net ändern muss wollte ich wissen ob man wenn das Menü Transparent ist es so machen das nicht ganz Transparent sondern einen leichten dunkler Hintergrund hat so das man bei einem hellen bild das Menü noch sehen kann.
May 25, 2018 at 7:15 PM
Author

Ja das ginge per CSS.

Beispiel

#pageHeaderPanel {

background-color: rgba(45, 46, 48, 0.3)!important;

}
May 25, 2018 at 7:25 PM

Ja genau aber nur für Home Seite
May 25, 2018 at 7:31 PM
Author

na dann einfach #tplDeineHomeSeite davor schreiben (je nach dem welches deine Homeseite ist)
May 25, 2018 at 5:27 AM

Gibt es keine Demo dafür? :(
May 25, 2018 at 8:35 AM
Author

Nein, ich habe aktuell generell kein Demo Forum, daher lade ich so viele Screenshots wie möglich hoch. Falls du Fragen hast, kannst du dich jederzeit melden.
May 25, 2018 at 2:22 PM

Der Stil ist aber dem Legday ähnlich?
May 25, 2018 at 5:16 PM
Author

Ja das ist korrekt. Die Vorlage für den Stil ist der Legday: DarkMode

Customers Who Bought This Plugin Also Bought

  1. Community Bot

    • Darkwood.Design
    • September 21, 2023 at 9:27 AM
    • (6)
    New The 'Swiss Knife' for your community.
    EUR 19.99 EUR 17.99
    • Like 38
    • 3k Downloads
    • 1k Purchases

  2. WoltLab Suite: Ticket System

    • Darkwood.Design
    • September 12, 2023 at 10:42 AM
    New An comfortable ticket system for reporting support tickets and software bugs.
    WoltLab Cloud
    EUR 49.99
    • Like 20
    • 2.3k Downloads
    • 664 Purchases

  3. Modern Shoutbox Pro

    • Darkwood.Design
    • September 7, 2023 at 11:27 AM
    • (13)
    New This plugin provides a clean and modern shoutbox for your community.
    WoltLab Cloud
    EUR 9.95
    • Like 292
    • 20k Downloads
    • 4.9k Purchases

  4. Teaser Slideshow Pro

    • Darkwood.Design
    • May 12, 2023 at 10:15 AM
    • (3)
    Allows you to create a modern slideshow with teaser as an eye catcher in your dashboard and/or forum.
    WoltLab Cloud
    EUR 12.99
    • Like 87
    • 3.4k Downloads
    • 1.1k Purchases