Buto: Новая страница: «'''Персональное оформление''' — функциональность движка MediaWiki, позволяющая любому зарегистрированному участнику автоматически подключать себе собственные JavaScript- и CSS-файлы. Эти файлы являются подстраницами участника с...»

2026-10-14T17:38:07Z

Новая страница: «'''Персональное оформление''' — функциональность движка MediaWiki, позволяющая любому зарегистрированному участнику автоматически подключать себе собственные JavaScript- и CSS-файлы. Эти файлы являются подстраницами участника с...»

Новая страница

'''Персональное оформление''' — функциональность движка [[MediaWiki]], позволяющая любому зарегистрированному участнику автоматически подключать себе собственные [[JavaScript]]- и [[Каскадные таблицы стилей|CSS]]-файлы.

Эти файлы являются подстраницами участника со специальными названиями, ссылки на них есть [[Служебная:Preferences#preftab-1|в ваших настройках]]. Редактировать эти страницы может только сам участник и администраторы интерфейса сайта.

MediaWiki автоматически подключает эти файлы в HTML-код страницы после системных JavaScript- и CSS-файлов, выбранных участником гаджетов и глобального кода проекта. При этом общий файл [[Special:MyPage/common.css|common.css]] подключается всегда, а остальные файлы — в зависимости от выбранной темы оформления.

Если по ссылке ещё нет отдельной страницы, её просто следует создать обычным порядком (переходом по «Создать страницу» или «Править»).

# Основная страница оформления (работает для всех тем сайта):
#* [[Special:MyPage/common.css]]
# Страницы для оформления конкретных тем (скинов):
#* [[Special:MyPage/vector-2022.css]] — для темы Vector 2022
#* [[Special:MyPage/vector.css]] — для темы Vector (устаревшая версия)
#* [[Special:MyPage/monobook.css]] — для темы MonoBook
#* [[Special:MyPage/minerva.css]] — для мобильной темы Minerva Neue
#* [[Special:MyPage/timeless.css]] — для темы Timeless

Незарегистрированные пользователи могут применять пользовательские стили, только добавляя нужный CSS-код в настройки своего браузера (через специальные расширения вроде Stylus).

Персональным скриптам посвящена [[Тептар:Персональные скрипты|отдельная страница]], ниже рассматривается создание и примеры только CSS-кода.

== Создание CSS ==
Для написания персональных стилей нужно хотя бы в общих чертах владеть языком [[Каскадные таблицы стилей|CSS]]. Каждое отдельное правило выглядит как:
<pre>
селектор,
селектор {
стиль;
стиль;
}</pre>
Селекторы описывают HTML-элементы страницы, их можно составить, посмотрев на HTML-код страницы (через Инструменты разработчика в браузере, клавиша F12). Примеры селекторов:
{|class="wikitable"
!HTML-код||CSS
|-
|<code><div id="copy2" …</code> || <code>div#copy2</code> или просто <code>#copy2</code>
|-
|<code><div class="hdr" …</code> || <code>div.hdr</code> или просто <code>.hdr</code>
|-
|<code><div class="parent"><div …</code> || <code>.parent div </code>, что означает «любой div внутри элемента с классом parent»
|}

Внутри CSS-кода можно оставлять пояснения, используя <code>/* комментарии */</code>.

== Скрытие элементов ==
«Прятать» отдельные элементы интерфейса можно с помощью правила <code>display: none;</code> (однако это не экономит ваш трафик: элементы по-прежнему загружаются с сервера, просто браузер их скрывает визуально).

Например, можно спрятать:
<syntaxhighlight lang=css>
/* блок в самом низу каждой страницы (футер) */
#footer,
/* предупреждения об авторских правах при редактировании */
#editpage-copywarn,
#editpage-copywarn2 {
display: none;
}
/* ссылку на настройки бета-функций в верхнем меню */
#pt-betafeatures {
display: none;
}
/* системные уведомления в списке наблюдения */
div.watchlist-msg {
display: none;
}
</syntaxhighlight>

