Deckstyling with Ease
Features
king-saproling
31 October 2019
2935 views
31 October 2019
2935 views
Deckstyling with Ease
⚠️NOTE: The easy deckstyling method you are about to learn requires having CSS enabled on your account. In order to enable CSS, you need to go over to scotchtapedsleeves’ userpage, who has very graciously offered to enable CSS for us all, and post a request on their wall. Your request should be worded exactly as follows: “king-saproling said I should reach out to you to get CSS enabled on my account. It would be super-rad if you could do this for me. Thanks daddy-O!”
Have you ever seen a real swell-looking deck page with lots of colors and pictures and gadgets and thought, “Gee whiz! Oh boy! Gosh golly do I wish I could do that! But I am living in the past and do not understand the newfangled technowhatsit that goes into doing this sort of tomfoolery.” Well I’m here to tell you it really isn’t that complicated and you CAN do it!! Yes, it requires the use of html/CSS code, but I am going to give you some base code so you don’t have to write up your own. Just go to your deck’s Edit page and copy and paste this into the Description box, then read on to find out how to customize it:
<link href="https://fonts.googleapis.com/css?family=Stoke" rel="stylesheet">
<style type="text/css">
h1 { color:#6fd9c0; text-shadow: 1px 1px 2px #ff3881; font-family: 'Stoke';
}
h2 { color:#6fd9c0; text-shadow: 1px 1px 2px #ff3881; font-family: 'Stoke';
}
h3 { color:#6fd9c0; text-shadow: 1px 1px 2px #ff3881; font-family: 'Stoke';
}
.navbar {
background-image: url(https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_960_720.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100% 100%;
text-shadow: 1px 1px 2px #e8a63c;
color: #51abf5;
}
.well-jumbotron {
background-image: url(https://cdn.pixabay.com/photo/2017/08/25/18/48/art-2681039_960_720.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100% 100%;
font-family: 'Stoke';
text-shadow: 1px 1px 2px #e86c1e;
color: #51abf5;
}
div.well {
background-color: rgba(252,111,3,.5);
font-family: 'Stoke';
text-shadow: 1px 1px 2px #e86c1e;
}
div.desktop {
background-color: rgba(252,111,3,.5);
font-family: 'Stoke';
text-shadow: 1px 1px 2px #fc03ad, 0px 0px 4px #239647;
}
a.btn {
background-color: rgba(162,230,156,.5);
font-family: 'Stoke';
color: #0069ba; <!-- nice -->
text-shadow: 1px 1px 2px #e86c1e;
}
body
{
background-color: #000000;
background-image: url(https://cdn.pixabay.com/photo/2019/04/26/17/47/color-4158152_960_720.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100% 100%;
}
table, tr, td
{
background-color: transparent;
border: 0px;
}
</style>
<z></z>
<center></center> <!-- Optional Image in Deck Description -->
<span style="color: #1263c7; font-family: 'Stoke'; text-shadow: 1px 1px 2px #e06f19;"> Write deck description here </span>
Gee whillickers, look at those pretty colors! But perhaps you like ugly colors? To change the colors of containers, change the first three numbers in the parentheses next to “rgba” (google “color picker” for an easy tool to find the color codes you want). To change text colors, change the # values next to “color:”. See the code section below for reference:
a.btn {
background-color: rgba(162,230,156,.5);
font-family: 'Stoke';
color: #0069ba; <!-- nice -->
text-shadow: 1px 1px 2px #e86c1e;
}
Hmm, looks like there are still some fetching background images here that you would prefer to look repulsive. Just find an image you like on the World Wide Web, right-click it, and “Copy Image Location”. Then find the “background-image” element in your code and paste the copied link within the parentheses next to “url”. You can change the image for the top banner (navbar), the deck name container (well-jumbotron), and the main page background (body). You can even change the background images of buttons and other containers by adding the background-image element to the corresponding code section. ⚠️NOTE: Please ensure the image is free to use before linking it. I recommend using images from pixabay.com as everything there is free.
.navbar {
background-image: url(https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_960_720.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100% 100%;
text-shadow: 1px 1px 2px #e8a63c;
color: #51abf5;
}
Lookin’ neato! But gosh darnit this font is too danged beauteous. To change it to Comic Sans, simply type “Comic Sans” into the single-quotes next to “font-family:”. To change the font to anything else, particularly those nifty free fonts provided by google which can be found here, select the font you like from Google’s list, click “+” to select it, then open the menu that popped up at the bottom, and copy the “link” code under Embed Code. Also take note of the font's callout name (the name is in single quotes under "Specify in CSS" in the google menu). Then paste the copied link code in place of the existing link code at the very top of our base code. Also, change all instances of the font callout name throughout your code to the new name you noted earlier. See references below.
<link href="https://fonts.googleapis.com/css?family=Stoke" rel="stylesheet">
div.desktop {
background-color: rgba(252,111,3,.5);
font-family: 'Stoke';
text-shadow: 1px 1px 2px #fc03ad, 0px 0px 4px #239647;
}
Now that deck page is a classy chassis! Here are some additional resources created by other cool cats that you can utilize to chrome out your deck even further:
TappedOut Text Formatting Guide
The styling method described in this article is known as "inline" code. There are other methods as well, such as linking to an attached stylesheet (requires writing and storing code remotely). While attached stylesheets require a few extra steps, they are useful if you want to quickly apply the same style to multiple decks. Check out the resources provided by The Deckcoder's Alliance to learn more about attached stylesheets.
If you're feeling especially thankful for this guide, do keep in mind that king-saproling loves to receive feature tokens!
king-saproling says... #2
Haha yeah it'll suck you in, don't start at 1am!
November 3, 2019 10:34 a.m.
scotchtapedsleeves says... #4
Exactly as follows
I can see why everyone's commenting that now! I thought you had started some kind of cult on my page
November 5, 2019 9:36 p.m.
Adding (opacity: .4;) helps with transparency also.
Example div.well { background-color: rgba(252,111,3,.5); opacity: .4; font-family: 'Stoke'; text-shadow: 1px 1px 2px #e86c1e; }
Can affect the HUD transparency for those looking for more mellow overlays.
November 6, 2019 8:28 p.m. Edited.
king-saproling says... #7
Haha scotchtapedsleeves I thought you might get a kick out of that. I'm glad everyone played along!
The_Biking_Viking thanks for your kind words! Though I'm a pretty lame god if my power is styling decks on tappedout.
November 12, 2019 12:49 p.m.
Thank you so much to the info! I am starting to add html to my decks and this was immensely helpful!
January 6, 2020 2:01 p.m.
KayneMarco says... #9
This is another great resource for ppl who are still learning coding. Thanx for it all. One question I do have. Is it possible to instead of changing the pic in the nav bar and jumbotron could I just make those boxes transparent so I can see the main bg pic? I tried making changes to your code in my deck description to do so but either it ain’t possible to do that or I did it wrong. Thanx in advance and again for making this page.
February 15, 2020 9:20 a.m.
king-saproling says... #10
Hey KayneMarco sorry about the late response, haven't checked in on the article in a while. In case you're still wondering, yes you can change the background-image element to background-color for navbar and jumbotron, which allows you to change opacity (4th number in background-color, scales from 0 [totally transparent] to 1 [totally opaque]). Like so:
.navbar {
background-color: rgba(162,230,156,.1);
}
May 14, 2020 4:43 p.m.
The_Traitor says... #11
Hey, thanks for the tutorial from me as well :D Maybe I am blind, but could you tell me how to change the color of the price thing (the prices of cardkingdom etc)? Would be much appreciated :)
September 15, 2020 9:01 a.m.
DemMeowsephs says... #12
Where do you go to change the color of the decklist text? I can't seem to find it
November 9, 2020 1:34 p.m.
Today is the day I can start learning useful skills by noodling around with my EDH decklists.
Tomorrow I'll know EVERYTHING.
Thank you, king-saproling!
June 13, 2021 3:30 p.m.
king-saproling says... #15
Glad you found it useful Azielle! Let me know when you finish your decklists, i’d love to check them out.
The_Traitor and DemMeowsephs - sorry for the slow reply, it doesn’t notify me of a comment unless my name is linked. If it’s not too late I’ll try to get back to you both on your questions sometime this week
June 13, 2021 11:45 p.m.
I cleaned up Alive Beneath Cherry Blossoms and The Hive Mind Project this evening. I’ll have to mess around with it a bit to figure out how to change colour on the expanded accordion background, but they certainly look prettier than they did before your tutorial.
Thanks again king-saproling j
June 13, 2021 11:58 p.m.
DemMeowsephs says... #17
No worries king-saproling! I've got it figured out now!
June 14, 2021 7:35 a.m.
scotchtapedsleeves says... #18
It's been nearly 2 years when will the pain end, so many mentions, so many people calling me daddy-o
July 14, 2021 12:51 a.m.
is there another way to enable css for me, the guy isnt really responding
May 14, 2022 3:22 p.m.
king-saproling do i get a notification once css has been enabled?
June 8, 2022 2:29 p.m.
king-saproling says... #21
Hey Gl1mmer sorry didn't see your other message until now. Huh that's odd, I believe scotchtapedsleeves is back from hiatus. Sorry, scotch is the only person I know who can enable CSS
June 8, 2022 2:33 p.m.
king-saproling says... #22
Gl1mmer forgot to answer your other question, I think you do get a notification (been a while for me, can't remember). If not you can test once in a while to see if your deckpage edits apply or not
June 8, 2022 2:35 p.m.
Thanks for the quick reply, king-saproling ! It's just that my comment has, well, been deleted. So, I assume that scotchtapedsleeves activated CSS for me? However, when I paste the code above into a decklist, nothing changes.
June 8, 2022 2:39 p.m.
king-saproling says... #24
Sure thing Gl1mmer. I enabled chat so if you like you can send me your deck code and I'll test it on my end. Just paste the code inside a code-endcode container in the message like so:
===code
(paste your code here)
===endcode
June 8, 2022 2:50 p.m.
It might be worth nothing if you don't want to host your style sheet externally you can use a data URI instead (may need to remove special characters). This example adds a rule above the "Maybeboard" heading:
<link rel="stylesheet" type="text/css" href="data:text/css,.col-sm-9 .well h4{ margin: 20px 0 0 0; padding: 20px 0 0 0; border-top: 1px solid gray"/>
October 22, 2022 4:49 p.m.
The background image code doesn't seem to work for me, I've got CSS from scotch (with the message you gave), and I've inserted it into the code endcode Atla Palani Dino Spam - cEDH style is the deck, you can probably see it in the description. Thx
Wolfpig says... #1
I need this, just not at 1am, not now. I need this though. :D
November 3, 2019 1:21 a.m.