Profiles V3

Turning it on

Flip Use the new profile layout on your preferences page. Your old profile isn't deleted. Turn the setting back off and it's exactly where you left it, custom CSS and all.

Only your own profile changes. Everyone else's stays on whichever version they picked.

The editor

Open your profile and click Edit profile. A bar appears at the bottom of the page and stays there while you work.

Add section

Opens the block gallery at the top of the page.

Drag handle ⠿

Grab it to move a block, including from one column to the other. The new order saves as soon as you let go.

Pencil

Opens that block's settings.

Style

Colors, background, cards, and font. Changes show on the page as you make them.

Advanced CSS

Write your own CSS for the whole page.

Minimal view

Drops the site navigation and sidebar from your profile, leaving a slim bar with a link back to Subeta.

Done editing

Back to the normal view. Anything you typed in the Style or Advanced CSS panels and didn't save gets saved on the way out.

Blocks

Blocks go in two columns: a wide one on the left and a 292px one on the right. Most blocks can be used once. Three can be added as many times as you like.

Block settings

Click the pencil on any block. Every block has a Title, which you can call whatever you want, so "Wishlist" can read "things I'm hunting". Every block also has a Header style: Filled, Pill, Underline, or Minimal. It's set per block, so they don't all have to match.

Most blocks have an Items shown slider. The rest depends on the block:

• About gives you a text box for your intro, up to 5,000 characters.
• Text block gives you the full editor, with BBCode and a preview.
• Wardrobe shows or hides the list of items you're wearing.
• Collections picks which collection this one shows.
• Wishlist picks all items or one of your public categories.
• Comments sets who can leave one: everyone, friends only, or nobody.

Your header

The header sits at the top and can't be moved or removed. The pencil on it does two things.

It picks which stats show. Pets, achievements, posts, member since, and the online dot can each be hidden.

It also pins your intro into the header. Turn that on and your About text fills the space beside your avatar instead of sitting in its own block further down, and the About block hides itself so the same text isn't printed twice.

Style options

The Style button covers the common changes without any CSS. Every control previews on the page as you move it, and Reset clears the lot and puts you back on your site theme.

Presets

Four starting points. Pick one and then change whatever you want.

• Clean sets nothing at all, so you get your site theme untouched.
• Pastel is a pink and cream gradient behind lightly frosted cards.
• Rainbow runs a five-color gradient behind cards you can see through.
• Dark is a near-black page with dark cards, a warm gold accent, and light text.

Accent color

One color, used by section headers, links, and borders. It sets --color-primary for your profile only, so it holds no matter which site theme your visitor is browsing in.

Page background

Solid or a two-color gradient, running diagonally, vertically, or horizontally. Light backgrounds fill the whole window. The dark preset stays inside the content area so it doesn't fight the site navigation.

Cards

The surface behind every block: your theme's color, white, one of two glass strengths, or dark. Pick a glass one with a background set and the cards blur what's behind them. Pick the dark one and the text flips light to stay readable.

Font

Site default, Georgia, Palatino, monospace, Impact, handwriting, or Comic Sans. It applies to everything inside your profile. For anything else, load a webfont in Advanced CSS.

Advanced CSS

The Advanced CSS button opens an editor whose rules apply to the whole page, the blocks included. Anyone who visits your profile sees it.

• Preview applies what you've typed without publishing it. Click it again to drop back to what's saved.
• Your CSS runs after the Style panel's settings, so it wins where the two disagree.
• Emptying the box and saving clears it.
• Your site-wide Custom CSS does not run here, and neither does a visitor's, so nobody can repaint your profile from their own settings.

What gets stripped

Saving runs your CSS through a filter. It removes:

• @import, except from fonts.googleapis.com.
• url() pointing at http://. Use https:// or a protocol-relative // and it goes through untouched.
• Anything with a < in it, plus javascript:, expression(), behavior, and -moz-binding.

Class reference

The page is nested like this. Every block is a .profile-section, whatever it holds.

#profile-v3                     your whole profile
  .profile-header               the top card
    .profile-avatar-frame       your avatar
    .profile-username           your name
    .profile-title-badge        your job title
    .profile-status             your status line
    .profile-stats              the row of stats
      .profile-stat             one stat
    .profile-header-bio         your pinned intro
  .profile-body                 the two columns
    .profile-col-left           wide column
    .profile-col-right          292px column
      .profile-section          one block
        .profile-section-header its title bar
          .section-title        the title text
        .profile-section-body   everything under the title

Targeting one block

Every block carries its type, so you can style all of one kind:

.profile-section[data-type="pets"] { /* your rules */ }

The types are profile, blank, pets, outfits, wardrobe, collections, wishlist, achievements, medals, garden, forum_topics, forum_posts, feed, friends, comments, and holiday.

Blocks also carry their own id, which is how you style one of your three wishlists differently from the other two. Right-click the block, pick Inspect, and read the number off data-blockid:

.profile-section[data-blockid="8412"] { /* your rules */ }

Inside the blocks

Variables

Setting a variable on #profile-v3 beats writing rules for every element that uses it.

Examples

All of these go in the Advanced CSS box. Hit Preview before you save.

Two even columns

The right column is 292px by default. Make them match:

#profile-v3 .profile-body {
  grid-template-columns: 1fr 1fr;
}

One column

Everything on the left stacks first, then everything on the right:

#profile-v3 .profile-body {
  grid-template-columns: 1fr;
}

Give one wishlist its own color

Two Wishlist blocks, two accents. Swap in your own block ids:

.profile-section[data-blockid="8412"] {
  --color-primary: oklch(62% 0.16 25);
}
.profile-section[data-blockid="8413"] {
  --color-primary: oklch(62% 0.14 250);
}

Square off the cards

#profile-v3 .profile-section,
#profile-v3 .profile-header {
  border-radius: 0;
}

A background image

Any image host works as long as the address starts with https://.

body {
  background: url("https://example.com/stars.png") repeat fixed;
}
#main-content {
  background: transparent;
}

A Google font

The @import has to be the first line in the box.

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap");

#profile-v3 {
  --profile-font: "Cormorant Garamond", serif;
}

Quiet the section headers

The Header style setting has four looks built in. If you want something else entirely:

#profile-v3 .profile-section-header {
  background: transparent;
  color: var(--color-base-content);
  border-bottom: 1px dashed var(--color-item-border);
  letter-spacing: 0.2em;
}

Stuck, or want something that isn't here?

Post in the Help forum for a hand with your CSS, or the Suggestions forum for a block or a setting you wish existed. We're reading both.