Jump to content
The Dark Mod Forums

datiswous

Recommended Posts

There's no forum feedback section, so I post it here.

So I think the Dark forum theme is not dark enough (for me) and some of the graphics are not good. So I did some css edits and implemented these on the forum via the Stylus plugin for Firefox (or Chrome). There are other solutions to directly alter forum css, but I will not go into that for now.

To make it look properly you have to first activate the default dark theme of this forum (which is weird enough not the default theme), if you've not done that yet (scroll to the bottom middle part of the forum, where there's a pulldown menu called theme).

Here is my current code:

Spoiler
/* Remove grey background from top menu and some other places */
#ipsLayout_header nav,
#ipsLayout_header nav::after,
.ipsButtonBar,
.ipsComposeArea_dummy,
.ipsComposeArea_editor,
[data-ipseditor],
.ipsAreaBackground_light,
.ipsType_sectionTitle,
.ipsDataList.ipsDataList_zebra .ipsDataItem:not(.ipsDataItem_selected):not(.ipsModerated):not(.ipsDataItem_new):not(.ipsDataItem_success):not(.ipsDataItem_warning):not(.ipsDataItem_error):not(.ipsDataItem_info):not(.ipsDataItem_status):nth-child(2n),
.ipsAreaBackground_reset,
.ipsPad {
    background: none;
}
/* change certain buttons to a darker grey */
.ipsApp .ipsButton_important, .ipsWidget_title {
    background: rgb( var(--theme-light_button) );
}
/* make border around forum index more subtle */
.ipsBox,
hr.ipsHr {
    border: 1px solid #0f1013;
}
/* darken most sections */
.ipsBox:not(.ipsBox_transparent):not(.ipsModerated) {
    background: #060606;
}
/* Make index table lines darker */
.ipsType_sectionTitle,
.ipsWidget.ipsWidget_horizontal .ipsWidget_title,
.ipsDataItem,
.ipsButtonBar {
    border-bottom: 1px solid #0f1013;
}
/* Darker looking Main index speech icons */
.ipsItemStatus.ipsItemStatus_large, .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read, .cBestAnswerIndicator_off {
    background: none;
    border: 1px solid #333;
}
/* Darker pinned topic icon */
.ipsBadge.ipsBadge_icon.ipsBadge_small, .ipsBadge.ipsBadge_icon {
    background: #111;
    border: 1px solid #333;
}
.ipsBadge, .ipsBadge.ipsBadge_normal{
    --badge--color: #dddada;
}
/* Better looking like etc. buttons */
.ipsReact_reactCount,
.ipsReact_reactCount > a > span:last-child {
    background: none;
    border: none;
}
/* readable text in code block when no syntax higlighting is applied */
.ipsCode {
    color: black;
    filter: invert(1);
}
/* Darker color for all font on site */
body {
    color: #b0b0b0;
}
/* Mobile view top bar remove color */
#elMobileNav {
    background: none;
}
/* Lighter profile buttons */
#elUserNav {
    color: #999;
}
/* Black background expanded topic view */
.ipsBox:not(.ipsBox_transparent):not(.ipsModerated){
    background: none;
}
.ipsDataItem {
    background: none;
}
/* change topic view buttons */
.ipsApp .ipsButton_veryLight {
    background: none;
}
/* count number */
.ipsCommentCount {
    color: #787878
}
.ipsFaded {
    opacity: 0.6;
}
/* Make quoted code look normal */
.ipsQuote .ipsCode {
    background-color: #8e8e8e;
}

 

You can try it out and see how it looks.

It also improves the looks of the like buttons on the side.

I keep tweaking it and updating this post, so it might not completely look like in the supplied screenshots.

 

Summery of extra custom edits that are more opinionated:

Spoiler
/* Changes to the banner fiew */
#elLogo img {
    z-index: 1; /* pull out banner image */
    margin-top: auto; /* to show the full image */
}
#elMobileNav {
    margin-top: 3%; /* banner doesn't overlap mobile menu */
}
#ipsLayout_header nav {
    margin-top: 13px; /* banner doesn't overlap non-mobile menu */
}
/* remove rocket rank badge and shield icon from mods */
.cAuthorPane_badge {
    display: none;
}

 

 

tdm-forum-style2.jpg

tdm-forum-style1.jpg

Edited by datiswous
add better code fore code view
  • Like 2
Link to comment
Share on other sites

The code blocks look kind of ugly, too bright. Problem is that if I want to darken that, I also have to change all the colors for the syntax highlighting.

If I would darken the code block background, it would look ok, but other kind of code (css for example) becomes unreadable.

Edit: This can be fixed with code:

.ipsCode { filter: invert(1); }

Thanks @Oktokolo for the code.

As an example how a code block becomes unreadable sometimes, this post (activate forum dark theme to see):

https://forums.thedarkmod.com/index.php?/topic/20363-external-monitor-mirroring-laptop-monitor-in-linux/&do=findComment&comment=446880

 

Edit: The reason for this (the last part) is that there is color css missing for the code block with non-formatted code. So if you would add:

