Википедия:Персональное оформление

ВП:ПОФВП:ПОФ

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

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

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

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

Страницы во всех проектах и подпроектах Фонда Викимедиа:
m:Special:MyPage/global.css
Страницы в русской Википедии:
Special:MyPage/common.css
Страницы для конкретного оформления русской Википедии:
- Special:MyPage/vector.css — векторное
- Special:MyPage/monobook.css — MonoBook
- Special:MyPage/cologneblue.css — кёльнская тоска
- Special:MyPage/modern.css — современное

Незарегистрированные пользователи могут реализовать вариант 1, добавляя нужный стиль в настройки своего браузера. У разных браузеров способы добавления разнятся, неплохой обзор (на английском языке) можно посмотреть на http://brugbart.com/custom-style-sheets.

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

Создание CSS

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

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

Селекторы описывают HTML-элементы страницы, их можно составить, посмотрев на HTML-код страницы. Примеры селекторов:

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

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

Многие CSS-классы, используемые в Википедии, перечислены на странице en:Wikipedia:Catalogue of CSS classes.

Для проверки CSS-кода не обязательно делать правки в своём CSS-файле. Зайдите на страницу Web Development Bookmarklets, кликните там правой кнопкой мыши на ссылке test styles и выберите «добавить её в свои закладки» (подробнее см. Букмарклет). Теперь на любой странице вы можете выбрать эту новую закладку, в появляющемся окошке писать CSS-код и сразу видеть действие, оказываемое им на эту страницу. К сожалению, этот метод не работает в Opera 10.

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

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

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

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

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

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

Информация на этой странице устарела.

Вы можете помочь проекту, обновив её и убрав после этого данный шаблон.

прямая ссылка, посещённая
перенаправление, посещённое

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

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

В настройках также есть гаджет, делающий то же самое по нажатию специальной вкладки.

страница, посещённая
перенаправление, посещённое

На спецстраницах «Все страницы» и «Указатель по началу страницы» и на страницах категорий перенаправления представлены как <div class="allpagesredirect"><a> и <span class="redirect-in-category"><a> и уже выделены курсивом через наш Common.css. Их можно дополнительно себе выделить, например, серым цветом:

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

Выделение нужных интервик

Česky

Deutsch

English

Français

Polski

Svenska

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

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

В теме «MonoBook» также популярен метод выравнивания нужных интервик по правому краю (см. рис. справа):

li.interwiki-en {
	text-align: right;
	margin-right: 10px;
}

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

Ссылки на Википедию

Убрать значок внешней ссылки со ссылок, которые на самом деле ведут на страницы Википедии (не работает в Internet Explorer):

body a.external[href*="//ru.wikipedia.org/"] {
	background: none !important;
	padding-right: 0 !important;
}

В пространствах имён Википедия, Проект, Арбитраж и в обсуждениях любых страниц значок внешней ссылки уже убран глобальным скриптом.

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

CSS-код из fr:MediaWiki:Monobook.css, раскрашивающий реплики участников на страницах обсуждений и форумов в зависимости от отступа; пример такой раскраски также см. на fr:MediaWiki talk:Monobook.css

Первая реплика. Участник A. 14:00, 19 April 2007 (UTC)

Вторая реплика. Участник B. 14:05, 19 April 2007 (UTC)

Третья реплика. Участник C. 14:10, 19 April 2007 (UTC)

Четвёртая реплика. Участник D. 14:15, 19 April 2007 (UTC)

.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-4) находятся не только форумы, но также и многие другие страницы (например, правила и руководства), то код также изменит цвет фона у некоторых параграфов (с отступом слева) и там, где это не нужно.

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

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

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

В пространствах «Обсуждение» и «Википедия» маркеры, идущие после первого, будут показываться только при наведении указателя на ветку реплик.

.ns-talk ul li ul,
.ns-4 ul li ul {
	list-style-type: none;
	list-style-image: none;
}
.ns-talk ul li:hover ul,
.ns-4 ul li:hover ul {
	list-style-type: disc;
}

Все реплики с маркером

.ns-talk dd,
.ns-4 dd {
	display: list-item;
	list-style-type: disc;
}

См. также Участник:Jack who built the house/discussion indentation.js, Участник:Ignatus/discussion.js

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

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

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

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

Участник

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

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

Разное

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

.comment {
	font-size: 90%;
}

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

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

(Статья)

навигация

Заглавная
Рубрикация
…

участие

Портал
Форум
…

поиск

Если в стандартной теме оформления «Вектор, устаревшая (2010)» вы хотите использовать всю ширину окна браузера для содержания страниц, то логотип можно убрать, а все блоки меню слева перенести в самый низ страницы; код для vector.css:

/* bottom sidebar in 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;
}

Аналогичный код для темы MonoBook (monobook.css):

/* bottom sidebar in Monobook */
#p-logo {
	display: none;
}
#column-content,
#content {
	margin-left: 0 !important;
}
#p-cactions {
	left: 0 !important;
}
#column-one {
	padding-top: 10px !important;
}
.portlet {
	clear:none !important;
	margin-right: 5px !important;
}

Оформление табов

В теме «Вектор, устаревшая (2010)» можно выделить ссылку в самой верхней строке, если она является текущей страницей (так, как это было в «MonoBook»):

li.active {
	font-weight: bold;
}

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

В теме «Вектор, устаревшая (2010)» нет отступа справа, как это было в «MonoBook». Добавить его можно так:

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

Готовые стили

Существуют готовые стили, изменяющие внешний вид всех страниц Википедии. Например, для Mozilla Firefox это делают плагины (как правило они предоставляют и другие возможности). Плагины могут быть полезны тем, кто не умеет работать с CSS или не хочет создавать их с нуля. Исходные коды обычно есть в свободном доступе. Один из самых популярных подобных плагинов — WikiTweak — Wikipedia Enhancer, в котором среди прочих есть стили вида «белый текст на чёрном фоне» для тех, кто считает, что таким образом меньше устают глаза и экономится электроэнергия.

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

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

Убирание «откатить»

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

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

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

Нумерованный список на страницах журналов, вклада участника и свежих правок.

/* Нумерованный список: */
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%;
}

Замечания

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

См. также

Википедия:Инструменты
Википедия:Глобальный код
Википедия:Персональные скрипты
en:Wikipedia:User page design center
en:Wikipedia:Customizing watchlists#Highlight specific pages — оформление списка наблюдения

Википедия:Персональное оформление

Содержание

Создание CSS

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

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

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

Выделение нужных интервик

Ссылки на Википедию

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

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

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

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

Разное

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

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

Оформление табов

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

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

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

Готовые стили

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

Убирание «откатить»

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

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

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

Стимулятор патрулирования

Замечания

См. также

Навигация

Википедия:Персональное оформление

Создание CSS

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

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

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

Выделение нужных интервик

Ссылки на Википедию

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

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

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

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

Разное

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

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

Оформление табов

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

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

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

Готовые стили

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

Убирание «откатить»

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

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

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

Стимулятор патрулирования

Замечания

См. также

Навигация

Поиск