MediaWiki/Внешний вид/Vector

From SysadminWiki.ru
Jump to: navigation, search

Для темы Вектор (Vector) существует собственная страница CSS стилей MediaWiki:Vector.css изначально пустая.

Меняем ссылку логотипа

При нажатии на логотип, по умолчанию попадаем на Заглавную страницу. Настраивается это в главном файле темы, например VectorTemplate.php (ранее просто Vector.php) для темы Vector. Темы находятся в каталоге skins. Находим в файле фрагмент отвечающий за вывод логотипа:

<div id="p-logo" role="banner"><a class="mw-wiki-logo" href="<?php
   echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] )
   ?>" <?php
   echo Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
   ?>></a></div>

и меняем его на свой, указав в title нужную всплывающую подсказку:

<!-- Change link from logo-->
<div id="p-logo" role="banner">
   <a class="mw-wiki-logo" href="http://mywiki.org" title="На главную страницу"></a>
</div>

Адаптируемость под ширину окна

Тема Vector адаптируется под широкие окна. Если широта экрана достигает 982 px или превышает это значение, то применяется CSS из файла screen-hd.less.

Так, если мы переместили поисковую строку в боковую панель под логотип, то нужно указать её длину для узких окон и широких. Для этого добавляем в файл components/common.less

div#p-search {
   width: 140px;
}

а в screen-hd.less добавляем:

div#p-search {
   width: 150px;
}


Добавляем раздел в боковое меню

1) Опишем добавляемый раздел в отдельном HTML файле sidebar_extra.html:

<div class="portal" role="navigation" id="p-tb" aria-labelledby="p-tb-label">
	<h3 id="p-tb-label">Семантика</h3>
	<div class="body">
		<ul>
			<li><a href="/wiki/Special:Properties" title="Семантические свойства">Все свойства</a></li>
			<li><a href="/wiki/Special:SearchByProperty" title="Поиск по семантическим свойствам">Поиск по свойству</a></li>
			</ul>
	</div>
</div>

2) В файле VectorTemplate.php добавим в раздел описания боковой панели <div id="mw-panel"> строки:

<!-- Add more links to sidebar -->
<?php include('sidebar_extra.html'); ?>


Меняем цвет фона

Чтобы внесённые изменения не утратились с обновлением темы их лучше вносить на странице MediaWiki:Vector.css. При таком подходе настройки сохранятся в базе данных и при замене файлов темы не потеряются. Если же мы хотим изменить фон для всех сайтов в вики семействе, которые используют один набор файлов, но разные базы данных, то лучше вносить изменения в файлы.

MediaWiki:Vector.css

Изменяем фон вики на зелёный

html, body, #mw-page-base, #mw-head, #mw-head-base, #mw-panel, #footer, #p-logo  {
	background-color: #CFC; 
}

Файлы темы Вектор

CSS таблицы темы Vector находятся в каталоге components. Для изменения фона страницы и меню слева нужно отредактировать в файле common.less правило:

body {
	background-color: @menu-background-color;
}

Например, для задания светло-зелёного фона:

body {
	background-color: #a8e4a0;
}

Для изменения фона верхнего меню в файле navigation.less меняем правило #mw-page-base, заменяя:

#mw-page-base {
	height: 5em;
	background-position: bottom left;
	background-repeat: repeat-x;
	/* This image is only a fallback (for IE 6-9), so we do not @embed it. */
	background-image: url('images/page-fade.png');
	.vertical-gradient(@body-background-color, @menu-background-color, 50%, 100%);
	background-color: @body-background-color;
}

на

#mw-page-base {
	height: 5em;
	background-color: #ffdb58;
}

Полезные ссылки

  • VectorLight - создание облегчённой версии темы Вектор.