WoltLab Cloud Style: DarkMode 5.4.2

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
Darkwood.Design: Branding-Free-Licence
Removes the visible copyright from all styles of Darkwood.Design.
Darkwood.Design
WoltLab Cloud
File
Alternative "Who's on?" Box
A modern alternative to the "user online" box.
Darkwood.Design
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
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

Images

Like 6 Thanks 1

  • 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
    Like 2

  • Version 3.1.0

    Like 1

  • 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 :/

  • 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.

    • 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.

  • Bei Umfragen sind keine Balken zu sehen, ist das so beabsichtig?

    • 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/

  • 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!

  • Die Navigationsleiste zeigt SoftCreatr's Scroll Down Pfeil nicht an, auch das Symbol für Collapsed Sidebar wird nicht Angezeigt.

  • Hallo, ist es möglich einen Banner hochzuladen?


    Wenn ja wie?

    • 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".

  • 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

    • 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;
}

    • Danke sehr

  • Es lässt sich kein mobiles Logo anlegen.

  • Hast du einen Tipp wie ich die Avatare im Dashboard (Letzte Aktivitäten) größer bekomme? Die sind sehr klein.

    • Per css. .userAvatarImage ist der Selektor, den du suchst.

    • 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.

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

      #tpl_wcf_cms .userAvatarImage

  • 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,

  • 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

    • 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;
}

    • 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

  • 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?

    • 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;
}
}

    • Danke, ich werd mal rumprobieren :) Wird das ganze dann irgendwann noch im Style selbst geändert?

    • Trotzdem danke, hat erstmal geholfen! :)

    • Ein fix per Update ist geplant.

    • Ok danke :)

  • Hello,


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

    https://image.ibb.co/grGxbV/Sc…018-10-24-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.

  • 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!

    • Kann ich bei mir nicht nachvollziehen. Wurde an dem CSS oder Template etwas verändert? Falls nicht, benötige ich einen Adminaccount.

  • 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

  • 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.

  • 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!

    • 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;)

      Like 1

  • 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

    • 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.

      Like 1

  • 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

    • 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..

    • Gibt es dafür eine Lösung? Würde es auch gerne mit einem Rahmen versehen.

    • 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;
}
      Like 1

  • 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.

    • 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.

      Like 1

    • Vielen Dank! Dann sind wir restlos überzeugt :)

      Like 1

  • Wie geht es Version 3.1.0?


    Ich hab Version 3.0.16

    • Ich verstehe die Frage nicht. Alle Informationen zur Kompatibilität findest du in der Übersicht des Plugins.

  • 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/foto…360-a1e6-644a3bfafaa2.png


    Wie genau kann man den so breit wie die Seite anzeigen lassen?

  • 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

    • 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;
}

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


    Thank you

  • 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

    • Ich versteh die Frage nicht. Unter dem Link von dir sehe ich auch nichts.

    • 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.

    • Ja das ginge per CSS.


      Beispiel


      #pageHeaderPanel {

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

      }

    • Ja genau aber nur für Home Seite

    • na dann einfach #tplDeineHomeSeite davor schreiben (je nach dem welches deine Homeseite ist)

  • Gibt es keine Demo dafür? :(

    • 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.

    • Der Stil ist aber dem Legday ähnlich?

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

Customers Who Bought This File Also Bought

  1. WoltLab Suite: Ticket System

    • Darkwood.Design
    An comfortable ticket system for reporting support tickets and software bugs.
    WoltLab Cloud
    EUR 39.95
    • 2k Downloads
    • 607 Comments
    • 610 Purchases
    • Like 20

  2. Gamification Box (user progress)

    • Darkwood.Design
    Provides a new box to motivate the user to level up to the next user rank.
    WoltLab Cloud
    EUR 3.99
    • 643 Downloads
    • 102 Comments
    • 299 Purchases
    • Like 12

  3. Several rank graphics 3

    • Cyperghost
    • (3)
    This plugin improves the rank graphics system of the WSC3.0/WSF5.0
    WoltLab Cloud
    EUR 4.17
    • 2.7k Downloads
    • 451 Comments
    • 1.1k Purchases
    • Like 16

  4. Teaser Slideshow Pro

    • Darkwood.Design
    • (2)
    Allows you to create a modern slideshow with teaser as an eye catcher in your dashboard and/or forum.
    WoltLab Cloud
    EUR 12.99
    • 3.1k Downloads
    • 849 Comments
    • 1k Purchases
    • Like 85