Skip to content

Instantly share code, notes, and snippets.

@theSinner
Last active October 24, 2020 05:37
Show Gist options
  • Save theSinner/463dfab5e5551fa1918943788cd481c1 to your computer and use it in GitHub Desktop.
Save theSinner/463dfab5e5551fa1918943788cd481c1 to your computer and use it in GitHub Desktop.
Make Discord message section RTL using js
let customCss = `
div[class^='messagesWrapper-'] {
font-family: 'dana', 'vazir';
direction: rtl !important;
}
div[class^='message-'] {
padding-right: 72px !important;
padding-left: 48px !important;
}
div[class^='message-'] img[class^='avatar-'] {
left: auto !important;
right: 16px !important;
}
div[class^='message-'] div[class^='markup-'] {
padding-left: unset !important;
margin-left: unset !important;
margin-right: -72px !important;
padding-right: 72px !important;
text-align: right !important;
}
div[class^='message-'] div[class^='container-'] {
direction: rtl !important;
}
div[class^='message-'] div[class^='markup-'] div[class^='blockquoteContainer-'] {
direction: rtl !important;
padding-right: 2rem !important;
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
div[class^='message-'] div[class^='markup-'] span.mention {
margin-bottom: 0.2rem !important;
margin-top: 0.2rem !important;
display: inline-block !important;
line-height: 1.3rem !important;
padding-top: 0.2rem !important;
padding-left: 0.3rem !important;
padding-right: 0.3rem !important;
}
div[class^='message-'] h2[class^='header-'] {
direction: rtl !important;
text-align: right !important;
}
div[class^='message-'] h2[class^='header-'] span[class^='headerText-'] {
margin-right: 0px !important;
margin-left: 0.25rem !important;
}
div[class^='message-'] h2[class^='header-'] span[class^='headerText-'] span[class^='botTagCozy-'] {
margin-right: 0.25rem !important;
margin-left: 0px !important;
}
div[class^='message-'] h2[class^='header-'] span[class^='timestamp-'] {
margin-left: 0px !important;
margin-right: 0.25rem !important;
}
div[class^='channelTextArea-'] div[class^='textArea-'] {
font-family: 'dana', 'vazir';
direction: rtl !important;
text-align: right !important;
}
div[class^='channelTextArea-'] div[class^='markup-'] {
font-family: 'dana', 'vazir';
direction: rtl !important;
text-align: right !important;
}
`;
var head = document.head;
var darkStyles = document.createElement('style');
darkStyles.appendChild(document.createTextNode(customCss));
head.appendChild(darkStyles);
@theSinner
Copy link
Author

theSinner commented Oct 21, 2020

Good for chats with RTL messages. Because of Discord's Content Security Policy, it's not possible to add third party links to the HTML. So you can open Developer Tools of the app and copy and paste these lines into the Console section untill I find a way to inject the code to the Electron app

screenshot

@dezashibi
Copy link

محشر بود آقا دستت درد نکنه

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment