The Deckcoder's Alliance

The Deckcoder's oath

"For the CSS pages of everyone, I will keep watch"

~Created by scotchtapedsleeves~

Please do not use the content on this deck for any malicious means

Needless to say, I'd like to keep this page around for a while as a way for users to share their ideas. Don't be an idiot and screw this up for everyone. The code that is used here should only be used in your own deck descriptions and your own profile. If you want to share your code with someone else, please first wrap it in a code tag, example below.
Code goes here
If you're found to be using code in a way that messes with other users or the site itsself, I have permission from [yeayeaGO]( to disable code on your account. If you'd like the permissions back, then you'll have to take it up with them.

Personalizing your deck pages is nice, but please don't go overboard. I enjoy a nice background image as the next guy, but piling a bunch of contrasting images and colours on top of each other and giving each element its own little flair? That's a __bit__ too much.
I've been meaning to make this for a while ever since I saw The Deckwatch [Home Base] being created. For a while, there was no real place on this site for coders to share ideas and problems that they have other than the forum, but the forum gets barely any traffic. So I, scotchtapedsleeves, created this deck page!

The members of this page are the dedicated coders of Tappedout. We each have our different ways of changing our decks but we keep this page as a way to share our ideas and make sure that no-one screws up their coding.

If you'd like to join the Alliance, just comment below with your information, I'll review your deck and profile page and add you to the deck! If you'd like to be a student, just comment below with which user you'd like to learn from and if they accept I'll add you to the students tab!

This deck was created by scotchtapedsleeves on May 1st 2019, and is maintained by him and the rest of the Gatecoders.
This deck page was created as a sort of public group chat for all coders. Yes, there's a forum to do this but this deck should be much more casual and get somewhat more traffic than the forum.

If you're looking to learn CSS for yourself, just follow the simple instructions in the next accordion!

Well, you're in the right place. None of us are true masters at the craft but we make it work well enough. If you'd like general help just comment down below and you'll probably get a few notifications from people on the deck. If you'd like the help of a specific user, such as if you like one specific thing that they did on their code, then refer to the accordion beneath this one and click their name!

Founder & Teacher: scotchtapedsleeves - Free, feature coins are a nice gesture though! If you need to be enabled for CSS, come to me!

Teacher: multimedia - Pretty much an expert

Teacher: Lvl_666 - Real life Sliver Overlord

Teacher: Wihito - Creator of the Accurate Card Colours sheet!

Please put this code in the description of your deck! It creates a button identical to the one below that links to the deck:


<a class="btn hidden-xs" href="/groups/deckcoders-alliance/" style="background-image:url(;width:100%;border-color:black;color:white;">Credit to The Deckcoders' Alliance for the code on this page</a>
<a class="btn hidden-xs" href="/groups/deckcoders-alliance/" style="background-image:url(;width:100%;border-color:black;color:white;">Credit to The Deckcoders' Alliance for the code on this page</a>
<a class="btn hidden-xs" href="/groups/deckcoders-alliance/" style="background-image:url(;width:100%;border-color:black;color:white;">Credit to The Deckcoders' Alliance for the code on this page</a>
<a class="btn hidden-xs" href="/groups/deckcoders-alliance/" style="background-image:url(;width:100%;border-color:black;color:white;">Credit to The Deckcoders' Alliance for the code on this page</a>
<a class="btn hidden-xs" href="/groups/deckcoders-alliance/" style="background-image:url(;width:100%;border-color:black;color:white;">Credit to The Deckcoders' Alliance for the code on this page</a>
<a class="btn hidden-xs" href="/groups/deckcoders-alliance/" style="background-image:url(;width:100%;border-color:black;color:white;">Credit to The Deckcoders' Alliance for the code on this page</a>

DrkNinja says... #1

@scotchtapedsleeves you said you are helping yeaGO develop this right? If so, a group chat for those accepted functionality would be GREATLY encouraged, otherwise it's very similar to a deck page.

June 12, 2019 11:45 a.m.

DrkNinja yeaGO and I talked about that a bit, the comment section is going to be used as a group chat. If the group is private then people who aren't part of the group can't chat or read the chat. This works as a group chat

He also mentioned that he didn't want the groups to be just used as a group chat. Only just being used as a group

