-
Notifications
You must be signed in to change notification settings - Fork 0
/
bd-quickstart.html
375 lines (361 loc) · 15 KB
/
bd-quickstart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/b214d16b30.js"
crossorigin="anonymous"
></script>
<script src="functions.js"></script>
<style>
body {display: inline!important;} /* need this or else it breaks*/
a {
text-decoration: underline;
color: #8be9fd !important;
}
.aNoPadding {
padding: 0px !important;
text-decoration: underline;
}
h2 {
text-decoration: underline;
}
.error {
color: #d2042d;
padding: 0px !important;
}
.sidebar {
width: 230px !important;
}
.sidebar a {
font-size: 18px;
color: lightgray !important;
}
td:nth-child(even),
th:nth-child(even) {
background-color: #b00225;
color:white
}
td:nth-child(odd),
th:nth-child(odd) {
background-color: #309649;
color:white
}
table {
border-spacing: 25px;
font-family: Inconsolata;
font-size: 18px;
}
table,
th,
td {
border: 2px solid #20212b;
border-collapse: collapse;
border-color: #20212b;
}
th,
td {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 40px;
}
img {
max-width: 100%;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: auto;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #30304a;
color: white;
text-align: center;
height: 20px;
}
</style>
<title>BetterDiscord Quickstart Guide</title>
</head>
<body>
<script>
mybutton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
</script>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div id="top" style="padding: 10px"></div>
<h1>BetterDiscord Quickstart Guide</h1>
<p>
Welcome to my quickstart guide for BetterDiscord!<br />
Here I will go over the basics for getting started with BetterDiscord<br /><br />
Table of Contents<br />
• <a href="#install" class="aNoPadding">Installation</a><br />
• <a href="#plugins" class="aNoPadding">Downloading Plugins</a><br />
• <a href="#themes" class="aNoPadding">Downloading Themes</a><br />
• <a href="#support" class="aNoPadding">Getting Support</a><br />
</p>
<h2 id="install">Part 1: Installation</h2>
<p>
Go to the
<a href="https://betterdiscord.app/" target="_blank" class="aNoPadding"
>Official BetterDiscord site</a
>
and click "Download"<br /><br />
<img
src="https://slug.feen.us/zvejuu8h2j.png"
style="width: 50%"
/><br /><br />
The installer will start downloading.<br /><br />
Once it has finished, double click to open the file<br /><br />
<img
src="https://slug.feen.us/456ag4colh.png"
style="width: 50%"
/><br /><br />
The installer will open, and you can start the process of installing
BetterDiscord!<br /><br />
First, click "I accept the license agreement, then click "Next".<br /><br />
<img src="https://slug.feen.us/8jyfgm2iic.gif" /><br /><br />
Next, click "Install BetterDiscord"<br /><br />
<img src="https://slug.feen.us/vqptibwr8d.png" /><br /><br />
Then, click the Discord version you want to install BetterDiscord to.<br /><br />
The first one is Discord Stable - which is the regular version of Discord.
<br />
Discord PTB is the public test build of Discord.<br />
Discord Canary is the alpha test release of Discord, which can be
unstable.<br /><br />
Note: don't worry if not all three are available, just select the version
you want to install to.<br /><br />
<img src="https://slug.feen.us/fdscfh2csf.png" /><br /><br />
BetterDiscord will then begin to install, which will only take a couple
moments.<br />
Then you should see this screen, telling you the install completed.<br /><br />
<img src="https://slug.feen.us/g1j3eoaak4.png" /><br />
</p>
<p class="error">
If you do not see this screen,
<a class="error" href="#support" class="aNoPadding">click here</a>.
</p>
<p>
At this point the installer should have restarted your Discord app. If
not, just reopen Discord.<br />Enter your Discord user settings and scroll
down, you should see the BetterDiscord section.<br /><br />
<img src="https://slug.feen.us/lqr2lew47o.png" /><br /><br />
</p>
<p class="error">
If you don't see the BetterDiscord section,
<a class="error" href="#support">click here</a>.
</p>
<p>
If you do, that's it! You have successfully installed BetterDiscord!<br /><br />
<a href="#top">Back to Top</a>
</p>
<h2 id="plugins">Part 2: Downloading Plugins</h2>
<p>
Now, I will go over the basics of downloading Plugins.<br /><br />
Not interested in plugins? <a
href="#themes"
class="aNoPadding"
>Skip to Themes</a
><br><br>
In this example, we will be downloading a plugin called "PluginRepo" by
DevilBro.<br />
This plugin makes it easier to download other plugins,<br />as it adds a
tab in your Discord settings that looks almost exactly like the Plugins
page on the website.<br /><br /></p>
<p class="error">
If you already have some plugins downloaded, skip the first two steps.
</p>
<p>
First, head to the
<a
href="https://betterdiscord.app/plugins"
target="_blank"
class="aNoPadding"
>BetterDiscord plugins page</a
><br /><br />
In the search box on the page, type "PluginRepo" (don't worry about
capitalization) and hit Enter.<br /><br />
<img src="https://slug.feen.us/mty6ix5w65.png" /><br /><br />
PluginRepo will show up, now hit "Download" on the plugin card.<br /><br />
<img
src="https://slug.feen.us/2bmymxul3l.png"
style="width: 50%"
/><br /><br />
The plugin will download, and appear in your Downloads folder.<br /><br />
<img src="https://slug.feen.us/fbue3mk1az.png" /><br /><br />
Next, go to your Discord Settings, then find the "Plugins" tab under the
BetterDiscord section.<br />
Click either of the "Open plugin folder" buttons.<br /><br />
<img
src="https://slug.feen.us/57lq2j3wk6.png"
style="width: 50%"
/><br /><br />
It will open this folder:<br />
(It may open in the background, so check your taskbar)<br /><br />
<img src="https://slug.feen.us/tac6sldjlc.png" /><br /><br />
Next, drag and drop the PluginRepo plugin file from your Downloads to the
plugin folder.<br /><br />
<img
src="https://slug.feen.us/8v98b1c8bf.png"
style="width: 66%"
/><br /><br />
Head back to Discord, and you will see this screen.<br />
Simply click "Download Now", and it will download another plugin called
"BDFDB".<br /><br />
<img src="https://slug.feen.us/qydan6cccm.png" width="50%" /><br /><br />
Your Plugins tab will now look like this:<br />
If you see the "The following plugins need to be updated" bar at the top,
just click "All" and it will go away.<br /><br />
<img src="https://slug.feen.us/qb5fbtmsdv.png" width="50%" /><br /><br />
Now click the enable button to turn on the plugin.<br /><br />
<img src="https://slug.feen.us/ti9ur98o7i.gif" /><br /><br />
You will now see a new tab has appeared in the BetterDiscord section.<br /><br />
<img src="https://slug.feen.us/zl5sioa20c.png" /><br /><br />
Click on the tab, and you will see the Plugin Repo.<br /><br />
<img src="https://slug.feen.us/hpof7xy6kg.png" width="50%" /><br /><br />
You can now use this to download other plugins you would like to use.<br />
The plugins will download directly into the Plugins folder,<br />so you
don't need to worry about moving them from your Downloads folder.<br /><br />
And that covers the basics of downloading plugins!<br /><br />
<a href="#top" class="aNoPadding">Back to Top</a>
</p>
<h2 id="themes">Part 3: Downloading Themes</h2>
<p>
Now, I will show you how to download a theme.<br />
We will download "ClearVision" by untuned in this example.<br /><br />
First, head to the
<a
href="https://betterdiscord.app/themes"
target="_blank"
class="aNoPadding"
>BetterDiscord Themes page</a
><br /><br />
You will immediately see ClearVision as the first theme, as it is the most
popular theme (at the time of writing).<br /><br />
<img src="https://slug.feen.us/9punip5w89.png" width="50%" /><br /><br />
Click the "Download" button on the theme's card<br /><br />
<img src="https://slug.feen.us/tcz30g3rqh.png" width="50%" /><br /><br />
The theme file will download and appear in your Downloads folder<br /><br />
<img src="https://slug.feen.us/h9b2z46f2h.png" /><br /><br />
Next, go to your Discord settings, then find the "Themes" tab under the
BetterDiscord section.<br />
Click either of the "Open themes folder" buttons.<br /><br />
<img src="https://slug.feen.us/zd7nr2je78.png" width="50%" /><br /><br />
It will open this folder:<br />
(It may open in the background, so check your taskbar)<br /><br />
<img src="https://slug.feen.us/tgatvlemfd.png" /><br /><br />
Next, drag and drop the ClearVision theme file from your Downloads to the
themes folder.<br /><br />
<img src="https://slug.feen.us/vl8k2w4gxv.gif" width="66%" /><br /><br />
Your Themes tab will now look like this:<br /><br />
<img src="https://slug.feen.us/gnpnz4musd.png" width="50%" /><br /><br />
Now click the enable button to turn on the theme.<br /><br />
<img src="https://slug.feen.us/5vkizgwwcc.gif" /><br /><br />
Now your Discord is looking snazzy!<br /><br />
<img src="https://slug.feen.us/s2u2mptx7d.png" width="60%" /><br /><br />
And that covers the basics of downloading themes!<br /><br />
<a href="#top" class="aNoPadding">Back to Top</a>
</p>
<h2 id="support">Getting Support for Issues</h2>
<p>
BetterDiscord can have issues sometimes, with different fixes for
different problems.<br . />
Thankfully, there is a Discord support server,
<a
href="#support-server"
class="aNoPadding"
>link here</a
><br /><br />
Use the #support channel to post your issue.<br /><br />
<u>If you're going to post an issue, here are some DOs and DON'Ts</u>
<center>
<table>
<tr>
<th>DO</th>
<th>DON'T</th>
</tr>
<tr>
<td>
Read #info, #rules, #faq<br />& #known-issues
</td>
<td>Post your issue without doing that</td>
</tr>
<tr>
<td>
Describe your issue the best you can<br />& provide any
screenshots that help show the problem
</td>
<td>
Just say "I need help", "Can anyone help", "Someone help pls"<br />without
describing the problem first
</td>
</tr>
<tr>
<td>Wait patiently for someone to help after posting your issue</td>
<td>Repost your issue if you didn't get a response the first time</td>
</tr>
<td>Remember that the people giving support are REAL PEOPLE with REAL LIVES</td>
<td>Think that the support team are robots who only live to provide support 24/7</td>
</table>
</center>
</p>
<h2>Extra: Errors you may come across following this guide</h2>
<h3>While installing</h3>
<p>
Any errors you get while installing may look the same, but in fact are
different problems with different fixes<br />
for example, the following error is caused by using an outdated
installer:<br /><br />
<img src="https://slug.feen.us/8hj9fs59cv.png" width="30%" /><br /><br />
The simple fix for this issue is to redownload the installer from
<a href="https://betterdiscord.app/" class="aNoPadding" target="_blank"
>https://betterdiscord.app/</a
>.</p>
<p class="error">If you got an error that looks different from the one above - the fix will (probably) be different.</p>
<p>
In this case I direct you to join the support server linked below,<br />take a screenshot of the installer window <b>clearly showing the error message</b>,
and use it in your support issue.<br /><br />
For anything else, screenshots are <b>the best</b> way to describe your issue.
</p>
<h2 id="support-server">Support Server</h3>
<p>
Here you will find the link to the BetterDiscord Support server<br />
<u>Please</u>, be respectful of the support members and be patient with the solutions they provide,<br />as depending on the issue it could have more complicated steps to follow.<br /><br />
Link: <a
href="https://discord.gg/0Tmfo5ZbORCRqbAd"
class="aNoPadding"
target="_blank"
>https://discord.gg/0Tmfo5ZbORCRqbAd</a
>
</p>
<h2 id="credits">Credits & footnotes</h2>>
<p>
Thanks to the BetterDiscord team, for inspiring me to write this guide<br /><br />
As of 1/1/2023 I have decided to start doing one-to-one DM support.<br />You can send me a message request on Discord and I'll do my best help you out there.<br /><br />
<img src="https://cdn.upload.systems/uploads/O9XnXJxY.png" width="30%" /><br /><br>
Look for me in the BetterDiscord support server!
</p>
<div style="padding: 20px"></div>
<div class="footer">I'm looking for feedback on this page. If you have any comments or improvements please open an issue <a href="https://github.com/fowlis/fowlis.github.io/issues" class="aNoPadding"
>here</a>.</div>
</body>
</html>