parasaito: f:fna49 (pic#16201235)
S̵͉̗͘a̸̹͘í̶̳̕t̷̖̎ò̸͖͔̎ ([personal profile] parasaito) wrote in [community profile] expiationooc2023-02-25 11:57 am
  • Add Memory
  • Share This Entry

Parchment Info Code

CHARACTER NAME
Welcome to Expiation. We, who have found you so worthy and deserving, have declared you to be one of the Chosen. You have been charged with SIN HERE and in accordance with the doctrine of this world, you have ▬▬ until you will face your sentencing. Prepare your defence adequately or face the repercussions. Stats List
Age: -----
Gender: -----
Height: -----
Stat 4: -----
Stat 5: -----
Stat 6: -----
Physical Attributes Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi placeat nemo animi quasi quia, quo maxime voluptates consequatur, modi, sunt sit fugiat. Ducimus asperiores velit distinctio, omnis quis facere possimus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad possimus ipsam labore eaque aspernatur voluptate suscipit molestiae, quod laborum eveniet harum, hic, odio corrupti sit necessitatibus reprehenderit quibusdam expedita asperiores.
Mental Attributes Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam dolorem quae asperiores perferendis voluptas, eum eveniet reprehenderit porro facilis. Possimus asperiores consequuntur, animi in recusandae exercitationem pariatur voluptatem quod officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium magni ipsum maxime eveniet quos consequatur architecto nam quibusdam esse exercitationem. Laudantium optio sint recusandae doloribus ratione voluptate labore dolores ipsum.
Roll up
[ 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.

  1. First part/"page":
    Search for the following comments, and edit the text inside the span tags accordingly.

    <!-- CHARACTER NAME -->
    <!-- SIN -->


  2. Second part/"page":
    1. 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.


    2. 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.


    3. 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!