.ipsCode {
color: black;
}

The non-formatted code in a code block becomes readable.

Edit2: The reason for this, is that it previously was used as a way to hide text.

Edited by datiswous
Link to comment
Share on other sites

Btw. what I generally found strange is that in the main dark theme the left part of the banner goes behind the top forum section.

afbeelding.png.d5f00579a1fa1de0afe6053390a0c2b6.png

To fix this z-index code can be added:

#elLogo img {
  z-index: 1;
}

But then the logo moves over the top part of the forum, which is also not perfect (although I think it's ok).

To fix this some space can be added:

#ipsLayout_header nav {
margin-top: 2px;
}

 

Edit: I just found out that the banner image is cut of at the top. To show it fully:

/* Fixes to the banner fiew */
#elLogo img {
    z-index: 1; /* pull out banner image */
    margin-top: auto; /* to show the full image */
}
#elMobileNav {
    margin-top: 3%; /* banner doesn't overlap mobile menu */
}
#ipsLayout_header nav {
    margin-top: 13px; /* banner doesn't overlap non-mobile menu */
}

 

Edited by datiswous
Link to comment
Share on other sites

On 3/19/2021 at 10:27 PM, taaaki said:

Will have a look at this after the pending system updates.

Following will purely fix things, without really modifying existing dark theme:

/* Better looking liked post icon */
.ipsReact_reactCount,
.ipsReact_reactCount > a > span:last-child {
    background: none;
    border: none;
}
/* Readable code block when no syntax highlighting  is aplied */
.ipsCode {
    color: black;
}
/* Fixes to the banner fiew */
#elLogo img {
  z-index: 1;
}
#ipsLayout_header nav {
margin-top: 2px;
}

 

Code block without syntax highlighting applied.

 

Edited by datiswous
  • Like 1
Link to comment
Share on other sites

Very excited for any kind of dark theme.

I miss when the forums did not light my entire room at night.

I like to record difficult stealth games, and right now you wonderful people are the only ones delivering on that front.

Click here for the crappy channel where that happens.

Link to comment
Share on other sites

18 hours ago, datiswous said:

 

You have the light theme applied with some darkening browser plugin?

I am using Dark Mode in the browser Flags, this give the dark filter, if it need in every page, include Google Store. Apart of this, Vivaldi, the browser I use, has a invert filter among others in the page actions menu. I have also the Dark Reader extension, but only for ajust the light and contrast level, not realy needed.

Flags setting

vivaldi://flags (or chrome://flags if you use Chrome) in the adressbar>Enter and in the page search Dark Mode 

VSJrbrQ.png

 

