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

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

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

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

Персональным скриптам посвящён отдельный проект, ниже рассматривается создание и примеры 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 и выберите «добавить её в свои закладки» (подробнее см.: Bookmarklet). Теперь на любой странице вы можете выбрать эту новую закладку, в появляющемся окошке писать CSS-код и сразу видеть действие, оказываемое им на эту страницу. К сожалению, этот метод не работает в Opera 10.

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

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

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

#footer, /*блок с двумя лого в самом низу каждой страницы*/
#editpage-copywarn, #editpage-copywarn2 /*предупреждения об авторских правах при редактировании*/
 { 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):

#bodyContent a.external[href^=""]{
 background: none;
 padding-right: 0;
}

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

CSS-код из fr:MediaWiki:Monobook.css, раскрашивающий реплики участников на страницах обсуждений и форумов в зависимости от отступа; пример такой раскраски также см. на fr:Mediaenci 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) находятся не только форумы, но также и многие другие страницы (например, правила и руководства), то код также изменит цвет фона у некоторых параграфов (с отступом слева) и там, где это не нужно.

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

Участник

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

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

Как альтернативный вариант, можно в настройках выбрать тему «Цыпа» (пример страницы).

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

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

li.active  {font-weight:bold}

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

Существуют готовые стили, изменяющие внешний вид всех страниц Энциклопедии. Например, для Mozilla Firefox это делают плагины (как правило они предоставляют и другие возможности). Плагины могут быть полезны тем, кто не умеет работать с CSS или не хочет создавать их с нуля. Исходные коды обычно есть в свободном доступе. Один из самых популярных подобных плагинов в WikiTweak в enciclopedia 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
{
 list-style-type: decimal !important; 
 list-style-image:none !important;
}

Замечания

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

См. также

• Энциклопедия:Инструменты
• en:Wikipedia:User page design center
• Шаблон:Меню