Moonlit Apothecary Template | Full Profile

Apothecary-inspired layout

• Grid-based profile: The page is built with CSS grid, so each main section has its own assigned placement. The layout includes the profile sign, banner/window, about note, bottled worlds, shopkeeper portrait, familiars, links, ledger/details, and credit section.
• Banner and portrait: The profile includes a wide apothecary-style banner/window section and a separate portrait/shopkeeper cabinet area. Both can be replaced with your own images.
• Bottled Worlds section: This section is made for showcasing your series. More can easily be added without stretching the section, or be taken out without losing its shape.
• Familiars section: This section is intended for favorite creators, mutuals, friends, or featured people. It uses small image cards with names underneath.
• Calling Cards section: This area is for important links such as Discord, Carrd, request forms, socials, or creator pages.
• Ledger section: The ledger/details boxes are dropdown-style sections for extra information, rules, credits, navigation notes, or profile details.

Customization Notes

• Most colors can be changed directly in the CSS through hex and rgba values.
• The layout is grid-based, so adding a new major section requires both HTML and CSS updates. New sections need their own class, their own grid-area, and that grid area must be added to the grid-template-areas.
• Image URLs can be replaced with your own links in their appropriate Div Sections! Avoid using url() as it is unavailable on the Site (This includes adding images in this formatting example (background-image: url("https://example.com/image.png"); ) or importing custom fonts.)
• The theme is open for recoloring, renaming sections, changing icons/symbols, replacing images, and adjusting spacing.
• Along with the code, you'll receive the used background image! The screenshots have it at 100% opacity, and 2% blur.

Application

• Do not place the code directly into the editor. That can cause the code to break or not function correctly.

Go to your Settings, paste the full code into the About Me section, then press Save Changes.

Credit

• Credit must remain visible on the page. You may move it if needed, but it must still be present somewhere on the profile.

Help

• If you need help setting it up, adjusting anything, recoloring the theme, changing sections, or adding a gallery, feel free to contact me on Discord: discord.com/users/1500481578814406696