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

Персональное оформление советы по персональному оформлению «Традиции»

Кроме обычных настроек, каждый зарегистрированный участник может создать себе персональные файлы оформления — 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)

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

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