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 January 12 2024 version 1.7.6


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.

Updated with some changes, background darker, buttons darker, white list/blacklist match button style and changes for steamgifts++ beta 0.2.5

9 years ago
Permalink

Comment has been collapsed.

<3

9 years ago
Permalink

Comment has been collapsed.

Updated with

  • various fixes for containers, SG++ hover on joined, forget topic marker

  • reintroduced text shadows where they were temporarily removed before

  • all buttons now matching style as wells as slightly darker

  • added gradient to background

  • blue text lightened

  • Comment parents more width

  • last but not least finally updated the screenshots :P

9 years ago
Permalink

Comment has been collapsed.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

Can't install the new version from 4 days ago.
but the reason i tried is because i have an issue:
the message icon next to the unread comments is very weird...
http://i.imgur.com/OhT43F0.jpg

9 years ago
Permalink

Comment has been collapsed.

Yeah that was corrected sometime back

9 years ago
Permalink

Comment has been collapsed.

Managed to install it. i hope...
Thanks!

9 years ago
Permalink

Comment has been collapsed.

Certain parts of the page links at the bottom of discussions do not work with SGv2 Dark enabled now.

The words "First", "Previous" and "Next" are never clickable links but the arrow next to them are. However "Last" and its arrow are always clickable links. Most often only one or two of the digits are clickable links.

If you need any further explanation or some firebug data just lmk.

9 years ago
Permalink

Comment has been collapsed.

I don't change functionality only CSS which is 99% color only

9 years ago
Permalink

Comment has been collapsed.

Well it literally works when I disable SGv2 Dark in Stylish, then doesn't work when I enable it. It's definitely SGv2 Dark that's causing it m8.
CSS can change a lot more than colors lol
If you won't, then I guess I'll take a look at the script and find out what you changed in the last update that broke it.

Thanks anyways.

9 years ago*
Permalink

Comment has been collapsed.

Also, here's a quick gif capture I did in case it helps show you the issue. Obviously the HREF tags are still in source but the margins you've changed don't allow the links to be clickable in the div.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

I can't reproduce it, but you can see what was changed here

9 years ago
Permalink

Comment has been collapsed.

It's the "comment parent setting" you changed it looks like that breaks it for me, mind you it's only while using SG++ 0.2.5 (latest atm).

9 years ago
Permalink

Comment has been collapsed.

Hope this screenshot helps too, shows element location in dev tools on page with SGv2 Dark and SG++ enabled.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

Yes that explains why i couldn't reproduce, i don't have the comment box on the bottom.

BTW that has been in for a long time and is not even needed anymore so i'll ditch it, thanks for spotting it ;)

9 years ago*
Permalink

Comment has been collapsed.

Yeah, no problem! Without your dark userstyle I wouldn't even be able to use the new blindingly white SGv2. Thank you for the userstyle and I'll be lookin' forward to officially updating soon!

9 years ago
Permalink

Comment has been collapsed.

For some reason i was thinking i added the extra padding on comment__summary but that is SG++, i corrected the extra width i add to the comment box that when combined created the problem. I'm not sure why SG++ is even using that i can't see where it is needed, i'll have to ask them and find out.

9 years ago
Permalink

Comment has been collapsed.

i don't have the comment box on the bottom.

How to do that? ^^

9 years ago
Permalink

Comment has been collapsed.

It is part of the endless scroll in steamgifts++ beta 0.2.5

9 years ago
Permalink

Comment has been collapsed.

oouuh, now I don't want both functions but oh well..

thanks for explaining

9 years ago
Permalink

Comment has been collapsed.

Found the culprit, specifically has to do with the modified width of a div class="comment__summary" tag. But it only occurs using SGv2 Dark and SG++ together.

It appears that your style modifies a tag under the FixedNavBar that SG++ adds and that width propagates to the comment form at the bottom, and the div covers that area making divs layered lower unclickable (which is why the arrows worked).

9 years ago*
Permalink

Comment has been collapsed.

Thank you! I've been using a Chrome extension called Deluminate. This basically inverts colors and allows for contrast adjustment. Having a script for this is much better!

9 years ago
Permalink

Comment has been collapsed.

I am getting a bug with SG++'s endless scrolling enabled (see attached image), which starts showing up around the bottom of the 12th page. Strangely it only affects my desktop, my Windows tablet with exactly the same add-ons has no problems. Disabling SGv2 Dark fixes it, and testing the Steamgifts v2 Black style showed it does not cause this issue, but I prefer SGv2 Dark.

View attached image.
9 years ago*
Permalink

Comment has been collapsed.

If it does not show up until page 12 to me that would indicate something other than CSS. You are on a slightly older version i would make sure SGv2 Dark and SG++ are up to date first. If it still happens try the script version and toggle to light when you see the problem and let me know if it is still there.

