AnarchistGamers/Unciv
1
0
Fork 0
mirror of https://github.com/yairm210/Unciv.git synced 2025-09-23 03:23:17 -04:00
Code Issues Packages Projects Releases Wiki Activity
Unciv/Modders/Creating-a-UI-skin/index.html

2566 lines
65 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="canonical" href="https://yairm210.github.io/Unciv/Modders/Creating-a-UI-skin/">
<link rel="prev" href="../Creating-a-custom-tileset/">
<link rel="next" href="../Unique-parameters/">
<link rel="icon" href="../../assets/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.20">
<title>Creating a UI skin - Unciv</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.e53b48f4.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.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>
<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="teal" data-md-color-accent="amber">
<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="#creating-a-ui-skin" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="Unciv" class="md-header__button md-logo" aria-label="Unciv" data-md-component="logo">
<img src="../../assets/Icon.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 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></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">
Unciv
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Creating a UI skin
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="teal" data-md-color-accent="amber" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7M9 21a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1H9z"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="teal" data-md-color-accent="amber" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7M9 21v-1h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1m3-17a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var 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(var[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.52 6.52 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 5"/></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.52 6.52 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 5"/></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 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<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 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" 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/yairm210/unciv" 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 512 512"><!--! Font Awesome Free 7.0.0 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 2025 Fonticons, Inc.--><path d="M173.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.6m-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.3m44.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.9M252.8 8C114.1 8 8 113.3 8 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.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.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-1m-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.7m32.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-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
yairm210/unciv
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<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" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="Unciv" class="md-nav__button md-logo" aria-label="Unciv" data-md-component="logo">
<img src="../../assets/Icon.png" alt="logo">
</a>
Unciv
</label>
<div class="md-nav__source">
<a href="https://github.com/yairm210/unciv" 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 512 512"><!--! Font Awesome Free 7.0.0 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 2025 Fonticons, Inc.--><path d="M173.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.6m-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.3m44.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.9M252.8 8C114.1 8 8 113.3 8 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.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.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-1m-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.7m32.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-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
yairm210/unciv
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Welcome to Unciv!
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Credits/" class="md-nav__link">
<span class="md-ellipsis">
Credits
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Guiding-Principles/" class="md-nav__link">
<span class="md-ellipsis">
Guiding Principles
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Privacy-Policy/" class="md-nav__link">
<span class="md-ellipsis">
Privacy Policy
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
Developers
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Developers
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../Developers/Building-Locally/" class="md-nav__link">
<span class="md-ellipsis">
Building Locally
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/Coding-standards/" class="md-nav__link">
<span class="md-ellipsis">
Coding standards
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/From-code-to-deployment/" class="md-nav__link">
<span class="md-ellipsis">
From code to deployment
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/Game-Making-Tips/" class="md-nav__link">
<span class="md-ellipsis">
Game Making Tips
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/Map-rendering/" class="md-nav__link">
<span class="md-ellipsis">
Map rendering
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/Project-structure-and-major-classes/" class="md-nav__link">
<span class="md-ellipsis">
Project structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/Saved-games-and-transients/" class="md-nav__link">
<span class="md-ellipsis">
Saved games and transients
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/Testing-Android-Builds/" class="md-nav__link">
<span class="md-ellipsis">
Building for and testing on Android
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/Translations%2C-mods%2C-and-modding-freedom-in-Open-Source/" class="md-nav__link">
<span class="md-ellipsis">
Translations, mods, and modding freedom in Open Source
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/UI-development/" class="md-nav__link">
<span class="md-ellipsis">
UI Development
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/Unique-replacement-process/" class="md-nav__link">
<span class="md-ellipsis">
Unique replacement process
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Developers/Uniques/" class="md-nav__link">
<span class="md-ellipsis">
Uniques
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" checked>
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Modders
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Modders
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../Mods/" class="md-nav__link">
<span class="md-ellipsis">
Introduction to Mods
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Making-a-new-Civilization/" class="md-nav__link">
<span class="md-ellipsis">
'My first mod' - Making a new Civilization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Images-and-Audio/" class="md-nav__link">
<span class="md-ellipsis">
Images and Audio
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_4" >
<label class="md-nav__link" for="__nav_6_4" id="__nav_6_4_label" tabindex="0">
<span class="md-ellipsis">
Mod file structure
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_4">
<span class="md-nav__icon md-icon"></span>
Mod file structure
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../Mod-file-structure/1-Overview/" class="md-nav__link">
<span class="md-ellipsis">
Mod file structure Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Mod-file-structure/2-Civilization-related-JSON-files/" class="md-nav__link">
<span class="md-ellipsis">
Civilization-related JSON files
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Mod-file-structure/3-Map-related-JSON-files/" class="md-nav__link">
<span class="md-ellipsis">
Map-related JSON files
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Mod-file-structure/4-Unit-related-JSON-files/" class="md-nav__link">
<span class="md-ellipsis">
Unit-related JSON files
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Mod-file-structure/5-Miscellaneous-JSON-files/" class="md-nav__link">
<span class="md-ellipsis">
Miscellaneous JSON files
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_5" checked>
<label class="md-nav__link" for="__nav_6_5" id="__nav_6_5_label" tabindex="0">
<span class="md-ellipsis">
Special Mods
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_5_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6_5">
<span class="md-nav__icon md-icon"></span>
Special Mods
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../Creating-a-custom-tileset/" class="md-nav__link">
<span class="md-ellipsis">
Creating a custom tileset
</span>
</a>
</li>
<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">
Creating a UI skin
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Creating a UI skin
</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="#limitations" class="md-nav__link">
<span class="md-ellipsis">
Limitations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#available-ui-elements" class="md-nav__link">
<span class="md-ellipsis">
Available UI elements
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#skinconfig" class="md-nav__link">
<span class="md-ellipsis">
SkinConfig
</span>
</a>
<nav class="md-nav" aria-label="SkinConfig">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basecolor" class="md-nav__link">
<span class="md-ellipsis">
baseColor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fallbackskin" class="md-nav__link">
<span class="md-ellipsis">
fallbackSkin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#defaultvarianttint" class="md-nav__link">
<span class="md-ellipsis">
defaultVariantTint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#skinvariants" class="md-nav__link">
<span class="md-ellipsis">
skinVariants
</span>
</a>
<nav class="md-nav" aria-label="skinVariants">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#image" class="md-nav__link">
<span class="md-ellipsis">
image
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#tint" class="md-nav__link">
<span class="md-ellipsis">
tint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#alpha" class="md-nav__link">
<span class="md-ellipsis">
alpha
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#foregroundcolor" class="md-nav__link">
<span class="md-ellipsis">
foregroundColor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#iconcolor" class="md-nav__link">
<span class="md-ellipsis">
iconColor
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../Unique-parameters/" class="md-nav__link">
<span class="md-ellipsis">
Unique parameters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../uniques/" class="md-nav__link">
<span class="md-ellipsis">
Uniques
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Type-checking/" class="md-nav__link">
<span class="md-ellipsis">
Type checking
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Scenarios/" class="md-nav__link">
<span class="md-ellipsis">
Scenarios
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Autoupdates/" class="md-nav__link">
<span class="md-ellipsis">
Autoupdates
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
<span class="md-ellipsis">
Other
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
Other
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../Other/Force-rating-calculation/" class="md-nav__link">
<span class="md-ellipsis">
Force rating calculation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Installing-on-macOS/" class="md-nav__link">
<span class="md-ellipsis">
Installing on MacOS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Intentional-departures-from-Civ-V/" class="md-nav__link">
<span class="md-ellipsis">
Intentional departures from Civ V
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Multiplayer/" class="md-nav__link">
<span class="md-ellipsis">
Multiplayer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Regions/" class="md-nav__link">
<span class="md-ellipsis">
Regions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Simulations/" class="md-nav__link">
<span class="md-ellipsis">
Simulations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Translating/" class="md-nav__link">
<span class="md-ellipsis">
Translating
</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="#limitations" class="md-nav__link">
<span class="md-ellipsis">
Limitations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#available-ui-elements" class="md-nav__link">
<span class="md-ellipsis">
Available UI elements
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#skinconfig" class="md-nav__link">
<span class="md-ellipsis">
SkinConfig
</span>
</a>
<nav class="md-nav" aria-label="SkinConfig">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basecolor" class="md-nav__link">
<span class="md-ellipsis">
baseColor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fallbackskin" class="md-nav__link">
<span class="md-ellipsis">
fallbackSkin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#defaultvarianttint" class="md-nav__link">
<span class="md-ellipsis">
defaultVariantTint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#skinvariants" class="md-nav__link">
<span class="md-ellipsis">
skinVariants
</span>
</a>
<nav class="md-nav" aria-label="skinVariants">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#image" class="md-nav__link">
<span class="md-ellipsis">
image
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#tint" class="md-nav__link">
<span class="md-ellipsis">
tint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#alpha" class="md-nav__link">
<span class="md-ellipsis">
alpha
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#foregroundcolor" class="md-nav__link">
<span class="md-ellipsis">
foregroundColor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#iconcolor" class="md-nav__link">
<span class="md-ellipsis">
iconColor
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="creating-a-ui-skin">Creating a UI skin</h1>
<p><strong>You should read the <a href="../Mods/">Mods</a> page first before proceeding</strong></p>
<p>In order to add a UI skin mod (yes, UI skins are just another type of mod), all you need to do is add your images under <code>Images/Skins/MyCoolSkinExample</code> and enable the mod as a permanent visual mod.</p>
<p>The game will then recognize the skin, and allow you to pick it in the options menu.</p>
<p>Just like <a href="../Creating-a-custom-tileset/">tilesets</a>, UI skins can be used to alter the appearance of Unciv. Please note that UI skins do not support custom icons and fonts and not every UI element can be customized yet too.</p>
<p>We use so called 9.png (or Ninepatch) files for every skin image because UI elements need a way to be resized based on game window size and resolution. Ninepatch files can be created manually by adding black pixels around your custom images in a specific manner or by using <a href="https://developer.android.com/studio/write/draw9patch">Android Studio's Draw 9-patch tool</a> or <a href="https://romannurik.github.io/AndroidAssetStudio/nine-patches.html">this tool by romannurik</a> for example. You may also check if your favorite image creation tool supports nine patches itself to generate them more easily.</p>
<p>A skin image can either be gray scale and later be colored in game by modifying the <code>tint</code> in the <a href="./#tint">skinConfig</a> or be colored directly in the image. When coloring the image directly it is important to set the tint of the UI element to white. Please note that tileable ninepatches and ninepatches with multiple stretch areas are not supported because of technical restrictions by libgdx.</p>
<p>There are 6 basic shapes which can be placed inside the <code>Images/Skins/MyCoolSkinExample</code> folder:
- checkbox
- checkbox-pressed
- rectangleWithOutline
- roundedEdgeRectangle
- select-box
- select-box-pressed</p>
<p>These shapes are used all over Unciv and can be replaced to make a lot of UI elements change appearance at once. To change just one specific element use the <a href="#available-ui-elements">table</a> below to create an image at the specified directory using the specified name inside <code>Images/Skins/MyCoolSkinExample</code>. See the image below for an example file structure. <img alt="skinExample" src="https://user-images.githubusercontent.com/24532072/198904598-0d298035-5b02-431b-bfb4-7da4b9c821c9.png" /></p>
<h2 id="limitations">Limitations</h2>
<ul>
<li>UI elements which change color because they have multiple states can not be given multiple colors based on their state using tint</li>
<li>When coloring the image directly, setting the tint of the UI element to white overwrites these states</li>
<li>Tileable ninepatches and ninepatches with multiple stretch areas are not supported because of technical restrictions by libgdx</li>
</ul>
<h2 id="available-ui-elements">Available UI elements</h2>
<!--- We should add an image to every identifier so its easier for modders to know which UI elements are which -->
<!--- The following table is auto generated and should not be modified manually. If you want to change it see UiElementDocsWriter.kt -->
<!--- DO NOT REMOVE OR MODIFY THIS LINE UI_ELEMENT_TABLE_REGION -->
<table>
<thead>
<tr>
<th>Directory</th>
<th style="text-align: center;">Name</th>
<th style="text-align: center;">Default shape</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>AnimatedMenu/</td>
<td style="text-align: center;">Button</td>
<td style="text-align: center;">roundedEdgeRectangleMid</td>
<td></td>
</tr>
<tr>
<td>CityScreen/</td>
<td style="text-align: center;">CityPickerTable</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CitizenManagementTable/</td>
<td style="text-align: center;">AvoidCell</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CitizenManagementTable/</td>
<td style="text-align: center;">FocusCell</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CitizenManagementTable/</td>
<td style="text-align: center;">ResetCell</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityConstructionTable/</td>
<td style="text-align: center;">AvailableConstructionsTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityConstructionTable/</td>
<td style="text-align: center;">ConstructionsQueueTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityConstructionTable/</td>
<td style="text-align: center;">Header</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityConstructionTable/</td>
<td style="text-align: center;">PickConstructionButton</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityConstructionTable/</td>
<td style="text-align: center;">PickConstructionButtonSelected</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityConstructionTable/</td>
<td style="text-align: center;">QueueEntry</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityConstructionTable/</td>
<td style="text-align: center;">QueueEntrySelected</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityScreenTileTable/</td>
<td style="text-align: center;">Background</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityScreenTileTable/</td>
<td style="text-align: center;">InnerTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityStatsTable/</td>
<td style="text-align: center;">Background</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/CityStatsTable/</td>
<td style="text-align: center;">InnerTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/ConstructionInfoTable/</td>
<td style="text-align: center;">Background</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CityScreen/ConstructionInfoTable/</td>
<td style="text-align: center;">SelectedConstructionTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>CivilopediaScreen/</td>
<td style="text-align: center;">EntryButton</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>DiplomacyScreen/</td>
<td style="text-align: center;">LeftSide</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>DiplomacyScreen/</td>
<td style="text-align: center;">RightSide</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>DiplomacyScreen/</td>
<td style="text-align: center;">SelectedCiv</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>General/</td>
<td style="text-align: center;">AnimatedMenu</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>General/</td>
<td style="text-align: center;">Border</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>General/</td>
<td style="text-align: center;">DisabledBox</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>General/</td>
<td style="text-align: center;">ExpanderTab</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>General/</td>
<td style="text-align: center;">HealthBar</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>General/</td>
<td style="text-align: center;">KeyCapturingButton</td>
<td style="text-align: center;">roundedEdgeRectangleSmall</td>
<td></td>
</tr>
<tr>
<td>General/</td>
<td style="text-align: center;">TabbedPager</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>General/</td>
<td style="text-align: center;">Tooltip</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>General/Popup/</td>
<td style="text-align: center;">Background</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>General/Popup/</td>
<td style="text-align: center;">InnerTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>LanguagePickerScreen/</td>
<td style="text-align: center;">LanguageTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>LoadGameScreen/</td>
<td style="text-align: center;">BottomTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>LoadGameScreen/</td>
<td style="text-align: center;">TopTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>MainMenuScreen/</td>
<td style="text-align: center;">Background</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>MainMenuScreen/</td>
<td style="text-align: center;">MenuButton</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>MainMenuScreen/</td>
<td style="text-align: center;">Version</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>MapEditor/MapEditorToolsDrawer/</td>
<td style="text-align: center;">Handle</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>ModManagementOptions/</td>
<td style="text-align: center;">ExpanderTab</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>ModManagementScreen/</td>
<td style="text-align: center;">BottomTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>ModManagementScreen/</td>
<td style="text-align: center;">TopTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>MultiplayerScreen/</td>
<td style="text-align: center;">BottomTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>MultiplayerScreen/</td>
<td style="text-align: center;">TopTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/</td>
<td style="text-align: center;">BottomTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/</td>
<td style="text-align: center;">GameOptionsTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/</td>
<td style="text-align: center;">MapOptionsTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/</td>
<td style="text-align: center;">PlayerPickerTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/</td>
<td style="text-align: center;">TopTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/NationTable/</td>
<td style="text-align: center;">Background</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/NationTable/</td>
<td style="text-align: center;">BorderTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/NationTable/</td>
<td style="text-align: center;">RightInnerTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/NationTable/</td>
<td style="text-align: center;">Title</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>NewGameScreen/PlayerPickerTable/</td>
<td style="text-align: center;">PlayerTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>OverviewScreen/DiplomacyOverviewTab/</td>
<td style="text-align: center;">CivTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>OverviewScreen/NotificationOverviewTable/</td>
<td style="text-align: center;">Notification</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>OverviewScreen/ReligionOverviewTab/</td>
<td style="text-align: center;">BeliefDescription</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>OverviewScreen/TradesOverviewTab/</td>
<td style="text-align: center;">OffersTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>OverviewScreen/UnitOverviewTab/</td>
<td style="text-align: center;">UnitSupplyTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>PlayerReadyScreen/</td>
<td style="text-align: center;">Background</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/</td>
<td style="text-align: center;">PolicyBranchAdoptButton</td>
<td style="text-align: center;">roundedEdgeRectangleSmall</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/</td>
<td style="text-align: center;">PolicyBranchAdoptButtonBorder</td>
<td style="text-align: center;">roundedEdgeRectangleSmall</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/</td>
<td style="text-align: center;">PolicyBranchBackground</td>
<td style="text-align: center;">rectangleWithOutline</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/</td>
<td style="text-align: center;">PolicyBranchBackgroundBorder</td>
<td style="text-align: center;">rectangleWithOutline</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/</td>
<td style="text-align: center;">PolicyBranchHeader</td>
<td style="text-align: center;">rectangleWithOutline</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/</td>
<td style="text-align: center;">PolicyBranchHeaderBorder</td>
<td style="text-align: center;">rectangleWithOutline</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">BranchBGAdopted</td>
<td style="text-align: center;">50,45,5</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">BranchBGCompleted</td>
<td style="text-align: center;">255,205,0</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">BranchBGNotAdopted</td>
<td style="text-align: center;">5,45,65</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">BranchHeaderBG</td>
<td style="text-align: center;">47,90,92</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">BranchLabelAdopted</td>
<td style="text-align: center;">150,70,40</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">BranchLabelNotPickable</td>
<td style="text-align: center;">0xffffff7f</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">BranchLabelPickable</td>
<td style="text-align: center;">WHITE</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonBGAdopted</td>
<td style="text-align: center;">1,17,19</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonBGAdoptedSelected</td>
<td style="text-align: center;">1,17,19</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonBGNotPickable</td>
<td style="text-align: center;">20,20,20</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonBGNotPickableSelected</td>
<td style="text-align: center;">20,20,20</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonBGPickable</td>
<td style="text-align: center;">32,46,64</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonBGPickableSelected</td>
<td style="text-align: center;">37,87,82</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonIconAdopted</td>
<td style="text-align: center;">GOLD</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonIconAdoptedSelected</td>
<td style="text-align: center;">GOLD</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonIconNotPickable</td>
<td style="text-align: center;">0xffffff33</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonIconNotPickableSelected</td>
<td style="text-align: center;">0xffffff33</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonIconPickable</td>
<td style="text-align: center;">WHITE</td>
<td></td>
</tr>
<tr>
<td>PolicyScreen/Colors/</td>
<td style="text-align: center;">ButtonIconPickableSelected</td>
<td style="text-align: center;">WHITE</td>
<td></td>
</tr>
<tr>
<td>PromotionScreen/</td>
<td style="text-align: center;">PromotionButton</td>
<td style="text-align: center;">roundedEdgeRectangleMid</td>
<td></td>
</tr>
<tr>
<td>PromotionScreen/</td>
<td style="text-align: center;">PromotionButtonBorder</td>
<td style="text-align: center;">roundedEdgeRectangleMidBorder</td>
<td></td>
</tr>
<tr>
<td>TechPickerScreen/</td>
<td style="text-align: center;">Background</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>TechPickerScreen/</td>
<td style="text-align: center;">BottomTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>TechPickerScreen/</td>
<td style="text-align: center;">CurrentTechColor</td>
<td style="text-align: center;">72, 147, 175</td>
<td></td>
</tr>
<tr>
<td>TechPickerScreen/</td>
<td style="text-align: center;">QueuedTechColor</td>
<td style="text-align: center;">7<em>2, 46</em>2, 43*2</td>
<td></td>
</tr>
<tr>
<td>TechPickerScreen/</td>
<td style="text-align: center;">ResearchableTechColor</td>
<td style="text-align: center;">28, 170, 0</td>
<td></td>
</tr>
<tr>
<td>TechPickerScreen/</td>
<td style="text-align: center;">ResearchedFutureTechColor</td>
<td style="text-align: center;">127, 50, 0</td>
<td></td>
</tr>
<tr>
<td>TechPickerScreen/</td>
<td style="text-align: center;">ResearchedTechColor</td>
<td style="text-align: center;">255, 215, 0</td>
<td></td>
</tr>
<tr>
<td>TechPickerScreen/</td>
<td style="text-align: center;">TechButtonIconsOutline</td>
<td style="text-align: center;">roundedEdgeRectangleSmall</td>
<td></td>
</tr>
<tr>
<td>VictoryScreen/</td>
<td style="text-align: center;">CivGroup</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/</td>
<td style="text-align: center;">AirUnitTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/</td>
<td style="text-align: center;">BattleTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/</td>
<td style="text-align: center;">Notification</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/</td>
<td style="text-align: center;">PickTechButton</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/</td>
<td style="text-align: center;">TileInfoTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/</td>
<td style="text-align: center;">TutorialTaskTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/</td>
<td style="text-align: center;">UnitTable</td>
<td style="text-align: center;">roundedEdgeRectangleMid</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/CityButton/</td>
<td style="text-align: center;">AirUnitTable</td>
<td style="text-align: center;">roundedEdgeRectangleSmall</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/CityButton/</td>
<td style="text-align: center;">AirUnitTableBorder</td>
<td style="text-align: center;">roundedEdgeRectangleSmall</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/CityButton/</td>
<td style="text-align: center;">DefenceTable</td>
<td style="text-align: center;">roundedTopEdgeRectangleSmall</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/CityButton/</td>
<td style="text-align: center;">DefenceTableBorder</td>
<td style="text-align: center;">roundedTopEdgeRectangleSmallBorder</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/CityButton/</td>
<td style="text-align: center;">IconTable</td>
<td style="text-align: center;">roundedEdgeRectangleMid</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/CityButton/</td>
<td style="text-align: center;">IconTableBorder</td>
<td style="text-align: center;">roundedEdgeRectangleMidBorder</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/CityButton/</td>
<td style="text-align: center;">InfluenceBar</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/Minimap/</td>
<td style="text-align: center;">Background</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/Minimap/</td>
<td style="text-align: center;">Border</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/NextTurn/</td>
<td style="text-align: center;">ProgressBar</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/NextTurn/</td>
<td style="text-align: center;">ProgressColor</td>
<td style="text-align: center;">FOREST</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/TopBar/</td>
<td style="text-align: center;">LeftAttachment</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/TopBar/</td>
<td style="text-align: center;">ResourceTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/TopBar/</td>
<td style="text-align: center;">RightAttachment</td>
<td style="text-align: center;">roundedEdgeRectangle</td>
<td></td>
</tr>
<tr>
<td>WorldScreen/TopBar/</td>
<td style="text-align: center;">StatsTable</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreenMusicPopup/TrackList/</td>
<td style="text-align: center;">Down</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreenMusicPopup/TrackList/</td>
<td style="text-align: center;">Over</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
<tr>
<td>WorldScreenMusicPopup/TrackList/</td>
<td style="text-align: center;">Up</td>
<td style="text-align: center;">null</td>
<td></td>
</tr>
</tbody>
</table>
<!--- DO NOT REMOVE OR MODIFY THIS LINE UI_ELEMENT_TABLE_REGION_END -->
<h2 id="skinconfig">SkinConfig</h2>
<p>The skinConfig is similar to the <a href="../Creating-a-custom-tileset/#tileset-config">tilesetConfig</a> and can be used to define different colors and shapes for unciv to use.</p>
<p>To create a config for your skin you just need to create a new .json file under <code>jsons/Skins/</code>. Just create a .txt file and rename it to MyCoolSkinExample.json. You only have to add things if you want to change them. Else the default values will be used.</p>
<p>This is an example of such a config file that will be explain below:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;baseColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="nt">&quot;r&quot;</span><span class="p">:</span><span class="mi">1</span><span class="p">,</span><span class="nt">&quot;g&quot;</span><span class="p">:</span><span class="mi">0</span><span class="p">,</span><span class="nt">&quot;b&quot;</span><span class="p">:</span><span class="mi">0</span><span class="p">,</span><span class="nt">&quot;a&quot;</span><span class="p">:</span><span class="mi">1</span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;defaultVariantTint&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="nt">&quot;r&quot;</span><span class="p">:</span><span class="mi">1</span><span class="p">,</span><span class="nt">&quot;g&quot;</span><span class="p">:</span><span class="mi">1</span><span class="p">,</span><span class="nt">&quot;b&quot;</span><span class="p">:</span><span class="mi">1</span><span class="p">,</span><span class="nt">&quot;a&quot;</span><span class="p">:</span><span class="mi">1</span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;skinVariants&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;MainMenuScreen/MenuButton&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;image&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MyCoolNewDesign&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;foregroundColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="nt">&quot;r&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;g&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;b&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;a&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;iconColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="nt">&quot;r&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;g&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;b&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;a&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">}</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;TechPickerScreen/TechButton&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;image&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MyCoolNewDesign&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;alpha&quot;</span><span class="p">:</span><span class="w"> </span><span class="mf">0.7</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;WorldScreen/TopBar/ResourceTable&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;alpha&quot;</span><span class="p">:</span><span class="w"> </span><span class="mf">0.8</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;WorldScreen/UnitTable&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;tint&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="nt">&quot;r&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;g&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;b&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;image&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;WorldScreen/TopBar/ResourceTable&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;alpha&quot;</span><span class="p">:</span><span class="w"> </span><span class="mf">0.4</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;WorldScreen/Minimap/Background&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;tint&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="nt">&quot;r&quot;</span><span class="p">:</span><span class="w"> </span><span class="mf">0.2</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;g&quot;</span><span class="p">:</span><span class="w"> </span><span class="mf">0.4</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;b&quot;</span><span class="p">:</span><span class="w"> </span><span class="mf">0.45</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;a&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">}</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="basecolor">baseColor</h3>
<p>A color defined with normalized RGBA values. Default value: <code>{"r": 0, "g": 0.251, "b": 0.522, "a": 0.749}</code></p>
<p>Defines the color unciv uses in most ui elements as default</p>
<h3 id="fallbackskin">fallbackSkin</h3>
<p>A string. Default value: "Minimal".</p>
<p>The name of another skin to use as a fallback if an image is not found or not specified in this skin.
Set to null to disable fallback.</p>
<h3 id="defaultvarianttint">defaultVariantTint</h3>
<p>A color defined with normalized RGBA values. Default value: null</p>
<p>The tint all skinVariants should use if not explicitly specified in a skinVariant.
If you mostly use colored images set this to white (<code>{"r": 1, "g": 1, "b": 1, "a": 1}</code>) to get
the correct colors.</p>
<h3 id="skinvariants">skinVariants</h3>
<p>A dictionary mapping string to a SkinElement. Default value: empty</p>
<p>These variants can be used to define a different image, tint and/or alpha for a specified UI element. The string used to identify the UI element can be taken from the <a href="./#Available-UI-elements">table</a> above by appending the name to the directory.
<div class="highlight"><pre><span></span><code>| Directory | Name |
|-----------------------|---------------|
| WorldScreen/ | Notification | -&gt; WorldScreen/Notification
| WorldScreen/TopBar/ | StatsTable | -&gt; WorldScreen/TopBar/StatsTable
</code></pre></div></p>
<h4 id="image">image</h4>
<p>A path to an image. The file is expected to be located alongside the 6 basic shapes inside the <code>Images/Skins/MyCoolSkinExample</code> folder if just a name like <code>MyCoolNewDesign</code> is given. The image path can also be another ui element like <code>WorldScreen/TopBar/ResourceTable</code> so images can be reused by other elements.</p>
<h4 id="tint">tint</h4>
<p>A color defined with normalized RGBA values. Default value: null</p>
<p>The tint this UI element should get. Is applied as a tint on top of the image. This means that if the
image is colored and the tint is not white the tint color will merge with the image color and not override it.</p>
<h4 id="alpha">alpha</h4>
<p>A float value. Default value: null</p>
<p>The alpha this UI element should have. Overwrites the alpha value of tint if specified.</p>
<h3 id="foregroundcolor">foregroundColor</h3>
<p>A color defined with normalized RGBA values. Default value: null</p>
<p>The color this UI element should use for its font and icons. To color icon and font differently use
the <code>iconColor</code> in addition to this.</p>
<h3 id="iconcolor">iconColor</h3>
<p>A color defined with normalized RGBA values. Default value: null</p>
<p>The color this UI element should use for its icons. Overrides the <code>foregroundColor</code> for icons if specified.</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
</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": [], "search": "../../assets/javascripts/workers/search.973d3a69.min.js", "tags": null, "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": null}</script>
<script src="../../assets/javascripts/bundle.f55a23d4.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink