Text Templater
Menu
Home
About
Documentation
GitHub
Toggle theme
Pastebin URL
Get Template
GitHub Gist URL
Get Template
Input Template
[nobr] [div=display: none;] [font=Special Elite]@fluticasone[/font] [font=Inter V]@fluticasone[/font] [/div] [div=display: block; /* root container */ &Variables \ group&--conbgcolor: &Main Container BG Color \ text \ #292929&; /* bg color of main container */ --maincolor: &Main or Theme Color \ text \ #b9689d&; /* color of img, paper, name */ --framecolor: &Frame Color \ text \ #e5e1b6&; /* color of frame */ --bodycolor: &Body Text Color \ text \#313131&; /* body text color */ --tagcolor: &Tape Text Color \ text \ #424242&; /* tag text color */ --tagbgcolor: &Tape Color \ text \ #ebe4d2&; /* tag bg color */ --namefont: 'Times New Roman', serif; --tagsfont: 'Special Elite', serif; --bodyfont: 'Inter V', sans-serif; --mainIMG: url(&Character Image URL \ text&); /* image inside frame */ --bgIMG: var(--mainIMG); /* bg IMG of main container */&end& position: relative; width: clamp(300px,100%,675px); margin: auto; --frameIMG: url(https://i.imgur.com/iI46CPk.png); --leavesIMG: url(https://i.imgur.com/7WiqsjX.png); --bodyIMG: url(https://i.imgur.com/2GusAkO.jpeg); --tagsIMG: url(https://i.imgur.com/Ff0gbZi.jpeg);] [div=display: block; /* main container */ position: relative; margin-left: 3.85%; z-index: 1; width: 96.15%; background: var(--conbgcolor); padding-top: 2rem; container-type: inline-size; overflow: hidden;] [div=position: absolute; /* name */ right: 0px; top: 0px; z-index: 1; writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center center; font-family: var(--namefont); font-size: 48cqw; line-height: .75; letter-spacing: -.07em; font-weight: bold; font-style: italic; color: var(--maincolor); padding-bottom: .07em; mix-blend-mode: difference;] &Sideways Text \ group&&Character Role or Name \ text \ name& [/div] [div=position: absolute; /* name stroke */ right: 0px; top: 0px; z-index: 1; writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center center; font-family: var(--namefont); font-size: 48cqw; line-height: .75; letter-spacing: -.07em; font-weight: bold; font-style: italic; padding-bottom: calc(.07em + 3px); color: rgba(255, 255, 255, 0); text-stroke: 2px var(--conbgcolor); -webkit-text-stroke: 1px var(--conbgcolor);] &Repeat Above \ text \ name&&end& [/div] [div=position: absolute; /* body text bg */ width: clamp(275px,75%,500px); left: 0%; height: 75%; bottom: 0px; background: var(--maincolor) var(--bodyIMG) center center/cover; background-blend-mode: multiply; z-index: 2;] [div=display: none;]body text bg[/div] [/div] [div=position: absolute; /* main container bg */ top: 0px; left: 0px; width: 100%; height: 100%; background: var(--bgIMG) no-repeat center center/150% auto; filter: saturate(0%) contrast(50%) brightness(150%); mix-blend-mode: multiply; opacity: .5;] [div=display: none;]???[/div] [/div] [div=display: block; /* frame container */ width: clamp(200px,55%,450px); aspect-ratio: 800/923; position: relative; margin: auto; margin-right: 13cqw; z-index: 4;] [div=position: absolute; background: var(--maincolor); width: 100%; left: 0px; height: 100%; top: 0px; font-size: 0px; border-radius: 50%; overflow: hidden;] [div=display: block; height: 100%; width: 100%; background: var(--mainIMG) no-repeat scroll 60% 10%/190% auto; filter: saturate(0%) contrast(75%) brightness(140%); mix-blend-mode: multiply;] [/div] [/div] [div=position: absolute; font-size: 0px; width: 100%; height: 100%; left: 0px; top: 0px; background: var(--framecolor) var(--frameIMG) no-repeat scroll 0 0/cover; background-blend-mode: multiply; -webkit-mask: var(--frameIMG) 0 0/cover; mask: var(--frameIMG) 0 0/cover;] frame [/div] [/div] [div=display: flex; /* user tags container */ flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; gap: 2px; width: clamp(275px,75%,500px); box-sizing: border-box; padding: 0px clamp(2.5rem,8%,100px); position: relative; top: -1rem; z-index: 3; font-size: 0px; mix-blend-mode: multiply;] &User Tag \ group \ repeat&[div=flex: 0 auto; filter: saturate(0%) brightness(80%);] @&Username w/o @ \ text \ fluticasone& [/div]&end& [/div] [div=display: block; /* text container */ width: clamp(275px,75%,500px); height: calc(500px - 3cqw); overflow: hidden; padding: 0px clamp(2rem,5%,100px); color: var(--bodycolor); margin-bottom: 4rem; position: relative; z-index: 3; box-sizing: border-box; font-family: var(--bodyfont); line-height: 1.25; font-size: .9rem; text-align: justify;] [div=display: block; height: 100%; box-sizing: border-box; width: calc(100% + 250px); overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: both; scrollbar-width: none; padding-right: 250px;] &Main Content Area \ group&&Post Content \ content&&end& [/div] [/div] [/div] [div=display: block; /* leaves */ position: absolute; z-index: 2; top: 18%; left: 0px; width: clamp(200px,55%,600px); pointer-events: none; aspect-ratio: 1000/755; background: var(--leavesIMG) center center/cover;] [div=display: none;]leaves[/div] [/div] [div=display: flex; /* info container */ flex-flow: row wrap; align-items: center; position: absolute; z-index: 3; aspect-ratio: 1000/755; width: clamp(200px,55%,600px); top: 18%; left: 0px; overflow: hidden; box-sizing: border-box; pointer-events: none;] [div=display: block; position: relative; width: 100%; max-height: 100%; box-sizing: border-box; font-size: 1.25rem; font-family: var(--tagsfont); color: var(--tagcolor); overflow-x: hidden; overflow-y: scroll; scrollbar-width: none; line-height: .95;] [div=display: flex; align-content: center; justify-content: flex-end; flex-flow: row wrap; gap: .55em; padding: .75rem; width: 100%; box-sizing: border-box;] &Tape Tag \ group \ repeat&[div=transform: rotate(&Tape Angle (accepts decimal) \ number \ 0 \ -6 \ 6°); /* insert random number */ transform-origin: center center; flex: 0 auto; box-sizing: border-box; padding: .7em 1em .4em 1em; background: var(--tagbgcolor) var(--tagsIMG); background-blend-mode: multiply; box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.65); pointer-events: auto;] &Info \ text \ info& [/div]&end& [div=display: none;]insert copy paste info section before this div[/div] [/div] [/div] [/div] [/div] [/nobr]
Generate Form Fields
Debug Mode
[ "[nobr]\r\n [div=display: none;]\r\n [font=Special Elite]@fluticasone[/font]\r\n [font=Inter V]@fluticasone[/font]\r\n [/div]\r\n [div=display: block; /* root container */\r\n ", { "type": "group", "description": "Variables", "markerStart": { "type": "group", "description": "Variables", "original": "&Variables \\ group&", "repeat": false, "indices": [ 173, 191 ] }, "repeat": false, "originalChildren": [ "--conbgcolor: ", { "type": "text", "description": "Main Container BG Color", "marker": { "type": "text", "description": "Main Container BG Color", "defaultValue": "#292929", "original": "&Main Container BG Color \\ text \\ #292929&", "indices": [ 206, 247 ] }, "value": "#292929" }, "; /* bg color of main container */\r\n --maincolor: ", { "type": "text", "description": "Main or Theme Color", "marker": { "type": "text", "description": "Main or Theme Color", "defaultValue": "#b9689d", "original": "&Main or Theme Color \\ text \\ #b9689d&", "indices": [ 299, 336 ] }, "value": "#b9689d" }, "; /* color of img, paper, name */\r\n --framecolor: ", { "type": "text", "description": "Frame Color", "marker": { "type": "text", "description": "Frame Color", "defaultValue": "#e5e1b6", "original": "&Frame Color \\ text \\ #e5e1b6&", "indices": [ 388, 417 ] }, "value": "#e5e1b6" }, "; /* color of frame */\r\n --bodycolor: ", { "type": "text", "description": "Body Text Color", "marker": { "type": "text", "description": "Body Text Color", "defaultValue": "#313131", "original": "&Body Text Color \\ text \\#313131&", "indices": [ 457, 489 ] }, "value": "#313131" }, "; /* body text color */\r\n --tagcolor: ", { "type": "text", "description": "Tape Text Color", "marker": { "type": "text", "description": "Tape Text Color", "defaultValue": "#424242", "original": "&Tape Text Color \\ text \\ #424242&", "indices": [ 529, 562 ] }, "value": "#424242" }, "; /* tag text color */\r\n --tagbgcolor: ", { "type": "text", "description": "Tape Color", "marker": { "type": "text", "description": "Tape Color", "defaultValue": "#ebe4d2", "original": "&Tape Color \\ text \\ #ebe4d2&", "indices": [ 603, 631 ] }, "value": "#ebe4d2" }, "; /* tag bg color */\r\n --namefont: 'Times New Roman', serif;\r\n --tagsfont: 'Special Elite', serif;\r\n --bodyfont: 'Inter V', sans-serif;\r\n --mainIMG: url(", { "type": "text", "description": "Character Image URL", "marker": { "type": "text", "description": "Character Image URL", "defaultValue": "", "original": "&Character Image URL \\ text&", "indices": [ 789, 816 ] } }, "); /* image inside frame */\r\n --bgIMG: var(--mainIMG); /* bg IMG of main container */" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 903, 907 ] } }, "\r\n position: relative;\r\n width: clamp(300px,100%,675px);\r\n margin: auto;\r\n --frameIMG: url(https://i.imgur.com/iI46CPk.png);\r\n --leavesIMG: url(https://i.imgur.com/7WiqsjX.png);\r\n --bodyIMG: url(https://i.imgur.com/2GusAkO.jpeg);\r\n --tagsIMG: url(https://i.imgur.com/Ff0gbZi.jpeg);]\r\n [div=display: block; /* main container */\r\n position: relative;\r\n margin-left: 3.85%;\r\n z-index: 1;\r\n width: 96.15%;\r\n background: var(--conbgcolor);\r\n padding-top: 2rem;\r\n container-type: inline-size;\r\n overflow: hidden;]\r\n [div=position: absolute; /* name */\r\n right: 0px;\r\n top: 0px;\r\n z-index: 1;\r\n writing-mode: vertical-rl;\r\n transform: rotate(180deg);\r\n transform-origin: center center;\r\n font-family: var(--namefont);\r\n font-size: 48cqw;\r\n line-height: .75;\r\n letter-spacing: -.07em;\r\n font-weight: bold;\r\n font-style: italic;\r\n color: var(--maincolor);\r\n padding-bottom: .07em;\r\n mix-blend-mode: difference;]\r\n ", { "type": "group", "description": "Sideways Text", "markerStart": { "type": "group", "description": "Sideways Text", "original": "&Sideways Text \\ group&", "repeat": false, "indices": [ 1934, 1956 ] }, "repeat": false, "originalChildren": [ "", { "type": "text", "description": "Character Role or Name", "marker": { "type": "text", "description": "Character Role or Name", "defaultValue": "name", "original": "&Character Role or Name \\ text \\ name&", "indices": [ 1957, 1994 ] }, "value": "name" }, "\r\n [/div]\r\n [div=position: absolute; /* name stroke */\r\n right: 0px;\r\n top: 0px;\r\n z-index: 1;\r\n writing-mode: vertical-rl;\r\n transform: rotate(180deg);\r\n transform-origin: center center;\r\n font-family: var(--namefont);\r\n font-size: 48cqw;\r\n line-height: .75;\r\n letter-spacing: -.07em;\r\n font-weight: bold;\r\n font-style: italic;\r\n padding-bottom: calc(.07em + 3px);\r\n color: rgba(255, 255, 255, 0);\r\n text-stroke: 2px var(--conbgcolor);\r\n -webkit-text-stroke: 1px var(--conbgcolor);]\r\n ", { "type": "text", "description": "Repeat Above", "marker": { "type": "text", "description": "Repeat Above", "defaultValue": "name", "original": "&Repeat Above \\ text \\ name&", "indices": [ 2578, 2605 ] }, "value": "name" }, "" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 2606, 2610 ] } }, "\r\n [/div]\r\n [div=position: absolute; /* body text bg */\r\n width: clamp(275px,75%,500px);\r\n left: 0%;\r\n height: 75%;\r\n bottom: 0px;\r\n background: var(--maincolor) var(--bodyIMG) center center/cover;\r\n background-blend-mode: multiply;\r\n z-index: 2;]\r\n [div=display: none;]body text bg[/div]\r\n [/div]\r\n [div=position: absolute; /* main container bg */\r\n top: 0px;\r\n left: 0px;\r\n width: 100%;\r\n height: 100%;\r\n background: var(--bgIMG) no-repeat center center/150% auto;\r\n filter: saturate(0%) contrast(50%) brightness(150%);\r\n mix-blend-mode: multiply;\r\n opacity: .5;]\r\n [div=display: none;]???[/div]\r\n [/div]\r\n [div=display: block; /* frame container */\r\n width: clamp(200px,55%,450px);\r\n aspect-ratio: 800/923;\r\n position: relative;\r\n margin: auto;\r\n margin-right: 13cqw;\r\n z-index: 4;]\r\n [div=position: absolute;\r\n background: var(--maincolor);\r\n width: 100%;\r\n left: 0px;\r\n height: 100%;\r\n top: 0px;\r\n font-size: 0px;\r\n border-radius: 50%;\r\n overflow: hidden;]\r\n [div=display: block;\r\n height: 100%;\r\n width: 100%;\r\n background: var(--mainIMG) no-repeat scroll 60% 10%/190% auto;\r\n filter: saturate(0%) contrast(75%) brightness(140%);\r\n mix-blend-mode: multiply;]\r\n [/div]\r\n [/div]\r\n [div=position: absolute;\r\n font-size: 0px;\r\n width: 100%;\r\n height: 100%;\r\n left: 0px;\r\n top: 0px;\r\n background: var(--framecolor) var(--frameIMG) no-repeat scroll 0 0/cover;\r\n background-blend-mode: multiply;\r\n -webkit-mask: var(--frameIMG) 0 0/cover;\r\n mask: var(--frameIMG) 0 0/cover;]\r\n frame\r\n [/div]\r\n [/div]\r\n [div=display: flex; /* user tags container */\r\n flex-flow: row wrap;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n gap: 2px;\r\n width: clamp(275px,75%,500px);\r\n box-sizing: border-box;\r\n padding: 0px clamp(2.5rem,8%,100px);\r\n position: relative;\r\n top: -1rem;\r\n z-index: 3;\r\n font-size: 0px;\r\n mix-blend-mode: multiply;]\r\n ", { "type": "group", "description": "User Tag", "markerStart": { "type": "group", "description": "User Tag", "original": "&User Tag \\ group \\ repeat&", "repeat": true, "indices": [ 4894, 4920 ] }, "repeat": true, "originalChildren": [ "[div=flex: 0 auto;\r\n filter: saturate(0%) brightness(80%);]\r\n @", { "type": "text", "description": "Username w/o @", "marker": { "type": "text", "description": "Username w/o @", "defaultValue": "fluticasone", "original": "&Username w/o @ \\ text \\ fluticasone&", "indices": [ 5000, 5036 ] }, "value": "fluticasone" }, "\r\n [/div]" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 5053, 5057 ] } }, "\r\n [/div]\r\n [div=display: block; /* text container */\r\n width: clamp(275px,75%,500px);\r\n height: calc(500px - 3cqw);\r\n overflow: hidden;\r\n padding: 0px clamp(2rem,5%,100px);\r\n color: var(--bodycolor);\r\n margin-bottom: 4rem;\r\n position: relative;\r\n z-index: 3;\r\n box-sizing: border-box;\r\n font-family: var(--bodyfont);\r\n line-height: 1.25;\r\n font-size: .9rem;\r\n text-align: justify;]\r\n [div=display: block;\r\n height: 100%;\r\n box-sizing: border-box;\r\n width: calc(100% + 250px);\r\n overflow-x: hidden;\r\n overflow-y: scroll;\r\n scrollbar-gutter: both;\r\n scrollbar-width: none;\r\n padding-right: 250px;]\r\n ", { "type": "group", "description": "Main Content Area", "markerStart": { "type": "group", "description": "Main Content Area", "original": "&Main Content Area \\ group&", "repeat": false, "indices": [ 5804, 5830 ] }, "repeat": false, "originalChildren": [ "", { "type": "content", "description": "Post Content", "marker": { "type": "content", "description": "Post Content", "original": "&Post Content \\ content&", "indices": [ 5831, 5854 ] } }, "" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 5855, 5859 ] } }, "\r\n [/div]\r\n [/div]\r\n [/div]\r\n [div=display: block; /* leaves */\r\n position: absolute;\r\n z-index: 2;\r\n top: 18%;\r\n left: 0px;\r\n width: clamp(200px,55%,600px);\r\n pointer-events: none;\r\n aspect-ratio: 1000/755;\r\n background: var(--leavesIMG) center center/cover;]\r\n [div=display: none;]leaves[/div]\r\n [/div]\r\n [div=display: flex; /* info container */\r\n flex-flow: row wrap;\r\n align-items: center;\r\n position: absolute;\r\n z-index: 3;\r\n aspect-ratio: 1000/755;\r\n width: clamp(200px,55%,600px);\r\n top: 18%;\r\n left: 0px;\r\n overflow: hidden;\r\n box-sizing: border-box;\r\n pointer-events: none;]\r\n [div=display: block;\r\n position: relative;\r\n width: 100%;\r\n max-height: 100%; \r\n box-sizing: border-box;\r\n font-size: 1.25rem;\r\n font-family: var(--tagsfont);\r\n color: var(--tagcolor);\r\n overflow-x: hidden;\r\n overflow-y: scroll;\r\n scrollbar-width: none;\r\n line-height: .95;]\r\n [div=display: flex;\r\n align-content: center;\r\n justify-content: flex-end;\r\n flex-flow: row wrap;\r\n gap: .55em;\r\n padding: .75rem;\r\n width: 100%;\r\n box-sizing: border-box;]\r\n ", { "type": "group", "description": "Tape Tag", "markerStart": { "type": "group", "description": "Tape Tag", "original": "&Tape Tag \\ group \\ repeat&", "repeat": true, "indices": [ 7109, 7135 ] }, "repeat": true, "originalChildren": [ "[div=transform: rotate(", { "type": "number", "description": "Tape Angle (accepts decimal)", "marker": { "type": "number", "description": "Tape Angle (accepts decimal)", "defaultValue": 0, "min": -6, "max": 6, "original": "&Tape Angle (accepts decimal) \\ number \\ 0 \\ -6 \\ 6&", "indices": [ 7159, 7210 ] } }, "deg); /* insert random number */\r\n transform-origin: center center;\r\n flex: 0 auto;\r\n box-sizing: border-box;\r\n padding: .7em 1em .4em 1em;\r\n background: var(--tagbgcolor) var(--tagsIMG);\r\n background-blend-mode: multiply;\r\n box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.65);\r\n pointer-events: auto;]\r\n ", { "type": "text", "description": "Info", "marker": { "type": "text", "description": "Info", "defaultValue": "info", "original": "&Info \\ text \\ info&", "indices": [ 7591, 7610 ] }, "value": "info" }, "\r\n [/div]" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 7629, 7633 ] } }, "\r\n [div=display: none;]insert copy paste info section before this div[/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n[/nobr]" ]
[]
roc.template 1.0
By glucoseguardian
Variables
Main Container BG Color
Main or Theme Color
Frame Color
Body Text Color
Tape Text Color
Tape Color
Character Image URL
Sideways Text
Character Role or Name
Repeat Above
User Tag
Duplicate
Username w/o @
Main Content Area
Post Content
Tape Tag
Duplicate
Tape Angle (accepts decimal)
Minimum: -6 Maximum: 6
Info
Generate Final Output
Output
roc.template 1.0 - Text Templater