Викия

ru-Викия

коммент.12

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

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

В этом блоге мы продолжим рассказывать о CSS-программировании, с помощью которого можно менять оформление вашей вики. Предыдущий блог о CSS, судя по отзывам, очень понравился участникам, поэтому и им, и тем, кто только недавно на Викия, будет интересно узнать об ещё нескольких простых "CSS-фокусах". Напоминаю, что код нужно добавлять на страницу MediaWiki:Wikia.css.

Начнём мы с того, что сделаем для вики несколько логотипов и фоновых рисунков. Зачем это надо? Иногда на вики добавляют пользовательские пространства имён, например, чтобы разделить персонажей фильма и компьютерной игры. В этом случае, чтобы разделение было чётче и ярче, можно для "второстепенного" пространства имён сделать свой фон и логотип. Для обычных викий можно то же самое сделать, например, для блогов участников или для личных страниц участников. Поэкспериментируйте, возможно, вам понравится.

/* Логотип */
.ns-2 h1.wordmark.medium.graphic {background: url("http://images3.wikia.nocookie.net/avatar/nl/images/8/8a/Film-namespace_wordmark.gif") no-repeat scroll 0% 0% transparent !important;}
.ns-3 h1.wordmark.medium.graphic {background: url("http://images3.wikia.nocookie.net/avatar/nl/images/8/8a/Film-namespace_wordmark.gif") no-repeat scroll 0% 0% transparent !important;}

.ns-2 #WikiHeader h1.wordmark img {zoom:1; opacity:0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity:0; -moz-opacity:0;}
.ns-3 h1.wordmark.medium.graphic {background: url("http://images3.wikia.nocookie.net/avatar/nl/images/8/8a/Film-namespace_wordmark.gif") no-repeat scroll 0% 0% transparent !important;}

/* Фон */
.ns-2 {background-image:url("http://images2.wikia.nocookie.net/avatarteamenpietpiet1/nl/images/8/8b/Gebruikerspagina_namespace.jpg"); background-attachment:fixed; background-position:center top;}
.ns-3 {background-image:url("http://images2.wikia.nocookie.net/avatarteamenpietpiet1/nl/images/8/8b/Gebruikerspagina_namespace.jpg"); background-attachment:fixed; background-position:center top;}

Пример показан для страницы участника и страницы обсуждения участника. Номера пространств имён можно посмотреть на этой странице. Пользовательские пространства имён имеют номера 112, 113 и т.д.

Очень интересная, но довольно сложная тема - это шрифты. По умолчанию на страницах Викия используется шрифт Гельветика (Helvetica). Чтобы изменить это, используете следующий код:

#WikiaArticle {
font-family: 'Times New Roman', serif;
}
 
#WikiaMainContent h1, #WikiaMainContent h2, #WikiaMainContent h3,
#WikiaMainContent h4, #WikiaMainContent h5, #WikiaMainContent h6 {
font-family: 'Times New Roman', serif;
}

Первый блок - это шрифт текста статей (в том числе и Заглавной страницы), а второй блок - шрифт заголовков разделов страницы и заголовков статей. Основная проблема здесь - подобрать не просто читаемый шрифт, но и тот, который будет адекватно отображаться на Кириллице. Также редкий шрифт может восприниматься не всеми браузерами или версиями браузеров. Набор стандартных вариантов шрифтов можно посмотреть здесь. Если с текстом статей такие "вольности" не всегда уместны, то вот сделать красивые заголовки - это интересный вариант.

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

.pollAnswerVotes div {
   background-color: #FFE4E1 !important;
}

В последнем на сегодня фокусе мы вернёмся к предыдущему блогу, где рассказывалось о том, как выделить другим цветом ники администраторов на странице Свежих правок. Похоже, что админы остались не удовлетворены только одной этой страницей, поэтому публикуем коды цветового выделения для всех страниц, включая не так давно развёрнутую Стену обсуждения:

  • свежие правки, история страницы, история изменений страницы
table.diff a[href="/wiki/User:Kuzura"],
ul#pagehistory li a[href="/wiki/User:Kuzura"],
ul.special li a[href="/wiki/User:Kuzura"],
table.mw-enhanced-rc td a[href="/wiki/User:Kuzura"],
table.diff a[href="/wiki/User:Exlex"],
ul#pagehistory li a[href="/wiki/User:Exlex"],
ul.special li a[href="/wiki/User:Exlex"],
table.mw-enhanced-rc td a[href="/wiki/User:Exlex"], {font-weight:bold !important; color:#DAA520 !important;}
  • блоги, страница вики-деятельности, блок "Последние действия в вики", стена обсуждения
.WikiaBlogListing .author-details span a[href="/wiki/User:Kuzura"],
.WikiaBlogListingBox .author-details span a[href="/wiki/User:Kuzura"],
.WikiaBlogPostHeader .author-details a[href="/wiki/User:Kuzura"],
#WikiaRail a[href="/wiki/User:Kuzura"],
#wikiactivity-main a[href="/wiki/User:Kuzura"],
a.real-name[href="http://ru.community.wikia.com/wiki/Message_Wall:Kuzura"],
.WikiaBlogListing .author-details span a[href="/wiki/User:Exlex"],
.WikiaBlogListingBox .author-details span a[href="/wiki/User:Exlex"],
.WikiaBlogPostHeader .author-details a[href="/wiki/User:Exlex"],
#WikiaRail a[href="/wiki/User:Exlex"],
#wikiactivity-main a[href="/wiki/User:Exlex"],
a.real-name[href="http://ru.community.wikia.com/wiki/Message_Wall:Exlex"], {font-weight:bold !important; color:#DAA520 !important;}
  • комментарии к блогам и ответы на стенах обсуждения
.edited-by a[href="http://ru.community.wikia.com/wiki/User:Kuzura"],
.edited-by a[href="http://ru.community.wikia.com/wiki/Message_Wall:Kuzura"],
.edited-by a[href="http://ru.community.wikia.com/wiki/User:Exlex"],
.edited-by a[href="http://ru.community.wikia.com/wiki/Message_Wall:Exlex"], {font-weight:bold !important; color:#DAA520 !important;}


Итак, наш второй экскурс в CSS завершён. Надеемся, что вам понравилось.

Викия-сеть

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