<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/">
	<channel>
		<title><![CDATA[Canis RPG - Game Development]]></title>
		<link>https://canismajor-rpg.com/</link>
		<description><![CDATA[Canis RPG - https://canismajor-rpg.com]]></description>
		<pubDate>Sat, 06 Jun 2026 19:40:55 +0000</pubDate>
		<generator>MyBB</generator>
		<item>
			<title><![CDATA[DISCUSSION: Activity Requirements]]></title>
			<link>https://canismajor-rpg.com/showthread.php?tid=1907</link>
			<pubDate>Mon, 25 May 2026 18:44:56 -0700</pubDate>
			<dc:creator><![CDATA[<a href="https://canismajor-rpg.com/member.php?action=profile&uid=1">Canis Major</a>]]></dc:creator>
			<guid isPermaLink="false">https://canismajor-rpg.com/showthread.php?tid=1907</guid>
			<description><![CDATA[Hey all! So as we have been going through feedback from our survey, something that really stuck out to us was the multiple mentions of Canis Major's activity. After speaking to some of you more one on one, the Canis staff has made the decision to update the site's overall activity requirements.<br />
<br />
<div class="h3">Canis &amp; You</div>
Being lax and laid back on activity is a double edged sword &#8212; While it offers members a lot of wiggle room for life and the things that come up, it also can (and has, for many of us) lead to plots stalling, members losing interest, and a general slowness that hurts the site overall. So what can we do?<br />
<br />
Well, that's where you come in. We want to hear from you, and see what you think is best! Do we continue as is? Or do we tighten the reigns juuust a smidge? Tell us your thoughts, even if you may have already shared them in the survey! Discuss here amongst yourselves, or ask staff direct questions by tagging the @<a id="mention_1" href="member.php?action=profile&amp;uid=1" class="mentionme_mention" title="Canis Major's profile"><span style="color: green;"><strong><em>#CANIS_DISPLAYNAME_STYLED_Canis Major#</em></strong></span></a> account. Feel free to go into as much detail on any ideas you might have! Canis staff will consider all thoughts and ideas, though we may alter here and there to keep it within the realm of Canis' vision.<br />
<br />
Some things to keep in mind throughout this discussion:<ul class="mycode_list"><li>While discussion is encouraged, we require that everyone speaks to each other with civility and respect in mind.<br />
</li>
<li>Each suggestion made comes with someone's personal reasoning behind why it might be a good solution. Do not criticize someone else's idea simply because you don't agree with it.<br />
</li>
<li>A poll may or may not follow this discussion, depending on the feedback we receive here. As always, the Canis staff will keep you all updated on where we're at and what we're thinking.<br />
</li>
</ul>
We will close this discussion in <span style="font-weight: bold;" class="mycode_b">two weeks, or on 6/8/2026</span>. Thank you, and we look forward to hearing what you have to say!]]></description>
			<content:encoded><![CDATA[Hey all! So as we have been going through feedback from our survey, something that really stuck out to us was the multiple mentions of Canis Major's activity. After speaking to some of you more one on one, the Canis staff has made the decision to update the site's overall activity requirements.<br />
<br />
<div class="h3">Canis &amp; You</div>
Being lax and laid back on activity is a double edged sword &#8212; While it offers members a lot of wiggle room for life and the things that come up, it also can (and has, for many of us) lead to plots stalling, members losing interest, and a general slowness that hurts the site overall. So what can we do?<br />
<br />
Well, that's where you come in. We want to hear from you, and see what you think is best! Do we continue as is? Or do we tighten the reigns juuust a smidge? Tell us your thoughts, even if you may have already shared them in the survey! Discuss here amongst yourselves, or ask staff direct questions by tagging the @<a id="mention_1" href="member.php?action=profile&amp;uid=1" class="mentionme_mention" title="Canis Major's profile"><span style="color: green;"><strong><em>#CANIS_DISPLAYNAME_STYLED_Canis Major#</em></strong></span></a> account. Feel free to go into as much detail on any ideas you might have! Canis staff will consider all thoughts and ideas, though we may alter here and there to keep it within the realm of Canis' vision.<br />
<br />
Some things to keep in mind throughout this discussion:<ul class="mycode_list"><li>While discussion is encouraged, we require that everyone speaks to each other with civility and respect in mind.<br />
</li>
<li>Each suggestion made comes with someone's personal reasoning behind why it might be a good solution. Do not criticize someone else's idea simply because you don't agree with it.<br />
</li>
<li>A poll may or may not follow this discussion, depending on the feedback we receive here. As always, the Canis staff will keep you all updated on where we're at and what we're thinking.<br />
</li>
</ul>
We will close this discussion in <span style="font-weight: bold;" class="mycode_b">two weeks, or on 6/8/2026</span>. Thank you, and we look forward to hearing what you have to say!]]></content:encoded>
		</item>
		<item>
			<title><![CDATA[Bug: Links on Compendium have an error]]></title>
			<link>https://canismajor-rpg.com/showthread.php?tid=1828</link>
			<pubDate>Wed, 11 Mar 2026 12:16:37 -0700</pubDate>
			<dc:creator><![CDATA[<a href="https://canismajor-rpg.com/member.php?action=profile&uid=3805">Muse</a>]]></dc:creator>
			<guid isPermaLink="false">https://canismajor-rpg.com/showthread.php?tid=1828</guid>
			<description><![CDATA[<div class="h2">Steps to Reproduce</div>
<br />
So far, I tried to click the Creature Groups, Mythos and Unsorted all the same error!<br /><!-- start: postbit_attachments_attachment -->
<br /><!-- start: attachment_icon -->
<img src="https://canismajor-rpg.com/images/attachtypes/image.png" title="PNG Image" border="0" alt=".png" />
<!-- end: attachment_icon -->&nbsp;&nbsp;<a href="attachment.php?aid=2" target="_blank" title="">Screenshot 2026-03-11 191452.png</a> (Size: 19 KB / Downloads: 6)
<!-- end: postbit_attachments_attachment -->]]></description>
			<content:encoded><![CDATA[<div class="h2">Steps to Reproduce</div>
<br />
So far, I tried to click the Creature Groups, Mythos and Unsorted all the same error!<br /><!-- start: postbit_attachments_attachment -->
<br /><!-- start: attachment_icon -->
<img src="https://canismajor-rpg.com/images/attachtypes/image.png" title="PNG Image" border="0" alt=".png" />
<!-- end: attachment_icon -->&nbsp;&nbsp;<a href="attachment.php?aid=2" target="_blank" title="">Screenshot 2026-03-11 191452.png</a> (Size: 19 KB / Downloads: 6)
<!-- end: postbit_attachments_attachment -->]]></content:encoded>
		</item>
		<item>
			<title><![CDATA[News Feed [Announcements]]]></title>
			<link>https://canismajor-rpg.com/showthread.php?tid=549</link>
			<pubDate>Wed, 12 Feb 2025 16:07:09 -0800</pubDate>
			<dc:creator><![CDATA[<a href="https://canismajor-rpg.com/member.php?action=profile&uid=1">Canis Major</a>]]></dc:creator>
			<guid isPermaLink="false">https://canismajor-rpg.com/showthread.php?tid=549</guid>
			<description><![CDATA[This thread is made with the intention of keeping an active news feed for quick updates regarding gameplay, bugs, events, or anything else that might be relayed through our discord announcements so that members are not missing anything for choosing to not participate in our server (minus site outage updates for obvious reasons).<br />
<br />
Any questions regarding updates may be asked in <a href="https://canismajor-rpg.com/forumdisplay.php?fid=26" target="_blank" rel="noopener" class="mycode_url">ask the staff</a> or via direct message to a preferred staff member should you not be part of the discord. We will try to update announcement posts with questions and their answers from the discord if they prove to need clarification!]]></description>
			<content:encoded><![CDATA[This thread is made with the intention of keeping an active news feed for quick updates regarding gameplay, bugs, events, or anything else that might be relayed through our discord announcements so that members are not missing anything for choosing to not participate in our server (minus site outage updates for obvious reasons).<br />
<br />
Any questions regarding updates may be asked in <a href="https://canismajor-rpg.com/forumdisplay.php?fid=26" target="_blank" rel="noopener" class="mycode_url">ask the staff</a> or via direct message to a preferred staff member should you not be part of the discord. We will try to update announcement posts with questions and their answers from the discord if they prove to need clarification!]]></content:encoded>
		</item>
		<item>
			<title><![CDATA[Hiding threads from threadlog]]></title>
			<link>https://canismajor-rpg.com/showthread.php?tid=506</link>
			<pubDate>Sat, 08 Feb 2025 15:13:40 -0800</pubDate>
			<dc:creator><![CDATA[<a href="https://canismajor-rpg.com/member.php?action=profile&uid=3033">Mesen-ka</a>]]></dc:creator>
			<guid isPermaLink="false">https://canismajor-rpg.com/showthread.php?tid=506</guid>
			<description><![CDATA[It'd be nice to be able to select individual threads to hide from your threadlog, or have a separate tab for marked "exited" threads. :) I have some threads that say I need to reply to them since others continued to post after my character left the thread. Being able to organize those so they don't count towards needed replies would be nice!]]></description>
			<content:encoded><![CDATA[It'd be nice to be able to select individual threads to hide from your threadlog, or have a separate tab for marked "exited" threads. :) I have some threads that say I need to reply to them since others continued to post after my character left the thread. Being able to organize those so they don't count towards needed replies would be nice!]]></content:encoded>
		</item>
		<item>
			<title><![CDATA[MyCode: Axis/ Overlay]]></title>
			<link>https://canismajor-rpg.com/showthread.php?tid=84</link>
			<pubDate>Thu, 02 Jan 2025 19:09:33 -0800</pubDate>
			<dc:creator><![CDATA[<a href="https://canismajor-rpg.com/member.php?action=profile&uid=3046">Machiavelli</a>]]></dc:creator>
			<guid isPermaLink="false">https://canismajor-rpg.com/showthread.php?tid=84</guid>
			<description><![CDATA[<div class="h2">Description of MyCode Request</div>
<br />
Add a z axis or ability to lay images over existing code, or text over existing images<br />
<br />
example:<br />
<br />
<img src="https://i.imgur.com/v5tePnr.png" style="width:200px; height:auto;" alt="" /><br />
<br />
<img src="https://i.imgur.com/h36rlmG.png" style="width:200px; height:auto;" alt="" /><br />
<br />
<img src="https://i.imgur.com/BMKElJF.png" style="width:200px; height:auto;" alt="" />]]></description>
			<content:encoded><![CDATA[<div class="h2">Description of MyCode Request</div>
<br />
Add a z axis or ability to lay images over existing code, or text over existing images<br />
<br />
example:<br />
<br />
<img src="https://i.imgur.com/v5tePnr.png" style="width:200px; height:auto;" alt="" /><br />
<br />
<img src="https://i.imgur.com/h36rlmG.png" style="width:200px; height:auto;" alt="" /><br />
<br />
<img src="https://i.imgur.com/BMKElJF.png" style="width:200px; height:auto;" alt="" />]]></content:encoded>
		</item>
		<item>
			<title><![CDATA[MyCode: Expanded Collapse Functions]]></title>
			<link>https://canismajor-rpg.com/showthread.php?tid=81</link>
			<pubDate>Thu, 02 Jan 2025 18:50:00 -0800</pubDate>
			<dc:creator><![CDATA[<a href="https://canismajor-rpg.com/member.php?action=profile&uid=3046">Machiavelli</a>]]></dc:creator>
			<guid isPermaLink="false">https://canismajor-rpg.com/showthread.php?tid=81</guid>
			<description><![CDATA[<div class="h2">Description of MyCode Request</div>
<br />
Allow a "collapse link" that will further diversify the utility of collapsible code. It would work similarly to the current hover code.<br />
<br />
example:<br />
<br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[collapse-link=name 1]image, text, or icon here that when clicked will work as the trigger point[/collapse-link]<br />
<br />
[collapse=name 1]Content to be revealed here![/collapse]</code></div>
This could also allow the link to the collapse to exist in a different location to the actual reveal location.]]></description>
			<content:encoded><![CDATA[<div class="h2">Description of MyCode Request</div>
<br />
Allow a "collapse link" that will further diversify the utility of collapsible code. It would work similarly to the current hover code.<br />
<br />
example:<br />
<br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[collapse-link=name 1]image, text, or icon here that when clicked will work as the trigger point[/collapse-link]<br />
<br />
[collapse=name 1]Content to be revealed here![/collapse]</code></div>
This could also allow the link to the collapse to exist in a different location to the actual reveal location.]]></content:encoded>
		</item>
		<item>
			<title><![CDATA[MyCode Reference]]></title>
			<link>https://canismajor-rpg.com/showthread.php?tid=21</link>
			<pubDate>Wed, 01 Jan 2025 10:23:46 -0800</pubDate>
			<dc:creator><![CDATA[<a href="https://canismajor-rpg.com/member.php?action=profile&uid=1">Canis Major</a>]]></dc:creator>
			<guid isPermaLink="false">https://canismajor-rpg.com/showthread.php?tid=21</guid>
			<description><![CDATA[This is a list of custom MyCodes that work on the forum.<br />
<hr class="mycode_hr" />
<div class="h3">Shorthands</div>
<div class="tabulated container "><div class="row"><div class="col-md-6"><strong class="post_q">&#8220;Quotes used for speech&#8221;</strong></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[q]Quotes used for speech[/q]</code></div></div></div>
<div class="row"><div class="col-md-6"><strong style="color:#FF0000" class="mycode_color">&#8220;Quotes used for speech&#8221;</strong></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[q=#FF0000]Quotes used for speech[/q]</code></div></div></div>
<div class="row"><div class="col-md-6"><a href="member.php?action=profile&amp;uid=3" target="_blank">Link to a profile</a></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[p=3]Link to a profile[/p]</code></div></div></div>
<div class="row"><div class="col-md-6"><a href="showthread.php?tid=250" target="_blank">Link to a thread</a></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[t=250]Link to a thread[/t]</code></div></div></div>
<div class="row"><div class="col-md-6"><div class="text-right"><small class="text-muted">&#8212; By Zina Wow Cool Attribution</small></div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[attr]By Zina Wow Cool Attribution[/attr]</code></div></div></div>
<div class="row"><div class="col-md-6">&#8212; can be &#8212; used &#8212; to &#8212; do&#8212; pauses</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[mdash]</code></div></div></div>
<div class="row"><div class="col-md-6">middots &#183; are &#183; cool &#183; bro</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[middot]</code></div></div></div>
</div>
<hr class="mycode_hr" />
<div class="h3">Formatting</div>
<div class="tabulated container "><div class="row"><div class="col-md-6"><span style="width:25px; display:inline-block;">&#160;</span>Indenting is neat.<br />
It can give your post natural,<br />
<span style="width:25px; display:inline-block;">&#160;</span>or unnatural,<br />
breaks.<br />
</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[indent]Indenting is neat.<br />
It can give your post natural,<br />
[indent]or unnatural,<br />
breaks.</code></div></div></div>
<div class="row"><div class="col-md-6">
<div style="text-align: right;">Aligns text either left, right, or center.</div>
</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[align=right]Aligns text either left, right, or center.[/align]</code></div></div></div>
<div class="row"><div class="col-md-6"><span class="mycode_small">Small text is smol.</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[small]Small text is smol.[/small]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-size: 1.25rem;">Large text is lorg</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[large]Large text is lorg[/large]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Specific sizing</span><br />
The size tag uses <span style="font-weight: bold;" class="mycode_b">rem</span> units rather than points or pixels. The standard font size on Canis is <span style="font-weight: bold;" class="mycode_b">16px</span>. Rems are a multiplier of the standard font size. You can read more about them <a href="https://www.sitepoint.com/understanding-and-using-rem-units-in-css/" target="_blank" rel="noopener" class="mycode_url">here</a>, or you can remember that 2rems on Canis is 16 pixels * 2, or 32 pixels.<br />
<span style="font-weight: bold;" class="mycode_b">Limits:</span> Minimum 0.85, maximum 10.<br />
<br />
<span style="font-weight: bold;" class="mycode_b">ex.</span> =1.2Slightly big text</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[size=1.2]Slightly big text[/size]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Fonts</span><br />
There is no such thing as a standard web font. Fonts will display differently depending on the system, browser, and even monitor. You can find a list of "safe" fonts for use with web <a href="https://web.mit.edu/jmorzins/www/fonts.html" target="_blank" rel="noopener" class="mycode_url">here</a>, but keep in mind that fonts will only display if users have them installed on their system.<br />
<br />
Additionally, Canis has exactly two custom fonts hosted on Google Fonts: 'Quicksand' and 'Roboto' (the standard font)<br />
<span style="font-family: Times;" class="mycode_font">ex. Look I am in Times New Roman!</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[font=Times]Look I am in Times New Roman![/font]</code></div></div></div>
<div class="row"><div class="col-md-6"><span class="mycode_smallcaps">This is small caps. It can't be used with the small tag</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[smallcaps]This is small caps. It can't be used with the small tag[/smallcaps]</code></div></div></div>
<div class="row"><div class="col-md-6"><blockquote>Blockquotes are useful for really long quoted pieces of text, such as songs or even snippets of other posts!</blockquote></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[blockquote]Blockquotes are useful for really long quoted pieces of text, such as songs or even snippets of other posts![/blockquote]</code></div></div></div>
<div class="row"><div class="col-md-6"><div class="wrap-left clearfix">
<img src="https://placekitten.com/100/100" alt="[Image: 100]" class="mycode_img img-fluid" /><span style="font-weight: bold;" class="mycode_b">Word Wrapping Images</span><br />
You can use wrap <span style="font-weight: bold;" class="mycode_b">left</span> or <span style="font-weight: bold;" class="mycode_b">right</span> to word wrap images or boxes.<br />
</div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[wrap left][img]https://placekitten.com/100/100[/img][b]Word Wrapping Images[/b]<br />
You can use wrap [b]left[/b] or [b]right[/b] to word wrap images or boxes.[/wrap]</code></div></div></div>
<br />
</div>
<br />
<div class="h3">Page Components</div>
<div class="h4">Narrow</div><div style="margin: 0 auto; max-width: 400px">Make your text in a fancy narrow box. You can specify a width optionally - default is 500px. Cannot be less than 400px</div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[narrow width=400]Make your text in a fancy narrow box. You can specify a width optionally - default is 500px.[/narrow]</code></div>
<div class="h4">Out of Character Box</div><div style="text-align: left; text-indent: 20px; font-size: 14px; color: #8e8e8e;">This is me saying things out of character!</div>
<hr/>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[ooc]This is me saying things out of character![/ooc]</code></div>
<div class="h4">Note Box</div><hr/>
<div style="text-align: left; text-indent: 20px;"><small class="text-muted">This is me putting a note on a post!</small></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[note]This is me saying things out of character![/note]</code></div>
<div class="h4">hr</div>Creates a horizontal line. Usually defines an important thematic break in text.<br />
<hr class="mycode_hr" />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[hr]</code></div>
Also takes a width optionally:<br />
<hr style="width: 200px; margin-left: auto; margin-right: auto;" />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[hr width=200]</code></div>
<div class="h4">Headings</div>Headings create title text in multiple levels, from number 1 to 6. Headings of sizes 3 and 4 have been used in this very post!<br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[h3]This h3 tag is likely the largest tag you should use.[/h3]</code></div>
<div class="h4">Images</div>
Standard MyBB supports the <tt>[img]URL[/img]</tt> tag. We also support the following with the special <tt>[image]URL[/image]</tt> tag:<ul class="mycode_list"><li><span style="font-weight: bold;" class="mycode_b">width:</span> constrains the width<br />
</li>
<li><span style="font-weight: bold;" class="mycode_b">align:</span> aligns the image to left, right, or center<br />
</li>
<li><span style="font-weight: bold;" class="mycode_b">circle:</span> creates a rounded image<br />
</li>
</ul>
<div class="row"><div class="col-md-4"><img src="https://placebear.com/640/360" style="width:200px; height:auto;" alt="" /><br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image width=200]https://placebear.com/640/360[/image]</code></div></div><div class="col-md-4"><img src="https://placebear.com/640/360" alt="" class="rounded-circle" /><br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image circle]https://placebear.com/640/360[/image]</code></div></div><div class="col-md-4"><div class="text-right"><img src="https://placebear.com/100/100" alt="" /></div>
<br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image align=right]https://placebear.com/100/100[/image]</code></div></div></div>
<br />
You can also force images to be perfect circles:<br />
<br />
<div class="row"><div class="col-md-5"><span style="font-weight: bold;" class="mycode_b">Perfect Circle</span><br />
<div class="perfect-circle">
<div style="background-image: url('https://loremflickr.com/300/400'); max-width: px; display: block;"></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image perfect-circle]https://loremflickr.com/300/400[/image]</code></div></div><div class="col-md-7"><span style="font-weight: bold;" class="mycode_b">Perfect Circle with constrained width</span><br />
<div class="perfect-circle">
<div style="background-image: url('https://loremflickr.com/300/400'); max-width: 200px; display: block;"></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image perfect-circle width=200]https://loremflickr.com/300/400[/image]</code></div></div></div>
<br />
<div class="h4">Box</div><div class="card"><div class="card-header">Wow a box</div><div class="card-body">The header is optional! Boxes are <span style="font-weight: bold;" class="mycode_b">not available in IC forums.</span></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[box header="Wow a box"]The header is optional![/box]</code></div>
<div class="h4">Scrollable Box</div>
<div class="card"><div class="card-body scrollable" style="max-height:100px"> For if you have a lot to say<br />
<br />
Now you can say more<br />
<br />
and take up less room!<br />
<br />
The box will infinately scroll<br />
<br />
so write as much as you need without the page running on</div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[box scrollable=100] For if you have a lot to say<br />
<br />
Now you can say more<br />
<br />
and take up less room!<br />
<br />
The box will infinately scroll<br />
<br />
so write as much as you need without the page running on[/box]</code></div>
<div class="h4">Row/Column</div><div class="row"><div class="col-md-12">By using <tt>[row]</tt> and <tt>[col=#]</tt> tags, you can achieve more complex layouts. Each row is split into <span style="font-weight: bold;" class="mycode_b">12 units</span>, and each column can be between 1 and 12 units. Thus, for an even two column layout:</div></div>
<div class="row"><div class="col-md-6"><div class="card"><div class="card-body">Whoa</div></div></div><div class="col-md-6"><div class="card"><div class="card-body">Another box!</div></div></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[row][col=6][box]Whoa[/box][/col][col=6][box]Another box![/box][/col][/row]</code></div>
The columns can be any combination as long as they add up to twelve.<br />
<div class="row"><div class="col-md-2"><div class="card"><div class="card-body">beep</div></div></div><div class="col-md-3"><div class="card"><div class="card-body">boop</div></div></div><div class="col-md-7"><div class="card"><div class="card-body">bop</div></div></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[row][col=2][box]beep[/box][/col][col=3][box]boop[/box][/col][col=7][box]bop[/box][/col][/row]</code></div>
And, if you wrap them in table tags, you can get lines between each row:<br />
<div class="tabulated container "><div class="row"><div class="col-md-12">One row</div></div>
<div class="row"><div class="col-md-12">Two row</div></div>
<div class="row"><div class="col-md-12">Three rows!</div></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[table][row][col=12]One row[/col][/row]<br />
[row][col=12]Two row[/col][/row]<br />
[row][col=12]Three rows![/col][/row][/table]</code></div>
and with borders:<br />
<div class="tabulated container border"><div class="row"><div class="col-md-12">One row</div></div>
<div class="row"><div class="col-md-12">Two row</div></div>
<div class="row"><div class="col-md-12">Three rows!</div></div></div>
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[table border][row][col=12]One row[/col][/row]<br />
[row][col=12]Two row[/col][/row]<br />
[row][col=12]Three rows![/col][/row][/table]</code></div> <br />
<hr class="mycode_hr" />
<div class="h3">Extra functionality</div>
<div class="tabulated container ">
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Hoverable Text</span><br />
Often used for characters who speak different languages.<br />
<span class="hover-text" title="Some hidden text :O">Click me to show!<span class="text-to-show" style="display: none"> &#8212; <span>Some hidden text :O</span></span></span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[hover=Some hidden text :O]Click me to show![/hover]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">FontAwesome Icons</span><br />
We use font awesome icons like this one: <i class="fa fa-bed"></i><br />
Visit the <a href="https://fontawesome.com/icons?d=gallery&amp;p=2" target="_blank" rel="noopener" class="mycode_url">Font Awesome Icons</a> page for a list of every icon.<br />
</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[icon=bed]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Text Fades</span><br />
<span class="text-gradient" style="color:#ff0000 ; background: -o-linear-gradient(#ff0000, orange); background: -moz-linear-gradient(#ff0000, orange); background: linear-gradient(#ff0000, orange); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Wow a text fade!</span><br />
<span class="text-gradient" style="color:magenta ; background: -o-linear-gradient(left, magenta, purple); background: -moz-linear-gradient(left, magenta, purple); background: linear-gradient(to left, magenta, purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">This one goes to the left!</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[fade from=#ff0000 to=orange]Wow a text fade![/fade]<br />
[fade from=magenta to=purple dir=left]This one goes to the left![/fade]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Progress Bars</span><br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: calc(100% * (10 / 40))" aria-valuenow="10" aria-valuemin="0" aria-valuemax="40">progress</div>
</div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[progress value=10 max=40]progress[/progress]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Colour Swatch</span><br />
Color swatches will automatically adjust their background when they aren't readable with the current color scheme. You can force dark color swatches to display with the -dark suffix.<br />
<div class="swatch" data-color="red"><i class="fas fa-square" style="color:red;"></i> red</div><div class="swatch" data-color="#44fe98"><i class="fas fa-square" style="color:#44fe98;"></i> #44fe98</div><div class="swatch swatch-dark" data-color="orange"><i class="fas fa-square" style="color:orange;"></i> orange</div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[swatch=red][swatch=#44fe98][swatch-dark=orange]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Badges</span><br />
Shows a badge with an optional context colour.<br />
<span class="mycode_badge badge badge-">Plain</span> <span class="mycode_badge badge badge-secondary">Secondary</span> <span class="mycode_badge badge badge-info">Info</span> <span class="mycode_badge badge badge-warning">Warning</span> <span class="mycode_badge badge badge-danger">Danger</span> <span class="mycode_badge badge badge-success">Success</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[badge]Plain[/badge] [badge secondary]Secondary[/badge] [badge info]Info[/badge] [badge warning]Warning[/badge] [badge danger]Danger[/badge] [badge success]Success[/badge]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Collapse Button</span><br />
Shows content when clicked<br />
<button class="btn btn-secondary collapsed" type="button" data-toggle="collapse" data-target="#collapse-Click me!" aria-expanded="false" aria-controls="collapse-Click me!">Click me!</button><br />
<div class="collapse" id="collapse-Click me!">And all will be revealed</div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[collapse text="Click me!"]And all will be revealed[/collapse]</code></div></div></div>
</div>
<hr class="mycode_hr" />
<div class="h4">Vertical Alignment within Columns</div>
<div class="row"><div class="col-md-6">You can vertically align items within columns or a post itself with this.<br />
<span style="font-weight: bold;" class="mycode_b">Options:</span><ul class="mycode_list"><li>center<br />
</li>
<li>start<br />
</li>
<li>end<br />
</li>
</ul>
</div><div class="col-md-6"><div style="display: flex; flex-direction: column; justify-content:center; height: 100%;"><div class="card"><div class="card-body">I'm in the middle of the row!</div></div></div></div></div>
<div class="row"><div class="col-md-12">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[row][col=6]Left column[col=6][valign=center][box]I'm in the middle of the row![/box][/valign][/col][/row]</code></div></div></div>
<hr class="mycode_hr" />
<div class="h4">Spotify</div><iframe src="https://embed.spotify.com/?uri=https://open.spotify.com/album/4RuzGKLG99XctuBMBkFFOC" width="300" height="380" frameborder="0" allowtransparency="true"></iframe><br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[spotify]https://open.spotify.com/album/4RuzGKLG99XctuBMBkFFOC[/spotify]</code></div>
<div class="h4">Youtube</div>To embed youtube videos, you will need the embed URL. Visit <a href="https://support.google.com/youtube/answer/171780?hl=en" target="_blank" rel="noopener" class="mycode_url">Google Support</a> for more details.<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL21-a4V5mwwuPOf1rbK4VLm_g4w_5ALXP" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"></iframe><br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[youtube]https://www.youtube.com/embed/videoseries?list=PL21-a4V5mwwuPOf1rbK4VLm_g4w_5ALXP[/youtube]</code></div>]]></description>
			<content:encoded><![CDATA[This is a list of custom MyCodes that work on the forum.<br />
<hr class="mycode_hr" />
<div class="h3">Shorthands</div>
<div class="tabulated container "><div class="row"><div class="col-md-6"><strong class="post_q">&#8220;Quotes used for speech&#8221;</strong></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[q]Quotes used for speech[/q]</code></div></div></div>
<div class="row"><div class="col-md-6"><strong style="color:#FF0000" class="mycode_color">&#8220;Quotes used for speech&#8221;</strong></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[q=#FF0000]Quotes used for speech[/q]</code></div></div></div>
<div class="row"><div class="col-md-6"><a href="member.php?action=profile&amp;uid=3" target="_blank">Link to a profile</a></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[p=3]Link to a profile[/p]</code></div></div></div>
<div class="row"><div class="col-md-6"><a href="showthread.php?tid=250" target="_blank">Link to a thread</a></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[t=250]Link to a thread[/t]</code></div></div></div>
<div class="row"><div class="col-md-6"><div class="text-right"><small class="text-muted">&#8212; By Zina Wow Cool Attribution</small></div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[attr]By Zina Wow Cool Attribution[/attr]</code></div></div></div>
<div class="row"><div class="col-md-6">&#8212; can be &#8212; used &#8212; to &#8212; do&#8212; pauses</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[mdash]</code></div></div></div>
<div class="row"><div class="col-md-6">middots &#183; are &#183; cool &#183; bro</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[middot]</code></div></div></div>
</div>
<hr class="mycode_hr" />
<div class="h3">Formatting</div>
<div class="tabulated container "><div class="row"><div class="col-md-6"><span style="width:25px; display:inline-block;">&#160;</span>Indenting is neat.<br />
It can give your post natural,<br />
<span style="width:25px; display:inline-block;">&#160;</span>or unnatural,<br />
breaks.<br />
</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[indent]Indenting is neat.<br />
It can give your post natural,<br />
[indent]or unnatural,<br />
breaks.</code></div></div></div>
<div class="row"><div class="col-md-6">
<div style="text-align: right;">Aligns text either left, right, or center.</div>
</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[align=right]Aligns text either left, right, or center.[/align]</code></div></div></div>
<div class="row"><div class="col-md-6"><span class="mycode_small">Small text is smol.</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[small]Small text is smol.[/small]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-size: 1.25rem;">Large text is lorg</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[large]Large text is lorg[/large]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Specific sizing</span><br />
The size tag uses <span style="font-weight: bold;" class="mycode_b">rem</span> units rather than points or pixels. The standard font size on Canis is <span style="font-weight: bold;" class="mycode_b">16px</span>. Rems are a multiplier of the standard font size. You can read more about them <a href="https://www.sitepoint.com/understanding-and-using-rem-units-in-css/" target="_blank" rel="noopener" class="mycode_url">here</a>, or you can remember that 2rems on Canis is 16 pixels * 2, or 32 pixels.<br />
<span style="font-weight: bold;" class="mycode_b">Limits:</span> Minimum 0.85, maximum 10.<br />
<br />
<span style="font-weight: bold;" class="mycode_b">ex.</span> =1.2Slightly big text</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[size=1.2]Slightly big text[/size]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Fonts</span><br />
There is no such thing as a standard web font. Fonts will display differently depending on the system, browser, and even monitor. You can find a list of "safe" fonts for use with web <a href="https://web.mit.edu/jmorzins/www/fonts.html" target="_blank" rel="noopener" class="mycode_url">here</a>, but keep in mind that fonts will only display if users have them installed on their system.<br />
<br />
Additionally, Canis has exactly two custom fonts hosted on Google Fonts: 'Quicksand' and 'Roboto' (the standard font)<br />
<span style="font-family: Times;" class="mycode_font">ex. Look I am in Times New Roman!</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[font=Times]Look I am in Times New Roman![/font]</code></div></div></div>
<div class="row"><div class="col-md-6"><span class="mycode_smallcaps">This is small caps. It can't be used with the small tag</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[smallcaps]This is small caps. It can't be used with the small tag[/smallcaps]</code></div></div></div>
<div class="row"><div class="col-md-6"><blockquote>Blockquotes are useful for really long quoted pieces of text, such as songs or even snippets of other posts!</blockquote></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[blockquote]Blockquotes are useful for really long quoted pieces of text, such as songs or even snippets of other posts![/blockquote]</code></div></div></div>
<div class="row"><div class="col-md-6"><div class="wrap-left clearfix">
<img src="https://placekitten.com/100/100" alt="[Image: 100]" class="mycode_img img-fluid" /><span style="font-weight: bold;" class="mycode_b">Word Wrapping Images</span><br />
You can use wrap <span style="font-weight: bold;" class="mycode_b">left</span> or <span style="font-weight: bold;" class="mycode_b">right</span> to word wrap images or boxes.<br />
</div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[wrap left][img]https://placekitten.com/100/100[/img][b]Word Wrapping Images[/b]<br />
You can use wrap [b]left[/b] or [b]right[/b] to word wrap images or boxes.[/wrap]</code></div></div></div>
<br />
</div>
<br />
<div class="h3">Page Components</div>
<div class="h4">Narrow</div><div style="margin: 0 auto; max-width: 400px">Make your text in a fancy narrow box. You can specify a width optionally - default is 500px. Cannot be less than 400px</div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[narrow width=400]Make your text in a fancy narrow box. You can specify a width optionally - default is 500px.[/narrow]</code></div>
<div class="h4">Out of Character Box</div><div style="text-align: left; text-indent: 20px; font-size: 14px; color: #8e8e8e;">This is me saying things out of character!</div>
<hr/>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[ooc]This is me saying things out of character![/ooc]</code></div>
<div class="h4">Note Box</div><hr/>
<div style="text-align: left; text-indent: 20px;"><small class="text-muted">This is me putting a note on a post!</small></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[note]This is me saying things out of character![/note]</code></div>
<div class="h4">hr</div>Creates a horizontal line. Usually defines an important thematic break in text.<br />
<hr class="mycode_hr" />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[hr]</code></div>
Also takes a width optionally:<br />
<hr style="width: 200px; margin-left: auto; margin-right: auto;" />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[hr width=200]</code></div>
<div class="h4">Headings</div>Headings create title text in multiple levels, from number 1 to 6. Headings of sizes 3 and 4 have been used in this very post!<br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[h3]This h3 tag is likely the largest tag you should use.[/h3]</code></div>
<div class="h4">Images</div>
Standard MyBB supports the <tt>[img]URL[/img]</tt> tag. We also support the following with the special <tt>[image]URL[/image]</tt> tag:<ul class="mycode_list"><li><span style="font-weight: bold;" class="mycode_b">width:</span> constrains the width<br />
</li>
<li><span style="font-weight: bold;" class="mycode_b">align:</span> aligns the image to left, right, or center<br />
</li>
<li><span style="font-weight: bold;" class="mycode_b">circle:</span> creates a rounded image<br />
</li>
</ul>
<div class="row"><div class="col-md-4"><img src="https://placebear.com/640/360" style="width:200px; height:auto;" alt="" /><br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image width=200]https://placebear.com/640/360[/image]</code></div></div><div class="col-md-4"><img src="https://placebear.com/640/360" alt="" class="rounded-circle" /><br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image circle]https://placebear.com/640/360[/image]</code></div></div><div class="col-md-4"><div class="text-right"><img src="https://placebear.com/100/100" alt="" /></div>
<br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image align=right]https://placebear.com/100/100[/image]</code></div></div></div>
<br />
You can also force images to be perfect circles:<br />
<br />
<div class="row"><div class="col-md-5"><span style="font-weight: bold;" class="mycode_b">Perfect Circle</span><br />
<div class="perfect-circle">
<div style="background-image: url('https://loremflickr.com/300/400'); max-width: px; display: block;"></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image perfect-circle]https://loremflickr.com/300/400[/image]</code></div></div><div class="col-md-7"><span style="font-weight: bold;" class="mycode_b">Perfect Circle with constrained width</span><br />
<div class="perfect-circle">
<div style="background-image: url('https://loremflickr.com/300/400'); max-width: 200px; display: block;"></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[image perfect-circle width=200]https://loremflickr.com/300/400[/image]</code></div></div></div>
<br />
<div class="h4">Box</div><div class="card"><div class="card-header">Wow a box</div><div class="card-body">The header is optional! Boxes are <span style="font-weight: bold;" class="mycode_b">not available in IC forums.</span></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[box header="Wow a box"]The header is optional![/box]</code></div>
<div class="h4">Scrollable Box</div>
<div class="card"><div class="card-body scrollable" style="max-height:100px"> For if you have a lot to say<br />
<br />
Now you can say more<br />
<br />
and take up less room!<br />
<br />
The box will infinately scroll<br />
<br />
so write as much as you need without the page running on</div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[box scrollable=100] For if you have a lot to say<br />
<br />
Now you can say more<br />
<br />
and take up less room!<br />
<br />
The box will infinately scroll<br />
<br />
so write as much as you need without the page running on[/box]</code></div>
<div class="h4">Row/Column</div><div class="row"><div class="col-md-12">By using <tt>[row]</tt> and <tt>[col=#]</tt> tags, you can achieve more complex layouts. Each row is split into <span style="font-weight: bold;" class="mycode_b">12 units</span>, and each column can be between 1 and 12 units. Thus, for an even two column layout:</div></div>
<div class="row"><div class="col-md-6"><div class="card"><div class="card-body">Whoa</div></div></div><div class="col-md-6"><div class="card"><div class="card-body">Another box!</div></div></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[row][col=6][box]Whoa[/box][/col][col=6][box]Another box![/box][/col][/row]</code></div>
The columns can be any combination as long as they add up to twelve.<br />
<div class="row"><div class="col-md-2"><div class="card"><div class="card-body">beep</div></div></div><div class="col-md-3"><div class="card"><div class="card-body">boop</div></div></div><div class="col-md-7"><div class="card"><div class="card-body">bop</div></div></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[row][col=2][box]beep[/box][/col][col=3][box]boop[/box][/col][col=7][box]bop[/box][/col][/row]</code></div>
And, if you wrap them in table tags, you can get lines between each row:<br />
<div class="tabulated container "><div class="row"><div class="col-md-12">One row</div></div>
<div class="row"><div class="col-md-12">Two row</div></div>
<div class="row"><div class="col-md-12">Three rows!</div></div></div>
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[table][row][col=12]One row[/col][/row]<br />
[row][col=12]Two row[/col][/row]<br />
[row][col=12]Three rows![/col][/row][/table]</code></div>
and with borders:<br />
<div class="tabulated container border"><div class="row"><div class="col-md-12">One row</div></div>
<div class="row"><div class="col-md-12">Two row</div></div>
<div class="row"><div class="col-md-12">Three rows!</div></div></div>
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[table border][row][col=12]One row[/col][/row]<br />
[row][col=12]Two row[/col][/row]<br />
[row][col=12]Three rows![/col][/row][/table]</code></div> <br />
<hr class="mycode_hr" />
<div class="h3">Extra functionality</div>
<div class="tabulated container ">
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Hoverable Text</span><br />
Often used for characters who speak different languages.<br />
<span class="hover-text" title="Some hidden text :O">Click me to show!<span class="text-to-show" style="display: none"> &#8212; <span>Some hidden text :O</span></span></span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[hover=Some hidden text :O]Click me to show![/hover]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">FontAwesome Icons</span><br />
We use font awesome icons like this one: <i class="fa fa-bed"></i><br />
Visit the <a href="https://fontawesome.com/icons?d=gallery&amp;p=2" target="_blank" rel="noopener" class="mycode_url">Font Awesome Icons</a> page for a list of every icon.<br />
</div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[icon=bed]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Text Fades</span><br />
<span class="text-gradient" style="color:#ff0000 ; background: -o-linear-gradient(#ff0000, orange); background: -moz-linear-gradient(#ff0000, orange); background: linear-gradient(#ff0000, orange); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Wow a text fade!</span><br />
<span class="text-gradient" style="color:magenta ; background: -o-linear-gradient(left, magenta, purple); background: -moz-linear-gradient(left, magenta, purple); background: linear-gradient(to left, magenta, purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">This one goes to the left!</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[fade from=#ff0000 to=orange]Wow a text fade![/fade]<br />
[fade from=magenta to=purple dir=left]This one goes to the left![/fade]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Progress Bars</span><br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: calc(100% * (10 / 40))" aria-valuenow="10" aria-valuemin="0" aria-valuemax="40">progress</div>
</div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[progress value=10 max=40]progress[/progress]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Colour Swatch</span><br />
Color swatches will automatically adjust their background when they aren't readable with the current color scheme. You can force dark color swatches to display with the -dark suffix.<br />
<div class="swatch" data-color="red"><i class="fas fa-square" style="color:red;"></i> red</div><div class="swatch" data-color="#44fe98"><i class="fas fa-square" style="color:#44fe98;"></i> #44fe98</div><div class="swatch swatch-dark" data-color="orange"><i class="fas fa-square" style="color:orange;"></i> orange</div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[swatch=red][swatch=#44fe98][swatch-dark=orange]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Badges</span><br />
Shows a badge with an optional context colour.<br />
<span class="mycode_badge badge badge-">Plain</span> <span class="mycode_badge badge badge-secondary">Secondary</span> <span class="mycode_badge badge badge-info">Info</span> <span class="mycode_badge badge badge-warning">Warning</span> <span class="mycode_badge badge badge-danger">Danger</span> <span class="mycode_badge badge badge-success">Success</span></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[badge]Plain[/badge] [badge secondary]Secondary[/badge] [badge info]Info[/badge] [badge warning]Warning[/badge] [badge danger]Danger[/badge] [badge success]Success[/badge]</code></div></div></div>
<div class="row"><div class="col-md-6"><span style="font-weight: bold;" class="mycode_b">Collapse Button</span><br />
Shows content when clicked<br />
<button class="btn btn-secondary collapsed" type="button" data-toggle="collapse" data-target="#collapse-Click me!" aria-expanded="false" aria-controls="collapse-Click me!">Click me!</button><br />
<div class="collapse" id="collapse-Click me!">And all will be revealed</div></div><div class="col-md-6">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[collapse text="Click me!"]And all will be revealed[/collapse]</code></div></div></div>
</div>
<hr class="mycode_hr" />
<div class="h4">Vertical Alignment within Columns</div>
<div class="row"><div class="col-md-6">You can vertically align items within columns or a post itself with this.<br />
<span style="font-weight: bold;" class="mycode_b">Options:</span><ul class="mycode_list"><li>center<br />
</li>
<li>start<br />
</li>
<li>end<br />
</li>
</ul>
</div><div class="col-md-6"><div style="display: flex; flex-direction: column; justify-content:center; height: 100%;"><div class="card"><div class="card-body">I'm in the middle of the row!</div></div></div></div></div>
<div class="row"><div class="col-md-12">
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[row][col=6]Left column[col=6][valign=center][box]I'm in the middle of the row![/box][/valign][/col][/row]</code></div></div></div>
<hr class="mycode_hr" />
<div class="h4">Spotify</div><iframe src="https://embed.spotify.com/?uri=https://open.spotify.com/album/4RuzGKLG99XctuBMBkFFOC" width="300" height="380" frameborder="0" allowtransparency="true"></iframe><br />
 <br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[spotify]https://open.spotify.com/album/4RuzGKLG99XctuBMBkFFOC[/spotify]</code></div>
<div class="h4">Youtube</div>To embed youtube videos, you will need the embed URL. Visit <a href="https://support.google.com/youtube/answer/171780?hl=en" target="_blank" rel="noopener" class="mycode_url">Google Support</a> for more details.<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL21-a4V5mwwuPOf1rbK4VLm_g4w_5ALXP" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"></iframe><br />
<div class="codeblock"><a href="#" class="copy-code">Copy</a><code>[youtube]https://www.youtube.com/embed/videoseries?list=PL21-a4V5mwwuPOf1rbK4VLm_g4w_5ALXP[/youtube]</code></div>]]></content:encoded>
		</item>
	</channel>
</rss>