Тептар:Персональное оформление

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

Эти файлы являются подстраницами участника со специальными названиями, ссылки на них есть в ваших настройках. Редактировать эти страницы может только сам участник и администраторы интерфейса сайта.

MediaWiki автоматически подключает эти файлы в HTML-код страницы после системных JavaScript- и 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. Каждое отдельное правило выглядит как:

селектор,
селектор {
	стиль;
	стиль;
}

Селекторы описывают HTML-элементы страницы, их можно составить, посмотрев на HTML-код страницы (через Инструменты разработчика в браузере, клавиша F12). Примеры селекторов:

HTML-код	CSS
`<div id="copy2" …`	`div#copy2` или просто `#copy2`
`<div class="hdr" …`	`div.hdr` или просто `.hdr`
`<div class="parent"><div …`	`.parent div` , что означает «любой div внутри элемента с классом parent»

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

Скрытие элементов

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

Например, можно спрятать:

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

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

Выделение перенаправлений

Ссылки на перенаправления по умолчанию ничем не выделяются. В HTML-коде страницы они представлены как <a class="mw-redirect">, поэтому их можно выделить, например, зелёным цветом:

a.mw-redirect {
	color: #308050 !important;
}
a.mw-redirect:visited {
	color: #3070A0 !important;
}

На спецстраницах «Все страницы» и «Указатель по началу страницы», а также в категориях перенаправления можно дополнительно выделить серым цветом:

.allpagesredirect a,
span.redirect-in-category a {
	color: #444466 !important;
}
.allpagesredirect a:visited,
span.redirect-in-category a:visited  {
	color: #7A7AA5 !important;
}

Выделение нужных интервик (языков)

Если в списке языков (интервик) в левом или правом меню вас обычно интересуют только один-два языка, которыми вы владеете, имеет смысл их выделить. Например, следующий код выделит жирным ссылки на английскую и русскую версии страницы:

li.interwiki-en,
li.interwiki-ru {
	font-weight: bold;
}

Выделение реплик с отступом при помощи цвета фона

Полезный 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;
}

Читаемость обсуждений

В пространствах обсуждений добавляет расстояние между двумя репликами, написанными через :.

.ns-talk dd + dd,
.ns-4 dd + dd {
	margin-top: 0.5em;
}

Читаемость быстрой вставки

Немного раздвигает элементы панели быстрой вставки под редактором (если она у вас установлена), между символами становится быстрее ориентироваться:

a.mw-charinsert-item {
	padding: 0px 4px;
}

Значки рядом с подписями участников

Код добавляет небольшую иконку человечка ко всем ссылкам на страницы участников:

a[title*="Участник:"] {
	background: url("https://upload.wikimedia.org/wikipedia/commons/1/1c/User.gif");
	background-repeat: no-repeat;
	padding-left: 1.5em;
}

Разное

Уменьшить шрифт описаний правок в истории:

.comment {
	font-size: 90%;
}

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

Боковое меню внизу

Если в стандартной теме оформления Vector вы хотите использовать всю ширину окна браузера для содержания страниц, то логотип можно убрать, а все блоки меню слева перенести в самый низ страницы; код для vector.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;
}

Оформление вкладок

В теме Vector можно выделить вкладку в самой верхней строке жирным шрифтом, если она является текущей открытой страницей:

li.active {
	font-weight: bold;
}

Отступ справа

Добавляет небольшой отступ справа от текста статьи, чтобы он не прилипал к краю экрана на широких мониторах:

.mw-body {
	border-width: 1px 1px 1px 1px;
	margin-right: 1em;
}

Использование свободного пространства под редактором

Уберёт лишние отступы по краям в блоке под редактором кода:

.editOptions {
	padding: 0 0 0;
	margin-bottom: 0;
}
.editCheckboxes {
	margin-bottom: -5px;
}

Показывает длинный список использованных шаблонов (внизу при редактировании) компактней, в два столбца:

.templatesUsed {
    column-count: 2;
}

Перенос ссылки на редактирование раздела вправо

Если вы хотите перенести ссылки «[править | править код]» к правому краю страницы (напротив заголовков разделов):

.mw-editsection {
	float: right;
}

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

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

Скрытие кнопки «откатить»

Для предотвращения случайных откатов правок при просмотре списка наблюдения и свежих правок (полезно при просмотре с мобильных устройств).

/* спрятать ссылки [откатить] */
body.mw-special-Watchlist span.mw-rollback-link,
body.mw-special-Recentchanges span.mw-rollback-link {
	display: none;
}

Нумерация строк вклада

Делает списки на страницах журналов, вклада участника и свежих правок нумерованными (1, 2, 3... вместо обычных маркеров).

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;
}

Скрытие квадратиков меток в истории

Скрывает чекбоксы (флажки) массового редактирования меток на странице истории, освобождая место.

.mw-history-editchangetags-button,
#pagehistory input[type=checkbox] {
	display: none;
}

Подсветка строк

Подсвечивает строку в истории страницы приятным цветом при наведении курсора мыши.

ul.special > li:hover,
ul#pagehistory > li:hover {
	background-color: lavender;
}

Подсветка непатрулированных правок

Если на сайте включено патрулирование, этот код выделит кнопку проверки красным цветом и увеличит её, чтобы её было проще заметить.

.mw-fr-reviewlink {
	background-color: red;
	font-size: 150%;
}

Замечания

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

См. также

Тептар:Персональное оформление

Содержание

Создание CSS

Скрытие элементов

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

Выделение перенаправлений

Выделение нужных интервик (языков)

Выделение реплик с отступом при помощи цвета фона

Читаемость обсуждений

Читаемость быстрой вставки

Значки рядом с подписями участников

Разное

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

Боковое меню внизу

Оформление вкладок

Отступ справа

Использование свободного пространства под редактором

Перенос ссылки на редактирование раздела вправо

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

Скрытие кнопки «откатить»

Нумерация строк вклада

Скрытие квадратиков меток в истории

Подсветка строк

Подсветка непатрулированных правок

Замечания

См. также

Навигация

Тептар:Персональное оформление

Создание CSS

Скрытие элементов

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

Выделение перенаправлений

Выделение нужных интервик (языков)

Выделение реплик с отступом при помощи цвета фона

Читаемость обсуждений

Читаемость быстрой вставки

Значки рядом с подписями участников

Разное

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

Боковое меню внизу

Оформление вкладок

Отступ справа

Использование свободного пространства под редактором

Перенос ссылки на редактирование раздела вправо

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

Скрытие кнопки «откатить»

Нумерация строк вклада

Скрытие квадратиков меток в истории

Подсветка строк

Подсветка непатрулированных правок

Замечания

См. также

Навигация

Поиск