Тептар

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

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

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

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

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

  1. Основная страница оформления (работает для всех тем сайта):
  2. Страницы для оформления конкретных тем (скинов):

Незарегистрированные пользователи могут применять пользовательские стили, только добавляя нужный 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%;
}

Замечания

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

См. также

править
Источник — https://massarn.com/w/index.php?title=Тептар:Персональное_оформление&oldid=2320