Перейти до вмісту

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

Матеріал з Вікіпедії — вільної енциклопедії.
Скорочення

Персональне оформлення (англ. user style) — функціонал 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.

Приховування елементів

[ред. | ред. код]

«Ховати» (англ. hide) окремі елементи інтерфейсу можна за допомогою правила 

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

В настройках також є гаджет, який робить те ж саме по натисненню спеціальної вкладки.

сторінка, відвідана
перенаправлення , відвідані

На спецсторінки «Special:Allpages (Спеціальна:Всі сторінки)» та «Special:PrefixIndex (Спеціальна:Покажчик по початку)» та на сторінках категорій перенаправлення представлені як <div class=allpagesredirect><a> та <span class=redirect-in-category><a> і вже виділені курсивом через наш MediaWiki: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) знаходяться не тільки форуми, але також і багато інших сторінок (наприклад, правила), то код також змінить колір фону і деяких параграфів (з відступом зліва) там, де це не потрібно.

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

[ред. | ред. код]

Користувач

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

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


Оформлення інтерфейсу

[ред. | ред. код]

Бічне меню внизу

[ред. | ред. код]
(Стаття)


навігація
  • Головна
  • Рубрикація
  • ...
участь
  • Портал
  • Форум
  • ...
пошук
 


Якщо в стандартній темі оформлення «Старий вектор (2010)» ви хочете використовувати всю ширину вікна браузера для вмісту сторінок, то логотип можна прибрати, а всі блоки меню зліва перенести до низу сторінки; код для 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⧽» (приклад сторінки).

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

[ред. | ред. код]

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

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}

Нумерація рядків вкладу

[ред. | ред. код]

Нумерований список на сторінках Special:Log (журналів) та внеску користувача. 

/* Нумерований список вкладу та журналів */
body.mw-special-Contributions #content ul, 
body.mw-special-Log #content ul
 { 
list-style-type: decimal !important; 
list-style-image:none !important;
}

Зауваження

[ред. | ред. код]

Див. також

[ред. | ред. код]
Отримано з https://uk.wikipedia.org/w/index.php?title=Довідка:Персональне_оформлення&oldid=38461432