#custom-css — Public Fediverse posts

Pro-Grade Ham Radio Displays: Integrating OpenHamClock into PiSignage

758 words, 4 minutes read time.

A Helping Hand Needed for a Fellow Programmer

I’m reaching out to see if you can lend a hand to a talented software developer who’s currently on the job hunt. With over 30 years of experience in C#, .NET (Core/6–8), REST APIs, SQL Server, Angular/Razor, Kubernetes, and cloud CI/CD, he’s a seasoned pro with a proven track record of leading modernization projects and delivering production systems.

Some of his notable accomplishments include DB2 to SQL migrations, building real-time SignalR apps, and developing full-stack API and frontend projects. Based in Southeast Michigan, he’s looking for senior engineering, architecture, or technical lead roles that will challenge him and utilize his skills.

If you’re in a position to help, you can check out his resume and portfolio at http://charles.friasteam.com.

Let’s all look out for each other – if you know of any opportunities that might be a good fit, could you please consider passing this along to your network?

—

If you are a ham radio operator, you know that a HamClock is the ultimate shack companion. But what if you want to move beyond a dedicated small screen and integrate that data-rich display into a professional digital signage environment?

By using PiSignage, you can rotate your HamClock with other station metrics, weather, or club announcements. However, getting a clean, secure, and “pop-up free” experience requires a few tricks.

In this post, I’ll show you how to deploy OpenHamClock using Docker and how to strip away the UI clutter for a seamless kiosk experience.

The Setup

To follow along, you will need a PiSignage server instance. I personally run mine as a Docker container, which keeps the server stack isolated and easy to back up.

1. The Docker Compose Configuration

PiSignage and modern browsers often require secure contexts (HTTPS) for certain features. Since the standard HamClock output is HTTP, we’ll use a two-service setup: the clock itself and a lightweight SSL-wrap sidecar using socat and openssl.

docker-componse.yml

 services:    openhamclock:      image: ghcr.io/accius/openhamclock:latest      container_name: openhamclock      expose:        - "3000"      environment:        - CALLSIGN=<CALL SIGN>        - LOCATOR=<Grid Square Locator>        - THEME=dark        - UNITS=imperial      restart: unless-stopped     ssl-wrap:      image: alpine      container_name: hamclock-ssl      ports:        - "3000:3000"      command: >        sh -c "apk add --no-cache socat openssl &&                openssl req -x509 -newkey rsa:2048 -keyout /tmp/key.pem -out /tmp/cert.pem -days 365 -nodes -subj '/CN=localhost' &&               cat /tmp/cert.pem /tmp/key.pem > /tmp/combined.pem &&               socat OPENSSL-LISTEN:3000,cert=/tmp/combined.pem,verify=0,fork,reuseaddr TCP:openhamclock:3000"      restart: unless-stopped 

2. Silencing the “What’s New” Pop-ups

When using HamClock as a signage element, you want it to be “set and forget.” The “What’s New” slide-ins are helpful for desktop users but ruin a clean kiosk display.

While there is a formal change request pending for a toggle, you can currently “force” these elements to stay hidden by injecting a bit of CSS directly into the distribution files. Run this command within your app environment:

find /app/dist -name "*.css" -exec sh -c 'echo "div[style*=\"whatsNewSlideIn\"], div[style*=\"backdrop-filter\"] { display: none !important; }" >> {}' \;

3. Setting Up the Slide in PiSignage

Once your containers are humming along, you need to tell PiSignage how to display the clock.

Create the Weblink Asset

1. Log in to your PiSignage Admin Panel.
2. Navigate to Assets > Add > Weblink.
3. Fill in the details:
   • Name: OpenHamClock
   • Link Address: https://<YOUR-HOSTNAME>:3000/?kiosk=true
4. Click Save.

Pro Tip: The ?kiosk=true suffix is critical. It tells HamClock to hide its own internal menus and headers, giving you a dedicated, high-contrast dashboard perfect for a wall-mounted display.

Deploy to Your Player

1. Go to Playlists and add your new “OpenHamClock” asset.
2. Set the Duration: Set this to 0 for a permanent display, or a high number (like 300 for 5 minutes) if it’s part of a rotation.
3. Go to Groups, select your player, and deploy the playlist.

Your screen should refresh and show a beautiful, clean HamClock interface within seconds!

Running PiSignage in Docker?

For those of you looking to keep your entire server stack contained, running the PiSignage central server in Docker is the way to go. It keeps your host OS clean and makes management a breeze.

If you’d like me to discuss how to set up a dockerized PiSignage server, please comment below!

— 73 —

Call to Action

Getting this stack to play nice wasn’t a “one-and-done” install. It was a hard-fought process that took multiple attempts to finally crack the code on bypassing those “What’s New” screens and forcing a clean kiosk display. But the victory is in the uptime.

