Solved

I created a theme but

PixelSteps's Avatar
PixelSteps · in Support
13 replies 147 views
Best answer · Cedric On Aug 21, 2026, PixelSteps said:t’s starting to show in bits.Oh no, its actually shows when your logged off but when your logged in it gives a error of the theme.Which documentation did you give to y...
Jump to answer

I am having trouble installing a theme I followed the docs but still nothing.

Can you message Cedric and if I have coded this right it should work right? If so I might happen to make more.

Best answer by Cedric View post

On Aug 21, 2026, PixelSteps said:

t’s starting to show in bits.

Oh no, its actually shows when your logged off but when your logged in it gives a error of the theme.

Which documentation did you give to your AI agent?

Edit: I just had a look at the CSS you added, most of the classes are still missing, hence why you have an incomplete theme.

0
Best answer

On Aug 21, 2026, PixelSteps said:

t’s starting to show in bits.

Oh no, its actually shows when your logged off but when your logged in it gives a error of the theme.

Which documentation did you give to your AI agent?

Edit: I just had a look at the CSS you added, most of the classes are still missing, hence why you have an incomplete theme.

Last edited by Cedric

0

I’m not sure what you mean. What is it you’re trying to do, and what is not working?

0

Can I attach a folder and you see if you can upload up on your side for me? it has a read me if it works i know i have done everything right then.

0

You cannot attach folders to your board, no.

0

I mean to this support forum has a theme folder and you upload it for me no server acces no database just the way you would do it:

follow this:

## Install order

Roughly 20 minutes. No server access, no build step.

### 1 · Colours — Theme Studio

**Appearance → Themes.** Create two themes:

- `PHOSPHOR — Night` (dark) — set as the board default
- `PHOSPHOR — Spec Sheet` (light)

Copy the values from **`01-theme-studio-settings.md`** into each. Every hex is listed
with its contrast ratio, so you can see what you're spending.

### 2 · Custom CSS — Theme Studio

Paste **`02-custom-css.css`** into the Custom CSS box of *both* themes. It carries both
palettes and switches on whatever mode marker your board stamps, so the file is
identical in each.

Theme Studio previews live and saves nothing until you say so — change one thing, look
at the board index, a topic and a profile (the three pages the docs single out), then
save.

### 3 · Board Templates

**Appearance → Board Templates.** Four slots, four files:

| Slot | File | What it adds |
|---|---|---|
| Head | `03-board-templates/head.html` | Font request, favicon, `theme-color`, ~15 lines of anti-flash CSS |
| Top of page | `03-board-templates/top-of-page.html` | The HUD status strip |
| Above the board | `03-board-templates/above-the-board.html` | The index hero |
| After the board | `03-board-templates/after-the-board.html` | The footer |

The docs are right that this slot runs on every page view, so all four are text and CSS
only — no scripts, no embeds, no third-party requests beyond the one font stylesheet.

> **If you only want the hero on the index**, and your board renders "Above the board" on
> every page, move that file's markup into a Page Studio block on the index instead.

### 4 · Assets

Upload everything in `05-assets/` and point Theme Studio's logo fields at it. Then
assign the markers:

| Forum | Marker | Colour |
|---|---|---|
| Pixel Art & Animation | `palette.svg` | `#C6F24A` lime |
| Tilemaps & Level Design | `tilemap.svg` | `#5CD8FF` cyan |
| Engines & Code | `code.svg` | `#B58CFF` violet |
| Sound & Music | `audio.svg` | `#FF5C8A` magenta |
| Bugs & Post-mortems | `bug.svg` | `#FF8A4C` rust |
| Shipped & Showcase | `trophy.svg` | `#FFB454` amber |
| Jams & Events | `controller.svg` | `#8FE3D0` ice |
| Introductions | `sprite.svg` | `#6EF07A` phosphor |

To colour a forum row, add its class in the forum's own settings (or append a rule to
the Custom CSS keyed on the forum's id):

```css
/* one line per forum — the whole row re-tints: marker frame, left edge, hover */
[data-cid="4"] { --px-cat: var(--px-violet); }
```

The markers are drawn with `currentColor`, so they follow `--px-cat` with no image
editing.

### 5 · Widgets

**Widget library → Custom widget**, one per file in `04-widgets/`. Recommended sidebar
order — busiest at the top, because that's what people actually check:

1. `party-roster.html` — Online now
2. `board-hud-stats.html` — Board status
3. `jam-countdown.html` — Current jam
4. `featured-wip.html` — Featured WIP
5. `rules-cartridge.html` — House rules

All five are script-free and carry no styling of their own — they read from the Custom
CSS, so a palette change in Theme Studio moves them too. `04-widgets/README-widgets.md`
explains the `{{· variable ·}}` placeholders.

---

## If something doesn't pick up the theme

ForumSpark's public docs cover Theme Studio conceptually and don't publish a class-name
reference, so the CSS targets elements two ways at once: by semantic HTML, which never
changes, and by substring class matching (`[class*="topic"]`), which survives most
markup revisions.

If one component stays stock:

1. Open that page in devtools and find the element's real class.
2. Add it to the matching group in **section 04** of `02-custom-css.css`.
3. That's it — nothing after section 04 needs touching, because every later rule reads
   from the same tokens.

