Background image and special fonts for Decks

TappedOut forum

Posted on Nov. 28, 2017, 6:25 p.m. by Chiberia

Does the $5 upgrade cover this? If so how would I do that

enpc says... #2

The special fonts and background images are done via html and css which you have to set up for the deck. THere's not just an "add background to deck" button which appears.

While I personally have no problem with people customising their deck interface there are a few things to keep in mind:

  • Have you heard of a thing called "bandwidth leeching"? If not, you should read up on it before just linking images randomly. You need to make sure that you're not going to wreak havoc on some poor website's bandwidth (that's before you even get into the legal of it).

  • Is what you're doing going to make the decklist easier to read or harder? I have come across many decklists which I have immediately clicked back off because the page was an assault to the eyes.

  • Loading high res backgrounds takes time and remember that a lot of peopel are viewing from mobile devices. Most people don't implement code to check the resolution of the device viewing (or the broswer) and adjust accordingly, And when yo uhave a widescreen image on a vertical device it gets really squished. Not to mention having to wase data downloading high res images which just slow the loading lof the page down (and eating up a person's mobile data). That's not ot say use low res images as they look terrible, but keep these things in mind.

If you're going to bling out your decklist, this isn't a "don't do it". Just make sure you do it correctly.

November 28, 2017 6:44 p.m.

Chiberia says... #3

enpc Im not experienced with HTML or any of that, It'll probably be a learning experience. Ill most likely do it on a private deck and perfect it. Thank you friend.

November 28, 2017 7:43 p.m.

enpc says... #4

That's the best way to have a play. I would strongly recommend having a look at these resources:

https://www.w3schools.com/html/

https://www.w3schools.com/css/

You can't do inline CSS on T/O so a lot of people have hosted their css file as well as any script files from a dropbox account.

For the background, there are cheap an nasty methods of setting a background image (basically just set a stretch image with draw order of -1) however if you load it from external methods you can do check of which browser the user is running and adjust all the settings accordingly.

November 28, 2017 9:14 p.m. Edited.

Chiberia says... #5

enpc That sounds complicated, well I'll learn eventually. Im not that computer savvy but I can understand things better now. During Winter Break Ill probably sit down and get it all down

November 28, 2017 9:30 p.m.

enpc says... #6

It can seem scary but it's as simple as eating an elephant - one bite at a time.

I would recommend checking out the w3schools javascript tutorial as well:

https://www.w3schools.com/js/

where you can learn basic stuff. Then StackOverflow will be your friend. Quick google searches returned a bunch of easy info you can quickly apply such as this one:

https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser

Which is a simple function on how to tell if a device is a mobile browser or not. Even though te Regex is scary, the function itself is simple and you can easily apply it (even without knowing the full extent of the regex - I'll forgive you this one time :P) to your code.

Also, once you start getting more complicated stuff you're trying to do, there are a heap of people on the forums who are happy to healp. There's even a T/O forum devoted to it.

November 29, 2017 12:01 a.m. Edited.

Chiberia says... #7

enpc You're right, it seems like a lot o_o;

Ill get it though, and Ill definitely have to go there to get help because I know Im gonna need it. You've been a great help, thank you so much, any other advice you have for me?

November 29, 2017 7:03 a.m.

enpc says... #8

Get yourself a copy of Notepad++. It's really good for this kind of thing. You can easily create a .html file on your computer and run it in your web browser while also editting it.

November 29, 2017 7:47 a.m.

Chiberia says... #9

enpc Alright

November 29, 2017 9:05 a.m.

Chiberia says... #10

enpc do you know what the "points" are on our profiles?

November 29, 2017 11:19 a.m.

enpc says... #11

I'm pretty sure they're activity points. You get them as you do stuff on the forums and they decay over time. It's an ok meause of how active a user is I think.

November 29, 2017 4:50 p.m.

Chiberia says... #12

enpc Thats what I was thinking

November 29, 2017 4:53 p.m.

Please login to comment