SteamGifts v2 Dark Userstyle


Bright/light sites can be hard on the eyes so for us ocular challenged people i created a darker version. Works on www.steamgifts.com, www.steamtrades.com, www.sgtools.info . Compatible with most scripts found in the addon registry..

Also check out my other style SG Dark Grey.

Note: Style is now hosted on github as userstyles.org is no longer supported.


Install Stylus for either Firefox, Chrome or Opera and then install the style using one of these methods:

๐Ÿ“ฆ Install the usercss which supports automatic updates and customization.
๐Ÿ“ฆ Install manually from GitHub with no customization. The style is in Mozilla format.
๐Ÿ“ฆ Install script which supports automatic updates but no customization.
๐Ÿ“ฆ Install script from greasyfork which supports automatic updates and customization has settings menu via slide tab top right corner.


Last updated November 19 2024 version 1.7.7


Instructions for script version on greasyfork

Hover over tab in top right corner click Dark/Light to toggle between the two, click settings to access settings. (see pic below)

Settings

Save button apply and save color choices.
Reset button resets current theme back to the default Dark theme.
Cancel button closes settings without changing anything.

  • Steamgifts featured background image will be used if "Featured Background" is set to on(1 = on, 0 = off), otherwise it will apply a gradient of the color you chose.
  • Entering "water" or "halloween" (without quotation marks) into any theme input area will set that theme to the included water or halloween theme.
  • Settings tab (top right corner) colored according to "Header/Footer" for background, "Navigation Text" for text.
  • Colored "Names/Levels" (1 = on, 0 = off), Color is generated from game picture on featured giveaway or player avatar on profiles/SG++ Hover info.
  • Text shadow opacity setting has a range from -1(transparent) to 1(opaque) where 0 represents the default value(which is not shown).
    Negative values make it more transparent and positive values make it less transparent starting from its default value.

Hotkeys

  • Shift+Alt+1 = switch to theme #1
  • Shift+Alt+2 = switch to theme #2
  • Shift+Alt+3 = switch to theme #3
  • Shift+Alt+X = bring up settings menu
  • Shift+Alt+C = toggle current theme on or off

Screenshots

Screenshot Album

View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
View attached image.
9 years ago*

Comment has been collapsed.

Version 1.4.2.5

  • General fixes .
  • New datepicker styling from secret upcoming style ;) seems i forgot to add into script version so CSS only for now .
  • Changes for rhSGST v4.9.4 .
7 years ago*
Permalink

Comment has been collapsed.

Awesome! Thanks for the changes. :)

7 years ago
Permalink

Comment has been collapsed.

is so purdy! =)
thank you much. ^^

View attached image.
7 years ago
Permalink

Comment has been collapsed.

Hey, I had to change the popout class in my script to .page__outer-wrap .page_outer_wrap because the background was transparent in giveaways, but now they are transparent in the dark theme.

7 years ago
Permalink

Comment has been collapsed.

this one is very minor but just wanted to let you know about it in case it gets overlooked for next update. the script is somehow removing a space. ^^

49 minutes ago > 49 minutesago

View attached image.
7 years ago
Permalink

Comment has been collapsed.

minutesago is a word i swear :P

7 years ago
Permalink

Comment has been collapsed.

hehe ^^

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.2.9

  • Fixed rhSGST shared group container

Version 1.4.2.8

  • Corrected rhSGST Header Icons Refresher for delivery of won gifts.

Version 1.4.2.6

  • Added support for SGTools custom rule builder.
  • New datepicker styling added into script version.
  • Changes for rhSGST v4.18 .
7 years ago*
Permalink

Comment has been collapsed.

Haha, i won't judge your changelog for 1.4.2.8... everything looks fabulous, thank you for your work! :)

View attached image.
7 years ago
Permalink

Comment has been collapsed.

hey, when you get some time can you work on the shared group button's popout? both from profile page, and from avatar popout
(avatar's group popout is a unreadable tiny box, profile aligns above the top of the page with several groups)

thanks ^^

7 years ago
Permalink

Comment has been collapsed.

Always miss something ;)

Should be all good now.

7 years ago
Permalink

Comment has been collapsed.

it looks great on the profile page now, but it's popping inside the popout instead of popping outside of the popout for avatar popout use.
however just after testing it looks like it does that without dark theme, will report it to revil.

View attached image.
7 years ago
Permalink

Comment has been collapsed.

Odd i specifically corrected that. The positions of the buttons and the popout being contained are working here, will have to investigate ๐Ÿ•ต

There is quite a bit not working in that gif actually, except on my end its all fine.

7 years ago
Permalink

Comment has been collapsed.

