Just gotta gush about how much i love this code. it's simple and looks really nice. plus i love how it reminds me of those old pokemon cards with the full image on front and info on the back. which it also works perfectly for me right now since in my current random story all my characters got turned into cards so it fits that whole thing. I need to figure out a consistent art style i want to draw everyone in but here's what I've done with one of my characters https://toyhou.se/12259750.proto Anyway thank you bunches for making and sharing this code.
So lovely! i plan on using this but i have one question: what's the preferred size for the image?
thanks! there isn't really a preferred size for this; the image will be cropped by the code
for example, this is the background image used in the live preview:
as you can see, it doesn't match the dimensions of the code at all, so it gets cropped but otherwise works just fine.
the aspect ratio of the cropped images is 9:12.6, if that's useful! I tend to scale portrait images down to be anywhere between 600-800px wide, then run them through tinypng for optimisation. (I find this provides a nice balance between file size and quality)
hope this helps :-)
i love this :o do you have a guide on how to add this to your profile ? i've tried many times but could never do it ;w;
thanks! :D
this guide might help? you'll want to copy and paste the code from here into a code editor and from there you can add your oc's information.
make sure you turn WYSIWYG off in your display settings, at least for profile text - it can really mess with codes and makes them a lot harder to edit.
I'd recommend using circlejourney's live code editor to work on the code, then pasting it from there into your profile!
for this code specifically, the images are both set in style="background-image: url(#);" (put your image url in the brackets)
you can adjust the way your images are cropped in background-position: 50%;, also under the style attribute! (should be immediately after background-image)
most of the text fields will look like this: <h1>text here</h1> or <p>text here</p> (in code editors the text is usually highlighted in a different colour to make it easier to read!)
I've also left comments in the code to make it a little easier to navigate - they usually show up in some shade of grey, so keep an eye out for those
I hope that helps! if you need anything else let me know :-)
21. OC trading card!'s Comments