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

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

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

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

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

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

1. Страницы во всех проектах и подпроектах Фонда Викимедиа:
   m:Special:MyPage/global.css
2. Страницы в русской Википедии:
   Special:MyPage/common.css
3. Страницы для конкретного оформления русской Википедии:
   • 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. Каждое отдельное правило выглядит как

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

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

Внутри 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

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

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

Если в стандартной теме оформления «Vector, устаревшая (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; } 

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

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

li.active { 	font-weight: bold; } 

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

В теме «Vector, устаревшая (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 — оформление списка наблюдения