The Deckcoder's Alliance

@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.

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

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

Abzkaban I believe only group members can post, not sure

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.

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.

DrkNinja You'll have to ask yeaGO about that

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...

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

scotchtapedsleeves: Sure! Accurate Card Styles (for anyone to use!)

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

scotchtapedsleeves: Should be possible now then!

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

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

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

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

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

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

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:

https://www.dafont.com/harry-p.font?psize=xs

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!

Thanks a lot scotchtapedsleeves!

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

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

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.

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.

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

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 transfonter.org- 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('https://dl.dropbox.com/s/nshxzwia44btzq/harryp.woff2?dl=0') format('woff2'),
         url('https://dl.dropbox.com/s/nshxzwia44fbtzq/harryp.woff?dl=0') 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.

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

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

Ok, thanks scotchtapedsleeves!

multimedia

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>

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.

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” />

Thank you, your help is appreciated

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

scotchtapedsleeves

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.

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

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

SCORE: 57 | 47 COMMENTS | 4865 VIEWS | IN 27 FOLDERS

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

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

Ahh, ok. Cool.

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

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

LVL_666 I love what I see on Song of Phyresis

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: https://drive.google.com/open?id=1NaVrfPO7Gpr7pdxQcUc2YZPWRFUkvKCN

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.

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

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

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

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 }

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

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.

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

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.

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!

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

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

SCORE: 13 | 9 COMMENTS | 525 VIEWS | IN 4 FOLDERS

Thanks!

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!

That would be awesome Mordamen!

Thanks guys!

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.

KayneMarco: Which deck do you mean?

Wihito: Golos, Scout of Genju Say All Realm Matter

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.

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

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

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

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

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!

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

https://drive.google.com/open?id=FileID

https://drive.google.com/uc?export=download&id=FileID

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

https://drive.google.com/file/d/1kWqDp4pFPYoxCIndpohmoFwZhC3BHceO/view?usp=sharing

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

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!

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

SCORE: 55 | 35 COMMENTS | 11697 VIEWS | IN 14 FOLDERS

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

Wihito,

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!

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 { 
  background-color:rgba(0,0,0,0.8);
}

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?

Thanks!

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.

Wihito: Thanks that fixed it.

Does anyone know how to make this text bigger?

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;
}

Thanks

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

font-size: 72px !important;

Wihito: Thanks again for the help.

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

KayneMarco: If you want to color all card links:

a.card-link {
  color: red;
}

div.add-img-responsive.add-embed-responsive a.card-link {
  color: red;
}

Thank you Wihito. Greatly appreciated.

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

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);
}

Thank you! tbone2072

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;
}

Also, here's some documentation on text shadows.

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!

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!

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

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. 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.

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

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!

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.

KayneMarco You're enabled

Was it disabled?

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=" https://giphy.com/gifs/true-grit-rbph3qmVr9WX6" style="position:fixed;top:0px;left:0px;width :100%;height:100%;z-index:-1;"/>

![enter image description here](https://giphy.com/gifs/QhYrUdDo1GdnW "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.

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?

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

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"/>

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

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

Cloudius done!

scotchtapedsleeves Thanks a lot for the help!!

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

KayneMarco Mine looks ok so far.

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

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

Nm.

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

Good bud. How are you?

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 (=.=)

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

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!

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

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

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?

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

</div>

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?

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

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

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.