Довідка:Персональне оформлення

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до: навігація, пошук
Скорочення:
Д:ПОФ

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

Ці файли є підсторінка учасника із спеціальними назвами, посилання на них є в настройках. Редагувати ці сторінки може тільки сам учасник і адміністратори.

MediaWiki автоматично підключає ці файли в HTML код сторінки після JavaScript та CSS файлів самої MediaWiki, обраних учасником додатків та глобального коду проекту. При цьому «загальні» файли common.css та common.js підключаються завжди, а два інших файлу — в залежності від обраної теми оформлення.

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 }

У темі «Моно-книга» також популярний метод вирівнювання потрібних інтервікі по правому краю (див. рис. праворуч) :

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

В налаштуваннях також є додатки для перенесення деяких популярних інтервікі вгору списку, або навіть розміщення їх у кольоровій рамці. Наприклад, наведений нижче приклад розміщує польську інтервікі вгорі у рожевій рамці:

  • Polski
  • Česky
  • Deutsch
  • English
  • Français
  • Svenska
.interwiki-pl{
        font-weight:bold;
        font-size:larger;
        border-style:solid;
        position:fixed;
        left:3px;
        top:25px;
        z-index:10;
        background-color:#feeafb;
        border-color:#802500;
        padding:3px;
}


Посилання на Вікіпедію[ред.ред. код]

Прибрати значок зовнішньої посилання зі посилань, які насправді ведуть на сторінки Вікіпедії (не працює в Internet Explorer) :

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

Виділення реплік з відступом кольором їх фону[ред.ред. код]

CSS-код з fr:MediaWiki:Monobook.css, розфарбовують репліки учасників на сторінках обговорень і форумів в залежності від відступу; приклад такої розмальовки також див на fr:MediaWiki_talk:Monobook.css

Перша репліка. Користувач A. 14:00, 31 лютого 1054 (UTC)

Друга репліка. Користувач B. 14:05, 31 лютого 1054 (UTC)

Третя репліка. Користувач C. 14:10, 31 лютого 1054 (UTC)

Четверта репліка. Користувач D. 14:15, 31 лютого 1054 (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) знаходяться не тільки форуми, але також і багато інших сторінки (наприклад, правила), то код також змінить колір фону у деяких параграфів (з відступом зліва) і там, де це не потрібно.

Значки поруч з підписами учасників[ред.ред. код]

User.gif Користувач

Код додає значок до всіх посилань на сторінку користувача:

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.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>» (приклад сторінки).

Оформлення табів[ред.ред. код]

У темі «Векторне» можна виділити посилання у верхньому рядку, якщо вона є поточною сторінкою (так, як це було в «Моно-книга») :

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

Зауваження[ред.ред. код]

Див. також[ред.ред. код]