i use the userstyle turned script not the greasyfork script. (so it doesn't have the settings button i don't need)

7 years ago
Permalink

Comment has been collapsed.

Yeah it is because of the script execution order for that option. Change rhSGST to come before SGv2 Dark.

7 years ago
Permalink

Comment has been collapsed.

lol, i just changed that and refreshed this page to test it with and saw this comment. yep, works fine doing that, thanks. ^^

7 years ago
Permalink

Comment has been collapsed.

I wouldn't doubt changing will bring up other issues though, any reason you don't use stylish if you only want the CSS and not the customization ?

7 years ago
Permalink

Comment has been collapsed.

i just don't want to have that extra extension since i already use tampermonkey anyways, and no offense (really quite the contrary) i don't like have settings option on your greasyfork script version. you made it perfect for me as is, so no need in having it.

7 years ago
Permalink

Comment has been collapsed.

K just let me know if you spot anything, i don't usually check with that version ;)

7 years ago
Permalink

Comment has been collapsed.

sounds good, will do. thank you very much for that update though. ^^

7 years ago
Permalink

Comment has been collapsed.

Safest way to eliminate any problems is to edit that script so it does not add the CSS to the head ;)

Simple edit would be to make line 38 the same as line 41

7 years ago
Permalink

Comment has been collapsed.

yeah, that fixed it to not care what load order. ^^
thanks

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.3.7

  • Fixed steamtrades dropdown background color due to steamtrades update.

Version 1.4.3.6

  • Fixed z-index issues.

Version 1.4.3.5

  • Fixed rhSGST group profiles

Version 1.4.3.4

  • Fixed rhSGST popup overflow

Version 1.4.3.1

Version 1.4.3

7 years ago*
Permalink

Comment has been collapsed.

Bump for fixing the z-index issues! Thanks! :3

7 years ago
Permalink

Comment has been collapsed.

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.3.8 will correct that.

7 years ago*
Permalink

Comment has been collapsed.

Thanks!

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.3.8

  • More z-index corrections, various fixes.
  • Changes for ESGST v5.1.1 .
7 years ago*
Permalink

Comment has been collapsed.

ty ^^

popouts were too large prior to this update, now it looks much better. (ESGST name now btw xD)

7 years ago
Permalink

Comment has been collapsed.

Right name change, curse that revilheart guy :P

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.3.9

7 years ago
Permalink

Comment has been collapsed.

thanks :D updated!

7 years ago
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 1 year ago.

7 years ago*
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 1 year ago.

7 years ago
Permalink

Comment has been collapsed.

In the last week or so I am having major lags while using the script. The website functions perfectly while I switch on the light mode. I've checked my CPU load on both and on the dark mode it jumps up to 35 or so % (while the light one stays at around 15%). It is extremely noticeable while scrolling down/up on the GA section. My question would be, is it just on my side?

Thank you for your script nonetheless! I've been using it since the first week I've joined and it is pure gold. Glad you've put your time into it :)

7 years ago
Permalink

Comment has been collapsed.

Could have been the GPU rendering that was disabled since march, Version 1.4.4.2 re-enables it.

7 years ago
Permalink

Comment has been collapsed.

The issue unfortunately persists. I'll make a guess and say that it's on my end, as I see no one else complaining.

Thank you however :)

EDIT: For some reason, it got fixed :P

7 years ago*
Permalink

Comment has been collapsed.

Hi, great script. Had a problem to report that I notcied couple of weeks ago that still exists.

When using ESGST and "Fixed header" option. The heading moves under the header. The text "Discussions > General > โญ [UserStyle] SGv2 Dark 1.4.3.9โญ" moves under the Giveaways / Trades / Discussions / Support / Help buttons. Works fine when switching to light.

7 years ago
Permalink

Comment has been collapsed.

The script version has not been updated for ESGST version 6+ so there will be a few bugs with that. I will upload the CSS for stylish if you want to use that in the meantime, the script i won't have time to look at till at least monday.

7 years ago
Permalink

Comment has been collapsed.

Thanks, the stylish version worked. I guess change settings in the stylish version is not possible? Or is there a line in the code I can just change so the page width is normal and not expanded?

7 years ago
Permalink

Comment has been collapsed.

Yes you can edit it manually, delete this line.

.page__inner-wrap, nav, #header nav, #content, .footer__inner-wrap, .featured__inner-wrap, .offer__inner-wrap {
    max-width: 100%;
}
7 years ago
Permalink

Comment has been collapsed.

Script version updated ๐Ÿ˜‰

7 years ago
Permalink

Comment has been collapsed.

Thanks, works great.

7 years ago
Permalink

Comment has been collapsed.

