1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Docutils 0.19: https://docutils.sourceforge.io/" />
<title>Custom Themes — phpMyAdmin 5.2.2 documentation</title>
<link rel="stylesheet" type="text/css" href="_static/pygments.css" />
<link rel="stylesheet" type="text/css" href="_static/classic.css" />
<script data-url_root="./" id="documentation_options" src="_static/documentation_options.js"></script>
<script src="_static/jquery.js"></script>
<script src="_static/underscore.js"></script>
<script src="_static/_sphinx_javascript_frameworks_compat.js"></script>
<script src="_static/doctools.js"></script>
<script src="_static/sphinx_highlight.js"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="copyright" title="Copyright" href="copyright.html" />
<link rel="next" title="Other sources of information" href="other.html" />
<link rel="prev" title="Import and export" href="import_export.html" />
</head><body>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="other.html" title="Other sources of information"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="import_export.html" title="Import and export"
accesskey="P">previous</a> |</li>
<li class="nav-item nav-item-0"><a href="index.html">phpMyAdmin 5.2.2 documentation</a> »</li>
<li class="nav-item nav-item-1"><a href="user.html" accesskey="U">User Guide</a> »</li>
<li class="nav-item nav-item-this"><a href="">Custom Themes</a></li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<section id="custom-themes">
<span id="themes"></span><h1>Custom Themes<a class="headerlink" href="#custom-themes" title="Permalink to this heading">¶</a></h1>
<p>phpMyAdmin comes with support for third party themes. You can download
additional themes from our website at <<a class="reference external" href="https://www.phpmyadmin.net/themes/">https://www.phpmyadmin.net/themes/</a>>.</p>
<section id="configuration">
<h2>Configuration<a class="headerlink" href="#configuration" title="Permalink to this heading">¶</a></h2>
<p>Themes are configured with <span class="target" id="index-0"></span><a class="reference internal" href="config.html#cfg_ThemeManager"><code class="xref config config-option docutils literal notranslate"><span class="pre">$cfg['ThemeManager']</span></code></a> and
<span class="target" id="index-1"></span><a class="reference internal" href="config.html#cfg_ThemeDefault"><code class="xref config config-option docutils literal notranslate"><span class="pre">$cfg['ThemeDefault']</span></code></a>. Under <code class="file docutils literal notranslate"><span class="pre">./themes/</span></code>, you should not
delete the directory <code class="docutils literal notranslate"><span class="pre">pmahomme</span></code> or its underlying structure, because this is
the system theme used by phpMyAdmin. <code class="docutils literal notranslate"><span class="pre">pmahomme</span></code> contains all images and
styles, for backwards compatibility and for all themes that would not include
images or css-files. If <span class="target" id="index-2"></span><a class="reference internal" href="config.html#cfg_ThemeManager"><code class="xref config config-option docutils literal notranslate"><span class="pre">$cfg['ThemeManager']</span></code></a> is enabled, you
can select your favorite theme on the main page. Your selected theme will be
stored in a cookie.</p>
</section>
<section id="creating-custom-theme">
<h2>Creating custom theme<a class="headerlink" href="#creating-custom-theme" title="Permalink to this heading">¶</a></h2>
<p>To create a theme:</p>
<ul class="simple">
<li><p>make a new subdirectory (for example “your_theme_name”) under <code class="file docutils literal notranslate"><span class="pre">./themes/</span></code>.</p></li>
<li><p>copy the files and directories from <code class="docutils literal notranslate"><span class="pre">pmahomme</span></code> to “your_theme_name”</p></li>
<li><p>edit the css-files in “your_theme_name/css”</p></li>
<li><p>put your new images in “your_theme_name/img”</p></li>
<li><p>edit <code class="file docutils literal notranslate"><span class="pre">_variables.scss</span></code> in “your_theme_name/scss”</p></li>
<li><p>edit <code class="file docutils literal notranslate"><span class="pre">theme.json</span></code> in “your_theme_name” to contain theme metadata (see below)</p></li>
<li><p>make a new screenshot of your theme and save it under
“your_theme_name/screen.png”</p></li>
</ul>
<section id="theme-metadata">
<h3>Theme metadata<a class="headerlink" href="#theme-metadata" title="Permalink to this heading">¶</a></h3>
<div class="versionchanged">
<p><span class="versionmodified changed">Changed in version 4.8.0: </span>Before 4.8.0 the theme metadata was passed in the <code class="file docutils literal notranslate"><span class="pre">info.inc.php</span></code> file.
It has been replaced by <code class="file docutils literal notranslate"><span class="pre">theme.json</span></code> to allow easier parsing (without
need to handle PHP code) and to support additional features.</p>
</div>
<p>In theme directory there is file <code class="file docutils literal notranslate"><span class="pre">theme.json</span></code> which contains theme
metadata. Currently it consists of:</p>
<dl class="describe">
<dt class="sig sig-object">
<span class="sig-name descname"><span class="pre">name</span></span></dt>
<dd><p>Display name of the theme.</p>
<p><strong>This field is required.</strong></p>
</dd></dl>
<dl class="describe">
<dt class="sig sig-object">
<span class="sig-name descname"><span class="pre">version</span></span></dt>
<dd><p>Theme version, can be quite arbitrary and does not have to match phpMyAdmin version.</p>
<p><strong>This field is required.</strong></p>
</dd></dl>
<dl class="describe">
<dt class="sig sig-object">
<span class="sig-name descname"><span class="pre">description</span></span></dt>
<dd><p>Theme description. this will be shown on the website.</p>
<p><strong>This field is required.</strong></p>
</dd></dl>
<dl class="describe">
<dt class="sig sig-object">
<span class="sig-name descname"><span class="pre">author</span></span></dt>
<dd><p>Theme author name.</p>
<p><strong>This field is required.</strong></p>
</dd></dl>
<dl class="describe">
<dt class="sig sig-object">
<span class="sig-name descname"><span class="pre">url</span></span></dt>
<dd><p>Link to theme author website. It’s good idea to have way for getting
support there.</p>
</dd></dl>
<dl class="describe">
<dt class="sig sig-object">
<span class="sig-name descname"><span class="pre">supports</span></span></dt>
<dd><p>Array of supported phpMyAdmin major versions.</p>
<p><strong>This field is required.</strong></p>
</dd></dl>
<p>For example, the definition for Original theme shipped with phpMyAdmin 4.8:</p>
<div class="highlight-json notranslate"><div class="highlight"><pre><span></span><span class="p">{</span>
<span class="w"> </span><span class="nt">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Original"</span><span class="p">,</span>
<span class="w"> </span><span class="nt">"version"</span><span class="p">:</span><span class="w"> </span><span class="s2">"4.8"</span><span class="p">,</span>
<span class="w"> </span><span class="nt">"description"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Original phpMyAdmin theme"</span><span class="p">,</span>
<span class="w"> </span><span class="nt">"author"</span><span class="p">:</span><span class="w"> </span><span class="s2">"phpMyAdmin developers"</span><span class="p">,</span>
<span class="w"> </span><span class="nt">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://www.phpmyadmin.net/"</span><span class="p">,</span>
<span class="w"> </span><span class="nt">"supports"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"4.8"</span><span class="p">]</span>
<span class="p">}</span>
</pre></div>
</div>
</section>
<section id="sharing-images">
<h3>Sharing images<a class="headerlink" href="#sharing-images" title="Permalink to this heading">¶</a></h3>
<p>If you do not want to use your own symbols and buttons, remove the
directory “img” in “your_theme_name”. phpMyAdmin will use the
default icons and buttons (from the system-theme <code class="docutils literal notranslate"><span class="pre">pmahomme</span></code>).</p>
</section>
</section>
</section>
<div class="clearer"></div>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<div>
<h3><a href="index.html">Table of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Custom Themes</a><ul>
<li><a class="reference internal" href="#configuration">Configuration</a></li>
<li><a class="reference internal" href="#creating-custom-theme">Creating custom theme</a><ul>
<li><a class="reference internal" href="#theme-metadata">Theme metadata</a></li>
<li><a class="reference internal" href="#sharing-images">Sharing images</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div>
<h4>Previous topic</h4>
<p class="topless"><a href="import_export.html"
title="previous chapter">Import and export</a></p>
</div>
<div>
<h4>Next topic</h4>
<p class="topless"><a href="other.html"
title="next chapter">Other sources of information</a></p>
</div>
<div role="note" aria-label="source link">
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="_sources/themes.rst.txt"
rel="nofollow">Show Source</a></li>
</ul>
</div>
<div id="searchbox" style="display: none" role="search">
<h3 id="searchlabel">Quick search</h3>
<div class="searchformwrapper">
<form class="search" action="search.html" method="get">
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
<input type="submit" value="Go" />
</form>
</div>
</div>
<script>document.getElementById('searchbox').style.display = "block"</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="other.html" title="Other sources of information"
>next</a> |</li>
<li class="right" >
<a href="import_export.html" title="Import and export"
>previous</a> |</li>
<li class="nav-item nav-item-0"><a href="index.html">phpMyAdmin 5.2.2 documentation</a> »</li>
<li class="nav-item nav-item-1"><a href="user.html" >User Guide</a> »</li>
<li class="nav-item nav-item-this"><a href="">Custom Themes</a></li>
</ul>
</div>
<div class="footer" role="contentinfo">
© <a href="copyright.html">Copyright</a> 2012 - 2024, The phpMyAdmin devel team.
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 5.3.0.
</div>
</body>
</html>
|
