Викия

ru-Викия

коммент.36

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

Обнаружено использование расширения AdBlock.


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

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

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

CSS и JS, пожалуй, самые мощные инструменты, которые доступны участникам Викия. С помощью них можно создать действительно эксклюзивный внешний вид своей вики. В то же время, овладеть этими инструментами не просто и без специальных учебников не обойтись. В этом блоге я хочу на нескольких не сложных примерах показать вам, на что способно CSS-программирование. Может быть, кого-нибудь из участников заинтересует это, и он решит дополнительно узнать об этих инструментах, а некоторые участники, кто даже не представляет себе такие возможности Викия, точно узнают нечто совершенно неожиданное.

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

/*Kuzura*/
a[href="http://ru.community.wikia.com/wiki/%D0%A3%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B8%D0%BA:Kuzura"],
a[href="/wiki/%D0%A3%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B8%D0%BA:Kuzura"],
a[href="/wiki/%D0%A1%D1%82%D0%B5%D0%BD%D0%B0_%D0%BE%D0%B1%D1%81%D1%83%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F:Kuzura"],
a[href="http://ru.community.wikia.com/wiki/%D0%A1%D1%82%D0%B5%D0%BD%D0%B0_%D0%BE%D0%B1%D1%81%D1%83%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F:Kuzura"],

/*Вектор*/
a[href="http://ru.community.wikia.com/wiki/%D0%A3%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B8%D0%BA:%D0%92%D0%B5%D0%BA%D1%82%D0%BE%D1%80"],
a[href="/wiki/%D0%A3%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B8%D0%BA:%D0%92%D0%B5%D0%BA%D1%82%D0%BE%D1%80"],
a[href="/wiki/%D0%A1%D1%82%D0%B5%D0%BD%D0%B0_%D0%BE%D0%B1%D1%81%D1%83%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F:%D0%92%D0%B5%D0%BA%D1%82%D0%BE%D1%80"],
a[href="http://ru.community.wikia.com/wiki/%D0%A1%D1%82%D0%B5%D0%BD%D0%B0_%D0%BE%D0%B1%D1%81%D1%83%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F:%D0%92%D0%B5%D0%BA%D1%82%D0%BE%D1%80"]
{color:#00ff00 !important;}

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

Этот код можно повторить несколько раз, используя разные цвета и разные списки имён участников. Советую внимательно смотреть на цвет ссылок и цвет фона вашей вики, чтобы ники не оказались не читаемы.

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

.mainheader {    
    background-color: #000;
    background-image: url("http://images1.wikia.nocookie.net/__cb20110831130719/kingsbounty/ru/images/5/5e/Header.jpg") !important;
    color:#fff;
}

Теперь вам надо будет просто прописать в шаблоне class="mainheader" и вместо цвета вы получите картинку (пример шаблона). Советую использовать некое квадратное изображение, чтобы можно было замостить требуемый фон плиткой. Это эффективнее, чем подбирать требуемую картинку строго по пикселям. Однако если вы точно знаете, что размер, например строчки шаблона, всегда постоянен, то можете поэкспериментировать. Не забывайте только, что текст поверх вашей картинки тоже должен быть хорошо виден.

Если можно раскрасить картинкой фон в шаблоне, то почему бы не раскрасить также и полоски с глоб. нав. меню и полоску Мои инструменты? Можно раскрасить что-нибудь одно. В отличие от предыдущего примера, здесь можно подобрать чёткие размеры картинки и заполнить полоску с глоб. нав. меню, к примеру, лицами персонажей из игры или сериала. Добавьте на страницу MediaWiki:Wikia.css следующий код,

.WikiaHeader {
              background-image:url(http://images1.wikia.nocookie.net/htmlcss/images/d/da/Wikiaheadertoolbarbg.png) !important;
}

.WikiaFooter .toolbar {
          background-image:url(http://images1.wikia.nocookie.net/htmlcss/images/d/da/Wikiaheadertoolbarbg.png) !important;
}
 
.WikiaFooter .toolbar .my-tools-menu {
  background-image:url(http://images1.wikia.nocookie.net/htmlcss/images/d/da/Wikiaheadertoolbarbg.png) !important;
}

Первый код для глоб. нав. меню, два вторых – для Моих инструментов.

Завершить наш короткий экскурс в CSS я хотел бы кодом, который избавляет изображения, вставленные в статью на вики, от надписи «Добавил тот-то». Эта надпись очень удобна, так как, не глядя в историю страницы, можно всегда увидеть, кто именно загрузил это "тупое" изображение)) Однако иногда она может раздражать или привести к гонке между участниками за тем, чтобы только их имя было на картинках из некой статьи. Чтобы избежать этого, добавьте на страницу MediaWiki:Wikia.css следующий код,

.WikiaArticle .picture-attribution {display:none;}

и проблемная надпись исчезнет.

Эти четыре примера показывают, каким образом можно изменить внешний вид, дизайн вашей вики, сформировать её индивидуальный стиль, и это только небольшая часть того, что можно сделать с помощью CSS. Нужно ли это вам или проще использовать стандартные инструменты Викия? Решать вам и вашему вики-сообществу, но я считаю, что хотя бы один раз попробовать это стоит, а вдруг вам понравится? =)

См. также Manual:CSS (англ.)

Викия-сеть

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