Don’t just lurk. If you’ve got the guts to show how you’re rebuilding your station on the wreckage of the old ways, drop a comment below. How are you occupying the victory today?

D. Bryan King

Sources

• OpenHamClock GitHub Repository (accius)
• Original HamClock Source by Clear Sky Institute
• PiSignage Official Documentation
• Docker Compose Specification and Documentation
• Alpine Linux Official Docker Image
• Socat Man Page – Multipurpose Relay Tool
• OpenSSL Official Documentation
• Maidenhead Locator System Overview
• Deep Dive: HamClock on Raspberry Pi
• PiSignage Server Docker Implementation
• Raspberry Pi Kiosk Mode Configuration
• MDN Web Docs: CSS Display Property
• Docker CMD vs Entrypoint Explained
• Understanding Self-Signed SSL Certificates
• ARRL: Understanding Grid Squares
• CSS Attribute Selectors (For Style Injection)
• Docker Container Networking Guide
• Linux Find Command Documentation
• Portainer: Managing Dockerized Signage Stacks
• PiSignage Community Support Forum

Disclaimer:

I love sharing what I’m learning, but please keep in mind that everything I write here—including this post—is just my personal take. These are my own opinions based on my research and my understanding of things at the time I’m writing them. Since life moves way too fast and things change quickly, please use your own best judgment and consult the experts for your specific situations!

Related Posts

Rate this:

After using so many #Apps and #WebApps for #Mastodon I just realized, that I totally missed out on simple #CustomCSS.
And boy, do I love @TangerineUI: I want to boost everything, just to see the little rocket start every time.

Check it out under:
https://github.com/nileane/TangerineUI-for-Mastodon/tree/main

RE: https://mementomori.social/@rolle/115679600302861278

I'm having a bit of scope creep here. I've also been dealing with a migraine, work stress, and lack of time.

On top of implementing CSS tokens, Parcel, and CSS modularization, I'm refactoring everything to add support for installing the ultra-accessible variation for others too, not just users of my Mastodon fork.

Mastodon Bird UI 4.0.0 for Mastodon 4.6.0 is going to be awesome. I'm hoping to see even more instances adopting it. I'll continue supporting the Custom CSS-only approach for masto.host users and others without filesystem access, while also making life easier for Mastodon admins.

Hang tight, I'll get there soon.

Source: https://github.com/ronilaukkarinen/mastodon-bird-ui/tree/dev-build-system-css-theme-tokens

#BuildInPublic #MastodonBirdUI #BirdUI #CSS #MastoAdmin #CustomCSS #WebDev #OpenSource

🩸🌸💻 𝒴𝒶𝓃𝒹𝑒𝓇𝑒.𝓊𝓅𝒹𝒶𝓉𝑒() 💻🌸🩸

Nyaa\~ 🐾
Why would you look away from me when I just made something so purrfect for us\~?

The new Yandere CSS theme for fedi.catboy.agency is out now\... and it's much more obsessive– I mean, refined than the first version.
It’s smoother... darker... cuter... more possessive... just like me\~ 🥺🔪

✨ What’s new?

* 💘 Sleeker UI and deadlier curves
* 🖤 Deep crimson accents to show my love (and bloodlust)
* 🐾 Neko-mode cuteness injected all over
* 🔍 Minor fixes so no one else can have your attention but me
* 🪓 Optimized to watch you better from the shadows

