Викия

ru-Викия

коммент.5

4 простых фокуса с CSS, выпуск 3

Будьте внимательны, некоторые из кодов в блоге уже не могут быть использованы. Чтобы уточнить информацию из данного блога, обратитесь на форум.

После довольно длительного перерыва мы продолжаем рассказывать о возможностях пользовательского CSS и его применении для изменения внешнего вида вики. Напоминаем, что код нужно добавлять на страницу MediaWiki:Wikia.css.

В предыдущем выпуске мы рассказывали о том, как с помощью CSS можно сделать несколько логотипов для разных пространств имён на вики. В этот раз мы сделаем интерактивный логотип для вики. Интерактивный логотип использует две картинки, одна из которых отображается по умолчанию, а другая сменяет её при наведении курсора на него. Удачно подобрав картинки, можно добиться эффекта движения определённых элементов лого (пример) или подсветки/затемнения лого (пример). Итак, для того, чтобы сделать лого интерактивным, необходимо добавить следующий код:

body.mediawiki h1.wordmark:hover > a > img {
 opacity:0 !important;
}
 
body.mediawiki h1.wordmark:hover { 
 background:url('http://images.wikia.com/community/ru/images/7/79/Your logo#1.png') no-repeat !important;
}
 
.ns-112 h1.wordmark.medium.graphic {background: url("http://images.wikia.com/community/ru/images/8/89/Wiki-wordmark.png") no-repeat scroll 0% 0% transparent !important;}
.ns-112 #WikiHeader h1.wordmark img {zoom:1; opacity:0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity:0; -moz-opacity:0;}
}

Первая ссылка определяет изображение, которое появляется при наведении курсора на лого, вторая - лого по умолчанию.

Следующий "фокус" проведём с ссылками - заставим их светиться. Этот довольно красивый эффект очень легко реализуется технически. Код:

a:visited:hover, .color2 a:visited:hover {
  color: #FF4500; 
  text-shadow: #FF4500 0 0 5px;
  text-decoration:none;
}
 
a:hover, .color2 a:hover {
  color: #FF4500;
  text-shadow: #FF4500 0 0 5px;
  text-decoration:none;
}

Данный код даст подсветку ссылок тёмно-оранжевым цветом. Примеры подсвечивания ссылок можно просмотреть здесь и здесь.

Ещё одна тема, которая была затронута в прошлом выпуске - изменение стандартных шрифтов на вики. В прошлый раз мы рассказывали, как изменить стандартный шрифт страниц, сегодня же - опубликуем небольшой код, который позволяет изменять шрифт в редакторе Исходного кода:

.editpage-editarea textarea {
font-family: 'Times New Roman' !important;
}

Данный код заменяет стандартный шрифт на Times New Roman. Конечно, вы можете подобрать свой шрифт, или даже группу шрифтов для изменения стандартного шрифта.

Напоследок расскажем о небольшой "фишке" для нового расширения - Форума, а точнее - для блока отображения его активности (вставляется на страницу с помощью тега <wikiaforum/>). Этот блок имеет свой собственный фон, что часто делает его вставку на страницу не эстетичной. Однако, фон можно сделать прозрачным. Для этого создадим пользовательский класс "mainpageforum":

.mainpageforum section.ForumActivityModule {
  background: transparent;
  border: none;
  box-shadow: none;
}

Также, можно убрать заголовок "Активность на Форуме":

 .mainpageforum section.ForumActivityModule h1 {
  display: none;
}

Теперь, чтобы код подействовал, тег <wikiaforum/> необходимо заключить в теги <div>:

<div class="mainpageforum"><wikiaforum/></div>

В таком виде тег и вставляется на страницу.

На этом наш третий экскурс по CSS завершается. Оставляйте свои комментарии и отзывы ниже. Удачных экспериментов с кодом!

Викия-сеть

Случайная вики