Input Template

[nobr]
[div=
  width: 100%;
  position: relative;
  overflow: hidden;
  font-size: initial;
  line-height: initial;]
  [comment]
    Designed and coded by [USER=20950]@Nano[/USER].

Please do not remove the credits or claim the code as your own work.

If you found this code outside of my public workshop, please don't use it.
    I'd greatly appreciate it if you used the version of the code in that thread.

[font=Dancing Script]cursive[/font]
    [font=Lato]san-serif[/font]
  [/comment]
  [div=
  /* <--------------------------------- general accents ---------------------------------> */

&Colors \ group&
  /* colors */
  --Color01: &Main Color \ text&;
  --bgColor: &Background Color \ text \#fefefe&;
  --TextColor: &Text Color \ text \ #666&;
  --BorderColor: &Color of the border around the whole code \ text \ #E5E4E2&;
  --HeaderColor: &Color of Name + Role Text \ text \ #fefefe&;
&end&

/* fonts */
  --HeaderFont: 'Dancing Script', cursive;
  --BodyFont: 'Lato', sans-serif;

--HeaderSize: 2.3em;
  --SubSize: .8em;
  --BodySize: calc(.9em + 1px);

--BodyLineHeight: 150%;

&In Character Code Images \ group&
  /* <--------------------------------- images ---------------------------------> */
  --mainIMG: url(&Main 2:3 Image \ text&) center/cover no-repeat;
  --square01: url(&First Square Image \ text&) center/cover no-repeat;
  --square02: url(&Second Square Image \ text&) center/cover no-repeat;
  --square03: url(&Third Square Image \ text&) center/cover no-repeat;
&end&

/* <--------------------------------- shell (don't touch) ---------------------------------> */

margin: 0 auto;
  border: 1px solid var(--BorderColor);
  max-width: calc(600px - 2px);
  width: calc(100% - 2px);
  min-width: calc(300px - 2px);]
&In Character Text \ group&
    [comment] --- start of top portion of code --- [/comment]
    [div=/* top of code */
    padding: 75px 7% 0;
    width: 86%;
    background: var(--Color01);
    position: relative;]
      [div=/* flexbox */
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      margin-left: -20px;
      width: calc(100% + 20px);]
        [comment] --- start of name + role or title --- [/comment]
        [div=/* flex LEFT */
        margin-left: 20px;
        margin-bottom: 20px;
        flex: 2;
        width: 100%;
        min-width: 200px;
        overflow: hidden;]
          [div=/* name */
          font-family: var(--HeaderFont);
          font-size: var(--HeaderSize);
          line-height: 100%;
          color: var(--HeaderColor);
          text-transform: capitalize;
          text-align: right;
          white-space: nowrap;]
            &Character Name \ text&
          [/div]
          [div=/* text below name */
          margin-top: 5px;
          font-family: var(--BodyFont);
          font-size: var(--SubSize);
          line-height: 100%;
          color: var(--HeaderColor);
          text-transform: uppercase;
          text-align: right;
          white-space: nowrap;]
            &Role or Title Name \ text&
          [/div]
        [/div]
        [comment] --- end of name + role or title --- [/comment]
        [comment] --- start of main image section --- [/comment]
        [div=/* flex RIGHT */
        margin-left: 20px;
        flex: 1;
        width: 100%;
        min-width: 150px;
        min-height: 60px;
        position: relative;]
          [div=/* main image */
          box-sizing: border-box;
          aspect-ratio: 2/3;
          border: 15px solid var(--bgColor);
          width: 100%;
          background: var(--mainIMG);
          position: absolute;
          top: -15px;]
          [/div]
        [/div]
        [comment] --- end of main image section --- [/comment]
      [/div]
    [/div]
    [comment] --- end of top portion of code --- [/comment]
    [comment] --- start of bottom portion of code --- [/comment]
    [div=/* bottom of code */
    padding: 0 7% 25px 7%;
    width: 86%;
    background: var(--bgColor);]
      [comment] --- start of image section --- [/comment]
      [div=/* flexbox */
      display: flex;
      flex-flow: row-reverse wrap;
      justify-content: center;
      margin-left: -20px;
      width: calc(100% + 20px);]
        [div=/* flex RIGHT - dummy box - IGNORE THIS */
        aspect-ratio: 2/3;
        margin-top: -18%;
        margin-left: 20px;
        flex: 1;
        width: 100%;
        min-width: 150px;
        position: relative;
        pointer-events: none;]
        [/div]
        [comment] --- start of square images --- [/comment]
        [div=/* flex LEFT */
        display: flex;
        align-items: center;
        margin: 22px 0 20px 20px;
        flex: 2;
        width: 100%;
        min-width: 200px;]
          [div=/* flexbox */
          display: flex;
          flex-flow: row wrap;
          justify-content: center;
          margin-left: -3.5%;
          width: 100%;]
            [div=/* square 01 */
            box-sizing: border-box;
            aspect-ratio: 1/1;
            border: 1px solid var(--BorderColor);
            margin: 2%;
            padding: 5px;
            flex: 1;
            width: 96%;]
              [div=/* image */
              box-sizing: border-box;
              background: var(--square01);
              width: 100%;
              height: 100%;]
              [/div]
            [/div]
            [div=/* square 02 */
            box-sizing: border-box;
            aspect-ratio: 1/1;
            border: 1px solid var(--BorderColor);
            margin: 2%;
            padding: 5px;
            flex: 1;
            width: 96%;]
              [div=/* image */
              box-sizing: border-box;
              background: var(--square02);
              width: 100%;
              height: 100%;]
              [/div]
            [/div]
            [div=/* square 03 */
            box-sizing: border-box;
            aspect-ratio: 1/1;
            border: 1px solid var(--BorderColor);
            margin: 2%;
            padding: 5px;
            flex: 1;
            width: 96%;]
              [div=/* image */
              box-sizing: border-box;
              background: var(--square03);
              width: 100%;
              height: 100%;]
              [/div]
            [/div]
          [/div]
        [/div]
        [comment] --- end of square images --- [/comment]
      [/div]
      [comment] --- end of image section --- [/comment]
      [comment] --- start of textbox --- [/comment]
      [div=/* textbox */
      padding-top: 15px;
      font-family: var(--BodyFont);
      font-size: var(--BodySize);
      line-height: var(--BodyLineHeight);
      color: var(--TextColor);
      text-align: justify;]
        [div=white-space: pre-line;]&In Character Post Text \ content&[/div]
      [/div]
      [comment] --- end of textbox --- [/comment]