9 years ago
Permalink

Comment has been collapsed.

I removed both add-ons and installed the latest versions with no change. Using the script the problem still occurs but goes away when I switch to light.

9 years ago
Permalink

Comment has been collapsed.

Are you running without other addons, and what browser/version

9 years ago
Permalink

Comment has been collapsed.

SGv2 Dark and SG++ are the only ones that should affect SteamGifts, I am using Firefox v36.0.4.

9 years ago
Permalink

Comment has been collapsed.

I get the same thing and I don't have SG++. It happens in threads where there are lots of replies and the page length is massive. This thread for example causes that.
EDIT: The culprit is the background: linear-gradient(to right, rgba(15,15,9,1) 0%,rgba(21,21,16,1) 18%,rgba(21,21,16,1) 100%); rule for .page__outer-wrap. Commenting it out fixes the issue.

9 years ago*
Permalink

Comment has been collapsed.

Updated with various fixes and changes for steamgifts++ beta 0.3.0

9 years ago
Permalink

Comment has been collapsed.

Updated for the collapsible featured giveaways

9 years ago
Permalink

Comment has been collapsed.

Are they white on purpose?

View attached image.
9 years ago
Permalink

Comment has been collapsed.

Thats the default style, you need to update

9 years ago
Permalink

Comment has been collapsed.

Stupid me :(

View attached image.
9 years ago
Permalink

Comment has been collapsed.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

How do you make it show all of the developer's giveaways?

9 years ago
Permalink

Comment has been collapsed.

Press the thing :O

View attached image.
View attached image.
9 years ago
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 5 years ago.

9 years ago
Permalink

Comment has been collapsed.

It does depending on what you are using, stylish for chrome for example does not have auto updates.

9 years ago
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 5 years ago.

9 years ago
Permalink

Comment has been collapsed.

Yeah that is the worst option in terms of updates, and flashing of the default style on page change/refresh

9 years ago
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 5 years ago.

9 years ago*
Permalink

Comment has been collapsed.

Yes tampermonkey has a setting for update checks varying from every hour to every week. You can either use the script i provided on greasyfork, or disable stylish and visit userstyles.org where it will provide a script if stylish is not present/disabled.

9 years ago
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 5 years ago.

9 years ago
Permalink

Comment has been collapsed.

temporary everyone was removed after.

9 years ago
Permalink

Comment has been collapsed.

Hey Squished Potatoe! I just found this today. This is a refreshing way to view steamgfits. Thank you for putting this together.

9 years ago
Permalink

Comment has been collapsed.

You should see the hot pink version :P

Or better yet limefrickingreen version

View attached image.
9 years ago*
Permalink

Comment has been collapsed.

View attached image.
9 years ago
Permalink

Comment has been collapsed.

It is amazing :O Thanks

9 years ago
Permalink

Comment has been collapsed.

bump

9 years ago
Permalink

Comment has been collapsed.

Is it just me or did you edit all colors?
I just updated after getting fed up with the ugly white background for featured giveaways and it seems like you toned down all colors a bit, the background looks less dark, the [W] & [H] part of trades seem less bright and the same goes for the "view attached image" and usernames.
In any case thanks for keeping it updated!

9 years ago
Permalink

Comment has been collapsed.

Sounds like you were on a very early version most things are locked down now. Updates are now more for changes to steamgifts and or SG++

9 years ago
Permalink

Comment has been collapsed.

BUMP for pure awesomeness. I love this script since I installed a couple of months ago, so much easier on the eyes :]

9 years ago
Permalink

Comment has been collapsed.

Settings update for the script version, can be accessed via the drop down by account in navbar.

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

View attached image.
8 years ago*
Permalink

Comment has been collapsed.

Can you please tell me what parameters I have to change to remove the green things? What bothers me most are the green headlines in the forum, but I also dislike the green envelope, gift and win icons in the top bar. I've searched around a bit in the script, but I'm not a coder and it's way over my head.
Any advice would be much appreciated, thank you. Other than that I really love your extension! So good for my eyes :)

8 years ago
Permalink

Comment has been collapsed.

For the forums it was part of SG++ i don't think they use anymore so it can just be removed

.endless_new_comments h3 a

For the icons in the nav bar change

.nav__button-container--active i
8 years ago
Permalink

Comment has been collapsed.

Thanks so much for this, changed the parameters and finally it's perfect! Sorry, for the late reply, totally forgot I posted here.

8 years ago
Permalink

Comment has been collapsed.

Can you give me information how to darken this field?
http://i.imgur.com/NHYAG8a.jpg
It's very bright on the dark theme.

8 years ago
Permalink

Comment has been collapsed.

That should be dark already, are you up to date?

8 years ago
Permalink

Comment has been collapsed.

Yeah i'm up to date, but still it is as shown.

8 years ago
Permalink

