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

Сообщество: Портал • Разговоры • Голосования • Опросы • Администрация • Активность • События • Пожертвования • TelegramTelegram • Профиль сообщества ru_traditioЖЖ
Запросы: к администраторам • к бюрократам • изменение прав • на защиту, объединение, переименование и удаление страниц • на скрытие их версий • на проверку участников • к посредничеству • на комментирование • на источники • о саморекламе
Оценка: Примечательные статьи
Техническая поддержка • Приспособления • Личные скрипты и оформление • Ботоводство • К загрузке
Проекты: Работа недели • Патруль • О Википедии • Тематические: РБ, ГпР, Словарик • Авторские: АПЭ, ТСДНЭ
Короткая ссылка-перенаправление Т:ПОФ
Персональное оформление
советы по персональному оформлению «Традиции»

Кроме обычных настроек, каждый зарегистрированный участник может создать себе персональные файлы оформления — 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#copy2 или просто #copy2
<div class=hdr … div.hdr или просто .hdr
<div class=parent><div … .parent div , что означает «div внутри элемента с классом parent»


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

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

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

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

Однако код также изменит цвет фона у некоторых параграфов (с отступом слева) и на некоторых других страницах пространства Traditio (напр., в правилах и руководствах), где это не требуется.

Быстро находимые интервикиПравить

  • Česky
  • Deutsch
  • English
  • Français
  • Polski
  • Svenska

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

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



Списки наблюдения и свежих правокПравить

(+124) … (-18)
станет

(+124) … (-18)

Убрать красно-зелёную раскраску байтовдобавленную в рувики в апреле 2007, показывающих изменения размеров страниц

.mw-plusminus-pos, .mw-plusminus-neg {
  color: black
}


Зрительно выделить «раскрывающийся» блок изменений (в улучшенных списках правок)

body.page-Служебная_Watchlist div#bodyContent div div {
 border:1px dotted gray; padding-left:5px; background:#F6F6FF
}


Уменьшить шрифт описаний правок

.comment {font-size:90%}



Убрать логотипПравить

навигация
  • Заглавная страница
  • Рубрикация

Если вы хотите поднять блоки меню повыше, то логотип проекта в левом верхнем углу можно:

  • обрезать, напр., до 25 точек по вертикали (в IE6 выглядит не очень хорошо)
#p-logo {height:25px; overflow: hidden}
#column-one {padding-top:30px; }
  • или совсем убрать
#p-logo {display:none}
#column-one {padding-top:5px}

Крупное поле поискаПравить

поиск
 

Крупный шрифт в поле поиска слева; в активном состоянии (с курсором) поле удлиняется в 6 раз. Не работает в Internet Explorer.

#p-search {overflow:visible}
#searchInput {font-size:2em; width:100%}
#searchInput:focus {width:600%}


Все меню справаПравить

Такой CSS-код переместит все служебные блоки в оформлении Моно-книга (которое у всех стоит по умолчанию) с левого края страницы на правый. Не работает в Internet Explorer.

#column-content {float: left} 
#content {border-right: solid 1px; -moz-border-radius-topright:0.5em}
#column-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}



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

Подчёркивание текущей страницы в самой верхней строке табов (имя   моя страница обсуждения   настройки …). По умолчанию ссылка просто выделяется жирным, что плохо заметно.

li.active  {text-decoration: underline}

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

#ca-move a{background-color:#EEEEFF !important}

Вариант для админов:

#ca-protect a{background-color:#FFFFDD !important}
#ca-unprotect a{background-color:#FFEEEE !important}
#ca-delete a{background-color:#FFFFDD !important}


Оформление ссылокПравить

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

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

Зелёные кнопки описания измененийПравить

викиф. оформл.

Прежнее оформление кнопок описания изменений под окном редактирования.

#userSummaryButtonsA a {
 background: #cfc;
 border: 1px dotted #090;
 color: black;
}
#userSummaryButtonsA a:hover {
 background: #bfb;
 border-color: #9c9;
}


РазноеПравить

вот пример очень-очень длинного <pre>, у которого должна быть горизонтальная полоса прокрутки

Добавить полосу прокрутки на слишком широких <pre>

pre {overflow: auto}