Widget:Discord: Difference between revisions

Latest revision as of 10:38, 26 September 2024

This widget allows you to embed a Discord widget (HTML version) on your wiki page.

Using this widget

For information on how to use this widget, see widget description page on MediaWikiWidgets.org.

== Copy to your site == To use this widget on your site, install MediaWiki Widgets extension and copy the full source code of this page to your wiki as page Widget:Discord.

@@ Line 1: / Line 1: @@
 <noinclude>__NOTOC__
 This widget allows you to embed a '''[https://blog.discordapp.com/add-the-discord-widget-to-your-site/ Discord widget]''' (HTML version) on your wiki page.
@@ Line 7: / Line 8: @@
 For information on how to use this widget, see [https://www.mediawikiwidgets.org/Discord widget description page on MediaWikiWidgets.org].
-== Copy to your site ==
+<style>
+.parent-container {
+	display: flex;
+	width: 100%;
+	height: calc(100vh - 120px); }
+.child-container {
+	flex: 1;
+	margin: 10px;
+}
+</style>
+<div class="parent-container">
+	== Copy to your site ==
 To use this widget on your site, install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''.
 </noinclude><includeonly>
-<style>
-    display: flex;
+<iframe src="//discordapp.com/widget?id=<!--{$id|escape:'html'}-->&theme=<!--{$theme|default:"dark"|escape:urlpathinfo}-->" width="<!--{$width|default:"300"|escape:html}-->" height="<!--{$height|default:"500"|escape:html}-->" allowtransparency="true"  frameborder="0" allowfullscreen class="child-container"></iframe></includeonly>
-</style>
+</div>
-<iframe src="//discordapp.com/widget?id=<!--{$id|escape:'html'}-->&theme=<!--{$theme|default:"dark"|escape:urlpathinfo}-->" width="<!--{$width|default:"550"|escape:html}-->" height="<!--{$height|default:"500"|escape:html}-->" allowtransparency="true" style="border: none"></iframe></includeonly>