Comment has been collapsed.

Your SG++ is not up to date

8 years ago
Permalink

Comment has been collapsed.

Ok firstly i'm using SG₂O so i hope this one works with that better. Also i think that this script working only with one script is not good. But thank you anyway.

8 years ago
Permalink

Comment has been collapsed.

I did have support for that element in the older version of SG++ i removed it last update i believe. Perhaps i should put it back, was not really thinking people would still be on that version.

8 years ago
Permalink

Comment has been collapsed.

Unfortunately i can not support every script that is out there, it would be better if they used this sites classes.

8 years ago
Permalink

Comment has been collapsed.

Yeah, but this script that i'm using is a lot more small on the icons and provides a lot of good information about percentage and it gives you all the open giveaways in a smaller rectangle rather than on a huge title.
So i think i will have to wait until SG++ works way better and looks a lot better to move to it again.

8 years ago
Permalink

Comment has been collapsed.

This will apply the dark background for that


  background-color: #2f2f2f !important;
  border: 1px solid #545454 !important;
}```
8 years ago
Permalink

Comment has been collapsed.

It doesn't work but hank you.

8 years ago
Permalink

Comment has been collapsed.

May I know why some of the styles are marked "!important"? I want to, for example, create an empty div, and since border for that is "!important", I always get at least a silver line instead of just an empty space.

8 years ago*
Permalink

Comment has been collapsed.

Generally i only need them for firefox so if it is present and not really needed i either cut paste from somewhere that did need it, or just slapped it on because i was too lazy to test it in firefox .

Add me on steam then you can message me anything that needs to be addressed for your needs.

8 years ago
Permalink

Comment has been collapsed.

Deleted

This comment was deleted 4 years ago.

8 years ago
Permalink

Comment has been collapsed.

And thank you for Dementium II HD :)

8 years ago
Permalink

Comment has been collapsed.

I've been using it for a couple weeks and it's really easy on the eyes. Appreciate the work.

8 years ago
Permalink

Comment has been collapsed.

I'll say it once, and I'll say it again.

I can't use SteamGifts without it. :D

8 years ago
Permalink

Comment has been collapsed.

Thank you so much for this!

8 years ago
Permalink

Comment has been collapsed.

Happy Canada day !! and a sneak peek of stuff ;)

View attached image.
8 years ago
Permalink

Comment has been collapsed.

Cool background!

Thank you so much for this, it's my favorite script! So much easier on the eyes :]

8 years ago
Permalink

Comment has been collapsed.

  • Updated stylish and script version to same version as well as firefox and chrome matching each other now.
  • Updated settings for script version that include header/footer, Navbar, background image, content opacity.
  • Some behind the scenes changes for better compatibility with other scripts.

Example water theme settings (for use with script version) pictured below

0.8,#0d1617,#a4a4a4,#56b9c0,#10181b,#122729,#86c7d7,#a0a0a0,#808d9d,#8ab1b9,#213c3f,#1c3639,#22444b,#232c36,#285e64,#1c353c,#1e252b,#47721d,#882828,#d5d54e,#808080,#46a640,#3197a0,#000000,1,0.7,#0b2326,#248082,1,0.3,0,1,http://www.hdwallpapers.in/walls/water_drops_on_glass-wide.jpg,#000000,0.8,#80bf40,#d84141,#053941,#80a659,1

Happy Independance day !!

View attached image.
View attached image.
View attached image.
8 years ago*
Permalink

Comment has been collapsed.

What exactly do I have to do to get this cool waterdrop style thingy and the settings section for your script? Please help, this is the answer to my prayers: being able with my n00b coding skillz (equals zero) to tweak everything to fit my taste.

Does your script update automatically or will I have to un- and reinstall it?

8 years ago
Permalink

Comment has been collapsed.

Paste the code into the Import Settings field, accessed from the Account dropdown menu titled "SGv2 Dark Settings".

The userscript version updates automatically or manually depending on your Greasemonkey/Tampermonkey settings.

8 years ago*
Permalink

Comment has been collapsed.

There is no "SGv2 Settings" field in my account drop down menu. I only have "Sync with Steam", "SG++ Settings", and "Logout".

I'm using Stylish for the script, also have Greasemonkey installed but no idea if this is in any way related.

8 years ago
Permalink

Comment has been collapsed.

You have to have the userscript installed to use the settings. IMO, if you're only using Stylish for SG just uninstall Stylish and install the SGv2 Dark userscript.

8 years ago
Permalink

Comment has been collapsed.

Got a feature request for the next update maybe: could you add opacity settings for the header+footer and buttons too? And if there's a way to make a CSS rule to change the opacity of all fonts that'd be a nice addition as well it wouldn't make the settings columns uneven. :D

8 years ago
Permalink

Comment has been collapsed.

Sign in through Steam to add a comment.