The `!important` rules are quarantined in section 22 so you can always see exactly what
is being forced and why.

---

## What to change first

Three things make this yours rather than mine:

1. **The hero copy.** `above-the-board.html` currently says what *I* think PixelSteps is
   about. Two sentences in your voice beats four in anyone else's.
2. **The house rules widget.** Generic rules ("be nice!") are the single fastest way to
   make a board look stock. The five in there are written for a 2D dev board — keep the
   shape, change the words.
3. **The forum colours.** Eight are provided. Use six. A palette with restraint reads as
   designed; a palette with all eight reads as a swatch library.

## What not to change

- **`border-radius`.** Zero is the theme. One rounded card and the whole thing goes soft.
- **Blurred shadows.** The 4px offsets are why the buttons feel physical.
- **Silkscreen at body size.** It's a 9–13px uppercase face. Below that it's mud, above
  it it's a costume.
- **Scanlines over post text.** They're on the masthead and hero only, and there's a
  reason.

---

## Accessibility

- Every ink/surface pair in both modes clears **WCAG AA** (across all 156 ink/surface pairs the lowest is 4.56 : 1;
  the audit is printed in `01-theme-studio-settings.md`).
- State is never colour alone: unread carries a lit bar *and* a brighter title, solved
  carries a flag *and* a cyan edge, locked carries a flag *and* dimmed ink.
- Focus is a 3px phosphor outline with a 2px offset, visible on every surface.
- `prefers-reduced-motion` removes the marching ants, the blinking caret and the LED
  pulse. The stepped `transition` timings go with them.
- A print stylesheet strips the sidebar, composer, nav and widgets and prints posts on
  white.

---

## Files

```
pixelsteps-phosphor/
├── README.md                        this file
├── 01-theme-studio-settings.md      every colour, both modes, with contrast ratios
├── 02-custom-css.css                the theme (~1,700 lines, 22 sections)
├── 03-board-templates/
│   ├── head.html                    fonts, favicon, anti-flash
│   ├── top-of-page.html             HUD status strip
│   ├── above-the-board.html         index hero
│   └── after-the-board.html         footer
├── 04-widgets/
│   ├── README-widgets.md
│   ├── party-roster.html
│   ├── board-hud-stats.html
│   ├── jam-countdown.html
│   ├── featured-wip.html
│   └── rules-cartridge.html
├── 05-assets/
│   ├── logo-wordmark.svg            5×7 pixel letterforms + staircase mark
│   ├── logo-mark.svg
│   ├── favicon.svg
│   ├── featured-scene.svg           procedural pixel-art cave, for the WIP widget
│   └── markers/                     8 pixel-art forum markers, currentColor
└── preview.html                     the full mockup, both modes
```

I created this in week.

0

I’m not sure where you found or generated this, but all you need is a custom css code, with additional board templates which mostly is HTML, and any images goes in Theme Resources (ACP). We will never upload folders to the software or platform.

0

I created this has a read me from following your theme docs.

0

On Aug 21, 2026, PixelSteps said:

I created this has a read me from following your theme docs.

Okay, but that doesn’t change a thing. We will never upload folders or themes, or images. You will need to extract the custom css, the images and the board templates and install them on your board. Presumably, you asked AI to generate your branding theme and everything that goes with it, in a zip file. Again, we don’t upload zip files to our platform as you’ll need to install custom css, board templates and images separately to a theme you create.

Importing the zip file in the theme section will not work.

0

I did not say i wanted to upload my files to your server don’t know where you got that from.

I have the folder of the theme attachments ain’t unlocked on this forums yet so can’t upload the theme folder and show you what i got.

can you take a look at my forum and tell me where i went wrong?

It wants to show but i’m missing something.

Last edited by PixelSteps

0

You don’t need to upload your zip file here. But typically you create a new theme, use the theme studio and then add your custom css.

Board templates is more used for the layout and structure of headers and footers.

Images go through the ACP → theme → Theme Resources

If your theme is not looking right, chances are the generated file is just not right.

0

t’s starting to show in bits.

Oh no, its actually shows when your logged off but when your logged in it gives a error of the theme.

Last edited by PixelSteps

0

This changes everything — that's ForumSpark's actual compiled default theme. It's not fuzzy [class*=...] guessing at all: it's a CSS-variable reskinning system (--fs-* custom properties) layered under real, exact component classes (.panel, .forum, .topic-row, .reply, .btn-primary...), with .dark { } as the mode switch — which also fully explains the earlier bug: our old !important fuzzy-selector approach was colliding with unrelated real components (admin tools like .theme-editor / .widget-manager also contain substrings like "panel"/"card"/"modal").

I'm rewriting the stylesheet to work with this system: our palette becomes --fs-* overrides (which cascades correctly through literally the whole platform, not just what I just hand-target), and the PHOSPHOR-specific flourishes (rivets, checkerboard, hard shadows, pixel type) get re-anchored to the real classes that was missing and instead of guessing.

Now look at my theme.

Theme: FS 2.0
Create Your Community with ForumSpark

ForumSpark is a modern community platform built on custom software. It combines the familiar feel of classic forums with a fast, simple experience designed for today’s communities.