search

ClearVision / ClearVision-v6

Highly customizable theme for BetterDiscord.
https://clearvision.github.io/
Apache License 2.0
389 stars 1.88k forks source link

Image importation #94

Closed HaIfBlind closed 2 years ago

HaIfBlind commented 2 years ago

How do I import an image into the background of this theme

mxr2004 commented 2 years ago

Hello @VirgoTheOne-Eyed,

You can either edit the .css file of the theme (not recommended if you dont know what you do) or go into the discord settings -> Betterdiscord -> Themes and click on the little settingsicon for ClearVision, then scroll down a little til you find an text input named Background Image. Then enter the url or click on browse files the correct input will get set automatically

HaIfBlind commented 2 years ago

@mxr2004 I did that but it did not work

https://i.imgur.com/kiJDDoD.jpg This is the background I am trying to use

mxr2004 commented 2 years ago

@VirgoTheOne-Eyed

@mxr2004 I did that but it did not work

https://i.imgur.com/kiJDDoD.jpg This is the background I am trying to use

Okay. Then do the following:

Step 1: Convert Image to base64 I did it for you: url('data:image/jpeg;base64,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')

Step 2: paste the above line in Line 43 of your css file

Step 3: Dont forget to save the file and - if necessary - reload discord by fully closing and reopening it!

mxr2004 commented 2 years ago

You could also use the theme Editor described in the Readme file

mxr2004 commented 2 years ago

Please close this issue @VirgoTheOne-Eyed

Leozard commented 2 years ago

@mxr2004 while I appreciate your help, please read up on css first. First, editing a .css file is perfecty fine and if something goes wrong, you can just delete the line that caused it or redownload the file. Second, converting the image to base64 is unnecessary and just makes the file size bigger, it only allows the image be hosted locally. Third, we can transform the image without using image editing tools.

Leozard commented 2 years ago

@VirgoTheOne-Eyed if u need any more help, I advise you to join the discord server as the other devs and I are active there the most

mxr2004 commented 2 years ago

@mxr2004 while I appreciate your help, please read up on css first. First, editing a .css file is perfecty fine and if something goes wrong, you can just delete the line that caused it or redownload the file. Second, converting the image to base64 is unnecessary and just makes the file size bigger, it only allows the image be hosted locally. Third, we can transform the image without using image editing tools.

Hey @Leozard , you are absolutely right that editing a .css file doesn't break anything except for the styling maybe. Styling without any idea of css is still hard though. The option to use a url was already mentioned and lastly regarding another issue. A vanilla Background in css cant be transformed. I didn't know that Discord uses the background as an html Element which makes it transformable again. Thanks for your reply :)