Главная » Для UCOZ » 2016 » Сентябрь » 23 » Делаем иконку календаря в размещаемых материалах

Разное

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



Теги: вид материалов, иконка календаря


Сегодня мы с вами научимся делать иконку календаря в размещаемых материалах модулей системы 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;}  


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

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

    24.09.2017

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

    Комментарии: 1   Просмотры: 4

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

    26.08.2016

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

    Комментарии: 0   Просмотры: 317

Новые пользователи

Хостинг от uCoz