SPT Hub Overhaul 1.0

Do not ask when mod authors will update their mods or if they can upload older versions of their mods.
Bothering mod authors will lead to warnings and repeat offenses will lead to bans.
Due to an unusually high volume of traffic, our site may be experiencing intermittent slowdowns. If you notice any issues, log out of your account and browse anonymously so you can better utilize caching or try using forge.sp-tarkov.com to search for and download mods.

Custom CSS for the SPT Hub to make it look more modern

nLyIjON.png


Turn the hub into a more modern version. This is 100% safe to use, it's only a stylesheet. I have used it for a year, so it's pretty robust. I know this isn't for everyone. But if you're like me and spend a lot of time on the hub, then this is a nice upgrade until we get Forge.



Here is how you use it:


3K6YzwF.png Install a browser extension for using custom CSS (I use Stylebot, so we will use that here)

3K6YzwF.png Download the CSS file

3K6YzwF.png Open Stylebot while being on the hub

3K6YzwF.png Open the CSS file. Copy all the code inside that file. Paste the CSS into the Stylebot textbox

3K6YzwF.png Done, you can toggle it on/off with the toggle input in the top of the Stylebot menu



moxopixel.com

Happy 2 Heart 11 Thinking 3 Thumbs Up 2

  • Noticed small issue here with spacing at

    .tabMenu>ul>li::before,
    .menu>ul>li::before
    Overall this is okay because it's used in tabs but when they overlap, it's not looking good at all. Just set top to a less value because when content of tabs will actually overlap, it would look something like this. Overall everything's good, apart from color picker but you already pinpointed it, good work, love it ;)
    8e578201.png

  • What does Forge do?

    • Forge is the SPT devs' proposal for a new SPT hub where they have better control. Currently, most if not all limitations of the website is down to the template hoster, WoltLab, which is VERY restricted in what you can do.


      It's available to visit but not meant for consumption. You can visit it here

  • This is dank.

  • I just realized the color picker in text areas wasn't working. Quick fix, change:


    Code: Original
    .dropdownMenu li>a {
    color: #fdfdfd;
}

    To:

    Code: Fix
    .dropdownMenu li:not(.woltlab-color-selection)>a {
    color: #fdfdfd;
}


    Open Stylebot, Ctrl + F to search and write .dropdownMenu li>a to find it. Don't be sad, you're learning CSS!

    Thumbs Up 1 Heart 2

  • If you use Stylebot with this CSS, DO NOT OPEN "Readability" :P

    RrHqYKfIsYCm23

  • 1000000000000000000000000000000000000000000000000x Better. Its like wiping poop off the screen. Oled monitors rejoice!

    Happy 2

  • all i see is color correction, so what's so modern about it?

    • The rounded corners do a lot more than just decrease brutalism. It looks visually more appealing and less flat, at least to me

  • I love the colour scheme Moxo, it looks mega. The dull and bland grey/black was becoming an eye soar but this brings an uplift for the hub.


    Huge thanks :thumbup:

    Heart 1

    • Thank you! Yes I felt a slight depression creeping in watching that very mid styling every day :saint:

      Heart 1

  • Looks great!!

    Heart 1

  • As a web dev, I was waiting for this to happen at some point and this looks really refreshing with minimal changes. Thanks pixel!

    Heart 1

    • I was hesitant to release this but it seems like people liked it. It was a surprise! I didn't want to change too much or make flashy things. Only to have something more refreshing. Thanks!

      Heart 1

  • uu9pmDP.gif

    Heart 1 Thumbs Up 1

    • If this were to be adjusted so that each of these selectors overwrote the default selectors via depth then I would look into making it the default on the hub. Hit me up on Discord if you're interested.

    • I started doing this but then I realized.. just to leave it and focus more on other stuff. If people want this, they can use this. We will wait for the Forge! I'm very humbled by your suggestion though!

  • Having trouble using the CSS file on the Stylebot.. can anyone assist?

    • What is going wrong?

      1. Click the extension next to the address bar
      2. Click Options...
      3. Click Styles
      4. Click Add new style...
      5. Paste https://hub.sp-tarkov.com/* into the textbox that says Enter URL
      6. Paste the entire content of the sptHub.css file into the big empty box underneath
      7. Click Save
      8. Reload any workshop page you have open

      If nothing happens after step 8, refer to the last step on the Overview page of this mod

      Heart 2

    • I think the "Paste the CSS" might be too vague for some people. I read it as "paste the file into the URL bar."


      You've got to paste the contents of the CSS file into the big textbox, not the file itself into the URL textbox. :D

      Heart 1 Happy 1

    • Lol got it. Thnx for clarifying and thnx MonoPixel for the workshop overhaul

      Heart 1

    • My monkey brain thought I had to copy and paste the entire CSS into the little box lmfao. I didn't even know about the options > styles and then copy pasta :D

  • Site Admins: Impressive, very nice. Let's see MoxoPixel's CSS...

    Happy 1

  • found a issue certain pages are broken like Animator Updater

    just white page with text :(

    • You must have installed something wrong? It looks good in Chrome for me.

    • weird some pages are great then i get random pages like that

    • huh it has now fixed itself?

      Heart 2

    • If you use Stylebot with this CSS, DO NOT OPEN "Readability"

  • beautiful my eyes thank you

    Heart 1

  • mod which mod mod web platform. XD interstelar XD

    Happy 1

  • Holy. this is awesome thanks for what you do

    Heart 1

  • moxopixel modded the whole website...

    this looks beautiful, thank you <3

    Happy 1

    • No problemo. Everything to make the SPT experience better in every way! <3