Customize your instance CSS

PeerTube
1

Hi Community, so I am customizing the look of my instance and there is a CSS example for changing the default links

body#custom-css {
–mainColor: #E8252D;
} Customize your instance | PeerTube documentation

This works great for standard links, but how can we change a:hover? What is the variable, where is it listed?

Thanks

2

Hi!

I have no time to dig into your issue right now but if you didn’t notice already, the future version of PeerTube (v7, which will be released soon) will bring major changes to design. So I encourage you to wait for this release or to start working on the Release Candidate if you don’t want to have to do this work again!
Of course, ignore my comment (and sorry for the noise) if you’re already working on the RC.

7.0.0-rc.1 changelog: Release v7.0.0-rc.1 · Chocobozzz/PeerTube · GitHub

3

This is good news: All CSS variables have been replaced so it’s easier to theme PeerTube

Looking forward to use the version 7 release

4

Hello,

I’m writing about the CSS for the new version 7 of PeerTube.

In fact, we’ve been using an instance for a few years now to publish mainly recordings of town councils (I work for a local authority), and I had added a few rules in PeerTube’s advanced options to change the color of the buttons, for example, so that they would match our graphic charter.

Our host and infomanager has upgraded the instance to version 7, which does indeed seem to offer a simpler interface for the public, but I’m now having trouble customizing button colors, for example.

It seems that CSS is now dynamic, and I haven’t mastered this subtlety. Is it possible to access a documentation (Peertube or other) that explains how to do this?

My previous rules were :

body {
  --menuBackgroundColor: #26D07C;
  --menuForegroundColor: #202020;
  --mainColor: #FF6166;
}

.feather {
  fill: white;
  stroke: #202020;
}

.material {
  fill: white;
  stroke: #202020;
}

Bien cordialement, Axel.

5

Where have you set your previous rules? In the admin page?

If so, you first have to replace body by body#custom-css.

Then, you must replace the CSS var by those documented here:

In other word: --mainColor becomes --primary, and so on.

For .feather and .material, i don’t know those class, i let someone else answer.