You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
homepage/main/configs/settings/index.html

6253 lines
130 KiB

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Service Configuration">
<link rel="canonical" href="https://gethomepage.dev/main/configs/settings/">
<link rel="prev" href="../">
<link rel="next" href="../bookmarks/">
<link rel="icon" href="../../assets/favicon.ico">
<meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.5.2+insiders-4.47.1">
<title>Settings - homepage</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.78d85e4f.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.ab4e12ef.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../stylesheets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#title" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<div data-md-color-scheme="default" data-md-component="outdated" hidden>
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="homepage" class="md-header__button md-logo" aria-label="homepage" data-md-component="logo">
<img src="../../assets/light_squircle@2x.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
homepage
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Settings
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69m-9.15 3.96h2.3L12 9l-1.15 3.65Z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="black" data-md-color-accent="black" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="blue" aria-label="Switch to system preference" type="radio" name="__palette" id="__palette_2">
<label class="md-header__button md-icon" title="Switch to system preference" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12c0-2.42-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
</label>
</form>
<script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="Share" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91 1.61 0 2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08Z"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/gethomepage/homepage" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
gethomepage/homepage
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../installation/" class="md-tabs__link">
Installation
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../" class="md-tabs__link">
Configuration
</a>
</li>
<li class="md-tabs__item">
<a href="../../widgets/" class="md-tabs__link">
Widgets
</a>
</li>
<li class="md-tabs__item">
<a href="../../more/troubleshooting/" class="md-tabs__link">
Troubleshooting
</a>
</li>
<li class="md-tabs__item">
<a href="../../more/" class="md-tabs__link">
More
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="homepage" class="md-nav__button md-logo" aria-label="homepage" data-md-component="logo">
<img src="../../assets/light_squircle@2x.png" alt="logo">
</a>
homepage
</label>
<div class="md-nav__source">
<a href="https://github.com/gethomepage/homepage" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
gethomepage/homepage
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1" >
<div class="md-nav__link md-nav__container">
<a href="../.." class="md-nav__link ">
<span class="md-ellipsis">
Home
</span>
</a>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1">
<span class="md-nav__icon md-icon"></span>
Home
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<div class="md-nav__link md-nav__container">
<a href="../../installation/" class="md-nav__link ">
<span class="md-ellipsis">
Installation
</span>
</a>
<label class="md-nav__link " for="__nav_2" id="__nav_2_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Installation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../installation/docker/" class="md-nav__link">
<span class="md-ellipsis">
Docker Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/k8s/" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/unraid/" class="md-nav__link">
<span class="md-ellipsis">
UNRAID Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/source/" class="md-nav__link">
<span class="md-ellipsis">
Source Installation
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
<div class="md-nav__link md-nav__container">
<a href="../" class="md-nav__link ">
<span class="md-ellipsis">
Configuration
</span>
</a>
<label class="md-nav__link " for="__nav_3" id="__nav_3_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Configuration
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Settings
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Settings
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#title" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Title
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#start-url" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Start URL
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#background-image" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Background Image
</span>
</span>
</a>
<nav class="md-nav" aria-label="Background Image">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#background-opacity-filters" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Background Opacity &amp; Filters
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#card-background-blur" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Card Background Blur
</span>
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#favicon" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Favicon
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#theme" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Theme
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#color-palette" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Color Palette
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#layout" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Layout
</span>
</span>
</a>
<nav class="md-nav" aria-label="Layout">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#sorting" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Sorting
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#headers" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Headers
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#category-icons" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Category Icons
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#icon-style" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Icon Style
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#tabs" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Tabs
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#five-columns" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Five Columns
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#collapsible-sections" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Collapsible sections
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#initially-collapsed-sections" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Initially collapsed sections
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#use-equal-height-cards" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Use Equal Height Cards
</span>
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#header-style" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Header Style
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#base-url" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Base URL
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#language" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Language
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#link-target" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Link Target
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#providers" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Providers
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#quick-launch" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Quick Launch
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#homepage-version" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Homepage Version
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#log-path" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Log Path
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#show-docker-stats" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Show Docker Stats
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#status-style" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Status Style
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#instance-name" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Instance Name
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#hide-widget-error-messages" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Hide Widget Error Messages
</span>
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../bookmarks/" class="md-nav__link">
<span class="md-ellipsis">
Bookmarks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../services/" class="md-nav__link">
<span class="md-ellipsis">
Services
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../service-widgets/" class="md-nav__link">
<span class="md-ellipsis">
Service Widgets
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../kubernetes/" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker/" class="md-nav__link">
<span class="md-ellipsis">
Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../custom-css-js/" class="md-nav__link">
<span class="md-ellipsis">
Custom CSS & JS
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<div class="md-nav__link md-nav__container">
<a href="../../widgets/" class="md-nav__link ">
<span class="md-ellipsis">
Widgets
</span>
</a>
<label class="md-nav__link " for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Widgets
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" >
<div class="md-nav__link md-nav__container">
<a href="../../widgets/services/" class="md-nav__link ">
<span class="md-ellipsis">
Service Widgets
</span>
</a>
<label class="md-nav__link " for="__nav_4_2" id="__nav_4_2_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_2">
<span class="md-nav__icon md-icon"></span>
Service Widgets
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../widgets/services/adguard-home/" class="md-nav__link">
<span class="md-ellipsis">
Adguard Home
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/atsumeru/" class="md-nav__link">
<span class="md-ellipsis">
Atsumeru
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/audiobookshelf/" class="md-nav__link">
<span class="md-ellipsis">
Audiobookshelf
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/authentik/" class="md-nav__link">
<span class="md-ellipsis">
Authentik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/autobrr/" class="md-nav__link">
<span class="md-ellipsis">
Autobrr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/azuredevops/" class="md-nav__link">
<span class="md-ellipsis">
Azure DevOps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/bazarr/" class="md-nav__link">
<span class="md-ellipsis">
Bazarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/caddy/" class="md-nav__link">
<span class="md-ellipsis">
Caddy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/calendar/" class="md-nav__link">
<span class="md-ellipsis">
Calendar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/calibre-web/" class="md-nav__link">
<span class="md-ellipsis">
Calibre-web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/changedetectionio/" class="md-nav__link">
<span class="md-ellipsis">
Changedetection.io
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/channelsdvrserver/" class="md-nav__link">
<span class="md-ellipsis">
Channels DVR Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/cloudflared/" class="md-nav__link">
<span class="md-ellipsis">
Cloudflare Tunnels
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/coin-market-cap/" class="md-nav__link">
<span class="md-ellipsis">
Coin Market Cap
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/crowdsec/" class="md-nav__link">
<span class="md-ellipsis">
Crowdsec
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/customapi/" class="md-nav__link">
<span class="md-ellipsis">
Custom API
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/deluge/" class="md-nav__link">
<span class="md-ellipsis">
Deluge
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/diskstation/" class="md-nav__link">
<span class="md-ellipsis">
Synology Disk Station
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/downloadstation/" class="md-nav__link">
<span class="md-ellipsis">
Synology Download Station
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/emby/" class="md-nav__link">
<span class="md-ellipsis">
Emby
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/esphome/" class="md-nav__link">
<span class="md-ellipsis">
ESPHome
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/evcc/" class="md-nav__link">
<span class="md-ellipsis">
EVCC
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/fileflows/" class="md-nav__link">
<span class="md-ellipsis">
Fileflows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/flood/" class="md-nav__link">
<span class="md-ellipsis">
Flood
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/freshrss/" class="md-nav__link">
<span class="md-ellipsis">
FreshRSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/fritzbox/" class="md-nav__link">
<span class="md-ellipsis">
FRITZ!Box
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gamedig/" class="md-nav__link">
<span class="md-ellipsis">
GameDig
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gatus/" class="md-nav__link">
<span class="md-ellipsis">
Gatus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/ghostfolio/" class="md-nav__link">
<span class="md-ellipsis">
Ghostfolio
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gitea/" class="md-nav__link">
<span class="md-ellipsis">
Gitea
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/glances/" class="md-nav__link">
<span class="md-ellipsis">
Glances
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gluetun/" class="md-nav__link">
<span class="md-ellipsis">
Gluetun
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/gotify/" class="md-nav__link">
<span class="md-ellipsis">
Gotify
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/grafana/" class="md-nav__link">
<span class="md-ellipsis">
Grafana
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/hdhomerun/" class="md-nav__link">
<span class="md-ellipsis">
HDHomerun
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/healthchecks/" class="md-nav__link">
<span class="md-ellipsis">
Health checks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/homeassistant/" class="md-nav__link">
<span class="md-ellipsis">
Home Assistant
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/homebox/" class="md-nav__link">
<span class="md-ellipsis">
Homebox
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/homebridge/" class="md-nav__link">
<span class="md-ellipsis">
Homebridge
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/iframe/" class="md-nav__link">
<span class="md-ellipsis">
iFrame
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/immich/" class="md-nav__link">
<span class="md-ellipsis">
Immich
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/jackett/" class="md-nav__link">
<span class="md-ellipsis">
Jackett
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/jdownloader/" class="md-nav__link">
<span class="md-ellipsis">
JDownloader
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/jellyfin/" class="md-nav__link">
<span class="md-ellipsis">
Jellyfin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/jellyseerr/" class="md-nav__link">
<span class="md-ellipsis">
Jellyseerr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/kavita/" class="md-nav__link">
<span class="md-ellipsis">
Kavita
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/komga/" class="md-nav__link">
<span class="md-ellipsis">
Komga
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/kopia/" class="md-nav__link">
<span class="md-ellipsis">
Kopia
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/lidarr/" class="md-nav__link">
<span class="md-ellipsis">
Lidarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mastodon/" class="md-nav__link">
<span class="md-ellipsis">
Mastodon
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mealie/" class="md-nav__link">
<span class="md-ellipsis">
Mealie
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/medusa/" class="md-nav__link">
<span class="md-ellipsis">
Medusa
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mikrotik/" class="md-nav__link">
<span class="md-ellipsis">
Mikrotik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/minecraft/" class="md-nav__link">
<span class="md-ellipsis">
Minecraft
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/miniflux/" class="md-nav__link">
<span class="md-ellipsis">
Miniflux
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mjpeg/" class="md-nav__link">
<span class="md-ellipsis">
MJPEG
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/moonraker/" class="md-nav__link">
<span class="md-ellipsis">
Moonraker (Klipper)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/mylar/" class="md-nav__link">
<span class="md-ellipsis">
Mylar3
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/navidrome/" class="md-nav__link">
<span class="md-ellipsis">
Navidrome
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/netdata/" class="md-nav__link">
<span class="md-ellipsis">
Netdata
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/nextcloud/" class="md-nav__link">
<span class="md-ellipsis">
Nextcloud
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/nextdns/" class="md-nav__link">
<span class="md-ellipsis">
NextDNS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/nginx-proxy-manager/" class="md-nav__link">
<span class="md-ellipsis">
Nginx Proxy Manager
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/nzbget/" class="md-nav__link">
<span class="md-ellipsis">
NZBget
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/octoprint/" class="md-nav__link">
<span class="md-ellipsis">
OctoPrint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/omada/" class="md-nav__link">
<span class="md-ellipsis">
Omada
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/ombi/" class="md-nav__link">
<span class="md-ellipsis">
Ombi
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/opendtu/" class="md-nav__link">
<span class="md-ellipsis">
OpenDTU
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/openmediavault/" class="md-nav__link">
<span class="md-ellipsis">
OpenMediaVault
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/opnsense/" class="md-nav__link">
<span class="md-ellipsis">
OPNSense
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/overseerr/" class="md-nav__link">
<span class="md-ellipsis">
Overseerr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/paperlessngx/" class="md-nav__link">
<span class="md-ellipsis">
Paperless-ngx
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/peanut/" class="md-nav__link">
<span class="md-ellipsis">
PeaNUT
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pfsense/" class="md-nav__link">
<span class="md-ellipsis">
pfSense
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/photoprism/" class="md-nav__link">
<span class="md-ellipsis">
PhotoPrism
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pialert.md" class="md-nav__link">
<span class="md-ellipsis">
None
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pihole/" class="md-nav__link">
<span class="md-ellipsis">
PiHole
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/plantit/" class="md-nav__link">
<span class="md-ellipsis">
Plant-it
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/plex-tautulli/" class="md-nav__link">
<span class="md-ellipsis">
Tautulli (Plex)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/plex/" class="md-nav__link">
<span class="md-ellipsis">
Plex
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/portainer/" class="md-nav__link">
<span class="md-ellipsis">
Portainer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/prometheus/" class="md-nav__link">
<span class="md-ellipsis">
Prometheus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/prowlarr/" class="md-nav__link">
<span class="md-ellipsis">
Prowlarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/proxmox/" class="md-nav__link">
<span class="md-ellipsis">
Proxmox
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/proxmoxbackupserver/" class="md-nav__link">
<span class="md-ellipsis">
Proxmox Backup Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pterodactyl/" class="md-nav__link">
<span class="md-ellipsis">
Pterodactyl
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/pyload/" class="md-nav__link">
<span class="md-ellipsis">
Pyload
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/qbittorrent/" class="md-nav__link">
<span class="md-ellipsis">
qBittorrent
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/qnap/" class="md-nav__link">
<span class="md-ellipsis">
QNAP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/radarr/" class="md-nav__link">
<span class="md-ellipsis">
Radarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/readarr/" class="md-nav__link">
<span class="md-ellipsis">
Readarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/romm/" class="md-nav__link">
<span class="md-ellipsis">
Romm
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/rutorrent/" class="md-nav__link">
<span class="md-ellipsis">
ruTorrent
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/sabnzbd/" class="md-nav__link">
<span class="md-ellipsis">
SABnzbd
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/scrutiny/" class="md-nav__link">
<span class="md-ellipsis">
Scrutiny
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/sonarr/" class="md-nav__link">
<span class="md-ellipsis">
Sonarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/speedtest-tracker/" class="md-nav__link">
<span class="md-ellipsis">
Speedtest Tracker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/stash/" class="md-nav__link">
<span class="md-ellipsis">
Stash
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/syncthing-relay-server/" class="md-nav__link">
<span class="md-ellipsis">
Syncthing Relay Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/tailscale/" class="md-nav__link">
<span class="md-ellipsis">
Tailscale
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/tdarr/" class="md-nav__link">
<span class="md-ellipsis">
Tdarr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/traefik/" class="md-nav__link">
<span class="md-ellipsis">
Traefik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/transmission/" class="md-nav__link">
<span class="md-ellipsis">
Transmission
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/truenas/" class="md-nav__link">
<span class="md-ellipsis">
TrueNas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/tubearchivist/" class="md-nav__link">
<span class="md-ellipsis">
Tube Archivist
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/unifi-controller/" class="md-nav__link">
<span class="md-ellipsis">
Unifi Controller
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/unmanic/" class="md-nav__link">
<span class="md-ellipsis">
Unmanic
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/uptime-kuma/" class="md-nav__link">
<span class="md-ellipsis">
Uptime Kuma
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/uptimerobot/" class="md-nav__link">
<span class="md-ellipsis">
UptimeRobot
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/urbackup/" class="md-nav__link">
<span class="md-ellipsis">
UrBackup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/watchtower/" class="md-nav__link">
<span class="md-ellipsis">
Watchtower
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/whatsupdocker/" class="md-nav__link">
<span class="md-ellipsis">
What's Up Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/services/xteve/" class="md-nav__link">
<span class="md-ellipsis">
Xteve
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3" >
<div class="md-nav__link md-nav__container">
<a href="../../widgets/info/" class="md-nav__link ">
<span class="md-ellipsis">
Information Widgets
</span>
</a>
<label class="md-nav__link " for="__nav_4_3" id="__nav_4_3_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3">
<span class="md-nav__icon md-icon"></span>
Information Widgets
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../widgets/info/datetime/" class="md-nav__link">
<span class="md-ellipsis">
Date & Time
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/glances/" class="md-nav__link">
<span class="md-ellipsis">
Glances
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/greeting/" class="md-nav__link">
<span class="md-ellipsis">
Greeting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/kubernetes/" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/logo/" class="md-nav__link">
<span class="md-ellipsis">
Logo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/longhorn/" class="md-nav__link">
<span class="md-ellipsis">
Longhorn
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/openmeteo/" class="md-nav__link">
<span class="md-ellipsis">
Open-Meteo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/openweathermap/" class="md-nav__link">
<span class="md-ellipsis">
OpenWeatherMap
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/resources/" class="md-nav__link">
<span class="md-ellipsis">
Resources
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/search/" class="md-nav__link">
<span class="md-ellipsis">
Search
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/unifi_controller/" class="md-nav__link">
<span class="md-ellipsis">
Unifi Controller
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../widgets/info/weather/" class="md-nav__link">
<span class="md-ellipsis">
Weather API
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../more/troubleshooting/" class="md-nav__link">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<div class="md-nav__link md-nav__container">
<a href="../../more/" class="md-nav__link ">
<span class="md-ellipsis">
More
</span>
</a>
<label class="md-nav__link " for="__nav_6" id="__nav_6_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
More
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../more/development/" class="md-nav__link">
<span class="md-ellipsis">
Development
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../more/translations/" class="md-nav__link">
<span class="md-ellipsis">
Translations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../more/homepage-move/" class="md-nav__link">
<span class="md-ellipsis">
Homepage Move
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#title" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Title
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#start-url" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Start URL
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#background-image" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Background Image
</span>
</span>
</a>
<nav class="md-nav" aria-label="Background Image">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#background-opacity-filters" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Background Opacity &amp; Filters
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#card-background-blur" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Card Background Blur
</span>
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#favicon" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Favicon
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#theme" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Theme
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#color-palette" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Color Palette
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#layout" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Layout
</span>
</span>
</a>
<nav class="md-nav" aria-label="Layout">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#sorting" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Sorting
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#headers" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Headers
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#category-icons" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Category Icons
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#icon-style" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Icon Style
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#tabs" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Tabs
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#five-columns" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Five Columns
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#collapsible-sections" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Collapsible sections
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#initially-collapsed-sections" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Initially collapsed sections
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#use-equal-height-cards" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Use Equal Height Cards
</span>
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#header-style" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Header Style
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#base-url" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Base URL
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#language" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Language
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#link-target" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Link Target
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#providers" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Providers
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#quick-launch" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Quick Launch
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#homepage-version" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Homepage Version
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#log-path" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Log Path
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#show-docker-stats" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Show Docker Stats
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#status-style" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Status Style
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#instance-name" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Instance Name
</span>
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#hide-widget-error-messages" class="md-nav__link">
<span class="md-ellipsis">
<span class="md-typeset">
Hide Widget Error Messages
</span>
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/gethomepage/homepage/tree/main/docs/configs/settings.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-2m10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1 2.1 2.1Z"/></svg>
</a>
<h1>Settings</h1>
<p>The <code>settings.yaml</code> file allows you to define application level options. For changes made to this file to take effect, you will need to regenerate the static HTML, this can be done by clicking the refresh icon in the bottom right of the page.</p>
<h2 id="title">Title</h2>
<p>You can customize the title of the page if you'd like.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">My Awesome Homepage</span>
</span></code></pre></div>
<h2 id="start-url">Start URL</h2>
<p>You can customize the start_url as required for installable apps. The default is "/".</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="nt">startUrl</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">https://custom.url</span>
</span></code></pre></div>
<h2 id="background-image">Background Image</h2>
<div class="admonition warning">
<p class="admonition-title">Heads Up!</p>
<p>You will need to restart the container any time you add new images, this is a limitation of the Next.js static site server.</p>
</div>
<div class="admonition warning">
<p class="admonition-title">Heads Up!</p>
<p>Do not create a bind mount to the entire <code>/app/public/</code> directory.</p>
</div>
<p>If you'd like to use a background image instead of the solid theme color, you may provide a full URL to an image of your choice.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="nt">background</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">https://images.unsplash.com/photo-1502790671504-542ad42d5189?auto=format&amp;fit=crop&amp;w=2560&amp;q=80</span>
</span></code></pre></div>
<p>Or you may pass the path to a local image relative to e.g. <code>/app/public/images</code> directory.</p>
<p>For example, inside of your Docker Compose file, mount a path to where your images are kept:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-3-1"><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="nt">volumes</span><span class="p">:</span>
</span><span id="__span-3-2"><a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">/my/homepage/images:/app/public/images</span>
</span></code></pre></div>
<p>and then reference that image:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-4-1"><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="nt">background</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">/images/background.png</span>
</span></code></pre></div>
<h3 id="background-opacity-filters">Background Opacity &amp; Filters</h3>
<p>You can specify filters to apply over your background image for blur, saturation and brightness as well as opacity to blend with the background color. The first three filter settings use tailwind CSS classes, see notes below regarding the options for each. You do not need to specify all options.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-5-1"><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="nt">background</span><span class="p">:</span>
</span><span id="__span-5-2"><a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a><span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">/images/background.png</span>
</span><span id="__span-5-3"><a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a><span class="w"> </span><span class="nt">blur</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">sm</span><span class="w"> </span><span class="c1"># sm, &quot;&quot;, md, xl... see https://tailwindcss.com/docs/backdrop-blur</span>
</span><span id="__span-5-4"><a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="w"> </span><span class="nt">saturate</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">50</span><span class="w"> </span><span class="c1"># 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate</span>
</span><span id="__span-5-5"><a id="__codelineno-5-5" name="__codelineno-5-5" href="#__codelineno-5-5"></a><span class="w"> </span><span class="nt">brightness</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">50</span><span class="w"> </span><span class="c1"># 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness</span>
</span><span id="__span-5-6"><a id="__codelineno-5-6" name="__codelineno-5-6" href="#__codelineno-5-6"></a><span class="w"> </span><span class="nt">opacity</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">50</span><span class="w"> </span><span class="c1"># 0-100</span>
</span></code></pre></div>
<h3 id="card-background-blur">Card Background Blur</h3>
<p>You can apply a blur filter to the service &amp; bookmark cards. Note this option is incompatible with the background blur, saturate and brightness filters.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-6-1"><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="nt">cardBlur</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">sm</span><span class="w"> </span><span class="c1"># sm, &quot;&quot;, md, etc... see https://tailwindcss.com/docs/backdrop-blur</span>
</span></code></pre></div>
<h2 id="favicon">Favicon</h2>
<p>If you'd like to use a custom favicon instead of the included one, you may provide a full URL to an image of your choice.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-7-1"><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="nt">favicon</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">https://www.google.com/favicon.ico</span>
</span></code></pre></div>
<p>Or you may pass the path to a local image relative to the <code>/app/public</code> directory. See <a href="#background-image">Background Image</a> for more detailed information on how to provide your own files.</p>
<h2 id="theme">Theme</h2>
<p>You can configure a fixed theme (and disable the theme switcher) by passing the <code>theme</code> option, like so:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-8-1"><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a><span class="nt">theme</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">dark</span><span class="w"> </span><span class="c1"># or light</span>
</span></code></pre></div>
<h2 id="color-palette">Color Palette</h2>
<p>You can configured a fixed color palette (and disable the palette switcher) by passing the <code>color</code> option, like so:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-9-1"><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a><span class="nt">color</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">slate</span>
</span></code></pre></div>
<p>Supported colors are: <code>slate</code>, <code>gray</code>, <code>zinc</code>, <code>neutral</code>, <code>stone</code>, <code>amber</code>, <code>yellow</code>, <code>lime</code>, <code>green</code>, <code>emerald</code>, <code>teal</code>, <code>cyan</code>, <code>sky</code>, <code>blue</code>, <code>indigo</code>, <code>violet</code>, <code>purple</code>, <code>fuchsia</code>, <code>pink</code>, <code>rose</code>, <code>red</code>, <code>white</code></p>
<h2 id="layout">Layout</h2>
<p>You can configure service and bookmarks sections to be either "column" or "row" based layouts, like so:</p>
<p>Assuming you have a group named <code>Media</code> in your <code>services.yaml</code> or <code>bookmarks.yaml</code> file,</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-10-1"><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a><span class="nt">layout</span><span class="p">:</span>
</span><span id="__span-10-2"><a id="__codelineno-10-2" name="__codelineno-10-2" href="#__codelineno-10-2"></a><span class="w"> </span><span class="nt">Media</span><span class="p">:</span>
</span><span id="__span-10-3"><a id="__codelineno-10-3" name="__codelineno-10-3" href="#__codelineno-10-3"></a><span class="w"> </span><span class="nt">style</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">row</span>
</span><span id="__span-10-4"><a id="__codelineno-10-4" name="__codelineno-10-4" href="#__codelineno-10-4"></a><span class="w"> </span><span class="nt">columns</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">4</span>
</span></code></pre></div>
<p>As an example, this would produce the following layout:</p>
<p><img width="1260" alt="Screenshot 2022-09-15 at 8 03 57 PM" src="https://user-images.githubusercontent.com/82196/190466646-8ca94505-0fcf-4964-9687-3a6c7cd3144f.png"></p>
<h3 id="sorting">Sorting</h3>
<p>Service groups and bookmark groups can be mixed in order, <strong>but should use different group names</strong>. If you do not specify any bookmark groups they will all show at the bottom of the page.</p>
<p><strong><em>Using the same name for a service and bookmark group can cause unexpected behavior like a bookmark group being hidden</em></strong></p>
<p>Groups will sort based on the order in the layout block. You can also mix in groups defined by docker labels, e.g.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-11-1"><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a><span class="nt">layout</span><span class="p">:</span>
</span><span id="__span-11-2"><a id="__codelineno-11-2" name="__codelineno-11-2" href="#__codelineno-11-2"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Auto-Discovered1</span><span class="p">:</span>
</span><span id="__span-11-3"><a id="__codelineno-11-3" name="__codelineno-11-3" href="#__codelineno-11-3"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Configured1</span><span class="p">:</span>
</span><span id="__span-11-4"><a id="__codelineno-11-4" name="__codelineno-11-4" href="#__codelineno-11-4"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Configured2</span><span class="p">:</span>
</span><span id="__span-11-5"><a id="__codelineno-11-5" name="__codelineno-11-5" href="#__codelineno-11-5"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Auto-Discovered2</span><span class="p">:</span>
</span><span id="__span-11-6"><a id="__codelineno-11-6" name="__codelineno-11-6" href="#__codelineno-11-6"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Configured3</span><span class="p">:</span>
</span><span id="__span-11-7"><a id="__codelineno-11-7" name="__codelineno-11-7" href="#__codelineno-11-7"></a><span class="w"> </span><span class="nt">style</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">row</span>
</span><span id="__span-11-8"><a id="__codelineno-11-8" name="__codelineno-11-8" href="#__codelineno-11-8"></a><span class="w"> </span><span class="nt">columns</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">3</span>
</span></code></pre></div>
<h3 id="headers">Headers</h3>
<p>You can hide headers for each section in the layout as well by passing <code>header</code> as false, like so:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-12-1"><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a><span class="nt">layout</span><span class="p">:</span>
</span><span id="__span-12-2"><a id="__codelineno-12-2" name="__codelineno-12-2" href="#__codelineno-12-2"></a><span class="w"> </span><span class="nt">Section A</span><span class="p">:</span>
</span><span id="__span-12-3"><a id="__codelineno-12-3" name="__codelineno-12-3" href="#__codelineno-12-3"></a><span class="w"> </span><span class="nt">header</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">false</span>
</span><span id="__span-12-4"><a id="__codelineno-12-4" name="__codelineno-12-4" href="#__codelineno-12-4"></a><span class="w"> </span><span class="nt">Section B</span><span class="p">:</span>
</span><span id="__span-12-5"><a id="__codelineno-12-5" name="__codelineno-12-5" href="#__codelineno-12-5"></a><span class="w"> </span><span class="nt">style</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">row</span>
</span><span id="__span-12-6"><a id="__codelineno-12-6" name="__codelineno-12-6" href="#__codelineno-12-6"></a><span class="w"> </span><span class="nt">columns</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">3</span>
</span><span id="__span-12-7"><a id="__codelineno-12-7" name="__codelineno-12-7" href="#__codelineno-12-7"></a><span class="w"> </span><span class="nt">header</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">false</span>
</span></code></pre></div>
<h3 id="category-icons">Category Icons</h3>
<p>You can also add an icon to a category under the <code>layout</code> setting similar to the <a href="../services/#icons">options for service icons</a>, e.g.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-13-1"><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a><span class="w"> </span><span class="nt">Home Management &amp; Info</span><span class="p">:</span>
</span><span id="__span-13-2"><a id="__codelineno-13-2" name="__codelineno-13-2" href="#__codelineno-13-2"></a><span class="w"> </span><span class="nt">icon</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">home-assistant.png</span>
</span><span id="__span-13-3"><a id="__codelineno-13-3" name="__codelineno-13-3" href="#__codelineno-13-3"></a><span class="w"> </span><span class="nt">Server Tools</span><span class="p">:</span>
</span><span id="__span-13-4"><a id="__codelineno-13-4" name="__codelineno-13-4" href="#__codelineno-13-4"></a><span class="w"> </span><span class="nt">icon</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">https://cdn-icons-png.flaticon.com/512/252/252035.png</span>
</span><span id="__span-13-5"><a id="__codelineno-13-5" name="__codelineno-13-5" href="#__codelineno-13-5"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">...</span>
</span></code></pre></div>
<h3 id="icon-style">Icon Style</h3>
<p>The default style for icons (e.g. <code>icon: mdi-XXXX</code>) is a gradient, or you can specify that prefixed icons match your theme with a 'flat' style using the setting below.
More information about prefixed icons can be found in <a href="../services/#icons">options for service icons</a>.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-14-1"><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a><span class="nt">iconStyle</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">theme</span><span class="w"> </span><span class="c1"># optional, defaults to gradient</span>
</span></code></pre></div>
<h3 id="tabs">Tabs</h3>
<p>Version 0.6.30 introduced a tabbed view to layouts which can be optionally specified in the layout. Tabs is only active if you set the <code>tab</code> field on at least one layout group.</p>
<p>Tabs are sorted based on the order in the layout block. If a group has no tab specified (and tabs are set on other groups), services and bookmarks will be shown on all tabs.</p>
<p>Every tab can be accessed directly by visiting Homepage URL with <code>#Group</code> (name lowercase and URI-encoded) at the end of the URL.</p>
<p>For example, the following would create four tabs:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-15-1"><a id="__codelineno-15-1" name="__codelineno-15-1" href="#__codelineno-15-1"></a><span class="nt">layout</span><span class="p">:</span>
</span><span id="__span-15-2"><a id="__codelineno-15-2" name="__codelineno-15-2" href="#__codelineno-15-2"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">...</span>
</span><span id="__span-15-3"><a id="__codelineno-15-3" name="__codelineno-15-3" href="#__codelineno-15-3"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Bookmark Group on First Tab</span><span class="p p-Indicator">:</span>
</span><span id="__span-15-4"><a id="__codelineno-15-4" name="__codelineno-15-4" href="#__codelineno-15-4"></a><span class="w"> </span><span class="nt">tab</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">First</span>
</span><span id="__span-15-5"><a id="__codelineno-15-5" name="__codelineno-15-5" href="#__codelineno-15-5"></a>
</span><span id="__span-15-6"><a id="__codelineno-15-6" name="__codelineno-15-6" href="#__codelineno-15-6"></a><span class="w"> </span><span class="nt">First Service Group</span><span class="p">:</span>
</span><span id="__span-15-7"><a id="__codelineno-15-7" name="__codelineno-15-7" href="#__codelineno-15-7"></a><span class="w"> </span><span class="nt">tab</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">First</span>
</span><span id="__span-15-8"><a id="__codelineno-15-8" name="__codelineno-15-8" href="#__codelineno-15-8"></a><span class="w"> </span><span class="nt">style</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">row</span>
</span><span id="__span-15-9"><a id="__codelineno-15-9" name="__codelineno-15-9" href="#__codelineno-15-9"></a><span class="w"> </span><span class="nt">columns</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">4</span>
</span><span id="__span-15-10"><a id="__codelineno-15-10" name="__codelineno-15-10" href="#__codelineno-15-10"></a>
</span><span id="__span-15-11"><a id="__codelineno-15-11" name="__codelineno-15-11" href="#__codelineno-15-11"></a><span class="w"> </span><span class="nt">Second Service Group</span><span class="p">:</span>
</span><span id="__span-15-12"><a id="__codelineno-15-12" name="__codelineno-15-12" href="#__codelineno-15-12"></a><span class="w"> </span><span class="nt">tab</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Second</span>
</span><span id="__span-15-13"><a id="__codelineno-15-13" name="__codelineno-15-13" href="#__codelineno-15-13"></a><span class="w"> </span><span class="nt">columns</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">4</span>
</span><span id="__span-15-14"><a id="__codelineno-15-14" name="__codelineno-15-14" href="#__codelineno-15-14"></a>
</span><span id="__span-15-15"><a id="__codelineno-15-15" name="__codelineno-15-15" href="#__codelineno-15-15"></a><span class="w"> </span><span class="nt">Third Service Group</span><span class="p">:</span>
</span><span id="__span-15-16"><a id="__codelineno-15-16" name="__codelineno-15-16" href="#__codelineno-15-16"></a><span class="w"> </span><span class="nt">tab</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Third</span>
</span><span id="__span-15-17"><a id="__codelineno-15-17" name="__codelineno-15-17" href="#__codelineno-15-17"></a><span class="w"> </span><span class="nt">style</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">row</span>
</span><span id="__span-15-18"><a id="__codelineno-15-18" name="__codelineno-15-18" href="#__codelineno-15-18"></a>
</span><span id="__span-15-19"><a id="__codelineno-15-19" name="__codelineno-15-19" href="#__codelineno-15-19"></a><span class="w"> </span><span class="nt">Bookmark Group on Fourth Tab</span><span class="p">:</span>
</span><span id="__span-15-20"><a id="__codelineno-15-20" name="__codelineno-15-20" href="#__codelineno-15-20"></a><span class="w"> </span><span class="nt">tab</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Fourth</span>
</span><span id="__span-15-21"><a id="__codelineno-15-21" name="__codelineno-15-21" href="#__codelineno-15-21"></a>
</span><span id="__span-15-22"><a id="__codelineno-15-22" name="__codelineno-15-22" href="#__codelineno-15-22"></a><span class="w"> </span><span class="nt">Service Group on every Tab</span><span class="p">:</span>
</span><span id="__span-15-23"><a id="__codelineno-15-23" name="__codelineno-15-23" href="#__codelineno-15-23"></a><span class="w"> </span><span class="nt">style</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">row</span>
</span><span id="__span-15-24"><a id="__codelineno-15-24" name="__codelineno-15-24" href="#__codelineno-15-24"></a><span class="w"> </span><span class="nt">columns</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">4</span>
</span></code></pre></div>
<h3 id="five-columns">Five Columns</h3>
<p>You can add a fifth column to services (when <code>style: columns</code> which is default) by adding:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-16-1"><a id="__codelineno-16-1" name="__codelineno-16-1" href="#__codelineno-16-1"></a><span class="nt">fiveColumns</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<p>By default homepage will max out at 4 columns for services with <code>columns</code> style</p>
<h3 id="collapsible-sections">Collapsible sections</h3>
<p>You can disable the collapsible feature of services &amp; bookmarks by adding:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-17-1"><a id="__codelineno-17-1" name="__codelineno-17-1" href="#__codelineno-17-1"></a><span class="nt">disableCollapse</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<p>By default the feature is enabled.</p>
<h3 id="initially-collapsed-sections">Initially collapsed sections</h3>
<p>You can initially collapse sections by adding the <code>initiallyCollapsed</code> option to the layout group.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-18-1"><a id="__codelineno-18-1" name="__codelineno-18-1" href="#__codelineno-18-1"></a><span class="nt">layout</span><span class="p">:</span>
</span><span id="__span-18-2"><a id="__codelineno-18-2" name="__codelineno-18-2" href="#__codelineno-18-2"></a><span class="w"> </span><span class="nt">Section A</span><span class="p">:</span>
</span><span id="__span-18-3"><a id="__codelineno-18-3" name="__codelineno-18-3" href="#__codelineno-18-3"></a><span class="w"> </span><span class="nt">initiallyCollapsed</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<p>This can also be set globaly using the <code>groupsInitiallyCollapsed</code> option.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-19-1"><a id="__codelineno-19-1" name="__codelineno-19-1" href="#__codelineno-19-1"></a><span class="nt">groupsInitiallyCollapsed</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<p>The value set on a group will overwrite the global setting.</p>
<p>By default the feature is disabled.</p>
<h3 id="use-equal-height-cards">Use Equal Height Cards</h3>
<p>You can enable equal height cards for groups of services, this will make all cards in a row the same height.</p>
<p>Global setting in <code>settings.yaml</code>:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-20-1"><a id="__codelineno-20-1" name="__codelineno-20-1" href="#__codelineno-20-1"></a><span class="nt">useEqualHeights</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<p>Per layout group in <code>settings.yaml</code>:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-21-1"><a id="__codelineno-21-1" name="__codelineno-21-1" href="#__codelineno-21-1"></a><span class="nt">useEqualHeights</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">false</span>
</span><span id="__span-21-2"><a id="__codelineno-21-2" name="__codelineno-21-2" href="#__codelineno-21-2"></a><span class="nt">layout</span><span class="p">:</span>
</span><span id="__span-21-3"><a id="__codelineno-21-3" name="__codelineno-21-3" href="#__codelineno-21-3"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">...</span>
</span><span id="__span-21-4"><a id="__codelineno-21-4" name="__codelineno-21-4" href="#__codelineno-21-4"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Group Name</span><span class="p p-Indicator">:</span>
</span><span id="__span-21-5"><a id="__codelineno-21-5" name="__codelineno-21-5" href="#__codelineno-21-5"></a><span class="w"> </span><span class="nt">useEqualHeights</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span><span class="w"> </span><span class="c1"># overrides global setting</span>
</span></code></pre></div>
<p>By default the feature is disabled</p>
<h2 id="header-style">Header Style</h2>
<p>There are currently 4 options for header styles, you can see each one below.</p>
<p><img width="1000" alt="underlined" src="https://user-images.githubusercontent.com/82196/194725622-39ce271c-34e5-414d-be53-62d221811f88.png"></p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-22-1"><a id="__codelineno-22-1" name="__codelineno-22-1" href="#__codelineno-22-1"></a><span class="nt">headerStyle</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">underlined</span><span class="w"> </span><span class="c1"># default style</span>
</span></code></pre></div>
<hr />
<p><img width="1000" alt="boxed" src="https://user-images.githubusercontent.com/82196/194725645-abcb8ed9-d017-416f-9e74-cc5642fa982c.png"></p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-23-1"><a id="__codelineno-23-1" name="__codelineno-23-1" href="#__codelineno-23-1"></a><span class="nt">headerStyle</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">boxed</span>
</span></code></pre></div>
<hr />
<p><img width="1000" alt="clean" src="https://user-images.githubusercontent.com/82196/194725650-7a86e818-172d-4d0f-9861-5eae7fecb50a.png"></p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-24-1"><a id="__codelineno-24-1" name="__codelineno-24-1" href="#__codelineno-24-1"></a><span class="nt">headerStyle</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">clean</span>
</span></code></pre></div>
<hr />
<p><img width="1000" alt="boxedWidgets" src="https://user-images.githubusercontent.com/5442891/232258758-ed5262d6-f940-462c-b39e-00e54c19b9ce.png"></p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-25-1"><a id="__codelineno-25-1" name="__codelineno-25-1" href="#__codelineno-25-1"></a><span class="nt">headerStyle</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">boxedWidgets</span>
</span></code></pre></div>
<h2 id="base-url">Base URL</h2>
<p>In some proxy configurations, it may be necessary to set the documents base URL. You can do this by providing a <code>base</code> value, like so:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-26-1"><a id="__codelineno-26-1" name="__codelineno-26-1" href="#__codelineno-26-1"></a><span class="nt">base</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">http://host.local/homepage</span>
</span></code></pre></div>
<p><strong><em>The URL must be a full, absolute URL, or it will be ignored by the browser.</em></strong></p>
<h2 id="language">Language</h2>
<p>Set your desired language using:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-27-1"><a id="__codelineno-27-1" name="__codelineno-27-1" href="#__codelineno-27-1"></a><span class="nt">language</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">fr</span>
</span></code></pre></div>
<p>Currently supported languages: ca, de, en, es, fr, he, hr, hu, it, nb-NO, nl, pt, ru, sv, vi, zh-CN, zh-Hant</p>
<p>You can also specify locales e.g. for the DateTime widget, e.g. en-AU, en-GB, etc.</p>
<h2 id="link-target">Link Target</h2>
<p>Changes the behaviour of links on the homepage,</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-28-1"><a id="__codelineno-28-1" name="__codelineno-28-1" href="#__codelineno-28-1"></a><span class="nt">target</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">_blank</span><span class="w"> </span><span class="c1"># Possible options include _blank, _self, and _top</span>
</span></code></pre></div>
<p>Use <code>_blank</code> to open links in a new tab, <code>_self</code> to open links in the same tab, and <code>_top</code> to open links in a new window.</p>
<p>This can also be set for individual services. Note setting this at the service level overrides any setting in settings.json, e.g.:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-29-1"><a id="__codelineno-29-1" name="__codelineno-29-1" href="#__codelineno-29-1"></a><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Example Service</span><span class="p">:</span>
</span><span id="__span-29-2"><a id="__codelineno-29-2" name="__codelineno-29-2" href="#__codelineno-29-2"></a><span class="w"> </span><span class="nt">href</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">https://example.com/</span>
</span><span id="__span-29-3"><a id="__codelineno-29-3" name="__codelineno-29-3" href="#__codelineno-29-3"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">...</span>
</span><span id="__span-29-4"><a id="__codelineno-29-4" name="__codelineno-29-4" href="#__codelineno-29-4"></a><span class="w"> </span><span class="nt">target</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">_self</span>
</span></code></pre></div>
<h2 id="providers">Providers</h2>
<p>The <code>providers</code> section allows you to define shared API provider options and secrets. Currently this allows you to define your weather API keys in secret and is also the location of the Longhorn URL and credentials.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-30-1"><a id="__codelineno-30-1" name="__codelineno-30-1" href="#__codelineno-30-1"></a><span class="nt">providers</span><span class="p">:</span>
</span><span id="__span-30-2"><a id="__codelineno-30-2" name="__codelineno-30-2" href="#__codelineno-30-2"></a><span class="w"> </span><span class="nt">openweathermap</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">openweathermapapikey</span>
</span><span id="__span-30-3"><a id="__codelineno-30-3" name="__codelineno-30-3" href="#__codelineno-30-3"></a><span class="w"> </span><span class="nt">weatherapi</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weatherapiapikey</span>
</span><span id="__span-30-4"><a id="__codelineno-30-4" name="__codelineno-30-4" href="#__codelineno-30-4"></a><span class="w"> </span><span class="nt">longhorn</span><span class="p">:</span>
</span><span id="__span-30-5"><a id="__codelineno-30-5" name="__codelineno-30-5" href="#__codelineno-30-5"></a><span class="w"> </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">https://longhorn.example.com</span>
</span><span id="__span-30-6"><a id="__codelineno-30-6" name="__codelineno-30-6" href="#__codelineno-30-6"></a><span class="w"> </span><span class="nt">username</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">admin</span>
</span><span id="__span-30-7"><a id="__codelineno-30-7" name="__codelineno-30-7" href="#__codelineno-30-7"></a><span class="w"> </span><span class="nt">password</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">LonghornPassword</span>
</span></code></pre></div>
<p>You can then pass <code>provider</code> instead of <code>apiKey</code> in your widget configuration.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-31-1"><a id="__codelineno-31-1" name="__codelineno-31-1" href="#__codelineno-31-1"></a><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">weather</span><span class="p">:</span>
</span><span id="__span-31-2"><a id="__codelineno-31-2" name="__codelineno-31-2" href="#__codelineno-31-2"></a><span class="w"> </span><span class="nt">latitude</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">50.449684</span>
</span><span id="__span-31-3"><a id="__codelineno-31-3" name="__codelineno-31-3" href="#__codelineno-31-3"></a><span class="w"> </span><span class="nt">longitude</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">30.525026</span>
</span><span id="__span-31-4"><a id="__codelineno-31-4" name="__codelineno-31-4" href="#__codelineno-31-4"></a><span class="w"> </span><span class="nt">provider</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">weatherapi</span>
</span></code></pre></div>
<h2 id="quick-launch">Quick Launch</h2>
<p>You can use the 'Quick Launch' feature to search services, perform a web search or open a URL. To use Quick Launch, just start typing while on your homepage (as long as the search widget doesn't have focus).</p>
<p><img width="1000" alt="quicklaunch" src="https://user-images.githubusercontent.com/4887959/216880811-90ff72cb-2990-4475-889b-7c3a31e6beef.png"></p>
<p>There are a few optional settings for the Quick Launch feature:</p>
<ul>
<li><code>searchDescriptions</code>: which lets you control whether item descriptions are included in searches. This is off by default. When enabled, results that match the item name will be placed above those that only match the description.</li>
<li><code>hideInternetSearch</code>: disable automatically including the currently-selected web search (e.g. from the widget) as a Quick Launch option. This is false by default, enabling the feature.</li>
<li><code>showSearchSuggestions</code>: shows search suggestions for the internet search. This value will be inherited from the search widget if it is not specified. If it is not specified there either, it will default to false.</li>
<li><code>hideVisitURL</code>: disable detecting and offering an option to open URLs. This is false by default, enabling the feature.</li>
</ul>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-32-1"><a id="__codelineno-32-1" name="__codelineno-32-1" href="#__codelineno-32-1"></a><span class="nt">quicklaunch</span><span class="p">:</span>
</span><span id="__span-32-2"><a id="__codelineno-32-2" name="__codelineno-32-2" href="#__codelineno-32-2"></a><span class="w"> </span><span class="nt">searchDescriptions</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span><span id="__span-32-3"><a id="__codelineno-32-3" name="__codelineno-32-3" href="#__codelineno-32-3"></a><span class="w"> </span><span class="nt">hideInternetSearch</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span><span id="__span-32-4"><a id="__codelineno-32-4" name="__codelineno-32-4" href="#__codelineno-32-4"></a><span class="w"> </span><span class="nt">showSearchSuggestions</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span><span id="__span-32-5"><a id="__codelineno-32-5" name="__codelineno-32-5" href="#__codelineno-32-5"></a><span class="w"> </span><span class="nt">hideVisitURL</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<h2 id="homepage-version">Homepage Version</h2>
<p>By default the release version is displayed at the bottom of the page. To hide this, use the <code>hideVersion</code> setting, like so:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-33-1"><a id="__codelineno-33-1" name="__codelineno-33-1" href="#__codelineno-33-1"></a><span class="nt">hideVersion</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<h2 id="log-path">Log Path</h2>
<p>By default the homepage logfile is written to the a <code>logs</code> subdirectory of the <code>config</code> folder. In order to customize this path, you can set the <code>logpath</code> setting. A <code>logs</code> folder will be created in that location where the logfile will be written.</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-34-1"><a id="__codelineno-34-1" name="__codelineno-34-1" href="#__codelineno-34-1"></a><span class="nt">logpath</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">/logfile/path</span>
</span></code></pre></div>
<p>By default, logs are sent both to <code>stdout</code> and to a file at the path specified. This can be changed by setting the <code>LOG_TARGETS</code> environment variable to one of <code>both</code> (default), <code>stdout</code> or <code>file</code>.</p>
<h2 id="show-docker-stats">Show Docker Stats</h2>
<p>You can show all docker stats expanded in <code>settings.yaml</code>:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-35-1"><a id="__codelineno-35-1" name="__codelineno-35-1" href="#__codelineno-35-1"></a><span class="nt">showStats</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<p>or per-service (<code>services.yaml</code>) with:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-36-1"><a id="__codelineno-36-1" name="__codelineno-36-1" href="#__codelineno-36-1"></a><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Example Service</span><span class="p">:</span>
</span><span id="__span-36-2"><a id="__codelineno-36-2" name="__codelineno-36-2" href="#__codelineno-36-2"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">...</span>
</span><span id="__span-36-3"><a id="__codelineno-36-3" name="__codelineno-36-3" href="#__codelineno-36-3"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">showStats</span><span class="p p-Indicator">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<p>If you have both set the per-service settings take precedence.</p>
<h2 id="status-style">Status Style</h2>
<p>You can choose from the following styles for docker or k8s status, site monitor and ping: <code>dot</code> or <code>basic</code></p>
<ul>
<li>The default is no value, and displays the monitor and ping response time in ms and the docker / k8s container status</li>
<li><code>dot</code> shows a green dot for a successful monitor ping or healthy status.</li>
<li><code>basic</code> shows either UP or DOWN for monitor &amp; ping</li>
</ul>
<p>For example:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-37-1"><a id="__codelineno-37-1" name="__codelineno-37-1" href="#__codelineno-37-1"></a><span class="nt">statusStyle</span><span class="p">:</span><span class="w"> </span><span class="s">&quot;dot&quot;</span>
</span></code></pre></div>
<p>or per-service (<code>services.yaml</code>) with:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-38-1"><a id="__codelineno-38-1" name="__codelineno-38-1" href="#__codelineno-38-1"></a><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Example Service</span><span class="p">:</span>
</span><span id="__span-38-2"><a id="__codelineno-38-2" name="__codelineno-38-2" href="#__codelineno-38-2"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">...</span>
</span><span id="__span-38-3"><a id="__codelineno-38-3" name="__codelineno-38-3" href="#__codelineno-38-3"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">statusStyle</span><span class="p p-Indicator">:</span><span class="w"> </span><span class="s">&#39;dot&#39;</span>
</span></code></pre></div>
<p>If you have both set, the per-service settings take precedence.</p>
<h2 id="instance-name">Instance Name</h2>
<p>Name used by automatic docker service discovery to differentiate between multiple homepage instances.</p>
<p>For example:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-39-1"><a id="__codelineno-39-1" name="__codelineno-39-1" href="#__codelineno-39-1"></a><span class="nt">instanceName</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">public</span>
</span></code></pre></div>
<h2 id="hide-widget-error-messages">Hide Widget Error Messages</h2>
<p>Hide the visible API error messages either globally in <code>settings.yaml</code>:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-40-1"><a id="__codelineno-40-1" name="__codelineno-40-1" href="#__codelineno-40-1"></a><span class="nt">hideErrors</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<p>or per service widget (<code>services.yaml</code>) with:</p>
<div class="language-yaml highlight"><pre><span></span><code><span id="__span-41-1"><a id="__codelineno-41-1" name="__codelineno-41-1" href="#__codelineno-41-1"></a><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">Example Service</span><span class="p">:</span>
</span><span id="__span-41-2"><a id="__codelineno-41-2" name="__codelineno-41-2" href="#__codelineno-41-2"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">...</span>
</span><span id="__span-41-3"><a id="__codelineno-41-3" name="__codelineno-41-3" href="#__codelineno-41-3"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">widget</span><span class="p p-Indicator">:</span>
</span><span id="__span-41-4"><a id="__codelineno-41-4" name="__codelineno-41-4" href="#__codelineno-41-4"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">...</span>
</span><span id="__span-41-5"><a id="__codelineno-41-5" name="__codelineno-41-5" href="#__codelineno-41-5"></a><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">hideErrors</span><span class="p p-Indicator">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">true</span>
</span></code></pre></div>
<p>If either value is set to true, the error message will be hidden.</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs Insiders
</a>
</div>
<div class="md-social">
<a href="https://discord.gg/k4ruYNrudu" target="_blank" rel="noopener" title="discord.gg" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91 337.461 337.461 0 0 0-14.9 30.6 447.848 447.848 0 0 0-134.426 0 309.541 309.541 0 0 0-15.135-30.6 1.89 1.89 0 0 0-1.924-.91 483.689 483.689 0 0 0-119.688 37.107 1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375 487.666 487.666 0 0 0 146.825 74.189 1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588 321.173 321.173 0 0 1-45.868-21.853 1.885 1.885 0 0 1-.185-3.126 251.047 251.047 0 0 0 9.109-7.137 1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233 234.533 234.533 0 0 0 9.132 7.16 1.884 1.884 0 0 1-.162 3.126 301.407 301.407 0 0 1-45.89 21.83 1.875 1.875 0 0 0-1 2.611 391.055 391.055 0 0 0 30.014 48.815 1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541ZM222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239 0 32.654-23.41 59.241-52.843 59.241Zm195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239 0 32.654-23.177 59.241-52.844 59.241Z"/></svg>
</a>
<a href="https://github.com/gethomepage/homepage/discussions" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h96zm48 124-.2.2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3v-80H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0h384c35.3 0 64 28.7 64 64v288c0 35.3-28.7 64-64 64H309.3L208 492z"/></svg>
</a>
<a href="https://github.com/gethomepage/homepage" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.instant", "content.action.edit", "search.suggest", "search.share", "content.code.copy", "content.code.select", "navigation.tracking", "navigation.tabs", "navigation.sections", "navigation.indexes"], "search": "../../assets/javascripts/workers/search.1e90e0fb.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
<script src="../../assets/javascripts/bundle.8e8db93a.min.js"></script>
<script src="../../scripts/extra.js"></script>
</body>
</html>