custom csspremium

custom css lets you restyle any part of your page with your own rules: the avatar, name, bio, links, widgets, the card. add animations, hover effects, fonts and phone-specific tweaks. it is a real stylesheet, so selectors, pseudo-elements, @media, @keyframes and !important all work, and it applies to your public page only.

custom css or css variables

they work together. css variables set the colors and sizes, and your rules can read them with var(--p-accent). if you only want a different color or a softer card, variables are simpler.

writing it

1. 1open appearance, extras and find the custom css panel.
2. 2write or paste your css. the line under the box tells you if something will not work, and on which line.
3. 3save. your page uses it from the next load.

what to target

these classes stay put when the rest of the page changes, so target them rather than the utility classes you see in devtools.

a lot of your page is styled inline from your appearance settings, and inline styles win over a stylesheet. if a rule seems to do nothing, add !important.

examples

.p-card {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--p-text) 20%, transparent) !important;
}

@keyframes float {
  50% { transform: translateY(-6px); }
}
.p-avatar { animation: float 4s ease-in-out infinite; }

.p-link:hover { letter-spacing: 0.04em; }

@media (max-width: 640px) {
  .p-name { font-size: 1.25rem; }
}

the css variables work here too, so var(--p-accent) is your accent color wherever you use it.

rules

• up to 20,000 characters.
• every selector is kept inside your page. body, html and :root mean your page itself, and nothing outside it can be matched.
• url() only works with files uploaded to seized.wtf, like your background or a custom font. links to anywhere else are refused.
• @import is not allowed, and neither are functions that load files, like image-set().
• @media, @supports, @container, @keyframes and @font-face are allowed. other at-rules are not.
• nested rules are not supported. write each rule out in full.
• backslash escapes only work inside quoted strings.

why the limits

a stylesheet that can load a file from any address can log the ip of everyone who opens your page, and one that can reach outside your page could restyle the site around it. the rules above rule out both, and nothing else.

when it looks wrong

• a rule does nothing: the setting is inline. add !important.
• it all went away: custom css is premium, and the plan is checked every time your page loads. your css is kept and comes back with premium.
• the save is refused: the message under the box says what and where.