Black Swan Theatre Template | Full Profile

Theatre-Inspired Layout

• Grid-based profile: The page is built with CSS grid, so each major section has its own assigned placement. The layout includes the theatre sign, stage portrait, production subtitle, side directory, program panels, correspondence desk, encore selections, and visible credit section.
• Stage portrait and theatre sign: The profile includes a central stage-style portrait area with a curtain effect, plus a theatre crest/sign above it. The portrait image can be replaced with your own image, and the theatre title/subtitle can be renamed in the Div section.
• Directory Tickets section: This section works as the main profile navigation. It includes the Casting Ledger, Backstage Index, and Encore Selections tickets in one simple side menu, letting visitors switch between your main profile information, extra details, and featured favorites (including bot favorites as well).
• Correspondence Desk section: This area is for important links such as Discord, Carrd, Ko-fi, request forms, socials, creator pages, or any outside pages you want visitors to find quickly.
• Stage Poster bot cards: The included card styling turns character cards into theatre poster-inspired cards, with a marquee frame, billing plaque, curtain hover effect, program notes, cast-credit tags, and admission-style stats.

Note to Keep in Mind

• Curtains covering the profile image will appear closed to the person using the CSS, but not to followers! Following opens the curtain, unfollowing closes them!

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 profile section requires both HTML and CSS updates. New sections need their own class, their own grid placement, and the grid structure must be adjusted to make room for them.
• Images can be replaced with your own links in their appropriate Div sections. Avoid using url() because it is unavailable on the site. This includes formatting such as: background-image: url("https://example.com/image.png");
• Do not import custom fonts, as imported fonts are also unavailable on the site.
• The theme is open for recoloring, renaming sections, changing icons/symbols, replacing images, adjusting spacing, and changing the theatre wording to fit your own profile style.
• The profile code includes editable text areas for the theatre name, subtitle, production billing, section labels, links, favorite performers, favorite performances, and profile notes.
• Along with the code, you may receive the used background image. Screenshots may show the background at 60% opacity with a 0% 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, or changing sections, feel free to contact me on Discord: discord.com/users/1500481578814406696