June 12, 2019 2:21 p.m. Edited.

Abzkaban says... #3

Out of curiosity, can non-group members post here? Or can only group members post but the conversation is public?

June 12, 2019 2:36 p.m.

Abzkaban I believe only group members can post, not sure

June 12, 2019 2:42 p.m.

DrkNinja says... #5

I mean... I dunno, when I set up the Deckwatch Discord server it caused people to be a LOT more active than they were prior on the deck page.

June 12, 2019 2:51 p.m.

DrkNinja says... #6

See that's another reason why I think there should be a chat with the group so that only group members can see chat, but anyone can post in the groups comments. That way groups like this that take requests don't have to continue a deck page for requests from the public and such.

June 12, 2019 2:53 p.m.

DrkNinja You'll have to ask yeaGO about that

June 12, 2019 3:26 p.m.

DrkNinja says... #8

Um... Na... I'm good... I don't think I've ever interacted with yeaGO so me telling him how he should do things probably woulnd't go over well...

June 12, 2019 3:48 p.m.

If anyone here has any decks they'd like to put in the featured deck section on here, tag them in the comments!

June 13, 2019 6:10 p.m.

Wihito says... #10

June 16, 2019 4:33 a.m.

Wihito You'll have to share the deck with me for me to put it in

June 16, 2019 11:43 a.m.

Wihito says... #12

scotchtapedsleeves: Should be possible now then!

June 17, 2019 1:39 a.m.

Wihito Doesn't say that you've shared it with me, maybe try again?

June 17, 2019 7:30 a.m.

Wihito says... #14

scotchtapedsleeves: I've put you as shared but not ticked the "Shared users can edit" box.

June 18, 2019 12:48 p.m.

Wihito You have to tick that in order for it to be actually shared

June 18, 2019 5 p.m.

birchmaster22 says... #16

If you could feature my Amass Deck scotchtapedsleeves that would be great. I have already shared it with you.

June 20, 2019 10:14 a.m.

birchmaster22 First off, I love the coding on your deck! The inset shadows look really nice.

Apparently I can only add my own decks to the featured deck list, I'll ask yeaGO about fixing that later today. Sharing does nothing to fix it

June 20, 2019 8:11 p.m.

birchmaster22 says... #18

scotchtapedsleeves Praise me more!! Anyway, thank you for your praise and hopefully you can get that sorted out.

June 21, 2019 9:59 a.m.

Abzkaban says... #19

Question for anyone who can help me with this. I want to use a custom font for my name. What code do I need to use to change it? I know what I need to do for color and glow whatever else, but I'm not sure what I need to use for a custom font. Here is the font I'd like to use:

June 25, 2019 11:30 p.m.

birchmaster22 The featured deck section has been fixed, if anyone else would like their deck in the featured deck section please just tag it here!

June 26, 2019 8:16 p.m.

birchmaster22 says... #21

Thanks a lot scotchtapedsleeves!

June 26, 2019 8:40 p.m.

birchmaster22 says... #22

I have another deck I want you to feature if you can scotchtapedsleeves. It's my newest deck; Mono-Red Chandra-mentals

June 29, 2019 1:17 a.m.

birchmaster22 I don’t see any coding on it, let’s keep this page to just be about deck coding.

June 29, 2019 3:03 a.m.

DrkNinja says... #24

My deck The Planeswalker Society and [Primer] Urza's Mox Factory! would go well as featured decks! One has your work scotchtapedsleeves' and the other has Wihito's code on it.

June 29, 2019 3:23 p.m.

birchmaster22 says... #25

scotchtapedsleeves, the mono-red deck seems to revert back to the original page more often than my amass deck. If you have a fix for this, please let me know. And if you want to see the coding on it, I can pm it to you.

June 29, 2019 5:58 p.m.

DrkNinja Neither have code showing up for them, except for a background picture on the Planeswalker Society

birchmaster22 I'll put the mono-red one up, for some reason it really lags my computer when I scroll through it

June 29, 2019 7:20 p.m.

multimedia says... #27

Hey, Abzkaban, your question about adding a custom font hasn't been answered yet. Hopefully this answers your question :)

In CSS to add a custom font you use the @font-face rule. Put the rule at the top of your CSS stylesheet.

