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 page 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 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 yeaGO 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 - Can give CSS permissions, please reach out!

Teacher: multimedia - Web dev professional

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.

KayneMarco says... #52

So how does one go about modding your main profile page. The only thing I’ve manage to accomplish is adding a background gif. I’ve seen that fonts can be changed but when I tried doing that I wound up deleting my profile script in the process. Another thing I’ld like to know is can I make the text boxes transparent and change the borders around them like I’ve done with my deck pages. Thanx all in advance.

March 5, 2020 2:52 p.m.

Wihito says... #53

KayneMarco: I'm not getting what you are saying, did you have a css document linked on your profile page and it disappeared?

March 6, 2020 3:52 p.m.

KayneMarco says... #54

Wihito: It wasn’t linked. I coded it directly on my page, just as I do my decks but I’m guessing I can’t use the same coding as I do my decks because when I saved and went back to my profile page, everything I had done before doing that was gone. When I went back to settings to see what I had screwed up the only thing that was there was what I had jus got done adding. Everything from before was gone. So I’m just wondering what I had messed up if you or anyone else here may have an idea.

March 7, 2020 8:05 a.m.

You can't change all the fonts on the page without using a CSS stylesheet KayneMarco, that's really the best way to go about it. Changing overall fonts, wells, colours and all that should all really go in a stylesheet unless you're changing one thing specifically.

What you're probably trying to do is change the font and colours of something like that comment well. That can't be done with inline CSS, gotta use a stylesheet!

March 8, 2020 8:58 a.m.

Mordamen says... #56

Hi All! The code that usually works to hide the Commander image on my decks isn't working for some reason, and I suspect it's because this is a Partner deck rather then a single Commander.

Could you help me understand why they aren't going away and perhaps find a solution to it?

CSS Testing Page

March 8, 2020 12:17 p.m.

Darkshadow327 says... #57

Hey all, I know I haven't been active in quite a while. Anyway, would anyone be willing to help me with coding for my new deck?

What's Yours is Mine | Tariel EDH | PRIMER

Commander / EDH Darkshadow327



May 7, 2020 11:44 a.m.

Mordamen says... #58

Darkshadow327 I would absolutely be happy to do so! And i'm sure that Wihito is also more then happy to lend his considerable expertise!

May 7, 2020 12:12 p.m.

Darkshadow327 says... #59

That would be awesome Mordamen!

Thanks guys!

May 7, 2020 12:43 p.m.

KayneMarco says... #60

Hey all. Would someone be able to check the coding on a current deck page I’m working on? You might be able to give some insight as to what’s going on. The font coding isn’t working for some reason. The funny thing is that I copied the the entire code line from my nekusar deck and only changed the coloring and font. The font coding works for my nekusar deck but not the one I’m working on. I appreciate any help I can get.

May 13, 2020 10:01 a.m.

Wihito says... #61

KayneMarco: Which deck do you mean?

May 13, 2020 11:33 a.m.

KayneMarco says... #63

I used the exact code line from my Nekusar’s Deck of Pain and Punishment deck. Only things I changed was the color codes and font name. As you can see, the font works for the nekusar deck.

May 13, 2020 12:02 p.m.

Wihito says... #64

KayneMarco: Second quote on every font-family css attribute is wrong:

'Bangers’ <- this side, should be ', not ’

May 13, 2020 4:20 p.m.

KayneMarco says... #65

Wihito: Thank you very much. I hadn’t even realized the difference. That did the trick.

May 14, 2020 8:38 a.m.

Abzkaban says... #66

Hey everyone. Did I unintentionally do something to my code that I can't see to make my accordions stop working? Or is it just TappedOut being dumb and not reading the code?

Ghave That Bitch an Infinite Combo [Primer]

Commander / EDH Abzkaban

SCORE: 457 | 271 COMMENTS | 67506 VIEWS | IN 181 FOLDERS

June 13, 2020 12:44 p.m.

Abzkaban says... #67

I fixed it. I’m not sure what the problem was, but I found the spot it didn’t like and retyped the code (which looked right in the first place...). It’s all good now!

June 16, 2020 1:41 a.m.

Abzkaban says... #68

So Google Drive changed their code for their links, and I have no idea how to use anything anymore. It used to be that I just had to change the link from
But they've changed their whole link code to where it doesn't have the same format and I don't know what's where. Does anyone know what I would need to do so that I can use css sheets again?

This is the shareable link I get from an image I have uploaded to my drive:

What about this new code do I need to change so that it will download instead of view?

July 19, 2020 5:07 p.m.

Cmi1103 says... #69

