S̵͉̗͘a̸̹͘í̶̳̕t̷̖̎ò̸͖͔̎ (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
parasaito) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
expiationooc2023-02-25 11:57 am
parasaito) wrote in expiationooc2023-02-25 11:57 am
Parchment Info Code
Small disclaimer: I'm still a beginner at coding, and this is my very first time sharing something I've made, so apologies in advance if anything is messy/weird/hard to understand. I'm open to suggestions/critique/questions/etc though, feel free to leave any below, or contact me on discord!
Instructions
First of all: Either check DW's "Disable Auto-Formatting" or keep the <raw code> starting and ending tags. Otherwise it'll break the code.
Suggestion: Use Ctrl + F (Command + F on Mac) to search for specific words. I find this especially useful if you're not using a code editor to edit, since DW's text editor makes the code look a bunch of mumbo jumbo in black font with no formatting option whatsoever. I've left comments in the code itself to mark where each section is at.
- First part/"page":
Search for the following comments, and edit the text inside the span tags accordingly.
<!-- CHARACTER NAME -->
<!-- SIN --> - Second part/"page":
- Stats List
Search for the following comments, and edit the text inside and outside the span tags accordingly.
<!-- STATS LIST 1 START -->
<!-- STATS LIST 2 START -->
For lengthy stats name/description, consider using a single list instead of the double one on the template.
To accomplish this, erase everything starting from <!-- STATS LIST 2 OUTER DIV START --> to <!-- STATS LIST 2 OUTER DIV END -->, then add the following:
Exactly above the <!-- STATS LIST 1 END --> comment in the code. The block above adds a single new stat, just add multiple of these one after the other for multiple new stats. - Attributes
To edit Physical and Mental Attributes, search for both:
<!-- PHYSICAL ATTRIBUTES -->
<!-- MENTAL ATTRIBUTES -->
And edit each Lorem Ipsum block of dummy text. If you need to break lines or split your text into paragraphs, I'd suggest using either as many <br> tags as necessary to break lines; or the <p>PARAGRAPH</p> tag for each paragraph. A small warning that the paragraph tag automatically adds a few pixels of bottom margin to itself. - Picure:
Search for:
src="https://i.imgur.com/KhSHVeO.png"
And replace the URL with a square picture of your character! A lightweight 175*175 image is ideal and kinder to those on slower connections, but bigger images will be scaled down anway. It must be a square image though, otherwise it'll look weird when scaled.
Alternatively, if you want the picture gone, remove everything between:
The start of the <!-- OPTIONAL : comment line to <!-- END OF OPTIONAL -->.
Known issues:Last time Amm checked for me on Mobile Safari, the Character Name box was too large for some reason, and it pushed the whole layout down, making the lines at the top/bottom look wonky. But otherwise I think it works fine? I don't own a Mac device to test it for myself so if anyone knows any workaround for this, please do let me know!Apparently it got fixed by setting a fixed height for some divs, but feel free to poke me if you find any other bugs! - Stats List
no subject
awesome job!!
❤
now stop threatening me ( ﾉД`)no subject
this is very cool, thank you!
no subject
no subject
no :/no subject
no subject
Thank you so much for designing this!
With your permission, we'd like to keep this entry as a sticky on the community for those who may wish to use it.
no subject
Omigod senp—I mean, the mods noticed me!Thank you, and sure thing!
no subject