ВП:Персональное оформление

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
↱ ВП:ПОФ

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

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

MediaWiki автоматически подключает эти файлы в 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

    • </blockquote>

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

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

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

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

    В настройках также есть гаджеты для переноса некоторых популярных интервик вверх списка.


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

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

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

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

    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)</dd> 

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

    Аналогичный код для темы «<skinname-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}

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

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

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

    li.active  {font-weight:bold}

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

    Существуют готовые стили, изменяющие внешний вид всех страниц Википедии. Например, для 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
{
 list-style-type: decimal !important; 
 list-style-image:none !important;
}

    Замечания

    См. также

Источник — «http://tm.spbstu.ru/?title=ВП:Персональное_оформление&oldid=5608»