Hi, noticed another bug with ESGST with Avatar popup
When I use it on winner page the box comes under the footer.

7 years ago
Permalink

Comment has been collapsed.

Well, what can I say. Love at first sight.

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.4.2

  • Re-enabled GPU rendering of certain elements.

Version 1.4.4.1

7 years ago*
Permalink

Comment has been collapsed.

Hey, can I use some of the style you've designed for ESGST? I like some better than mine (your avatar popout, for instance, is beautiful).

7 years ago
Permalink

Comment has been collapsed.

Take whatever you need ๐Ÿ˜‰ pretty sure avatar popout is not up to date atm though.

Current looks the same but has a small adjustment for when ratio is not enabled.

7 years ago
Permalink

Comment has been collapsed.

Awesome, thanks. :) I'm currently upgrading Avatar Popout to v6 anyway.

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.4.3

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.4.8

Version 1.4.4.7

Version 1.4.4.6

Version 1.4.4.5

7 years ago*
Permalink

Comment has been collapsed.

Version 1.4.4.10

  • Correction for giveaway avatar to only apply to ESGST gridview .

Version 1.4.4.9

7 years ago*
Permalink

Comment has been collapsed.

No, no, no, you're doing it wrong, it's revilheart again. :P

7 years ago
Permalink

Comment has been collapsed.

Sure sure what ever you say rafaelgs18 ๐Ÿ˜œ

7 years ago
Permalink

Comment has been collapsed.

damn, i forgot it was saturday and not friday still. :P

7 years ago
Permalink

Comment has been collapsed.

The image opacity for game avatars is less than before the update (atleast not 1.0 like i set it up), also the setting itself doesn't apply anymore on them.

7 years ago
Permalink

Comment has been collapsed.

Opacity is the same but it is lowering the brightness by 10% which should only be applied on ESGST gridview, i will correct that.
Current:

.giveaway_image_thumbnail, .giveaway_image_thumbnail_missing {
    filter: brightness(70%);
}

What it should be:

.esgst-gv-view .giveaway_image_thumbnail, .esgst-gv-view .giveaway_image_thumbnail_missing {
    filter: brightness(70%);
}

Edit: ahh completely diff issue looks like 2 fixes needed :P

7 years ago*
Permalink

Comment has been collapsed.

Version 1.4.4.12

  • Fixed Image opacity settings for the new steamgifts image classes, corrected ESGST gridview brightness to only apply to ESGST gridview.
7 years ago*
Permalink

Comment has been collapsed.

๐Ÿ˜Š

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.5.1

  • Corrected fixed width for ESGST fixed heading.

Version 1.4.5

  • Gridview updates for ESGST, SGโ‚‚O, SG++
7 years ago*
Permalink

Comment has been collapsed.

The fixed paged heading seems a bit off after the update. ^^

View attached image.
7 years ago
Permalink

Comment has been collapsed.

Oooops fixed.

7 years ago
Permalink

Comment has been collapsed.

I'm not sure if this is a problem with the script (SG v2 1.4.5.1 dev) on ST or unrelated, but posting in case you know more (since I know nothing) if it's possible to fix. I disabled any other addons SG related in tampermonkey just in case but it still remains the same, I think..

The homepage on SteamTrades works fine for the dropdown option, though. It also works fine on SteamGifts.

st reviews second option is faded
st messages second option is mainly blocked into the background
st profile both options are partially hidden behind the positive rating and visit steam profile bars.

7 years ago
Permalink

Comment has been collapsed.

I must have not checked that without scripts running, as it works as intended if you use a fixed header from a script. Will correct in next update.

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.5.2

7 years ago
Permalink

Comment has been collapsed.

Thank you so much for your continous support, my eyes love you! :)

7 years ago
Permalink

Comment has been collapsed.

I know you would have fixed it anyway but I appreciate it anyway! No more ninja dropdown shenanigans now. Nothing can hide this time.

7 years ago
Permalink

Comment has been collapsed.

I think direct links to comments like this one brings you quite a bit over the actual comment. This doesn't happen with the default theme.

7 years ago
Permalink

Comment has been collapsed.

It is only without fixed page width and using ESGST so that will help me hunt it down, but that won't happen until i return home after the weekend.

7 years ago
Permalink

Comment has been collapsed.

Disabling fixed page width doesn't help but disabling ESGST does. Seems to be related to a feature of it. And no hurry, have a nice weekend.

7 years ago
Permalink

Comment has been collapsed.

Version 1.4.5.6

Version 1.4.5.4

  • Added missing ESGST progress css.

Version 1.4.5.3

7 years ago*
Permalink

Comment has been collapsed.

Sign in through Steam to add a comment.