Гостевой вход

Вы не залогинились
11:15

Делаем иконку календаря в размещаемых материалах

Категория: Разное

Метки: вид материалов, иконка календаря
Сегодня мы с вами научимся делать иконку календаря в размещаемых материалах модулей системы uCoz. Никаких изображений при этом использовать мы не будем, всё делается с помощью CSS, но результатом вы останетесь довольны.
Делать будем на примере модуля новости сайта.



Итак, заходим в настройку шаблона "Новости сайта - Вид материалов". Главное, что нам нужно, это найти вот такой код:

Код

<?if($MESSAGE$)?>
<div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">
$MESSAGE$
</div>
<?endif?>


Добавим в него всего лишь одну строку кода:

Код

<?if($MESSAGE$)?>
<div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">
<p class="calendar">$WDAY$ <em>$DATE$</em></p>
$MESSAGE$
</div>
<?endif?>


а в шаблон "Таблица стилей (CSS)" добавим необходимые стили для оформления иконки календаря:

Код

.calendar{
  margin:.25em 10px 10px 0!important;
  padding-top:5px;
  float:left;
  width:80px;
  background:#ededef;
  background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));  
  background: -moz-linear-gradient(top, #ededef, #ccc);  
  font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
  text-align:center;
  color:#000;
  text-shadow:#fff 0 1px 0;  
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;  
  position:relative;
  -moz-box-shadow:0 2px 2px #888;
  -webkit-box-shadow:0 2px 2px #888;
  box-shadow:0 2px 2px #888;
  }
.calendar em{
  display:block;
  font:normal bold 11px/30px Arial, Helvetica, sans-serif;
  color:#fff;
  text-shadow:#00365a 0 -1px 0;  
  background:#04599a;
  background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));  
  background:-moz-linear-gradient(top, #04599a, #00365a);  
  -moz-border-radius-bottomright:3px;
  -webkit-border-bottom-right-radius:3px;  
  border-bottom-right-radius:3px;
  -moz-border-radius-bottomleft:3px;
  -webkit-border-bottom-left-radius:3px;  
  border-bottom-left-radius:3px;  
  border-top:1px solid #00365a;
  }  
.calendar:before, .calendar:after{
  content:'';
  float:left;
  position:absolute;
  top:5px;  
  width:8px;
  height:8px;
  background:#111;
  z-index:1;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  -moz-box-shadow:0 1px 1px #fff;
  -webkit-box-shadow:0 1px 1px #fff;
  box-shadow:0 1px 1px #fff;
  }
.calendar:before{left:11px;}  
.calendar:after{right:11px;}  
.calendar em:before, .calendar em:after{
  content:'';
  float:left;
  position:absolute;
  top:-5px;  
  width:4px;
  height:14px;
  background:#dadada;
  background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));  
  background:-moz-linear-gradient(top, #f1f1f1, #aaa);  
  z-index:2;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  }
.calendar em:before{left:13px;}  
.calendar em:after{right:13px;}  


Да! совсем забыл, один момент! Чтобы в иконке не прописывалось полностью название дня недели, нужно зайти в общие настройки и выбрать там краткий вариант вывода названия дня недели.

Просмотров: 276 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

    Вид материалов форума (флип-карта мини-профиля со своим фоном)

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

    Вид материалов форума (размытый фон из аватара пользователя)

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

    Вид материалов форума (краткая информация о пользователе)

    Первым решением, выкладываемым мной здесь для uCoz, будет улучшение для материалов форума. Это один из самых любимых мною для экспериментов модуль системы, поэтому и решил начать с него. А суть решения следующая: мы заключим краткую информацию о пользователе, оставившем сообщение на форуме, в единый симпатичный блок и добавим иконки от Font Awesome. Плюс, как дополнение, оформим мини-блок, в который войдёт аватар пользователя и небольшая информация.

Онлайн статистика

18.11.2017

Суббота

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: