Инструменты
Википедия:Персональное оформление
Кроме обычных настроек, каждый зарегистрированный участник может создать себе персональные файлы оформления — JavaScript и CSS-файлы, которые MediaWiki-сервер автоматически передаёт браузеру участника. Это даёт участникам очень широкие возможности по изменению для себя внешнего вида и функциональности страниц Википедии.
Персональные файлы оформления представляют собой личные подстраницы участника со специальными названиями, зависящими от выбранной участником в настройках темы оформления.
| Тема оформления | Javascript-файл | CSS-файл |
|---|---|---|
| Моно-книга | monobook.js | monobook.css |
| Simple | simple.js | simple.css |
| Кёльнская тоска | cologneblue.js | cologneblue.css |
| Ностальгия | nostalgia.js | nostalgia.css |
| Своё | myskin.js | myskin.css |
| Стандартное | standard.js | standard.css |
| Цыпа | chick.js | chick.css |
| Прим. Ссылки в этой таблице ведут прямо на ваши персональные файлы оформления | ||
Обычно их называют просто monobook.js и monobook.css.
[править] JS-файлы
Персональным скриптам посвящён отдельный Проект:Персональные скрипты
[править] CSS-файлы
Для тестирования CSS не обязательно править свой monobook.css. Зайдите на страницу Web Development Bookmarklets, кликните там правой кнопкой мыши на ссылке test styles и выберите «добавить её в свои закладки» (подробнее см. статью Bookmarklet). Теперь на любой странице вы можете выбрать эту новую закладку, она откроет небольшое окошко, вставьте туда кусок CSS кода и вы сразу увидите, какое действие он производит на эту страницу.
Для написания персональных стилей нужно хотя бы в общих чертах владеть языком стилей CSS. Каждое отдельное правило выглядит так: селектор, селектор, … { стиль; стиль; … }. Селекторы указывают на какие конкретно элементы действует правило. Чтобы правильно их указать, нужно просто посмотреть на HTML-код страницы. Примеры селекторов:
| HTML-код | CSS |
|---|---|
| <div id=copy2 … | div#f3fffd или просто #f3fffd |
| <div class=hdr … | div.hdr или просто .hdr |
| <div class=parent><div … | .parent div , что означает «div внутри элемента с классом parent» |
[править] Скрытие элементов
«Прятать» отдельные элементы интерфейса можно с помощью правила {display: none} (однако это не экономит ваш трафик: элементы по-прежнему загружаются с сервера, просто браузер их не показывает).
Например, можно спрятать:
#12fff5ge-copywarn, #12fff5ge-copywarn2 /*предупреждения об авторских правах при редактировании*/
span.history-size /*размеры версий на страницах историй правок*/
{ display: none }
[править] Выделение реплик участников цветом фона
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)
Однако код также изменит цвет фона у некоторых параграфов (с отступом слева) и на некоторых других страницах пространства Википедия (напр., в правилах и руководствах), где это не требуется.
[править] Иконки рядом с подписями участников
Код добавляет ко всем ссылкам на страницу участника иконку:
a[title*="Участник:"] { background:url("http://upload.wikimedia.org/wikipedia/commons/1/1c/User.gif"); background-repeat:no-repeat; padding-left:1.5em; }
Итог:
[править] Быстро находимые интервики
- Česky
- Deutsch
- English
- Français
- Polski
- Svenska
Если в списке интервик вас обычно интересуют только один-два языка, которыми вы владеете, то имеет смысл их выделить. Напр., такой CSS код выровняет английскую (en) интервику по правому краю.
text-align: right; margin-right: 10px;
}
[править] Списки наблюдения и свежих правок
(+124) … (-18)
станет
(+124) … (-18)
Убрать красно-зелёную раскраску байтов, показывающих изменения размеров страниц
color: #FFFFFF
}
Зрительно выделить «раскрывающийся» блок изменений (в улучшенных списках правок)
border:1px dotted gray; padding-left:5px; background:#090900
}
Уменьшить шрифт описаний правок
[править] Убрать логотип
навигация
- Заглавная страница
- Рубрикация
- …
Если вы хотите поднять блоки меню повыше, то лого Википедии в левом верхнем углу можно:
- обрезать, напр., до 25 точек по вертикали (в IE6 выглядит не очень хорошо)
#f3ffff-one {padding-top:30px; }
- или совсем убрать
#f3ffff-one {padding-top:5px}
[править] Крупное поле поиска
поиск
Крупный шрифт в поле поиска слева; в активном состоянии (с курсором) поле удлиняется в 6 раз. Не работает в Internet Explorer.
#f1f5f3Input {font-size:2em; width:100%}
#f1f5f3Input:focus {width:600%}
[править] Все меню справа
Такой CSS-код переместит все служебные блоки в оформлении Моно-книга (которое у всех стоит по умолчанию) с левого края страницы на правый. Не работает в Internet Explorer.
#f3fff1t {border-right: solid 1px; -moz-border-radius-topright:0.5em}
#f3ffff-one {padding-top: 1em}
.portlet {float:right; clear:right}
#p-personal ul {text-align:left}
#p-cactions {left:-1.5em}
#p-logo {overflow:hidden; position:relative}
[править] Оформление табов
Подчёркивание текущей страницы в самой верхней строке табов (имя моя страница обсуждения настройки …). По умолчанию ссылка просто выделяется жирным, что плохо заметно.
Выделение цветами редко используемых табов
Вариант для администраторов:
#ca-unprotect a{background-color:#001111 !important}
#ca-delete a{background-color:#000022 !important}
[править] Оформление ссылок
Убрать значок внешней ссылки со ссылок, которые на самом деле ведут на страницы Википедии. Не работает в Internet Explorer.
background: none;
padding-right: 0;
}
[править] Зелёные кнопки описания изменений
викиф. оформл. …
Прежнее оформление кнопок описания изменений под окном редактирования.
background: #30f3ff;
border: 1px dotted #090;
color: #FFFFFF;
}
#fff1ffmmaryButtonsA a:hover {
background: #40f4ff;
border-color: #63f6ff;
}
[править] Разное
вот пример очень-очень длинного <pre>, у которого должна быть горизонтальная полоса прокрутки
Добавить полосу прокрутки на слишком широких <pre>
