themes.html 12 KB

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