<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Ui-Customization on homelab</title>
    <link>https://homelab.nbkelley.com/tags/ui-customization/</link>
    <description>Recent content in Ui-Customization on homelab</description>
    <generator>Hugo</generator>
    <language>en</language>
    <lastBuildDate>Fri, 01 May 2026 00:00:00 +0000</lastBuildDate>
    <atom:link href="https://homelab.nbkelley.com/tags/ui-customization/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Jellyfin Help Link Integration</title>
      <link>https://homelab.nbkelley.com/docs/services/jellyfin-help-link/</link>
      <pubDate>Fri, 01 May 2026 00:00:00 +0000</pubDate>
      <guid>https://homelab.nbkelley.com/docs/services/jellyfin-help-link/</guid>
      <description>&lt;h1 id=&#34;jellyfin-help-link-integration&#34;&gt;Jellyfin Help Link Integration&lt;a class=&#34;anchor&#34; href=&#34;#jellyfin-help-link-integration&#34;&gt;#&lt;/a&gt;&lt;/h1&gt;&#xA;&lt;h2 id=&#34;what-was-established&#34;&gt;What Was Established&lt;a class=&#34;anchor&#34; href=&#34;#what-was-established&#34;&gt;#&lt;/a&gt;&lt;/h2&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;&lt;strong&gt;Goal&lt;/strong&gt;: Integrate a persistent, user-facing help link directly into the Jellyfin UI for logged-in users, directing them to the Hinterflix documentation.&lt;/li&gt;&#xA;&lt;li&gt;&lt;strong&gt;Methods Evaluated&lt;/strong&gt;: Custom Login Message (pre-login only), Custom CSS (Dashboard &amp;gt; General), Reverse Proxy HTML injection (Nginx), Custom JavaScript, and Plugin-based solutions.&lt;/li&gt;&#xA;&lt;li&gt;&lt;strong&gt;Selected Approach&lt;/strong&gt;: Custom CSS injected via the Jellyfin Dashboard. It provides immediate visibility without requiring external dependencies or server restarts.&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;h2 id=&#34;key-decisions&#34;&gt;Key Decisions&lt;a class=&#34;anchor&#34; href=&#34;#key-decisions&#34;&gt;#&lt;/a&gt;&lt;/h2&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;&lt;strong&gt;Placement&lt;/strong&gt;: Prioritized persistent in-interface links over pre-login messages. Options included header navigation, floating action button, and sidebar integration.&lt;/li&gt;&#xA;&lt;li&gt;&lt;strong&gt;Implementation Path&lt;/strong&gt;: Chose &lt;code&gt;Dashboard &amp;gt; General &amp;gt; Custom CSS&lt;/code&gt; for its simplicity and zero-dependency nature compared to reverse proxy modifications or plugin development.&lt;/li&gt;&#xA;&lt;li&gt;&lt;strong&gt;Target URL&lt;/strong&gt;: The CSS &lt;code&gt;href&lt;/code&gt; attributes should point to the deployed Hinterflix help site (e.g., &lt;code&gt;https://status.nbkelley.com&lt;/code&gt; or the specific docs subdomain).&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;h2 id=&#34;current-configuration&#34;&gt;Current Configuration&lt;a class=&#34;anchor&#34; href=&#34;#current-configuration&#34;&gt;#&lt;/a&gt;&lt;/h2&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;&lt;strong&gt;Location&lt;/strong&gt;: Jellyfin Web UI → Dashboard → General → Custom CSS&lt;/li&gt;&#xA;&lt;li&gt;&lt;strong&gt;Active Selectors&lt;/strong&gt;:&#xA;&lt;ul&gt;&#xA;&lt;li&gt;&lt;code&gt;headerTabs::after&lt;/code&gt; for top navigation bar integration&lt;/li&gt;&#xA;&lt;li&gt;&lt;code&gt;body::after&lt;/code&gt; for a fixed floating action button (FAB)&lt;/li&gt;&#xA;&lt;li&gt;&lt;code&gt;sidebarBox:last-child::after&lt;/code&gt; for sidebar menu integration&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&lt;strong&gt;Dependencies&lt;/strong&gt;: None. Relies entirely on Jellyfin&amp;rsquo;s built-in CSS injection capability.&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;h2 id=&#34;historical-notes&#34;&gt;Historical Notes&lt;a class=&#34;anchor&#34; href=&#34;#historical-notes&#34;&gt;#&lt;/a&gt;&lt;/h2&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;Conversation dated 2025-11-22.&lt;/li&gt;&#xA;&lt;li&gt;Jellyfin&amp;rsquo;s frontend framework (Ember.js/React hybrid) frequently updates CSS class names. Selectors like &lt;code&gt;headerTabs&lt;/code&gt; and &lt;code&gt;sidebarBox&lt;/code&gt; may break after major Jellyfin version upgrades, requiring CSS updates.&lt;/li&gt;&#xA;&lt;li&gt;The &lt;code&gt;sub_filter&lt;/code&gt; Nginx approach was considered but discarded in favor of native dashboard configuration to avoid proxy overhead and cache invalidation issues.&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;h2 id=&#34;open-questions&#34;&gt;Open Questions&lt;a class=&#34;anchor&#34; href=&#34;#open-questions&#34;&gt;#&lt;/a&gt;&lt;/h2&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;Has the chosen CSS snippet been applied and verified against the current Jellyfin version running on the homelab?&lt;/li&gt;&#xA;&lt;li&gt;Are there any specific UX guidelines or family-user constraints that dictate the preferred placement (header vs. floating vs. sidebar)?&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;h2 id=&#34;related-pages&#34;&gt;Related Pages&lt;a class=&#34;anchor&#34; href=&#34;#related-pages&#34;&gt;#&lt;/a&gt;&lt;/h2&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;&lt;a href=&#34;https://homelab.nbkelley.com/docs/services/hinterflix-help-site/&#34;&gt;Hinterflix Help Site - Cloudflare Deployment&lt;/a&gt;&lt;/li&gt;&#xA;&lt;li&gt;&lt;a href=&#34;https://homelab.nbkelley.com/docs/services/jellyfin-gpu-passthrough/&#34;&gt;Jellyfin LXC GPU Passthrough &amp;amp; Hardware Acceleration&lt;/a&gt;&lt;/li&gt;&#xA;&lt;li&gt;&lt;a href=&#34;https://homelab.nbkelley.com/docs/services/servarr/&#34;&gt;Servarr - Media Automation Stack&lt;/a&gt;&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;h2 id=&#34;sources&#34;&gt;Sources&lt;a class=&#34;anchor&#34; href=&#34;#sources&#34;&gt;#&lt;/a&gt;&lt;/h2&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;&lt;code&gt;ingested/chats/128-Add User to Sudoers Group Guide.md&lt;/code&gt;&lt;/li&gt;&#xA;&lt;li&gt;&lt;code&gt;ingested/chats/113-Adding Help Link to Jellyfin Server.md&lt;/code&gt;&lt;/li&gt;&#xA;&lt;li&gt;&lt;code&gt;ingested/chats/028-Basic Header with Hamburger Menu Design.md&lt;/code&gt;&lt;/li&gt;&#xA;&lt;li&gt;DeepSeek conversation: &amp;ldquo;Adding Help Link to Jellyfin Server&amp;rdquo; (2025-11-22)&lt;/li&gt;&#xA;&lt;/ul&gt;</description>
    </item>
  </channel>
</rss>
