NOTE: The spacing for the menu on this sheet will look off if you're using Brutalist Dark Theme. I've tried to minimise the damage on that front by altering some sizes, but there's something about the way that theme parses tabs and font size that makes this problem pretty much unavoidable. Sorry! [break][break] ALSO: if you're using this template multiple times in the same thread, change the "Alchemy" part of the class names to something different each post, otherwise it will break. [break][break]
[nospaces][googlefont=Noto Sans Symbols] [newclass=.AlchemyVariables]/*THESE ARE THE VALUES YOU CAN CHANGE! (do not remove the slashes and asterisks)
NOTE: I'd recommend sticking to portrait-oriented images, since they're less likely to be cut off. If the image is being cut off, then go to the AlchemyImage class and add/change the background positioning there. Check the div guide for how to do that, the link is in my (Reyn's) signature.
[newclass=.AlchemyContentBodyQuote]font-size:15px;font-style:italic;text-align:center;padding:15px;[/newclass] [newclass=.AlchemyContentBodySymbol]font-size:23px;font-family:Noto Sans Symbols;text-align:center;font-style:normal;[/newclass]
[newclass=.AlchemyContentBodyGrid]display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:'LEFT CENTRE RIGHT';[/newclass] [newclass=.AlchemyContentBodyGridLeft]grid-area:LEFT;padding-right:7.5px[/newclass] [newclass=.AlchemyContentBodyGridCentre]grid-area:CENTRE;padding-left:7.5px;padding-right:7.5px[/newclass] [newclass=.AlchemyContentBodyGridRight]grid-area:RIGHT;padding-left:7.5px[/newclass] [newclass=.AlchemyContentBodyGridHeader]background-color:var(--backgroundtwo);padding:5px;font-size:15px;[/newclass] [newclass=.AlchemyContentBodyGridPadding]height:15px;width:100%[/newclass]
[attr="class",AlchemyVariables]
[attr="class",AlchemyWrap]
[attr="class",AlchemySide]
[attr="class",AlchemySideTitle]โ Character Title
[attr="class",AlchemySidePadding]
[attr="class",AlchemySideLine]
[attr="class",AlchemySideSymbol]โฅ
[attr="class",AlchemyMain]
[attr="class",AlchemyMainGrid]
[attr="class",AlchemyMenu]
[attr="class",AlchemyImageHeight]
[attr="class",AlchemyImagePadding]
[attr="class",AlchemyImage]
[attr="class",AlchemyMenuPadding]
[PTabbedContent] [PTab=
โ ๐โ MENU ITEM ONE
]
[attr="class",AlchemyMenuContent]
[attr="class",AlchemyMenuContentPadding]
[attr="class",AlchemyContentTitle]Title One
[attr="class",AlchemyContentTitleGap]
[attr="class",AlchemyContentBody]
[attr="class",AlchemyContentBodyQuote]"Welcome to the Alchemy template! You can add character quotes in these parts. Copy this cluster to add MORE QUOTES!"
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodySymbol]๐
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyGrid]
[attr="class",AlchemyContentBodyGridLeft]
[attr="class",AlchemyContentBodyGridHeader]๐ธ NAME
[attr="class",AlchemyContentBodyGridPadding]
- Name goes here.
[attr="class",AlchemyContentBodyGridCentre]
[attr="class",AlchemyContentBodyGridHeader]๐ธ AGE
[attr="class",AlchemyContentBodyGridHeader]๐ธ ALSO
[attr="class",AlchemyContentBodyGridPadding]
- Or add another row...
[break][break]
[attr="class",AlchemyContentBodyFontSize] All the colour variables are available to edit near the top of the code, so put the colours, font, and image that you want up there, and it'll apply to the rest of the sheet. Many classes share the same colour, so changing that colour will change everything that uses it. [break][break] If you want a line break, you'll have to put (break)(break) in (with square brackets). Tabs don't show up in code blocks, so just quote this post to get the code. [break][break] If you have any questions, ask me (Reyn) on discord, or send me a PM here. Please don't remove the credit line at the bottom, though. Have fun!
[attr="class",AlchemyContentBodyQuote]"This item and the next are good for long prose sections, like background and personality. You can copy the format from other sections in here if you want, though."
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodySymbol]๐
[attr="class",AlchemyContentBodyFontSize] The symbols used in this sheet are alchemical symbols used in the Noto Sans Symbols font on google fonts. You can change them to whatever you want. [break][break] Nunc placerat, nibh at sodales accumsan, tortor dolor feugiat tortor, non pharetra enim metus ac nisl. Integer mattis purus quis leo hendrerit, in faucibus sem facilisis. Morbi in sapien vitae odio blandit lobortis. Proin vel tincidunt felis. Vestibulum aliquet nisl dolor, eu hendrerit odio facilisis ac. Ut eget elementum tellus. Vestibulum mauris est, mollis rhoncus ante id, porttitor volutpat nibh. Quisque ipsum lectus, laoreet ut nisl sit amet, suscipit hendrerit elit. Suspendisse sed leo leo. Nam nec venenatis augue. Suspendisse potenti. Suspendisse gravida elit ac ligula ultrices auctor. Phasellus a lorem vel erat sodales sodales et id augue. Fusce tincidunt sagittis mi. [break][break] Aliquam nec euismod tortor, sit amet convallis enim. Donec gravida justo nec tellus commodo congue. Proin sed libero libero. Proin suscipit nulla laoreet elit ultricies feugiat. Etiam ut semper felis. Nam congue viverra laoreet. Phasellus blandit tortor rhoncus, finibus sem quis, vestibulum odio. Fusce eget ipsum sit amet enim auctor porta sit amet et nulla. Praesent at tellus sit amet ex eleifend tristique. Cras efficitur, arcu in lacinia lobortis, turpis velit convallis odio, eget venenatis turpis sapien non ex. Mauris auctor tellus eros, euismod sagittis ligula molestie id. Nulla pharetra, neque sit amet molestie consectetur, velit nisl aliquam ex, id ultricies tortor purus consequat ante. Aliquam quis ullamcorper tellus, id efficitur justo. Fusce non arcu laoreet, aliquam nunc dapibus, tempus nisi.
[attr="class",AlchemyContentBodyQuote]"This is the other long section. Wahoo!"
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodySymbol]๐
[attr="class",AlchemyContentBodyFontSize]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin purus et risus ultricies molestie. Etiam in nulla urna. Aenean at varius orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce euismod a erat sit amet tristique. Aliquam et iaculis dolor. Maecenas venenatis lorem in nunc feugiat cursus. [break][break] Nunc placerat, nibh at sodales accumsan, tortor dolor feugiat tortor, non pharetra enim metus ac nisl. Integer mattis purus quis leo hendrerit, in faucibus sem facilisis. Morbi in sapien vitae odio blandit lobortis. Proin vel tincidunt felis. Vestibulum aliquet nisl dolor, eu hendrerit odio facilisis ac. Ut eget elementum tellus. Vestibulum mauris est, mollis rhoncus ante id, porttitor volutpat nibh. Quisque ipsum lectus, laoreet ut nisl sit amet, suscipit hendrerit elit. Suspendisse sed leo leo. Nam nec venenatis augue. Suspendisse potenti. Suspendisse gravida elit ac ligula ultrices auctor. Phasellus a lorem vel erat sodales sodales et id augue. Fusce tincidunt sagittis mi. [break][break] Aliquam nec euismod tortor, sit amet convallis enim. Donec gravida justo nec tellus commodo congue. Proin sed libero libero. Proin suscipit nulla laoreet elit ultricies feugiat. Etiam ut semper felis. Nam congue viverra laoreet.
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyQuote]"Whaaat? You can add quotes in between paragraphs? Yeah you can."
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodySymbol]๐
[attr="class",AlchemyContentBodyFontSize]Nunc placerat, nibh at sodales accumsan, tortor dolor feugiat tortor, non pharetra enim metus ac nisl. Integer mattis purus quis leo hendrerit, in faucibus sem facilisis. Morbi in sapien vitae odio blandit lobortis. Proin vel tincidunt felis. Vestibulum aliquet nisl dolor, eu hendrerit odio facilisis ac. Ut eget elementum tellus. Vestibulum mauris est, mollis rhoncus ante id, porttitor volutpat nibh. Quisque ipsum lectus, laoreet ut nisl sit amet, suscipit hendrerit elit. Suspendisse sed leo leo. Nam nec venenatis augue. Suspendisse potenti. Suspendisse gravida elit ac ligula ultrices auctor. Phasellus a lorem vel erat sodales sodales et id augue. Fusce tincidunt sagittis mi. [break][break] Aliquam nec euismod tortor, sit amet convallis enim. Donec gravida justo nec tellus commodo congue. Proin sed libero libero. Proin suscipit nulla laoreet elit ultricies feugiat. Etiam ut semper felis. Nam congue viverra laoreet. Phasellus blandit tortor rhoncus, finibus sem quis, vestibulum odio. Fusce eget ipsum sit amet enim auctor porta sit amet et nulla. Praesent at tellus sit amet ex eleifend tristique. Cras efficitur, arcu in lacinia lobortis, turpis velit convallis odio, eget venenatis turpis sapien non ex. Mauris auctor tellus eros, euismod sagittis ligula molestie id. Nulla pharetra, neque sit amet molestie consectetur, velit nisl aliquam ex, id ultricies tortor purus consequat ante. Aliquam quis ullamcorper tellus, id efficitur justo. Fusce non arcu laoreet, aliquam nunc dapibus, tempus nisi.
[attr="class",AlchemyContentBodyQuote]"This section and the following section are good for lists of things with long descriptions, like powers and equipment."
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodySymbol]๐
[attr="class",AlchemyContentBodyGridHeader]๐ธ Ability Name One
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyFontSize] You can put abilities and stuff here!
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyGridHeader]๐ธ Ability Name Two
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyFontSize] If you want to add another ability, copy this cluster and replace the text/title! There doesn't just have to be two...
[attr="class",AlchemyContentBodyQuote]"If you'd rather have another section that's formatted like one of the previous, copy and replace everything between AlchemyContentBody and the cluster of three /divs at the end of this section."
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodySymbol]๐
[attr="class",AlchemyContentBodyGridHeader]๐ธ Item Name One
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyFontSize] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin purus et risus ultricies molestie. Etiam in nulla urna. Aenean at varius orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce euismod a erat sit amet tristique. Aliquam et iaculis dolor. Maecenas venenatis lorem in nunc feugiat cursus. [break][break] Nunc placerat, nibh at sodales accumsan, tortor dolor feugiat tortor, non pharetra enim metus ac nisl. Integer mattis purus quis leo hendrerit, in faucibus sem facilisis. Morbi in sapien vitae odio blandit lobortis. Proin vel tincidunt felis.
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyGridHeader]๐ธ Item Name Two
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyFontSize] Aliquam nec euismod tortor, sit amet convallis enim. Donec gravida justo nec tellus commodo congue. Proin sed libero libero. Proin suscipit nulla laoreet elit ultricies feugiat. Etiam ut semper felis. Nam congue viverra laoreet. Phasellus blandit tortor rhoncus, finibus sem quis, vestibulum odio. Fusce eget ipsum sit amet enim auctor porta sit amet et nulla. Praesent at tellus sit amet ex eleifend tristique. Cras efficitur, arcu in lacinia lobortis, turpis velit convallis odio, eget venenatis turpis sapien non ex. Mauris auctor tellus eros, euismod sagittis ligula molestie id. Nulla pharetra, neque sit amet molestie consectetur, velit nisl aliquam ex, id ultricies tortor purus consequat ante. Aliquam quis ullamcorper tellus, id efficitur justo. Fusce non arcu laoreet, aliquam nunc dapibus, tempus nisi.
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyGridHeader]๐ธ Item Name Three
[attr="class",AlchemyContentBodyGridPadding]
[attr="class",AlchemyContentBodyFontSize] Aliquam nec euismod tortor, sit amet convallis enim. Donec gravida justo nec tellus commodo congue. Proin sed libero libero. Proin suscipit nulla laoreet elit ultricies feugiat. Etiam ut semper felis. Nam congue viverra laoreet. Phasellus blandit tortor rhoncus, finibus sem quis, vestibulum odio. Fusce eget ipsum sit amet enim auctor porta sit amet et nulla. Praesent at tellus sit amet ex eleifend tristique. Cras efficitur, arcu in lacinia lobortis, turpis velit convallis odio, eget venenatis turpis sapien non ex. Mauris auctor tellus eros, euismod sagittis ligula molestie id. Nulla pharetra, neque sit amet molestie consectetur, velit nisl aliquam ex, id ultricies tortor purus consequat ante. Aliquam quis ullamcorper tellus, id efficitur justo. Fusce non arcu laoreet, aliquam nunc dapibus, tempus nisi.
This is a special code I made to help people with dyslexia or other reading challenges. It's formatted inside a spoiler so that you can stick it at the bottom / top of any post you've coded in any other way. If you want to use it without spoilers, just remove the (spoiler), the part in {curly brackets} and the (/spoiler) at the end.
This code uses an easy-to-read background and text color combination, larger font size, a dyslexia-friendly font, and increased line height and letter spacing.
{Plain Text Version for Easy Reading - Click/Tap to View}
INSERT ANY TEXT HERE IN THIS BOX.
[spoiler]{Plain Text Version for Easy Reading - Click/Tap to View}[div style="padding:10px;font-size:14px;line-height:25px;letter-spacing:3px;background-color:#444444;color:white;font-family:'Open Sans';"]