Hey everyone! I'm fairly new, but excited to share my first two decks that I have styled: 0-60 in 3.5! (Rhys tokens), and Life After Death, and Death After Life. Let me know what you guys think!

Shout out to king-saproling for helping me get it started!

July 23, 2020 1:13 a.m.

Wihito says... #70

Cmi1103: Good start! Biggest problem I have with both is the readability of the text. In the Rhys deck there's too little contrast to the background and the card links are waaay bigger than the rest of the text. In the Marchesa deck the bright orange shadow makes it so the letters kind of blends together, either use a dark shadow for the white text or don't use a shadow. I'm glad you are using my Accurate Card Styles (for anyone to use!), but you should also use the font! You can find it there.

I forgot to mention it here but I went all out making a style for my favorite deck, where I changed a lot of the deck page layout:

Baevictis & Friends

Commander / EDH Wihito


Here's screenshots of it in case you're on mobile or can't see it correctly (not Internet Explorer or Edge compatible):

Top of the page

Bottom of the page

July 23, 2020 3:52 a.m.

Cmi1103 says... #71


Thanks for the feedback! That's one thing that was on my mind too was the readability, especially in the Rhys deck. I'll take a closer look into the font on your page there!

July 23, 2020 9:59 a.m.

tbone2072 says... #72

Hello, I'm relatively new to the site and I'm working on my first primer. I have been having some trouble making the accordion body transparent this is the code I am using.