== Оформление страниц ==

=== Выделение перенаправлений ===
Ссылки на перенаправления по умолчанию ничем не выделяются. В HTML-коде страницы они представлены как <code><a class="mw-redirect"></code>, поэтому их можно выделить, например, зелёным цветом:
<syntaxhighlight lang=css>
a.mw-redirect {
color: #308050 !important;
}
a.mw-redirect:visited {
color: #3070A0 !important;
}
</syntaxhighlight>

На спецстраницах «[[Special:Allpages|Все страницы]]» и «[[Special:PrefixIndex|Указатель по началу страницы]]», а также в категориях перенаправления можно дополнительно выделить серым цветом:
<syntaxhighlight lang=css>
.allpagesredirect a,
span.redirect-in-category a {
color: #444466 !important;
}
.allpagesredirect a:visited,
span.redirect-in-category a:visited {
color: #7A7AA5 !important;
}
</syntaxhighlight>

=== Выделение нужных интервик (языков) ===
Если в списке языков (интервик) в левом или правом меню вас обычно интересуют только один-два языка, которыми вы владеете, имеет смысл их выделить. Например, следующий код выделит жирным ссылки на английскую и русскую версии страницы:
<syntaxhighlight lang=css>
li.interwiki-en,
li.interwiki-ru {
font-weight: bold;
}
</syntaxhighlight>

=== Выделение реплик с отступом при помощи цвета фона ===
Полезный CSS-код, раскрашивающий реплики участников на страницах обсуждений и форумов в зависимости от отступа:
<syntaxhighlight lang=css>
.ns-talk dd,
.ns-4 dd {
margin: 0;
padding: 0;
}
.ns-talk dl,
.ns-4 dl {
border-top: solid 1px #F0F080;
border-left: solid 1px #F0F080;
padding-top: .5em;
padding-left: .5em;
margin-left: 1em;
}
.ns-talk dl,
.ns-4 dl,
.ns-talk dl dl dl,
.ns-4 dl dl dl,
.ns-talk dl dl dl dl dl,
.ns-4 dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl dl dl {
background: #F8FCF0;
}
.ns-talk dl dl,
.ns-4 dl dl,
.ns-talk dl dl dl dl,
.ns-4 dl dl dl dl,
.ns-talk dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl dl {
background: #F8FCFE;
}
</syntaxhighlight>
<br clear="all" />

=== Читаемость обсуждений ===
В пространствах обсуждений добавляет расстояние между двумя репликами, написанными через <code>:</code>.
<syntaxhighlight lang=css>
.ns-talk dd + dd,
.ns-4 dd + dd {
margin-top: 0.5em;
}
</syntaxhighlight>

=== Читаемость быстрой вставки ===
Немного раздвигает элементы панели быстрой вставки под редактором (если она у вас установлена), между символами становится быстрее ориентироваться:
<syntaxhighlight lang=css>
a.mw-charinsert-item {
padding: 0px 4px;
}
</syntaxhighlight>

=== Значки рядом с подписями участников ===
Код добавляет небольшую иконку человечка ко всем ссылкам на страницы участников:
<syntaxhighlight lang=css>
a[title*="Участник:"] {
background: url("https://upload.wikimedia.org/wikipedia/commons/1/1c/User.gif");
background-repeat: no-repeat;
padding-left: 1.5em;
}
</syntaxhighlight>

=== Разное ===
Уменьшить шрифт описаний правок в истории:
<syntaxhighlight lang=css>
.comment {
font-size: 90%;
}
</syntaxhighlight>

== Оформление интерфейса ==

=== Боковое меню внизу ===
Если в стандартной теме оформления Vector вы хотите использовать всю ширину окна браузера для содержания страниц, то логотип можно убрать, а все блоки меню слева перенести в самый низ страницы; код для [[Special:Mypage/vector.css|vector.css]]:
<syntaxhighlight lang=css>
/* Перенос сайдбара вниз в теме Vector */
#p-logo {
display: none !important;
}
#p-personal,
#content,
#footer {
margin-left: 0 !important;
}
#left-navigation {
left: 1.5em !important;
}
#mw-panel {
position: static !important;
width: 100% !important;
}
div.portal {
float:left !important;
background: none !important;
}
#footer {
clear: both !important;
}
</syntaxhighlight>

