jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2021-03-27 02:07 pm
10billionghosts) wrote2021-03-27 02:07 pm
Entry tags:
code: BOOSTER PACK! another trading card code
UPDATED 9/27/2021: Quick tweak to make slightly more mobile friendly.
Whew, this took a while. This code is intended to be used as a cast list or character directory, but really whatever you wanna use it for, go nuts. It's built into a flex grid so all the cards should shuffle nicely into order.
This trading card code is slightly smaller than my other trading card code. Each card will stack up to 3 across on desktops and typically will stack 2 across on phones and other small screens.
You can see this code in action here on my own character roster. As-is, the cards account for three links, but you can add around 5 - 6 total, if you want. In the examples, the links provided are for character journal, mood board, and game, but you could easily add in links to playlists and character tags!
Here is the base flex grid frame. You will need this for the cards to play nicely with each other.
Next up is the card, itself:
HOW TO USE
❣️ Keep the lj-raw tags!!
❣️ This code is mobile friendly!
❣️ First, post the flex grid code (that's the first one) into a new blank post. Then add as many cards as you'd like (that's the second code) where indicated in the code.
❣️ It'll be easier if you customize each card one at a time as you go. Less likely to lose track that way.
❣️ The !!CHAR_IMAGE_HERE!! image space works best with a well centered portrait photo or gif -- tiktok/snapchat/ig live resolution, basically -- but will center and scale any image or gif you put in.
❣️ Replace the hex codes #ccc and #ddd to customize the colors. The following hexcodes should be changed to customize the colors:
❣️ On the star links, you can change the title text to change what will appear when you hover over each star.
❣️ You can use something other than stars for each link. I just liked those best.
As always, I do not require credit, but it is appreciated. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!
Whew, this took a while. This code is intended to be used as a cast list or character directory, but really whatever you wanna use it for, go nuts. It's built into a flex grid so all the cards should shuffle nicely into order.
This trading card code is slightly smaller than my other trading card code. Each card will stack up to 3 across on desktops and typically will stack 2 across on phones and other small screens.
You can see this code in action here on my own character roster. As-is, the cards account for three links, but you can add around 5 - 6 total, if you want. In the examples, the links provided are for character journal, mood board, and game, but you could easily add in links to playlists and character tags!
Here is the base flex grid frame. You will need this for the cards to play nicely with each other.
Next up is the card, itself:
HOW TO USE
❣️ Keep the lj-raw tags!!
❣️ This code is mobile friendly!
❣️ First, post the flex grid code (that's the first one) into a new blank post. Then add as many cards as you'd like (that's the second code) where indicated in the code.
❣️ It'll be easier if you customize each card one at a time as you go. Less likely to lose track that way.
❣️ The !!CHAR_IMAGE_HERE!! image space works best with a well centered portrait photo or gif -- tiktok/snapchat/ig live resolution, basically -- but will center and scale any image or gif you put in.
❣️ Replace the hex codes #ccc and #ddd to customize the colors. The following hexcodes should be changed to customize the colors:
- #ccc is the color of the left side bar and the text on the first name field.
- #ddd is the color of the last name field line. A slightly lighter color than the one you chose to replace #ccc is recommended.
❣️ On the star links, you can change the title text to change what will appear when you hover over each star.
❣️ You can use something other than stars for each link. I just liked those best.
As always, I do not require credit, but it is appreciated. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!
no subject
no subject
no subject