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

Материал из 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;
    }
    

    Замечания

    См. также