1. Open User CP → Edit Profile → Profile Styling.

2. Paste the Beginner Stylesheet from the next section.

3. Change the seven --my- colors and add one HTTPS background image URL.

4. Click Preview Styling. Preview does not save the changes.

5. If you like it, save. Everything else in this guide is optional.

GOOD TO KNOW The styling sandbox ignores unsafe or protected rules instead of letting them damage the site. When it removes something, Preview gives you a private warning explaining what happened.

You do not need to understand every line below. For a simple coordinated skin, change the seven colors near the top and your background image URL.

/* =========================================================
  SHADOW OF THE SHATTERED
  BEGINNER PROFILE STYLESHEET
  Change the colors below and add a background image.
  Leave the .profile- names alone.
========================================================= */
.profile-page {
  --my-darkest: #080B0D;
  --my-card: #11171B;
  --my-box: #182126;
  --my-text: #E5E0D8;
  --my-text-soft: #B9B5AE;
  --my-accent: #A37C54;
  --my-accent-bright: #C9A16A;
  background-color: var(--my-darkest);
  background-image:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.65)),
    url("YOUR-HTTPS-IMAGE-URL-HERE");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.profile-shell {
  background: transparent;
  border-color: var(--my-accent);
}
.profile-card {
  background: linear-gradient(145deg, var(--my-card), var(--my-darkest));
  border: 1px solid var(--my-accent);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.profile-pill,
.profile-vital,
.profile-stat,
.profile-tier-card,
.profile-mini-card,
.profile-history-family {
  background: var(--my-box);
  border: 1px solid var(--my-accent);
  border-radius: 7px;
}
.profile-section-title {
  color: var(--my-accent-bright);
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.profile-copy,
.profile-tier-body,
.profile-mini-body,
.profile-history-body,
.profile-vital-value,
.profile-stat-value,
.profile-pill-value {
  color: var(--my-text);
}
.profile-vital-label,
.profile-stat-label,
.profile-pill-label,
.profile-tier-title,
.profile-mini-title,
.profile-history-title {
  color: var(--my-text-soft);
}
.profile-tab {
  background-color: var(--my-darkest);
  color: var(--my-text-soft);
  border-color: var(--my-accent);
  border-radius: 7px;
}
.profile-tab:hover,
.profile-tab.is-active {
  background-color: var(--my-card);
  color: var(--my-accent-bright);
  border-color: var(--my-accent-bright);
}
.profile-name { color: var(--my-text); }
.profile-lastname { color: var(--my-accent-bright); }
.profile-banner-title { color: var(--my-text); }
.profile-banner-subtitle,
.profile-banner-link { color: var(--my-accent-bright); }

/* Purple accent */
--my-accent: #8C5FA8;
/* Square corners */
border-radius: 0px;
/* Very rounded corners */
border-radius: 20px;

A class is a label you give an HTML element so your stylesheet knows which thing you want to decorate.

<div class="my-box">
  Hello! This is my custom box.
</div>

In CSS, put a period before the class name:

.my-box {
  background: #101820;
  color: #E5E0D8;
  border: 1px solid #A37C54;
  padding: 15px;
}

EASY MEMORY TRICK HTML gets the name: class="my-box". CSS gets the dot: .my-box.

Most containers open with <div> and close with </div>. If a layout suddenly starts eating everything below it, check whether a closing tag wandered off into the woods.

<div class="my-box">
  My content goes here.
</div>

<div class="item rare-item">

That element can now be styled by both .item and .rare-item.

Use a direct HTTPS image URL. A direct image address usually ends in .png, .jpg, .jpeg, .gif, or .webp.

<img class="my-profile-image"
    src="https://example.com/my-image.png"
    alt="Dark forest under moonlight">

Give the image a class if you want to style it:

.my-profile-image {
  width: 100%;
  max-width: 300px;
  border: 1px solid #A37C54;
  border-radius: 8px;
}

HTML does not treat blank lines like a normal document editor. For the simplest paragraph spacing, use <br><br> between paragraphs.

This is my first paragraph.<br><br>
This is my second paragraph.<br><br>
And this is my third paragraph.

ONE VS TWO One <br> makes a line break. Two <br><br> make a visible paragraph break.

Most custom layouts are simply containers nested inside other containers. Indentation is optional, but it makes the structure much easier to read.

<div class="item-card">
  <div class="item-title">Resurrection Pass</div>
  <div class="item-description">
    Brings one character back from the dead.
  </div>
</div>

.item-card {
  background: #101820;
  border: 1px solid #A37C54;
  padding: 15px;
}
.item-title {
  color: #C9A16A;
  font-size: 20px;
}
.item-description {
  color: #E5E0D8;
}

Google Fonts are allowed. Put the Google Fonts @import line at the very top of your Profile Styling field, before normal CSS rules.

@import url("https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap");
.profile-banner-title {
  font-family: "Caesar Dressing", serif;
  font-style: normal;
}

IMPORTANT The font import belongs at the top of the stylesheet. Then add font-family only to the elements where you want that font.

Classes you create inside HTML-enabled profile fields have much more visual freedom than protected site pieces. This is where you can build inventories, quote boxes, relationship cards, playlists, mini galleries, decorative tables, and other personal content.

<div class="my-relic-card">
  <div class="my-relic-title">Strange Little Object</div>
  <div class="my-relic-text">
    A description goes here.<br><br>
    And another paragraph can go here.
  </div>
</div>

.my-relic-card {
  background: linear-gradient(145deg,#11171B,#080B0D);
  border: 1px solid #A37C54;
  padding: 16px;
  border-radius: 8px;
}
.my-relic-title {
  color: #C9A16A;
  font-size: 22px;
}
.my-relic-text {
  color: #E5E0D8;
  line-height: 1.6;
}

WHERE HTML IS ALLOWED Use custom HTML only in profile fields specifically marked as HTML-enabled. Inventory and Tracker stay plain and protected for easy review.

Once the basics feel comfortable, you can combine backgrounds, borders, shadows, filters, and shapes for more elaborate designs.

.my-card {
  background: linear-gradient(145deg,#171E23,#080B0D);
  border: 1px solid #A37C54;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  border-radius: 12px;
}

.my-cut-card {
  clip-path: polygon(
    18px 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    18px 100%,
    0 calc(100% - 18px),
    0 18px
  );
}

::before and ::after can add decorative symbols without adding extra HTML.

.my-heading::before {
  content: "◆";
  margin-right: 8px;
  color: #A37C54;
}

.my-list li::marker {
  content: "◆  ";
  color: #A37C54;
}

PROTECTED PANELS Protected Overview cards can be visually reskinned, including decorative imagery and approved shaped borders, but their structure and required information cannot be moved or hidden.

.my-card {
  transition: transform .3s ease, border-color .3s ease;
}
.my-card:hover {
  transform: translateY(-2px);
  border-color: #C9A16A;
}

Animations can be used on your custom content. Keep them slow enough to avoid rapid flashing or distracting movement.

@keyframes softPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
.my-symbol {
  animation: softPulse 3s ease-in-out infinite;
}

Variables are reusable values. Your own variables are welcome. Reserved --sos-* variables are protected.

.profile-page {
  --my-gold: #A37C54;
  --my-bone: #E5E0D8;
}
.my-card {
  border-color: var(--my-gold);
  color: var(--my-bone);
}

NO PAGE TAKEOVERS Full-screen overlays, fixed-position page takeovers, arbitrary z-index escalation, and modal-style profile content are blocked.

The built-in HTML <details> element makes an easy open/close section without JavaScript.

<details>
  <summary>Open me</summary>
  Hidden content goes here.<br><br>
  No JavaScript needed.
</details>

<span class="my-tooltip" tabindex="0">
  Hover or focus me
</span>

.my-tooltip {
  position: relative;
  display: inline-block;
}
.my-tooltip::after {
  content: "Tiny helpful message";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  opacity: 0;
  padding: 6px 9px;
  background: #080B0D;
  color: #E5E0D8;
  border: 1px solid #A37C54;
  pointer-events: none;
}
.my-tooltip:hover::after,
.my-tooltip:focus-visible::after {
  opacity: 1;
}

.my-scroll-box {
  max-height: 220px;
  overflow-y: auto;
  padding: 12px;
}
.my-scroll-box .my-sticky-title {
  position: sticky;
  top: 0;
  background: #080B0D;
}

STICKY RULE position: sticky is allowed inside member-created internal scroll areas. It is not a tool for pinning profile content over the rest of the site.

If you style links, buttons, tabs, or other interactive pieces, keep a visible keyboard focus state.

.my-link:focus-visible {
  outline: 2px solid #C9A16A;
  outline-offset: 3px;
}

.profile-selection {
  background: #A37C54;
  color: #080B0D;
}

The profile styling system respects reduced-motion preferences. Even so, subtle motion is usually easier to read and kinder to visitors than constant large movement.

CONTRAST Protected SoS content has contrast safeguards. If you put protected text over an approved light image treatment, the skin can automatically switch protected text toward a darker readable palette.

◆ You may reskin your own profile, but you may not move, hide, or replace required SoS information.

◆ Inventory and Tracker content are locked. Their tab buttons may be styled.

◆ The site navbar is color-only. Its layout, typography, dimensions, and position stay protected.

◆ The floating banner title, subtitle, and reveal links may use custom typography and colors, but their wording and placement stay protected.

◆ You cannot override reserved --sos-* variables.

◆ Unsafe URLs, j‌avascript: URLs, data: URLs, and non-HTTPS profile background images are blocked.

◆ Cursor styling, scripts, JavaScript, tracking, redirects, full-screen takeovers, and fake system/staff UI are not allowed.

◆ Custom HTML belongs only in fields marked HTML-enabled. Inventory and Tracker remain plain.

PREVIEW FIRST Use Preview Styling before saving. If the sanitizer removes something, the private warning box tells you which selector or property was rejected and why.

My CSS does nothing. Check the class name. HTML uses class="my-box" while CSS uses .my-box.

My layout swallowed everything below it. Look for a missing closing </div>.

My image will not appear. Use a direct HTTPS image URL, not the webpage that contains the image.

My Google Font will not load. Make sure its @import line is at the very top of the Profile Styling field.

Inventory or Tracker will not reskin. That is intentional. Their content is protected.

A rule disappeared in Preview. Read the private sanitizer warning. The property may be unsafe only for that protected selector, not everywhere.

My custom tooltip is clipped. Check whether your own custom parent is using overflow:hidden, clip-path, or a mask. Protected shaped cards are handled specially, but your own custom boxes can still clip their children.

I broke my profile badly. Clear the Profile Styling field and save. Staff also have a recovery control if necessary.

These are the friendly member-facing aliases used to style existing SoS profile pieces. You do not need to know the site’s internal .sos-* classes.

CUSTOM CLASSES You can invent your own class names for HTML-enabled fields. They do not need to begin with .profile-. Names such as .relationship-card, .song-box, or .weird-little-object are fine.