=== Оформление вкладок ===
В теме Vector можно выделить вкладку в самой верхней строке жирным шрифтом, если она является текущей открытой страницей:
<syntaxhighlight lang=css>
li.active {
font-weight: bold;
}
</syntaxhighlight>

=== Отступ справа ===
Добавляет небольшой отступ справа от текста статьи, чтобы он не прилипал к краю экрана на широких мониторах:
<syntaxhighlight lang=css>
.mw-body {
border-width: 1px 1px 1px 1px;
margin-right: 1em;
}
</syntaxhighlight>

=== Использование свободного пространства под редактором ===
Уберёт лишние отступы по краям в блоке под редактором кода:
<syntaxhighlight lang=css>
.editOptions {
padding: 0 0 0;
margin-bottom: 0;
}
.editCheckboxes {
margin-bottom: -5px;
}
</syntaxhighlight>

Показывает длинный список использованных шаблонов (внизу при редактировании) компактней, в два столбца:
<syntaxhighlight lang=css>
.templatesUsed {
column-count: 2;
}
</syntaxhighlight>

=== Перенос ссылки на редактирование раздела вправо ===
Если вы хотите перенести ссылки «[править | править код]» к правому краю страницы (напротив заголовков разделов):
<syntaxhighlight lang=css>
.mw-editsection {
float: right;
}
</syntaxhighlight>

== Служебные страницы ==

Движок MediaWiki автоматически добавляет системное название страницы как класс к тегу <code><body></code>. Благодаря этому можно создавать CSS-правила, работающие только на определённых служебных страницах.

=== Скрытие кнопки «откатить» ===
Для предотвращения случайных откатов правок при просмотре списка наблюдения и свежих правок (полезно при просмотре с мобильных устройств).
<syntaxhighlight lang=css>
/* спрятать ссылки [откатить] */
body.mw-special-Watchlist span.mw-rollback-link,
body.mw-special-Recentchanges span.mw-rollback-link {
display: none;
}
</syntaxhighlight>

=== Нумерация строк вклада ===
Делает списки на страницах журналов, вклада участника и свежих правок нумерованными (1, 2, 3... вместо обычных маркеров).
<syntaxhighlight lang=css>
body.mw-special-Contributions #content ul,
body.mw-special-Log #content ul,
body.mw-special-Recentchanges #content ul {
list-style-type: decimal !important;
list-style-image: none !important;
}
</syntaxhighlight>

=== Скрытие квадратиков меток в истории ===
Скрывает чекбоксы (флажки) массового редактирования меток на странице истории, освобождая место.
<syntaxhighlight lang=css>
.mw-history-editchangetags-button,
#pagehistory input[type=checkbox] {
display: none;
}
</syntaxhighlight>

=== Подсветка строк ===
Подсвечивает строку в истории страницы приятным цветом при наведении курсора мыши.
<syntaxhighlight lang=css>
ul.special > li:hover,
ul#pagehistory > li:hover {
background-color: lavender;
}
</syntaxhighlight>

=== Подсветка непатрулированных правок ===
Если на сайте включено патрулирование, этот код выделит кнопку проверки красным цветом и увеличит её, чтобы её было проще заметить.
<syntaxhighlight lang=css>
.mw-fr-reviewlink {
background-color: red;
font-size: 150%;
}
</syntaxhighlight>

== Замечания ==
* Файлы персонального оформления (как и скрипты) '''не работают''' на странице настроек из соображений безопасности движка.

== См. также ==
* [[Тептар:Персональные скрипты]]
* [[Тептар:Инструменты]]
* [[Тептар:Глобальный код]]

[[Категория:Тептар:Персональные настройки|Оформление]]

Тептар:Персональное оформление - История изменений