jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2020-06-15 04:06 pm
10billionghosts) wrote2020-06-15 04:06 pm
Entry tags:
code: small cast list / character directory
NOTE 10/10/2021: I have not looked at this code in depth since before the DW code push. It is currently on my list of codes to examine and revise, but I don't have an anticipated date yet. I have zero doubt that it needs some clean up in general, and may need some tweaks to work well. However, I've seen this code or variants of it used on Dreamwidth and it does at least work, even if it is a little rickety.
This is the cast list code that was used at Peckenpaugh. You can see it live in action here, here and here. It was one of my favorite codes to come out of the game, and so I wanted to make it available for wider use.
The current set up allows for a max width of 3 "cards" across, and will flexibly shuffle down to 1 - 2 depending on resolution size. You can add as many cards as you want. I've provided a slightly altered example below this blurb, to show off the sorts of things you can do.
Here's the base code:
And here's JUST the "card", which you can add to the above code (before the final /div tag) to add more cast:
HOW TO USE
❣️ Keep the lj-raw tags!!
❣️ The image space is intended for an icon, 100x100 in size, but will autosize anything you use to 100x100.
❣️ When selecting an image for the icon spot, images that favor the center of their canvas will work best. If you're working with an image that has most of the focus on the right side or the top, it's going to wind up clipping weird.
❣️ Change the "#aaa" hex code for the top bar and the "#ccc" hex code for the lower bar colors. I personally recommend a darker color for the #aaa fields and a lighter color for the #ccc fields.
❣️ I've marked anything you need to fill in yourself with !!EXCLAMATION POINTS!! so pay attention to those.
❣️ If you don't like the way the cards align, search for "justify-content" and try different values there. Right now it's set to center by default, but space-around, space-beteen, and flex-start all work as well to give a slightly different visual variation.
❣️ The code comes with several items made into links. In Peckenpaugh, you could click the icon to go to the character's profile, and the character's name to go to their tags in the game, just as an example of what you could do with these.
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!
This code is NOT compatible with insanejournal! I apologize for the inconvenience.
This is the cast list code that was used at Peckenpaugh. You can see it live in action here, here and here. It was one of my favorite codes to come out of the game, and so I wanted to make it available for wider use.
The current set up allows for a max width of 3 "cards" across, and will flexibly shuffle down to 1 - 2 depending on resolution size. You can add as many cards as you want. I've provided a slightly altered example below this blurb, to show off the sorts of things you can do.
Here's the base code:
And here's JUST the "card", which you can add to the above code (before the final /div tag) to add more cast:
HOW TO USE
❣️ Keep the lj-raw tags!!
❣️ The image space is intended for an icon, 100x100 in size, but will autosize anything you use to 100x100.
❣️ When selecting an image for the icon spot, images that favor the center of their canvas will work best. If you're working with an image that has most of the focus on the right side or the top, it's going to wind up clipping weird.
❣️ Change the "#aaa" hex code for the top bar and the "#ccc" hex code for the lower bar colors. I personally recommend a darker color for the #aaa fields and a lighter color for the #ccc fields.
❣️ I've marked anything you need to fill in yourself with !!EXCLAMATION POINTS!! so pay attention to those.
❣️ If you don't like the way the cards align, search for "justify-content" and try different values there. Right now it's set to center by default, but space-around, space-beteen, and flex-start all work as well to give a slightly different visual variation.
❣️ The code comes with several items made into links. In Peckenpaugh, you could click the icon to go to the character's profile, and the character's name to go to their tags in the game, just as an example of what you could do with these.
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!
This code is NOT compatible with insanejournal! I apologize for the inconvenience.