Википедия:Персональное оформление
Персональное оформление — функциональность 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%;}
Оформление интерфейса
Боковое меню внизу
- Заглавная
- Рубрикация
- …
- Портал
- Форум
- …
Если в стандартной теме оформления «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%;}
Замечания
- Файлы персонального оформления (как и гаджеты) не работают на странице настроек из соображений безопасности.