&end&
      [comment] --- start of roleplayer tags --- [/comment]
      [div=/* tag wrapper */
      display: flex;
      justify-content: right;
      margin-top: 15px;
      width: 100%;
      overflow: hidden;]
&Roleplayer Tags \ group \ repeat&
        [comment] --- start of tag --- [/comment]
        [div=/* tag */
        display: inline-block;
        margin-right: 5px;
        width: 24px;
        height: 24px;
        overflow: hidden;]
          &@Name Here \ text&
        [/div]
        [comment] --- end of tag --- [/comment]
&end&
      [/div]
      [comment] --- end of roleplayer tags --- [/comment]
    [/div]
    [comment] --- end of bottom portion of code --- [/comment]
  [/div]
[/div]
[div=margin-top: 5px; width: 100%; font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n[div=\r\n  width: 100%;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-size: initial;\r\n  line-height: initial;]\r\n  [comment]\r\n    Designed and coded by [USER=20950]@Nano[/USER].\r\n\r\n    Please do not remove the credits or claim the code as your own work.\r\n\r\n    If you found this code outside of my public workshop, please don't use it.\r\n    I'd greatly appreciate it if you used the version of the code in that thread.\r\n\r\n    [font=Dancing Script]cursive[/font]\r\n    [font=Lato]san-serif[/font]\r\n  [/comment]\r\n  [div=\r\n  /* <--------------------------------- general accents ---------------------------------> */\r\n\r\n",
  {
    "type": "group",
    "description": "Colors",
    "markerStart": {
      "type": "group",
      "description": "Colors",
      "original": "&Colors \\ group&",
      "repeat": false,
      "indices": [
        627,
        642
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n  /* colors */\r\n  --Color01: ",
      {
        "type": "text",
        "description": "Main Color",
        "marker": {
          "type": "text",
          "description": "Main Color",
          "defaultValue": "",
          "original": "&Main Color \\ text&",
          "indices": [
            674,
            692
          ]
        }
      },
      ";\r\n  --bgColor: ",
      {
        "type": "text",
        "description": "Background Color",
        "marker": {
          "type": "text",
          "description": "Background Color",
          "defaultValue": "#fefefe",
          "original": "&Background Color \\ text \\#fefefe&",
          "indices": [
            709,
            742
          ]
        },
        "value": "#fefefe"
      },
      ";\r\n  --TextColor: ",
      {
        "type": "text",
        "description": "Text Color",
        "marker": {
          "type": "text",
          "description": "Text Color",
          "defaultValue": "#666",
          "original": "&Text Color \\ text \\ #666&",
          "indices": [
            761,
            786
          ]
        },
        "value": "#666"
      },
      ";\r\n  --BorderColor: ",
      {
        "type": "text",
        "description": "Color of the border around the whole code",
        "marker": {
          "type": "text",
          "description": "Color of the border around the whole code",
          "defaultValue": "#E5E4E2",
          "original": "&Color of the border around the whole code \\ text \\ #E5E4E2&",
          "indices": [
            807,
            866
          ]
        },
        "value": "#E5E4E2"
      },
      ";\r\n  --HeaderColor: ",
      {
        "type": "text",
        "description": "Color of Name + Role Text",
        "marker": {
          "type": "text",
          "description": "Color of Name + Role Text",
          "defaultValue": "#fefefe",
          "original": "&Color of Name + Role Text \\ text \\ #fefefe&",
          "indices": [
            887,
            930
          ]
        },
        "value": "#fefefe"
      },
      ";\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        934,
        938
      ]
    }
  },
  "\r\n\r\n  /* fonts */\r\n  --HeaderFont: 'Dancing Script', cursive;\r\n  --BodyFont: 'Lato', sans-serif;\r\n\r\n  --HeaderSize: 2.3em;\r\n  --SubSize: .8em;\r\n  --BodySize: calc(.9em + 1px);\r\n\r\n  --BodyLineHeight: 150%;\r\n\r\n",
  {
    "type": "group",
    "description": "In Character Code Images",
    "markerStart": {
      "type": "group",
      "description": "In Character Code Images",
      "original": "&In Character Code Images \\ group&",
      "repeat": false,
      "indices": [
        1147,
        1180
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n  /* <--------------------------------- images ---------------------------------> */\r\n  --mainIMG: url(",
      {
        "type": "text",
        "description": "Main 2:3 Image",
        "marker": {
          "type": "text",
          "description": "Main 2:3 Image",
          "defaultValue": "",
          "original": "&Main 2:3 Image \\ text&",
          "indices": [
            1286,
            1308
          ]
        }
      },
      ") center/cover no-repeat;\r\n  --square01: url(",
      {
        "type": "text",
        "description": "First Square Image",
        "marker": {
          "type": "text",
          "description": "First Square Image",
          "defaultValue": "",
          "original": "&First Square Image \\ text&",
          "indices": [
            1354,
            1380
          ]
        }
      },
      ") center/cover no-repeat;\r\n  --square02: url(",
      {
        "type": "text",
        "description": "Second Square Image",
        "marker": {
          "type": "text",
          "description": "Second Square Image",
          "defaultValue": "",
          "original": "&Second Square Image \\ text&",
          "indices": [
            1426,
            1453
          ]
        }
      },
      ") center/cover no-repeat;\r\n  --square03: url(",
      {
        "type": "text",
        "description": "Third Square Image",
        "marker": {
          "type": "text",
          "description": "Third Square Image",
          "defaultValue": "",
          "original": "&Third Square Image \\ text&",
          "indices": [
            1499,
            1525
          ]
        }
      },
      ") center/cover no-repeat;\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        1553,
        1557
      ]
    }
  },
  "\r\n\r\n  /* <--------------------------------- shell (don't touch) ---------------------------------> */\r\n\r\n  margin: 0 auto;\r\n  border: 1px solid var(--BorderColor);\r\n  max-width: calc(600px - 2px);\r\n  width: calc(100% - 2px);\r\n  min-width: calc(300px - 2px);]\r\n",
  {
    "type": "group",
    "description": "In Character Text",
    "markerStart": {
      "type": "group",
      "description": "In Character Text",
      "original": "&In Character Text \\ group&",
      "repeat": false,
      "indices": [
        1818,
        1844
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n    [comment] --- start of top portion of code --- [/comment]\r\n    [div=/* top of code */\r\n    padding: 75px 7% 0;\r\n    width: 86%;\r\n    background: var(--Color01);\r\n    position: relative;]\r\n      [div=/* flexbox */\r\n      display: flex;\r\n      flex-flow: row wrap;\r\n      justify-content: center;\r\n      margin-left: -20px;\r\n      width: calc(100% + 20px);]\r\n        [comment] --- start of name + role or title --- [/comment]\r\n        [div=/* flex LEFT */\r\n        margin-left: 20px;\r\n        margin-bottom: 20px;\r\n        flex: 2;\r\n        width: 100%;\r\n        min-width: 200px;\r\n        overflow: hidden;]\r\n          [div=/* name */\r\n          font-family: var(--HeaderFont);\r\n          font-size: var(--HeaderSize);\r\n          line-height: 100%;\r\n          color: var(--HeaderColor);\r\n          text-transform: capitalize;\r\n          text-align: right;\r\n          white-space: nowrap;]\r\n            ",
      {
        "type": "text",
        "description": "Character Name",
        "marker": {
          "type": "text",
          "description": "Character Name",
          "defaultValue": "",
          "original": "&Character Name \\ text&",
          "indices": [
            2752,
            2774
          ]
        }
      },
      "\r\n          [/div]\r\n          [div=/* text below name */\r\n          margin-top: 5px;\r\n          font-family: var(--BodyFont);\r\n          font-size: var(--SubSize);\r\n          line-height: 100%;\r\n          color: var(--HeaderColor);\r\n          text-transform: uppercase;\r\n          text-align: right;\r\n          white-space: nowrap;]\r\n            ",
      {
        "type": "text",
        "description": "Role or Title Name",
        "marker": {
          "type": "text",
          "description": "Role or Title Name",
          "defaultValue": "",
          "original": "&Role or Title Name \\ text&",
          "indices": [
            3121,
            3147
          ]
        }
      },
      "\r\n          [/div]\r\n        [/div]\r\n        [comment] --- end of name + role or title --- [/comment]\r\n        [comment] --- start of main image section --- [/comment]\r\n        [div=/* flex RIGHT */\r\n        margin-left: 20px;\r\n        flex: 1;\r\n        width: 100%;\r\n        min-width: 150px;\r\n        min-height: 60px;\r\n        position: relative;]\r\n          [div=/* main image */\r\n          box-sizing: border-box;\r\n          aspect-ratio: 2/3;\r\n          border: 15px solid var(--bgColor);\r\n          width: 100%;\r\n          background: var(--mainIMG);\r\n          position: absolute;\r\n          top: -15px;]\r\n          [/div]\r\n        [/div]\r\n        [comment] --- end of main image section --- [/comment]\r\n      [/div]\r\n    [/div]\r\n    [comment] --- end of top portion of code --- [/comment]\r\n    [comment] --- start of bottom portion of code --- [/comment]\r\n    [div=/* bottom of code */\r\n    padding: 0 7% 25px 7%;\r\n    width: 86%;\r\n    background: var(--bgColor);]\r\n      [comment] --- start of image section --- [/comment]\r\n      [div=/* flexbox */\r\n      display: flex;\r\n      flex-flow: row-reverse wrap;\r\n      justify-content: center;\r\n      margin-left: -20px;\r\n      width: calc(100% + 20px);]\r\n        [div=/* flex RIGHT - dummy box - IGNORE THIS */\r\n        aspect-ratio: 2/3;\r\n        margin-top: -18%;\r\n        margin-left: 20px;\r\n        flex: 1;\r\n        width: 100%;\r\n        min-width: 150px;\r\n        position: relative;\r\n        pointer-events: none;]\r\n        [/div]\r\n        [comment] --- start of square images --- [/comment]\r\n        [div=/* flex LEFT */\r\n        display: flex;\r\n        align-items: center;\r\n        margin: 22px 0 20px 20px;\r\n        flex: 2;\r\n        width: 100%;\r\n        min-width: 200px;]\r\n          [div=/* flexbox */\r\n          display: flex;\r\n          flex-flow: row wrap;\r\n          justify-content: center;\r\n          margin-left: -3.5%;\r\n          width: 100%;]\r\n            [div=/* square 01 */\r\n            box-sizing: border-box;\r\n            aspect-ratio: 1/1;\r\n            border: 1px solid var(--BorderColor);\r\n            margin: 2%;\r\n            padding: 5px;\r\n            flex: 1;\r\n            width: 96%;]\r\n              [div=/* image */\r\n              box-sizing: border-box;\r\n              background: var(--square01);\r\n              width: 100%;\r\n              height: 100%;]\r\n              [/div]\r\n            [/div]\r\n            [div=/* square 02 */\r\n            box-sizing: border-box;\r\n            aspect-ratio: 1/1;\r\n            border: 1px solid var(--BorderColor);\r\n            margin: 2%;\r\n            padding: 5px;\r\n            flex: 1;\r\n            width: 96%;]\r\n              [div=/* image */\r\n              box-sizing: border-box;\r\n              background: var(--square02);\r\n              width: 100%;\r\n              height: 100%;]\r\n              [/div]\r\n            [/div]\r\n            [div=/* square 03 */\r\n            box-sizing: border-box;\r\n            aspect-ratio: 1/1;\r\n            border: 1px solid var(--BorderColor);\r\n            margin: 2%;\r\n            padding: 5px;\r\n            flex: 1;\r\n            width: 96%;]\r\n              [div=/* image */\r\n              box-sizing: border-box;\r\n              background: var(--square03);\r\n              width: 100%;\r\n              height: 100%;]\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        [/div]\r\n        [comment] --- end of square images --- [/comment]\r\n      [/div]\r\n      [comment] --- end of image section --- [/comment]\r\n      [comment] --- start of textbox --- [/comment]\r\n      [div=/* textbox */\r\n      padding-top: 15px;\r\n      font-family: var(--BodyFont);\r\n      font-size: var(--BodySize);\r\n      line-height: var(--BodyLineHeight);\r\n      color: var(--TextColor);\r\n      text-align: justify;]\r\n        [div=white-space: pre-line;]",
      {
        "type": "content",
        "description": "In Character Post Text",
        "marker": {
          "type": "content",
          "description": "In Character Post Text",
          "original": "&In Character Post Text \\ content&",
          "indices": [
            6958,
            6991
          ]
        }
      },
      "[/div]\r\n      [/div]\r\n      [comment] --- end of textbox --- [/comment]\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        7065,
        7069
      ]
    }
  },
  "\r\n      [comment] --- start of roleplayer tags --- [/comment]\r\n      [div=/* tag wrapper */\r\n      display: flex;\r\n      justify-content: right;\r\n      margin-top: 15px;\r\n      width: 100%;\r\n      overflow: hidden;]\r\n",
  {
    "type": "group",
    "description": "Roleplayer Tags",
    "markerStart": {
      "type": "group",
      "description": "Roleplayer Tags",
      "original": "&Roleplayer Tags \\ group \\ repeat&",
      "repeat": true,
      "indices": [
        7287,
        7320
      ]
    },
    "repeat": true,
    "originalChildren": [
      "\r\n        [comment] --- start of tag --- [/comment]\r\n        [div=/* tag */\r\n        display: inline-block;\r\n        margin-right: 5px;\r\n        width: 24px;\r\n        height: 24px;\r\n        overflow: hidden;]\r\n          ",
      {
        "type": "text",
        "description": "@Name Here",
        "marker": {
          "type": "text",
          "description": "@Name Here",
          "defaultValue": "",
          "original": "&@Name Here \\ text&",
          "indices": [
            7541,
            7559
          ]
        }
      },
      "\r\n        [/div]\r\n        [comment] --- end of tag --- [/comment]\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        7627,
        7631
      ]
    }
  },
  "\r\n      [/div]\r\n      [comment] --- end of roleplayer tags --- [/comment]\r\n    [/div]\r\n    [comment] --- end of bottom portion of code --- [/comment]\r\n  [/div]\r\n[/div]\r\n[div=margin-top: 5px; width: 100%; font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[/div]\r\n[/nobr]"
]

[]

Hanami.TTcode

By mochiroll

Colors

Main Color

Background Color

Text Color

Color of the border around the whole code

Color of Name + Role Text

In Character Code Images

Main 2:3 Image

First Square Image

Second Square Image

Third Square Image

In Character Text

Character Name

Role or Title Name

In Character Post Text

Roleplayer Tags

@Name Here

Output