Restart the browser and you have dark theme in every page (if they don't have it as default, it is irrelevant, always appears in dark theme).

Edited by Zerg Rush

Sys Specs Laptop Lenovo V145 15AST, AMD A9- 9425 Radeon R5 - 5 cores 3,1 GHz  RAM 8Gb, GPU 1+2 Gb -Win10 64 v21H2

Favorite online apps you may like too 😉

Link to comment
Share on other sites

Having the website background as the forum background is also cool. A little busy, but I try it out anyway.

forum-bg.jpg.ad1fc9aa93f09e5d1abaec1490cbdb5b.jpg

Code:

Spoiler
body {
    background-image: url(https://www.thedarkmod.com/wp-content/themes/thedarkmod/images/background1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#ipsLayout_header header {
    background-color: rgba(0, 0, 0, 0);
}

 

 

Edited by datiswous
code for tdm background
  • Like 1
Link to comment
Share on other sites

It would be something strange but possible in Vivaldii, since it has as its background and theme the desktop of the OS optional, but it supports any other configuration, you even have the possibility to directly enter CSS codes, if the configuration is not enough. It is a very addictive browser and very different from any other.

 

 

Sys Specs Laptop Lenovo V145 15AST, AMD A9- 9425 Radeon R5 - 5 cores 3,1 GHz  RAM 8Gb, GPU 1+2 Gb -Win10 64 v21H2

Favorite online apps you may like too 😉

Link to comment
Share on other sites

In both Chrome and Firefox you can press the F12 key. Then you get a hover over page where you can change html and css of the current active page and you can directly see how it looks, but not save it. If you're happy with the applied code changes, you can use Stylus plugin to save the changes for that website specific (copy over the code changes). The code from Stylus overides the default website styles. Every time you load that website these changes are applied. At least this is how I do it.

Edited by datiswous
Link to comment
Share on other sites

11 hours ago, datiswous said:

In both Chrome and Firefox you can press the F12 key. Then you get a hover over page where you can change html and css of the current active page and you can directly see how it looks, but not save it. If you're happy with the applied code changes, you can use Stylus plugin to save the changes for that website specific (copy over the code changes). The code from Stylus overides the default website styles. Every time you load that website these changes are applied. At least this is how I do it.

Same in Vivaldi, F12 open the dev tools, but apart from this and flags, in Vivaldi you have a Page actions Menu

vFkmrvu.png

and you can add a CSS file directly in the settings page

zMTV6HK.png

I can use Chrome extensions, but most of them in Vivaldi are redundant

Try to put f.Exmpl the Chrome Store in Dark Theme with Stylus, Vivaldi can do it, also in Mobile

0zo7dDo.png

 

Edited by Zerg Rush
  • Like 1

Sys Specs Laptop Lenovo V145 15AST, AMD A9- 9425 Radeon R5 - 5 cores 3,1 GHz  RAM 8Gb, GPU 1+2 Gb -Win10 64 v21H2

Favorite online apps you may like too 😉

Link to comment
Share on other sites

With larger topics there is a summery sidebar on the right. I find it not very useful, so I use this code to remove it from view:

/* disable forum posts sidebar */
#ipsLayout_sidebar {
    display: none;
}

This makes the forum-posts section wider and thus (i.m.o.) easier to read.

 

           

Edited by datiswous
Link to comment
Share on other sites

  • 3 weeks later...

Today I tried to implement this on my (Android) smartphone, because I also often read TDM forum on mobile. Turns out this is difficult to archive because most browsers have limited or no extension support. An userContent.css or such is also not supported. The Kiwi browser (Android) does have support for Chrome extensions though, so this way I was able to install Stylus and load the posted custom css.

Link to comment
Share on other sites

I use Vivaldi in Android, it has a own function for Dark Theme web, also the posibility to use Dark Theme in the flags settings, with this include the Chrome Store is in Dark Theme, no extension can do this. Only lack, Vivaldi can't use extensions for the moment, but on the other hand it don`t need extensions. Own ad and trackerblocker, own encrypted sync, screenshot tool, navigate with tabs and more.

You can download it from Google Play or from UptoDown

Sys Specs Laptop Lenovo V145 15AST, AMD A9- 9425 Radeon R5 - 5 cores 3,1 GHz  RAM 8Gb, GPU 1+2 Gb -Win10 64 v21H2

Favorite online apps you may like too 😉

Link to comment
Share on other sites

I've tested the Vivaldi browser, but I don't like it enough. The idea of my dark theme edits are extra styling on top of the already existing forum dark theme to improve the dark look and fix some things. I not only made it darker, but also changed color of things like icons etc. by overriding theme css code. Vivaldi just reverts light webpages by turning everything light to dark (Kiwi browser can do the same), but obviously this does not work with the dark theme, because that is then reverted to light.

If you like to use Vivaldi and use it's dark mode, that's fine, but it is not really the same thing and therefore not really related to this topic.

Link to comment
Share on other sites

In the Vivaldi forum we have a Forum  Mod, created by an user. Its OpenSource and maybe you can fork it and adapt it to this forum https://github.com/luetage/vivaldi_forum_mod (also in the Chrome Store if Kiwi admits Chrome extensions))

Is naturally a Vivaldi (Chromium) desktop extension whitch permit several page settings of the forum (editable each). But i think that it can be adapt a other browser and to this forum, beeing principally CSS sheets.

uqOwqj4.png

 

 

Edited by Zerg Rush

Sys Specs Laptop Lenovo V145 15AST, AMD A9- 9425 Radeon R5 - 5 cores 3,1 GHz  RAM 8Gb, GPU 1+2 Gb -Win10 64 v21H2

Favorite online apps you may like too 😉

Link to comment
Share on other sites

  • 1 month later...

The rocket icon on user badge (rank, based on amount of posts), I think this is new, right? I don't like it.

/* remove rocket rank badge on user image */
.cAuthorPane_badge--rank {
    display: none;
}

 

Edit: Also want to remove the shield icon from the mods?

.cAuthorPane_badge {
    display: none;
}

 

Edited by datiswous
Link to comment
Share on other sites

  • 3 months later...

In youtube video's on any website there is an overlay with suggestion video's when you press pause:

Spoiler

image.png.06a814e9317cd7faf7a9671c986f98a8.png

You can click it away, but it will show again next time. To filter away the overlay you can use this code:

.ytp-pause-overlay {
    display: none;
}

 

Edit (20-2023): This code removes the other-video-suggestions at the end of a youtube video:

.html5-endscreen {
    display: none;
}
Edited by datiswous
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recent Status Updates

    • Petike the Taffer

      I've finally managed to log in to The Dark Mod Wiki. I'm back in the saddle and before the holidays start in full, I'll be adding a few new FM articles and doing other updates. Written in Stone is already done.
      · 1 reply
    • nbohr1more

      TDM 15th Anniversary Contest is now active! Please declare your participation: https://forums.thedarkmod.com/index.php?/topic/22413-the-dark-mod-15th-anniversary-contest-entry-thread/
       
      · 0 replies
    • JackFarmer

      @TheUnbeholden
      You cannot receive PMs. Could you please be so kind and check your mailbox if it is full (or maybe you switched off the function)?
      · 1 reply
    • OrbWeaver

      I like the new frob highlight but it would nice if it was less "flickery" while moving over objects (especially barred metal doors).
      · 4 replies
    • nbohr1more

      Please vote in the 15th Anniversary Contest Theme Poll
       
      · 0 replies
×
×
  • Create New...