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=Titillium Web]@fluticasone[/font][/div] [div=display: flex; /* main container */ &Overall Variables \ group&--bgcolor: &Background Color \ text \ white&; --border: &Border Color \ text \ gainsboro&; --txtcolor: &Text Color \ text \ dimgray&; --iconcolor: &Button Color \ text \ darkgray&; --filter: &Filter \ select \ saturate(60%) brightness(60%) \ none&; --font: 'Titillium Web', sans-serif;&end& box-sizing: border-box; font-size: 1rem; font-family: var(--font); flex-flow: row wrap; align-items: center; justify-content: center; padding: 1rem 1rem calc(1rem + 20px) 1rem; container: main / inline-size; gap: calc(1rem + 20px) 1rem;] &Character \ group \ repeat& [div=flex: 1 0 300px; /* start of cs copy paste */ --bannerimg: url(&URL of Banner IMG \ text \ https://i.imgur.com/fgIGLkw.jpeg&); --iconimg: url(&URL of Character Icon \ text \ https://i.imgur.com/NrKzzAD.jpeg&); width: (300px,100%,450px); max-width: 450px; aspect-ratio: 3/4; box-sizing: border-box; background: var(--bgcolor); border: 1px solid var(--border); border-top: 10px solid var(--border); border-bottom: 5px solid var(--border); display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;] [div=flex: 1 0 60px; width: 100%; background: var(--bannerimg) center center/cover no-repeat; /* adjust as necessary */ filter: var(--filter);] [div=display: none;]banner area[/div] [/div] [div=flex: 0 0 auto; width: calc(100% - 2rem); color: var(--iconcolor); display: flex; flex-flow: row nowrap; justify-content: space-evenly; font-size: 1.25rem; align-items: flex-end; --paddingbtn: 1rem 1rem 1.5rem 1rem;] [div=flex: 0 0 auto; padding: var(--paddingbtn);] [fa]fa-phone[/fa] [/div] [div=flex: 0 0 auto; padding: var(--paddingbtn);] [fa]fa-envelope[/fa] [/div] [div=flex: 1 0 110px; background: green; max-width: 130px; position: relative;] [div=position: absolute; bottom: -5%; width: 100%; aspect-ratio: 1; box-sizing: border-box; border: 5px solid var(--bgcolor); border-radius: 50%; overflow: hidden; background: var(--iconimg) center center/cover no-repeat;] [div=display: none;]icon area[/div] [/div] [/div] [div=flex: 0 0 auto; padding: var(--paddingbtn);] [fa]fa-user[/fa] [/div] [div=flex: 0 0 auto; padding: var(--paddingbtn);] [fa]fa-star[/fa] [/div] [/div] [div=flex: 2 0 110px; width: 100%; overflow: hidden; position: relative;] [div=position: absolute; top: 1.5rem; left: 2rem; width: calc(100% - 4rem); height: calc(100% - 2rem); color: var(--txtcolor); font-size: .93rem; text-align: justify; overflow-x: hidden; overflow-y: scroll; scrollbar-width: none;] &Content Area \ content& [/div] [/div] [div=flex: 0 0 56px; width: calc(100% - 2.5rem); display: flex; flex-flow: row nowrap; justify-content: center; gap: 5px; pointer-events: none; font-size: 0px; line-height: 0px; position: relative; top: 28px;] &Pokemon \ group \ repeat&[div=flex: 0 0 56px; /* pokemon slot */ aspect-ratio: 1; box-sizing: border-box; background: var(--border); border-radius: 50%; display: flex; padding: 2.5px; flex-flow: row wrap; align-items: center; justify-content: center;] [img]&URL of Pokemon Sprite (small) \ text \ https://i.imgur.com/8XFn1qY.png&[/img] [/div] &end& [/div] [/div] &end& [/div] [/nobr]
Generate Form Fields
Debug Mode
[ "[nobr]\r\n [div=display: none;][font=Titillium Web]@fluticasone[/font][/div]\r\n [div=display: flex; /* main container */\r\n ", { "type": "group", "description": "Overall Variables", "markerStart": { "type": "group", "description": "Overall Variables", "original": "&Overall Variables \\ group&", "repeat": false, "indices": [ 123, 149 ] }, "repeat": false, "originalChildren": [ "--bgcolor: ", { "type": "text", "description": "Background Color", "marker": { "type": "text", "description": "Background Color", "defaultValue": "white", "original": "&Background Color \\ text \\ white&", "indices": [ 161, 193 ] }, "value": "white" }, ";\r\n --border: ", { "type": "text", "description": "Border Color", "marker": { "type": "text", "description": "Border Color", "defaultValue": "gainsboro", "original": "&Border Color \\ text \\ gainsboro&", "indices": [ 209, 241 ] }, "value": "gainsboro" }, ";\r\n --txtcolor: ", { "type": "text", "description": "Text Color", "marker": { "type": "text", "description": "Text Color", "defaultValue": "dimgray", "original": "&Text Color \\ text \\ dimgray&", "indices": [ 259, 287 ] }, "value": "dimgray" }, ";\r\n --iconcolor: ", { "type": "text", "description": "Button Color", "marker": { "type": "text", "description": "Button Color", "defaultValue": "darkgray", "original": "&Button Color \\ text \\ darkgray&", "indices": [ 306, 337 ] }, "value": "darkgray" }, ";\r\n --filter: ", { "type": "select", "description": "Filter", "marker": { "type": "select", "description": "Filter", "options": [ "saturate(60%) brightness(60%)", "none" ], "original": "&Filter \\ select \\ saturate(60%) brightness(60%) \\ none&", "indices": [ 353, 408 ] } }, "; \r\n --font: 'Titillium Web', sans-serif;" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 451, 455 ] } }, "\r\n box-sizing: border-box;\r\n font-size: 1rem;\r\n font-family: var(--font);\r\n flex-flow: row wrap;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem 1rem calc(1rem + 20px) 1rem;\r\n container: main / inline-size;\r\n gap: calc(1rem + 20px) 1rem;]\r\n ", { "type": "group", "description": "Character", "markerStart": { "type": "group", "description": "Character", "original": "&Character \\ group \\ repeat&", "repeat": true, "indices": [ 727, 754 ] }, "repeat": true, "originalChildren": [ "\r\n [div=flex: 1 0 300px; /* start of cs copy paste */\r\n --bannerimg: url(", { "type": "text", "description": "URL of Banner IMG", "marker": { "type": "text", "description": "URL of Banner IMG", "defaultValue": "https://i.imgur.com/fgIGLkw.jpeg", "original": "&URL of Banner IMG \\ text \\ https://i.imgur.com/fgIGLkw.jpeg&", "indices": [ 834, 894 ] }, "value": "https://i.imgur.com/fgIGLkw.jpeg" }, ");\r\n --iconimg: url(", { "type": "text", "description": "URL of Character Icon", "marker": { "type": "text", "description": "URL of Character Icon", "defaultValue": "https://i.imgur.com/NrKzzAD.jpeg", "original": "&URL of Character Icon \\ text \\ https://i.imgur.com/NrKzzAD.jpeg&", "indices": [ 918, 982 ] }, "value": "https://i.imgur.com/NrKzzAD.jpeg" }, ");\r\n width: (300px,100%,450px);\r\n max-width: 450px;\r\n aspect-ratio: 3/4;\r\n box-sizing: border-box;\r\n background: var(--bgcolor);\r\n border: 1px solid var(--border);\r\n border-top: 10px solid var(--border);\r\n border-bottom: 5px solid var(--border);\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n align-items: center;]\r\n [div=flex: 1 0 60px;\r\n width: 100%;\r\n background: var(--bannerimg) center center/cover no-repeat; /* adjust as necessary */\r\n filter: var(--filter);]\r\n [div=display: none;]banner area[/div]\r\n [/div]\r\n [div=flex: 0 0 auto;\r\n width: calc(100% - 2rem);\r\n color: var(--iconcolor);\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-evenly;\r\n font-size: 1.25rem;\r\n align-items: flex-end;\r\n --paddingbtn: 1rem 1rem 1.5rem 1rem;]\r\n [div=flex: 0 0 auto;\r\n padding: var(--paddingbtn);]\r\n [fa]fa-phone[/fa]\r\n [/div]\r\n [div=flex: 0 0 auto;\r\n padding: var(--paddingbtn);]\r\n [fa]fa-envelope[/fa]\r\n [/div]\r\n [div=flex: 1 0 110px;\r\n background: green;\r\n max-width: 130px;\r\n position: relative;]\r\n [div=position: absolute;\r\n bottom: -5%;\r\n width: 100%;\r\n aspect-ratio: 1;\r\n box-sizing: border-box;\r\n border: 5px solid var(--bgcolor);\r\n border-radius: 50%;\r\n overflow: hidden;\r\n background: var(--iconimg) center center/cover no-repeat;]\r\n [div=display: none;]icon area[/div]\r\n [/div]\r\n [/div]\r\n [div=flex: 0 0 auto;\r\n padding: var(--paddingbtn);]\r\n [fa]fa-user[/fa]\r\n [/div]\r\n [div=flex: 0 0 auto;\r\n padding: var(--paddingbtn);]\r\n [fa]fa-star[/fa]\r\n [/div]\r\n [/div]\r\n [div=flex: 2 0 110px;\r\n width: 100%;\r\n overflow: hidden;\r\n position: relative;]\r\n [div=position: absolute;\r\n top: 1.5rem;\r\n left: 2rem;\r\n width: calc(100% - 4rem);\r\n height: calc(100% - 2rem);\r\n color: var(--txtcolor);\r\n font-size: .93rem;\r\n text-align: justify;\r\n overflow-x: hidden;\r\n overflow-y: scroll;\r\n scrollbar-width: none;]\r\n ", { "type": "content", "description": "Content Area", "marker": { "type": "content", "description": "Content Area", "original": "&Content Area \\ content&", "indices": [ 3310, 3333 ] } }, "\r\n [/div]\r\n [/div]\r\n [div=flex: 0 0 56px;\r\n width: calc(100% - 2.5rem);\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: center;\r\n gap: 5px;\r\n pointer-events: none;\r\n font-size: 0px;\r\n line-height: 0px; \r\n position: relative;\r\n top: 28px;]\r\n ", { "type": "group", "description": "Pokemon", "markerStart": { "type": "group", "description": "Pokemon", "original": "&Pokemon \\ group \\ repeat&", "repeat": true, "indices": [ 3662, 3687 ] }, "repeat": true, "originalChildren": [ "[div=flex: 0 0 56px; /* pokemon slot */\r\n aspect-ratio: 1;\r\n box-sizing: border-box;\r\n background: var(--border);\r\n border-radius: 50%;\r\n display: flex;\r\n padding: 2.5px;\r\n flex-flow: row wrap;\r\n align-items: center;\r\n justify-content: center;]\r\n [img]", { "type": "text", "description": "URL of Pokemon Sprite (small)", "marker": { "type": "text", "description": "URL of Pokemon Sprite (small)", "defaultValue": "https://i.imgur.com/8XFn1qY.png", "original": "&URL of Pokemon Sprite (small) \\ text \\ https://i.imgur.com/8XFn1qY.png&", "indices": [ 4012, 4083 ] }, "value": "https://i.imgur.com/8XFn1qY.png" }, "[/img]\r\n [/div]\r\n " ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 4116, 4120 ] } }, "\r\n [/div]\r\n [/div]\r\n " ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 4153, 4157 ] } }, "\r\n [/div]\r\n[/nobr]" ]
[]
biri-biri.template 1.0
By glucoseguardian
Overall Variables
Background Color
Border Color
Text Color
Button Color
Filter
saturate(60%) brightness(60%)
none
Character
Duplicate
URL of Banner IMG
URL of Character Icon
Content Area
Pokemon
Duplicate
URL of Pokemon Sprite (small)
Generate Final Output
Output
biri-biri.template 1.0 - Text Templater