[HOW-TO] Discord Transparency/Aero

Discussion in 'Computer Tutorials' started by MarcusD, Mar 16, 2017.

  1. MarcusD
    OP

    MarcusD F00FCACE addict

    Member
    1,062
    1,978
    Oct 16, 2015
    Hungary
    /media/marcus/WESTERNDIGI
    I made Discord have Aero Glass on its entire window area, and it works quite good. Because there are some people who love Aero and/or plain transparency I guessed I'll share how I did it; it's quite easy.


    First of all, check if you have working graphics drivers! This is the most important step as without this it is not possible to get any kind of transparency working, and will result in a crash on launch or a black background color.

    (Linux only) get a compozitor and a WM/DM which supports compoziting! Not doing so will have no effect on the window and will simply just result in a black background.
    For example, Openbox doesn't work no matter what. KDE has a built-in compozitor, it might work out of the box.
    If you have a WM/DM which doesn't support compozitors I recommend either KDE or Emerald (if you want to have fun downgrading packages) / Beryl (if you have an ancient system and want Aero-like blur).

    Enable hardware acceleration! Not doing so will either result in a black screen or even a crash on launch preventing you from re-enabling hardware acceleration.

    Make sure you have your app.asar extracted and have a working CSS loader! You can do this by installing beautifuldiscord or BetterDiscord. If your client is unmodified then I recommend going with beautifuldiscord. Make sure to rememer/copy the installation path if this is your first time installing this!

    Navigate to your Discord appication directory (you should know this if you have installed beautifuldiscord or BetterDiscord)! Go to the "app-version/resources/app/" ("Contents/Resources/app/" on macOS) folder and open up "index.js" in a sane text/code editor (aka. don't use Notepad!). Search for "new BrowserWindow" and scroll up a little. Edit these lines accordingly:
    Code:
    transparency: true,
    backgroundColor: '#00000000',
    
    On Windows 7 you might want to also set "frame: true," for Aero! Though you can also set this on other OSes to see the effect of it :P
    On macOS you can enable blur by setting the "vibrancy" value.
    Note that setting "frame: true" on Windows with transparency enabled will make you unable to resize the window yourself! You can partially circumvent this by using the fake maximize box below the real one.

    Close and reopen Discord! If you did things right it should start up without crashing. If you have already set a custom theme then it should show up (assuming you haven't set a transparent theme yet).
    On Windows you can see if it works because there's a tiny *window* until the content starts loading, and it should have a full window Aero or transparent middle with a window frame.
    If it crashes, try again once. Something might've messed up :/ But if it crashes the second time then transparency is not supported by your graphics driver / graphics server.

    Set a transparent theme! There's a CSS hack which allows you to make your background transparent without making the window contents transparent.
    If it has a black or white background then press CTRL-R to reload the page. If it still doesn't then relaunch Discord. If it still doesn't work then try our luck with the CTRL-R trick again. If it still doesn't work then it either won't work or you need to fiddle around with the code and settings to get it work, and I can't help with that :(
    But if it worked then yay! Congratulations! We did it! \o/ Enjoy your transarency! :D


    Windows 7 with Aero

    CSS Hack
     
    Last edited by MarcusD, Mar 16, 2017
  2. TheVinAnator

    TheVinAnator GBATemp's Greatest Vin

    Member
    3,425
    2,371
    Jan 10, 2016
    Canada
    NO COFFEI!
    Wow this actually looks quite good, I may use it! :P
     
  3. Joom

    Joom  ❤❤❤

    Member
    3,478
    2,346
    Jan 8, 2016
    United States
    Openbox (and other barebones WMs) will work if you use a third party compositor like compton or dana. There's most likely better ones out there now, though. Just check the Arch Wiki. I recommend those over something like Emerald because they hardly have the overhead that it does.
     
  4. Filo97

    Filo97 A Nintendo REALLY big hacking fan

    Member
    3,567
    1,160
    Oct 8, 2015
    Italy
    an ancient videogame...
    Can you share the Firefox one too?
     
  5. MarcusD
    OP

    MarcusD F00FCACE addict

    Member
    1,062
    1,978
    Oct 16, 2015
    Hungary
    /media/marcus/WESTERNDIGI
    You can use this in Firefox with a very small change :P Here, have this!
     
  6. Filo97

    Filo97 A Nintendo REALLY big hacking fan

    Member
    3,567
    1,160
    Oct 8, 2015
    Italy
    an ancient videogame...
    Could i have help in PM on how to install it please? I am....a bit confused. mostly because i have no friggin idea on where to put the edit.
     
  7. MarcusD
    OP

    MarcusD F00FCACE addict

    Member
    1,062
    1,978
    Oct 16, 2015
    Hungary
    /media/marcus/WESTERNDIGI
    Install Stylish, open "Add-ons" from the menu (or goto "about:addons"), select the "User Styles" tab, "Write a new style", copypaste the contents of the puush into the textbox, and above the big textbox there's a small textbox, name it something (I named it "DiscordStyle"), click "Save" and reload Discord :P

    But ye, if instructions aren't clear PM me :P

    Also, the scrollbars are weird on Firefox, that's not my fault ,_,
     
  8. Joom

    Joom  ❤❤❤

    Member
    3,478
    2,346
    Jan 8, 2016
    United States
    Alright, yeah, Compton is still the community standard for standalone WMs. It supports full window transparency, so stuff like Awesome, Openbox, BSPWM, Ratpoison, etc. will work. I used to use it for transparency and drop shadows when I used Linux, so I know it's tried and true, and doesn't rely on either GTK or Qt.
     
    Last edited by Joom, Mar 22, 2017
  9. Madobe Ai

    Madobe Ai Member

    Newcomer
    41
    2
    Jan 28, 2016
    Moe
    How to use up CPU time/10
     
  10. Filo97

    Filo97 A Nintendo REALLY big hacking fan

    Member
    3,567
    1,160
    Oct 8, 2015
    Italy
    an ancient videogame...
    doesn't work with 0.0.297 or is it just me?
     
  11. MarcusD
    OP

    MarcusD F00FCACE addict

    Member
    1,062
    1,978
    Oct 16, 2015
    Hungary
    /media/marcus/WESTERNDIGI
    it still works both on Windows 7, Linux, and macOS
     
  12. Filo97

    Filo97 A Nintendo REALLY big hacking fan

    Member
    3,567
    1,160
    Oct 8, 2015
    Italy
    an ancient videogame...
    Huh, weird... maybe it's because i am on windows 10?
     
  13. MarcusD
    OP

    MarcusD F00FCACE addict

    Member
    1,062
    1,978
    Oct 16, 2015
    Hungary
    /media/marcus/WESTERNDIGI
    *yes*!

    I once tried my "transparent command prompt" program on my cousin's win10, and it made the entire window white... on Win8 it did the same thing (but my theme color way purple so it made it purple iirc) but the text was still readable, so ye... rekt in win10
     
  14. Filo97

    Filo97 A Nintendo REALLY big hacking fan

    Member
    3,567
    1,160
    Oct 8, 2015
    Italy
    an ancient videogame...
    However, there is a transparency theme + transparent patch that works on win10 betterdiscord so.... i just gotta figure out how to make it so it's not really dark and dimmed. https://github.com/HoLLy-HaCKeR/Bet...s/blob/master/Plugins/transparency_patcher.md https://github.com/HoLLy-HaCKeR/BetterDiscord-Themes-and-Plugins/blob/master/Themes/Transparency.md
     
  15. MarcusD
    OP

    MarcusD F00FCACE addict

    Member
    1,062
    1,978
    Oct 16, 2015
    Hungary
    /media/marcus/WESTERNDIGI
    oh wait! I remember that I have changed the way I do transparent Discord on Windows! instead of using "transparent: true" you only need to patch the background color to "#00000000" and run "transdiscord.exe" every time you reopen Discord itself. don't worry though, you can add both to your auto-startup list, the program will idle loop 'till Discord actually starts
     
  16. Filo97

    Filo97 A Nintendo REALLY big hacking fan

    Member
    3,567
    1,160
    Oct 8, 2015
    Italy
    an ancient videogame...
    Yeah i have another problem tho...with betterdiscord i can't find a resources folder. And with beautifuldiscord the background color doesn't work like that. eDIT: Nvm, wrong folder. I can ifnd it now

    — Posts automatically merged - Please don't double post! —

    Could you maybe help me via PM?
     
    Last edited by Filo97, Jun 4, 2017