Jump to content
The Dark Mod Forums

datiswous
 Share

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 {
    background-color:#8e8e8e;
    color: black;
}
/* 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;
}
/* disable right sidebar, this disables the summary sidebar on big forum topics, but also the "Recent status updates" sidebar */
#ipsLayout_sidebar {
    display: none;
}

 

 

tdm-forum-style2.jpg

tdm-forum-style1.jpg

Edited by datiswous
Make quoted code look normal
  • 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.

 

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.

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...
Posted (edited)

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

 Share

  • Recent Status Updates

    • Nort

      Spent most of the day learning and writing about AI navigation. It's stuff I already know, but the magic about writing something down as clearly formulated as possible, is that you then see things that much more clearly. You also find what's unclear to you, and then you figure out exactly how things work. I was hoping to get through it all within just a day, but it looks like this will take tomorrow as well, at this rate. There's also plenty of other nonsense I have to get through as well. Everything's a chore.
      · 0 replies
    • Nort

      I want to be a fish, but I'm not a fish. My mom wants to be a fish too, and so she's killing herself eating plankton and sh***ng blood, and tells me to stop nagging her about taking her medication. I spent several hours today, just lying in bed, having anxiety over just existing, and not being a fish. You fish, you don't know how lucky you are. You can eat all the plankton you want. I tried eating plankton again yesterday, and I just got sick. I hate being a shark.
      · 0 replies
    • Nort

      I just gave myself vertigo. A pleasant kind of vertigo, like the world has been lifted off my shoulders. I'll explain:
      Yesterday I saw to my dismay, that I had made my entire map two - two - units too short on every level - that every set01 piece was sticking 2 units into the ceiling. That's basically 402 brushes that needs to be realigned (minus the ground floor brushes).
      I knew enough about selections to do all of that in a very tense five minutes, and it compiled without leaks. (Thank you so much, Dark Radiant devs, for making an editor with such care for precision that you can align hundreds of brushes perfectly at once (which is not something I can say for Valve's Hammer editor, which has some serious issues on that front, which actually made me just quit it in disgust).) However, the result is that the entire level has now been stretched a barely noticable 2 units, and it will take some getting used to psychologically.
      · 0 replies
    • Nort

      My workflow is basically running from a chain of disasters, eventually trying to seek shelter in former disasters. It's not ideal - it's just my life.
      When I abandoned my first map, it was out of a typical mental breakdown, and so I returned to find a skybox void where the kitchen door should have been (due to a misplaced visportal) and two overlapping brushes Z-fighting on the kitchen floor.
      I've now cleaned up the last bit of mess, by cleanly separating every floor into its own layer. Now I can finally work on each floor in peace.
      ...not that I really needed to. Once you get skilled enough, the orthographic messes, well, I'll let this video speak for itself:
       
      · 1 reply
    • Nort

      Beams, beams, beams...
      Support beams, and cross beams, and then beams to fixate the support beams to the cross beams. The more beams you have in a map, the better. There's walls, floors and ceilings, but the rest of the map is pretty much just beams. Beams makes a thief happy.
      · 0 replies
×
×
  • Create New...