.panel-body { 

This code worked on other areas of the page and I am not sure why it is not working for the accordion. Does anyone know what I am doing wrong?


August 6, 2020 9:44 p.m.

Wihito says... #73

Cmi1103: Definitely looks better now!

tbone2072: It's because the background is in another html element:

Which means you have to target with .panel { ... } instead. Also, you should use a lower value for the last part of rgba(...), I'd try 0.5 or lower to make it more transparent.

August 8, 2020 7:59 a.m. Edited.

tbone2072 says... #74

Wihito: Thanks that fixed it.

August 8, 2020 8:15 a.m.

tbone2072 says... #75

Does anyone know how to make this text bigger? enter image description here

I have tried to change it using this code and everything except the change in size gets applied to the text.

.col-sm-12 h3 {
  font-family: 'Lobster';
  font-size: 72px;
  background: -webkit-linear-gradient(bottom, #00dd00, #dd0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;


August 19, 2020 7:14 p.m.

Wihito says... #76

tbone2072: Somehow tappedouts own css takes priority over your css, luckily there is a way to get around that:

font-size: 72px !important;

August 20, 2020 2:19 a.m.

tbone2072 says... #77

Wihito: Thanks again for the help.

August 20, 2020 10:16 a.m.

KayneMarco says... #78

Got a question for everyone. How can I change the color of the card links in the description? Here’s the deck I’ve been working on to see what I mean. The Queen’s Assassins

August 24, 2020 9:25 a.m.

Wihito says... #79

KayneMarco: If you want to color all card links:

a.card-link {
  color: red;
If you want to target only card links in the description:
div.add-img-responsive.add-embed-responsive a.card-link {
  color: red;

August 24, 2020 1:19 p.m.

KayneMarco says... #80

Thank you Wihito. Greatly appreciated.

August 24, 2020 2:17 p.m.

Cmi1103 says... #81

Hey guys! How would one go about changing the font color in the comments? Or adding shadow to it for readability? Thanks!

August 26, 2020 1:24 p.m.

tbone2072 says... #82

Cmi1103: to make changes to the text in the comments you need to use this code

.add-img-responsive {

Then you put whatever changes you want to make to the text inside of it. For example, to make the comment's text dark blue you would use the code

.add-img-responsive {
  color: rgb(38,38,230);
August 26, 2020 1:38 p.m.

Cmi1103 says... #83

Thank you! tbone2072

August 26, 2020 1:50 p.m.

Wihito says... #84

tbone2072 Cmi1103: The description and the updates also have that class so you should add #comment-list before to specifically target the comments:

#comment-list .add-img-responsive {
  color: red;

August 26, 2020 2:44 p.m.

Wihito says... #85

Also, here's some documentation on text shadows.

August 26, 2020 2:54 p.m.

Glad that this place is being used, it's been a while since I've been active on here but I still check in from time to time. Keep up the great work everyone!

August 27, 2020 12:42 a.m.

birchmaster22 says... #87

Hey, scotchtapedsleeves, I was wondering if you can feature my Orzhov's Damaging Lifelink deck on here. Also, you can remove the other 2 I had before if you want. I'm making 2 decks for the Zendikar Rising set and rotation and this is one of them. I did make sure to put the custom link in the description to here.

And Wihito, I absolutely LOVE that layout! Very nice and clean!

September 16, 2020 10:29 p.m.

birchmaster22 says... #88

Ok scotchtapedsleeves, got my 2nd deck up and running if you want to feature it. Up to you. Basic Guide to Selesbian Counting

September 17, 2020 5:12 p.m.

foxboy1000 says... #89

Hey everyone! I'm completely new to CSS, but I'm learning quickly.
I'm having some trouble with accordions, and I've narrowed my issues down to 3 questions. Accordion question I've numbered each of the elements I'm working with in the above image, and I'll include the CSS code below.

  1. I've added a background image on the heading's (2) & (7), but they don't seem to scale to page size. It's 2 copies of the same image, with the bottom one offset, so that it looks like a continuous image. Is there a better way to do this, so they scale with the page?

  2. On headings (4) & (6) I'm trying to make them transparent so they blend in with the accordion body (3), but when I make them transparent they instead default to (1). I'm not sure why this is happening because as far as I can tell (4) & (6) are in front of (3); so it makes sense to me that if (4) & (6) were transparent, they would display the image on (3). Is there something I'm not seeing, or maybe something I'm misunderstanding?

  3. Lastly I can't seem to change the image on the accordion body (5) without changing the image on accordion body (3). I'm selecting which accordion I'm working with by specifying (n)th child and I believe this is the problem. Because when I target the body of the first-child I'm selecting (3) & (5) because both of these are the first-child in their respective accordions. A similar issue is also happening with the hover image on (2) & (7) Is there a different way I can select which accordion I'm working with, so that I can be more specific? I tried to get as specific as possible, but it still won't do anything.

I apologize for making such a lengthy first post, but I didn't want to leave anything out and have to re-clarify.

CSS: CSS Code Deck: Panel Tests 2

It's super cool that there is a group for this kind of stuff. I appreciate having anyone to help point out my mistakes. I'm not sure who is still active, so I figured the best place to post my questions would be here.

November 30, 2020 12:59 p.m. Edited.

foxboy1000 says... #90

Update: I've figured out my issues, by poking around at it blindly! Here is my new CSS and the Test Page I've finished, if anyone is interested.CSS & Testing

December 3, 2020 8:47 p.m.

Cloudius says... #91

Greetings everyone! I enjoy beautifying my page as much as brewing new innovative decks.

I've been tinkering around with CSS on my own. scotchtapedsleeves was extremely helpful when I got started.

Looking forward to learning more from the folks here. Cheers!

February 24, 2021 7:36 p.m.

KayneMarco says... #92

Could someone check to see if the option to add coding to my pages has been turned off? Trying to code a new deck page and nothing is showing up.

May 19, 2021 2:23 p.m.

KayneMarco You're enabled

May 19, 2021 8:16 p.m.

KayneMarco says... #94

Was it disabled?

May 19, 2021 8:19 p.m.

KayneMarco says... #95

Just tried adding a background image and a pick in the description of the deck and nothing. Here are the couple lines of code that I used:

<img src="" style="position:fixed;top:0px;left:0px;width :100%;height:100%;z-index:-1;"/>

![enter image description here]( "enter image title here")

I’ve used these exact lines of code minus the links in most of my decks and have had no problems till now.

May 19, 2021 8:34 p.m.

Cloudius says... #96

Greetings fellow coders! I see many familiar names here!

Hi Hi KayneMarco scotchtapedsleeves

I've got a simple question - Is page customization only available for users who have their accounts upgraded?

May 30, 2021 6:18 a.m.

Cloudius the forum is, but afaik no. As long as it's not a new account anyone can ask for perms

June 2, 2021 5:24 p.m.

Cloudius says... #98

Thanks scotchtapedsleeves!

I've been helping a friend do some customization to his deck page. The following works fine for me but when copied to his, the stylesheet doesn't show up.

<link rel="stylesheet" type="text/css" href="URL of external stylesheet"/>

June 4, 2021 10:21 a.m.

Cloudius what's their username? I'll give them perms

June 8, 2021 11:38 a.m.

Cloudius says... #100

scotchtapedsleeves His user name is Weedling. Thanks a lot in advance!!

June 8, 2021 10:51 p.m.

Cloudius done!

June 10, 2021 10:23 a.m.

Cloudius says... #102

scotchtapedsleeves Thanks a lot for the help!!

June 12, 2021 3:29 a.m.

KayneMarco says... #103

Anyone else having issues with the html/css coding on their pages?

September 24, 2021 4:46 a.m.

Cloudius says... #104

KayneMarco Mine looks ok so far.

September 24, 2021 8:47 a.m.

KayneMarco says... #105

Cloudius: could you check out my Feather and Queen Marchesa decks on my profile page and see how they look on your device? I know you’ve seen my feather deck page. If that loos the same to you let me know. Would probably be an issue on my end. Thanx in advance

September 24, 2021 9:50 a.m.

Cloudius says... #106

KayneMarco both pages look as pretty as ever, so the issues are probably at your end.

September 24, 2021 9:58 a.m.

KayneMarco says... #107


September 25, 2021 3:28 p.m. Edited.

Hey all, coming back to the game after a long time away. How's it going?

March 23, 2023 5:36 p.m.

Ender666666 says... #109

Good bud. How are you?

March 24, 2023 2:57 p.m.

Cloudius says... #110

Greetings fellow coders!

The stylesheet on my pet deck's page suddenly went bonkers We Love Freebies! *Primer* and is no longer working. My other pages are unaffected, any idea why?

I didn't tamper with the stylesheet or the codes at all recently. It just suddenly stopped working one day (=.=)

April 12, 2023 4:23 a.m.

Cloudius Tinkered with the page a bit, the max-width flag at the top of your stylesheet was messing with my formatting. Made the formatting not show when the deck was fullscreen.

I recommend removing that flag and replacing it with min-width. I use min-width on my decks so that mobile users don't see the formatting, don't want to use more processing than necessary.

Not sure if it's supposed to have a background image, but I don't see a source for one in your stylesheet.

Additionally, this is just personal preference, but I'm not a huge fan of the formatting of your accordions. Looks like you've just added images in the header. If you'd like to truly format the accordions instead by adding some rules to your stylesheet, feel free to steal my accordion code here or my main page code here. Both sheets are for the below deck.

Guess Who's Back, Back Again, And Again

Commander / EDH scotchtapedsleeves

SCORE: 193 | 76 COMMENTS | 17519 VIEWS | IN 56 FOLDERS

April 12, 2023 8:11 p.m.

Ender666666 Hey! Sorry didn't see your post here. All's good with me, enjoying my time back so far! Been seeing your Child of Alara deck floating around, I like it!

April 12, 2023 8:13 p.m.

Cloudius says... #113

scotchtapedsleeves Thanks for your advice. Let me tinker with the page base on your comments! Appreciate the help!

April 13, 2023 11:52 p.m.

Ender666666 says... #114

Oh you mean How to Lose Friends and Infuriate People.. for $99! Yes it's fun to see what's grown from it

April 14, 2023 6:33 p.m.

Cloudius says... #115

scotchtapedsleeves Amazing, you suggestion worked and now my page is back to normal!

About the Accordions, your page with the gif is beautiful! I'd like to retain the images in the header cause the different sections sort of piece together to form a larger picture (which I thought was kinda nice). Is there anyway to do it better than what I'm doing now?

April 15, 2023 1:06 a.m.

Cloudius - Super simple, in my accordion code you can see a definition for the #accord style. This style sets the background to the gif url. Below this there are definitions for each following accordion (children). Instead of setting an offset like I've done, you can set a different image.

Also forgot to mention, since we've defined a specific style with the #accord tag, you'll need a line of code to apply that style to your code.

<div id="accord">

Accordions here

April 16, 2023 2:08 a.m.

Cmi1103 says... #117

Hey everyone! Been a minute! Honestly I've forgotten a lot of the nit-picky details of html. I'm running into an issue on Cats Pumping Iron!. I'm still playing with the colors to see what I like best. But where specifically can I fix the kind of gray color at the bottom for comments and my description that is harder to read?

November 28, 2023 1:39 a.m.

Cmi1103 says... #118

JK, this was literally the last question I asked a few years ago XD. Hope you're all doing well

November 28, 2023 1:49 a.m.

Hexapod says... #119

Thank you for having me!

My deck all used to be fully customized, but apparently Google drive is not handling CSS in a way that is compatible with TappedOut anymore. I am in the process of moving all my files to Dropbox, and I am encountering some hurdles.

For instance, I can't get the first few paragraphs of text from my profile to display. Also, adding an image to the body of the text disables the CSS.

Any help would be appreciated. I am willing to have a Discord or Messenger call if that is easier.

Thank you

March 5, 2024 8:13 p.m.

Hexapod says... #120

I called for help after days of thinking and of course after posting I immediately found the problem.

A single quotation mark that was curved instead of regular.

My profile is fixed, but reading through your tips I see I can already make it way better.

March 5, 2024 9:19 p.m.

Please login to comment

Featured Decks

Guess Who's Back, Back Again, And Again

Commander / EDH scotchtapedsleeves

SCORE: 211 | 86 COMMENTS | 19975 VIEWS | IN 84 FOLDERS

Accurate Card Styles (for anyone to use!)

Unknown* Wihito