@font-face {
    font-family: 'harry';
    src: url('harry-webfont.woff2') format('woff2'),
         url('harry-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

Code like this is what you will use to add your custom font. The above is not exactly the code you will use because you'll have to correctly link to your actual font files. You link to them from your Dropbox account. Once you have the font files you can upload them to your Dropbox and then create a link to them. Use those links in CSS, change the src url.

font-family: 'harry';

In CSS this font-family property is what you use to change text into your custom font. For example if you want to change the name of your deck that's at the top of the page:

.well-jumbotron h2 {
font-family: 'harry';

To use your custom font in CSS any text you want to apply it to add the property font-family: 'harry'. The font-family name can be anything, but to display it the name has to match a name in a @font-face rule. You can many @font-face rules with many different custom fonts, but each one has to have a unique font-family name.

When you download a font from DaFont you need to convert it so it's ready to use in CSS. There's many websites that will do this for and create a package of fonts that you need. Transfonter is easy to use and free. When you downloaded the font you want at DaFont it creates a zip file; unzip it to get the .TTF file. The HARRYP__.TTF file is the font file which you convert at Transfonter.

To use Transfonter click the Add Fonts blue button, browser to and select the HARRYP__.TTF font file and click Open. Next step is to click the green Convert button; wait and let it convert. When it's done converting there will be a Download button; click it to download a zip file. Unzip the zip file; in it you will see two font files HarryP.woff and HarryP.woff2. These are the CSS ready/web ready fonts of your custom font.

At your Dropbox upload both of these HarryP.woff and HarryP.woff2 files. Create a link to each of them via Share. Copy each link address of a file separately and add these links in CSS replacing the the src url property of the @font-face rule. Example and updated rule to add your custom font with CSS:

@font-face {
    font-family: 'harry';
    src: url('') format('woff2'),
         url('') format('woff');
    font-weight: normal;
    font-style: normal;

These links to the font files don't work they're just to show you that you need Dropbox links to your font files. Replace them with the actual links to your font files.

June 29, 2019 8:33 p.m.

birchmaster22 says... #28

I changed the background scotchtapedsleeves so hopefully the lag is a bit better.

June 29, 2019 10:48 p.m.

For all of you who have been using the buttons that are supposed to link to this page, they’ve been linking to the deck page instead of the group. I fixed the codes for them, if you’d like to update your buttons just copy and paste the new button codes from the bottom accordion

June 29, 2019 11:53 p.m.

birchmaster22 says... #30

Ok, thanks scotchtapedsleeves!

June 30, 2019 12:05 a.m.

Abzkaban says... #31


Thank you! I think this helps. My only question now is about using a custom font specifically for my TappedOut username rather than in a deck. I get how it works in a CSS style sheet, but I can't use one of those in the letter boxes when customizing my name, right? I've been following this tutorial: Username and Profile Customization Tutorial!. So feel free to tell me I'm wrong for following it. But basically the code they use for just one letter of their name looks like this:

<span style="color: #FF44FF; text-shadow: #00E6FF 5px 0px 10px, #00E6FF -5px 0px 10px, #00E6FF 0px 0px 10px; border-top: 1px dotted #FF44FF; border-bottom: 1px dotted #00E6FF; border-radius:100%; font-family: Vivaldi;">F</span>
The font family is just Vivaldi, which I assume is a standard font and therefore easy to find and use. My question is how would I have the code find the source of my custom font without the style sheet? I can't just say "font-family: HarryP" without giving it a source, right?

June 30, 2019 12:31 p.m.

Technowyvern says... #32

I’ve done some CSS in the past but only if with a HTML file in the same folder, so I’m not sure how to link to a file on tappedout but I assume that you store it somewhere like dropbox and link to it.

Where’s a good place to store CSS files for use on tappedout? And would my assumptions be correct, or am I completely wrong?

Help would be appreciated.

July 7, 2019 11:51 p.m.

Technowyvern Welcome to the group! Yes, Dropbox is the way that I personally host my files to attach them to the site.

You can attach files to the site by using this code, replacing the www. in your Dropbox URL with dl.

<link rel="stylesheet" type="text/css" href="YOURLINK” />
July 8, 2019 10:06 p.m.

Technowyvern says... #34

Thank you, your help is appreciated

July 8, 2019 11:12 p.m.

Been a while since I've been on the site, how's it going all? Any new pages to show?

August 22, 2019 10 p.m.

Abzkaban says... #36


No new pages here, though I really need to sit down and redo my profile page. But maybe you could help answer a question I never got an answer to. It’s about using a custom font for my username. It’s still posted just a few comments above as is multimedia’s answer to my first question for context.

August 23, 2019 12:26 a.m.

Abzkaban Sorry, I couldn't figure that out either for myself. You could ask the coding thread on the forums though, I'm sure someone on there knows

August 23, 2019 7:08 a.m.

Mortlocke says... #38

scotchtapedsleeves, "Been a while since I've been on the site, how's it going all? Any new pages to show?

With guidance from multimedia I was able to make a fine deck page for my atraxa deck. If anyone has questions about the transition effect dont hesitate to ask.

The Song of Phyresis

Commander / EDH* LVL_666


August 23, 2019 7:54 a.m.

birchmaster22 says... #39

LVL_666 I like the sort of old tv screen effect in the background. Nice touch.

August 25, 2019 7:36 p.m.

Mortlocke says... #40

birchmaster22, thanks for the compliment. I went for that white snow/static effect as a reference to the New Phyrexia trailer.

August 25, 2019 9:20 p.m.

birchmaster22 says... #41

Ahh, ok. Cool.

August 25, 2019 9:28 p.m.

birchmaster22 says... #42

scotchtapedsleeves I was wondering if you could enable coding for NHS_Gatewatch. It's an account that me and my friends are starting.

August 26, 2019 12:01 p.m.

LVL_666 That looks amazing! I love what you've done with the static effect!

August 26, 2019 2:38 p.m.

Ender666666 says... #44

LVL_666 I love what I see on Song of Phyresis

December 7, 2019 1:07 p.m.

Abzkaban says... #45

Question for anyone who might be able to answer this: I've got a code that's screwing up on my Ghave deck. I've changed the font of the deck title, and it shows up only for an instant when the page loads before reverting back to what it looked like before I changed the font. I only have the code for the new font in my css page, but when I went to inspect element, it shows another code overriding it. Does any one have any idea why this would be happening or how to fix it? Should I go to yeago with this?

Deck page for reference:

Ghave That Bitch an Infinite Combo [Primer]

Commander / EDH Abzkaban

SCORE: 387 | 239 COMMENTS | 54499 VIEWS | IN 157 FOLDERS

CSS page for reference:

February 13, 2020 11:43 p.m.

Wihito says... #46

Abzkaban: Your description links to two css-pages, the first is at the top which is the one you linked here and the second is in the "How Far the Saprolings' Spores Have Spread" accordion which seems to take precedence over the other.

February 16, 2020 5:07 p.m.

Abzkaban says... #47

Omg thank you! I don't know how that got there or how I missed it, but I removed it and it works now.

February 16, 2020 8:34 p.m.

Mordamen says... #48

Hi everyone! For some reason, I can't for the life of me find out why the panels in the accordion's aren't transparent. I'd really love some help

Welcome to Elsha's Monastery

February 26, 2020 5:34 a.m.

Mordamen Try this line

.panel-body { background-color:rgba(0,0,0,0.2); /*#000000*/ }

combed through my old stylesheets and found this, I think it'll work

February 26, 2020 10:04 a.m.

Wihito says... #50

Mordamen: It's the background-color property of the .panel class which targets the top part of it: Just remove the background for it with:

.panel { background: none }

February 26, 2020 3:22 p.m.

Mordamen says... #51

Oh. So that's why even though I made the background in panel transparent it was still showing. Thanks so much! <3

February 27, 2020 12:15 p.m.

Please login to comment

Featured Decks

Guess Who's Back, Back Again, And Again **Primer**

Commander / EDH scotchtapedsleeves

SCORE: 121 | 67 COMMENTS | 10508 VIEWS | IN 35 FOLDERS

Accurate Card Styles (for anyone to use!)

Unknown* Wihito


A Mass of Undead Molasses

Standard birchmaster22


Mono-Red Chandra-mentals

Standard birchmaster22