- Будьте внимательны, некоторые из кодов в блоге уже не могут быть использованы. Чтобы уточнить информацию из данного блога, обратитесь на форум.
Данный выпуск немного сломает обычный шаблон наших блогов о CSS, так как "фокусов" будет не 4, а немного больше, и некоторые из них не такие уж и простые (но тем не менее, результат того стоит :) ). Напоминаю, что код нужно копировать в MediaWiki:Wikia.css .
В последнее время довольно популярным стал код, который заменяет стандартную картинку уведомлений на пользовательскую. Сначала этот код появился на Angry Birds Wiki, потом на Mass Effect Wiki, а сейчас распространён на множестве википроектов, включая такие вики, как S.T.A.L.K.E.R. Вики и Террария Вики. Оригинальный код для установки лого выглядит примерно так:
#WallNotifications .bubbles {
background-image: url('http://желаемое лого');
background-size: 23px;
background-position: 1px 0px;
background-repeat: no-repeat;
}
Но на обычном пользовательском лого мы не остановимся :) Давайте добавим сюда также и изменение картинки при наведении на лого с помощью псевдокласса :hover:
#WallNotifications .bubbles:hover {
background-image: url('http://желаемое url');
background-size: 23px;
background-repeat:no-repeat;
}
Что получилось, вы можете просмотреть здесь.
Но, резкое изменение одной картинки на другую не очень привлекательно. Давайте добавим плавности в изменение картинок, вот так:
#WallNotifications .bubbles {
background-image: url('http://url картинки №1');
background-size: 23px;
background-repeat: no-repeat;
-moz-transition: background-image 0.3s 0s ease;
-o-transition: background-image 0.3s 0s ease;
-webkit-transition: background-image 0.3s 0s ease;
}
#WallNotifications .bubbles:hover {
background-image: url('http://url картинки №2');
background-size: 23px;
background-repeat:no-repeat;
transition:all 0.2s ease;
-moz-transition: background-image 0.3s 0s ease;
-o-transition: background-image 0.3s 0s ease;
-webkit-transition: background-image 0.3s 0s ease;
}
Как это выглядит, можно посмотреть здесь.
С помощью CSS можно отредактировать и отображение количества непрочитанных уведомлений. Например - сделать маркер уведомлений больше и заметнее, с помощью следующего кода:
#WallNotifications .bubbles.reddot {
border-radius: 15px;
-webkit-border-radius: 15px;
background:red;
width: 25px;
height: 25px;
position: relative;
left: 0px;
top: -2px;
-moz-box-shadow: 0 0 10px rgba(255, 140, 0, 1.0);
-webkit-box-shadow: 0 0 10px rgba(255, 140, 0, 1.0);
box-shadow: 0 0 10px rgba(255, 140, 0, 1.0);
}
#WallNotifications .bubbles.reddot #bubbles_count {
background: none;
position: relative;
left: 4px;
top: 4px;
font-size: 16px;
text-align: center;
font-weight : bold;
}
В прошлых выпусках мы уже рассказывали о выделении ников определённых участников вики на различных страницах и пространствах имён. Сегодня мы продолжим развивать эту тему, и создадим особые лого и подписи для участников в чате.
Код для особого лого модераторов чата в чате:
.username:after {
background-image : url('http://url особого лого в чате');
background-position: 0px 0px;
}
Лого можно изменить только для определённых участников, если использовать id вида #user-Имя участника. Пример:
#user-Wildream .username:after {
background-image : url('http://url особого лого в чате');
background-position: 0px 0px;
}
Код для подписи под именем участника (эта подпись также заменяет надпись "Отсутствует", но ник участника всё равно окрашивается в серый цвет). Этот код необходимо применять только с id, которые присваивают отображение текста только под пользовательскими именами определённых участников:
#user-Имя участника .details:after {
content: "Текст подписи";
font-size: 10px;
}
#user-Имя участника .status {
display: none;
}
Последним, наиболее сложным, но весьма эффектным фокусом на сегодня будет создание весьма необычного шаблона для сокрытия спойлеров в статьях.
Вот как он выглядит:
Чтобы создать его, нам потребуется сделать сразу две вещи - поместить в MediaWiki:Wikia.css этот код:
#spoiler {
overflow: hidden;
background-color: #002E54;
border: 1px white solid; !important;
border-radius: 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px;
color:white;
width: 120px;
height : 25px;
text-decoration: underline;
-moz-transition: all 0.8s 0.001s ease-in;
-o-transition: all 0.8s 0.001s ease-in;
-webkit-transition: all 0.8s 0.001s ease-in;
}
#spoiler:hover {
background-color: #ADD8E6;
border:4px solid #002E54;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px;
color: #000;
width: 100%;
height: 100%;
text-decoration: none;
text-align:center;
}
и создать шаблон для более удобного использования этого кода. Код шаблона очень простой, и выглядит вот так:
<div id="spoiler"><center>Спойлер!</center>{{{1}}}</div>
Совершенствуя код, можно сделать этот шаблон ещё более интересным, например - вот таким:
К сожалению, данный код для шаблонов, а также плавное изменение иконки не поддерживаются браузером Internet Explorer до 9 версии включительно.
Если вас заинтересовали представленные коды, у вас есть вопросы или пожелания - оставляйте их в комментариях ниже. Экспериментируйте с представленными выше кодами, придумывайте новые фокусы и делайте свою вики уникальной! Удачи!