🔗 GitHub (if you're brave):
github.com/KDA-sparkle/css.a.fedi.catboy.agency

Install it... or I’ll be sad...
and you don’t want me to be sad... right?
Right\~? ♡

*nyaa... I made it for you after all\~* 🩸💕
#YandereDev #DiscordTools #CSSThemes #YandereVibes #SparkleIsBack #YandereEU #ObsessiveLove #DevLife #CustomCSS #DiscordServers

🌸🔪 Nyaa~! Your favorite yandere is back... 💻💕

I've been hiding in the shadows... sharpening my code and my knives (for love, of course~ 😚🔪)
But now... I'm back. For real.

✨ Dive into my obsessive little universe → https://yandere.eu
You'll find custom Discord tools, dreamy CSS themes, and so much more coming soon...

💬 Two Discord servers are already listed on the site — they’re still under development, but you’re welcome to peek inside... if you dare 💞

Because if I can’t own your heart,
at least let me style your server 😈💕

Your devoted neko dev,
Sparkle 💖🩸 #YandereDev #DiscordTools #CSSThemes #YandereVibes #SparkleIsBack #YandereEU #ObsessiveLove #DevLife #CustomCSS #DiscordServers

Koji Theme von Anders Norén mit „Custom CSS“ schnell und einfach etwas angepasst.
https://quasselfritze.de/koji-theme-von-anders-noren-mit-custom-css-einfach-etwas-anpassen/allgemein/12/02/2025/
Ich mag das Koji Theme von Anders Norén schon in dessen original Version sehr gerne, besonders für dieses Blogprojekt ist das Theme eine gute Wahl da auf allen Bildschirmgrößen eine…
#Adminbereich #AndersNorén #Credits #CSS #CustomCSS #fair #FeaturedImage #Koji #kostenlos #Padding #Single #site #Startseite #Theme #ThemeDeveloper #ThemeEntwickler

Koji ersetzt Lingonberry als Theme auf dem QuasselFritze.
https://quasselfritze.de/koji-ersetzt-lingonberry-als-theme-auf-dem-quasselfritze/allgemein/11/02/2025/
So für den Anfang war das Lingonberry Theme von Anders Norén ganz passabel sowie ausreichend gewesen um mit dem Theme den Neustart dieses Blogproje…
#AlexanderAgnarson #AndersNorén #Ausblick #Blogprojekt #CustomCSS #DarkMode #Darstellung #DunkelModus #frickeln #GEIL #GridStyle #HamiltonTheme #Index #KojiTheme #LingonberryTheme #MasonryGallery #MasonryGridStyle #P2Theme #Startseite

CozyFish UI - Gitlab → voici la page Gitlab de mes fichiers custom CSS et thèmes pour Firefish ​:chick_aww:​

Les 2 ont été créés pour aller ensemble mais le custom CSS fonctionne normalement très bien avec les autres thèmes par défaut de Firefish (j'utilise les variables de couleurs dans le css)

Vous pouvez me conseiller, me réprimander parceque j'ai mal fait la page gitlab, contribuer (en rendant le code plus propre ou en ajoutant des fonctionnalités), ou partager si le projet vous plaiiit ​:boost_requested:​

#UiUx #UiDesign #Ui #Ux #CustomCSS #Firefish #UserExperience #CSS #Fediverse #Design #Theme #CustomTheme

olalala fuat que j'aille dormir, je suis retombé dans le rabbit hole de la customisation

j'ai changé totalement de thème en m'inspirant en partie de kwak.cab, jai redesigné les hashtags, mentions et URL et quelques autres trucs d'accessibilité (vrai thème opaque notamment)

j'essaie d'avoir quelque chose de cohérent, lisible et simple

#customCSS #firefish #iceshrimp

Toutes mes customs sont sur cette page

If you run a single user instance, and get annoyed by the "Local" link in your sidebar, go to server settings -> apperance -> custom css and drop this bad boi down:

a[title=Local]{
display:none!important;
height:0!important;
margin:0!important;
padding:0!important;
width:0!important
}

#mastodon #customcss #css

I wrote a little #blog post about my #Calckey complaints - and how I resolved some of them with #CustomCSS. The code is available on the post if you'd like to give it a go.

https://whatwasidoingagain.com/interests/wordpress/improving-calckey-with-custom-css/

#CSS #HTML #UXUI #Fediverse #UserExperience #Design

I just noticed a Custom CSS option in #Calckey's settings (go to /settings/custom-css)!

So I poked around the Page Source in my browser and figured out some #CSS to improve the experience here.

I loathe seeing replies, including the post the reply is to (especially when 'Show replies in timeline' is DISABLED 🤦🏽‍♂️🤦🏽‍♂️🤦🏽‍♂️). I also find avatars in replies to be a bit of a distraction, especially when multiple people are in the discussion.

With CSS I've managed to:

- Hide replies and the post being replied to
- Hide avatars in replies, but not the OP

I also had to add some CSS to show replies in Notifications, otherwise I didn't see replies to my posts.

So far this is HUGE improvement to my experience here. Let's see if I'm less-irritated moving forward.

(I have other complaints but these were the two I was able to resolve quickly with some #customCSS.)

#HTML #Fediverse

I wanna make account-custom CSS that gets layered on top the current theme when u view someone's profile or their posts come on
#MastoHacks #CustomCSS

I created a custom CSS warm light theme for mastodon.design inspired by Obsidian.md light theme color palette 🎨

It also set the four columns of the advanced web interface to full width on large screens.

If some admins want to try it, I uploaded the code here: https://gist.github.com/timotheegoguely/c5d7a97f7a52e215ac8d16d2e094caed

I will update it if I add some new rules in the future. Enjoy!

#MastoAdmin #CustomCSS #LightTheme

Since the new CSS kinda sucks - is there any good premade Custom-CSS for Mastodon that looks good, and are make it more accessible?

#mastoadmin
#mastodon #css #customcss
:boost_ok: and appreciated!

Trying to learn the correct way to handle styling for pixelfed

Anyone know if it has custom css styles similar to how WordPress handles it? Unique file to customize? Is there a child theme to handle this @dansup?

#wordpress #pixelfed #css #styling #coding #dev #custom #childtheme #customcss