<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
	<title type="html"><![CDATA[Форум PHP-MyAdmin.RU &mdash; Небольшая кастомизация phpMyAdmin]]></title>
	<link rel="self" href="https://forum.php-myadmin.ru/extern.php?action=feed&amp;tid=4825&amp;type=atom" />
	<updated>2021-03-17T17:47:06Z</updated>
	<generator>PunBB</generator>
	<id>https://forum.php-myadmin.ru/viewtopic.php?id=4825</id>
		<entry>
			<title type="html"><![CDATA[Небольшая кастомизация phpMyAdmin]]></title>
			<link rel="alternate" href="https://forum.php-myadmin.ru/viewtopic.php?pid=28250#p28250" />
			<content type="html"><![CDATA[<p>Приветствую уважаемых пользователей phpMyAdmin!</p><p>Все мы прекрасно узнаем стандартный вид окна PMA выборки из таблицы:</p><p><a href="http://nikitos-i.ru/other/pma_forum/pma_01_1.png">http://nikitos-i.ru/other/pma_forum/pma_01_1.png</a></p><p>Внимательному взгляду будет заметно, что значительную часть строки с данными занимают кнопки с действиями &quot;изменить&quot;, &quot;копировать&quot;, &quot;удалить&quot;. Что в общем-то довольно неудобно и расточительно.</p><p>Хотя PMA в стандартной комплектации дает нам совсем немного возможностей для кастомизации, однако, как мы знаем, мы можем вовсе отключить эти кнопки </p><p><em>Для тех кто не знает - в корне PMA есть файл &quot;config.inc.php&quot;, а если его нет, то точно должен быть &quot;config.sample.inc.php&quot;, который надо скопировать или переименовать в &quot;config.inc.php&quot;.</em></p><p><em>В этом файле надо где-нибудь вставить строчку</em><br /></p><div class="codebox"><pre><code>$cfg[&#039;RowActionLinks&#039;] = false;</code></pre></div><p>Выглядит лучше<br /><a href="http://nikitos-i.ru/other/pma_forum/pma_01_2.png">http://nikitos-i.ru/other/pma_forum/pma_01_2.png</a></p><p>Но. Все-таки эти кнопочки бывают нужны, особенно галочка и кнопочка &quot;удалить&quot;. И тут опять мы можем воспользоваться родными настройками PMA и вместо &quot;RowActionsLinks&quot; поменять другой параметр в &quot;config.inc.php&quot; (точнее добавить строку, потому что в стандартном &quot;config.inc.php&quot; такой параметр отсутствует, насколько я знаю:<br /></p><div class="codebox"><pre><code>$cfg[&#039;RowActionType&#039;] = &#039;icons&#039;;</code></pre></div><p>Теперь есть кнопочки-иконки без текста<br /><a href="http://nikitos-i.ru/other/pma_forum/pma_01_3.png">http://nikitos-i.ru/other/pma_forum/pma_01_3.png</a></p><p>Места они стали занимать меньше, но все равно как-то много для таких небольших иконок. К тому же вместо того чтобы жаться к левому краю при любом размере окна браузера, они норовят расползаться вслед за шириной таблицы. Это не очень правильно. </p><p>И вот после многих лет бездумного взирания на это безобразие, я решил его поправить. И поделиться тут как это сделать. <br />Придется совсем немного покопаться в коде PMA, но совсем чуть-чуть. Сразу предупреждаю, что все исправления тестировались только на PMA версии 5.1.0.</p><p>Так как указанные кнопочки по умолчанию не имеют никакого специфического css-класса, нам надо его добавить. Кнопочки эти создаются в файле &quot;\templates\display\results\checkbox_and_links.twig&quot;. Просто добавляем наш класс (в данном случае &quot;n_chl_width&quot;, назовите как угодно) каждому тэгу &quot;&lt;td&gt;&quot; в этом файле - не ошибетесь. Например строку <br /></p><div class="codebox"><pre><code>&lt;td class=&quot;text-center print_ignore edit_row_anchor{{ not edit.clause_is_unique ? &#039; nonunique&#039; }}&quot;&gt;</code></pre></div><p>меняем на <br /></p><div class="codebox"><pre><code>&lt;td class=&quot;text-center print_ignore n_chl_width edit_row_anchor{{ not edit.clause_is_unique ? &#039; nonunique&#039; }}&quot;&gt;</code></pre></div><p>Класс мы добавили. Теперь его надо прописать где-нибудь в css-файле. Практически все стили PMA (ну кроме библиотечных) хранятся в файле &quot;\themes\pmahomme\css\theme.css&quot; (вместо &quot;pmahomme&quot; может быть название другой темы, видимо, если используется нестандартная). Но этот файл в версии 5.1 является скомпилированным из очень большого количества всяких scss, причем как PMA, так и сторонних. Разбираться из чего он там собран и собирать его заново, править какой-либо из стандартных scss или сам уже собранный &quot;theme.css&quot; мне показалось неправильным и излишним. Правильнее было бы сделать свой стилевой файл. Я назвал его немудрённо &quot;custom.css&quot; и положил в корень PMA. Осталось его подключить и ключи у нас в кармане. Сделаем это в файле &quot;\templates\header.twig&quot;, где подключаются все остальные стилевые файлы. Просто вставляем строчку после подключения &quot;printview.css&quot;:<br /></p><div class="codebox"><pre><code>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;{{ base_dir }}custom.css?{{ version }}&quot;&gt;</code></pre></div><p>Теперь мы можем настраивать довольно много всего, несмотря на то что PMA не любит добавлять специфические классы к различным элементам. Например, добавив в &quot;custom.css&quot; такой код:<br /></p><div class="codebox"><pre><code> .n_chl_width {
  width            : 18px;
  padding-left     : 0 !important;
  padding-right    : 0 !important;
}</code></pre></div><p>мы делаем наши кнопочки маленькими и со статическим размером в 18px:<br /><a href="http://nikitos-i.ru/other/pma_forum/pma_01_4.png">http://nikitos-i.ru/other/pma_forum/pma_01_4.png</a></p><p>Но для лучшего визуального выделения таблицы с данными на довольно плохо читаемом экране PMA я решил добавить вот такой код:<br /></p><div class="codebox"><pre><code> .n_chl_width {
  width            : 18px;
  padding-left     : 0 !important;
  padding-right    : 0 !important;
  background-color : #CCCCCC;
}
.table_results &gt; tbody &gt; tr &gt; td:nth-child(5) {
  border-left      : 2px solid black;
}
.table_results &gt; tbody &gt; tr &gt; td:last-child {
  border-right     : 2px solid black;
}
.table_results &gt; tbody &gt; tr:first-child &gt; td:nth-child(n+5) {
  border-top       : 2px solid black;
}
.table_results &gt; tbody &gt; tr:last-child &gt; td:nth-child(n+5) {
  border-bottom    : 2px solid black;
}
.table_results &gt; tbody &gt; tr &gt; td:nth-child(n+5):not(:last-child) {
  border-right     : 2px solid silver;
}</code></pre></div><p>И теперь наша табличка читается вполне приемлемо:<br /><a href="http://nikitos-i.ru/other/pma_forum/pma_01_5.png">http://nikitos-i.ru/other/pma_forum/pma_01_5.png</a></p><br /><p>При желании в &quot;custom.css&quot; теперь можно менять довольно много во внешнем виде PMA. А при необходимости всегда можно добавить специфические классы к нужным элементам в каком-нибудь twig в папке &quot;template&quot;.</p><p>Надеюсь, кому-нибудь будет полезна такая небольшая доделка PMA.</p><p>Всем хорошего настроения <img src="https://forum.php-myadmin.ru/img/smilies/smile.png" width="15" height="15" alt="smile" /></p><p>Nikitos I</p>]]></content>
			<author>
				<name><![CDATA[Nikitos I]]></name>
				<uri>https://forum.php-myadmin.ru/profile.php?id=11947</uri>
			</author>
			<updated>2021-03-17T17:47:06Z</updated>
			<id>https://forum.php-myadmin.ru/viewtopic.php?pid=28250#p28250</id>
		</entry>
</feed>
