Новый вид календаря

В этом материале придадим новый вид календарю на юкоз. Приведу три варианта цветовых решений: Серый, синий и красный.

Серый вид календаря

Установка:
Скачайте архив, распакуйте его и закачайте файлы папки gray архива, в папку img файл менеджера.
Этот код устанавливаем в css.

Код

.calTable {
  width:205px;
  height:247px;
  background:url(/img/bg_cal.png) no-repeat;
  padding:0 7px 7px 7px;
}
.calMonth {
  text-transform:uppercase;
  height:29px;
}
.calMonthLink {
  color:#fff;
  text-shadow:0 -1px #7d2e2e;
  line-height:21px;
}
.calWday, .calWdaySe, .calWdaySu {
  color:#666666;
  font:11px/11px Verdana, Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  padding:5px 3px 8px 3px;
  height:10px;
}
.calMday {
  font:11px Verdana, Arial, Helvetica, sans-serif;
  padding:5px;
  height:10px;
  color:#666666;
}
.calMdayA, .calMdayIsA {
  background:url(/img/cal_active.png) no-repeat 0 2px;
}
.calMdayIs {
  background:url(/img/cal_link.png) no-repeat 1px 6px;
}
.calMdayIsA .calMdayLink {
  background:url(/img/cal_link.png) no-repeat 1px 0;
  display:block;
}
.calMdayLink {
  color:#565555;
  font:11px Verdana, Arial, Helvetica, sans-serif;
}

Синий вид календаря

Установка:
Скачайте архив, распакуйте его и закачайте файлы папки blue архива, в папку img файл менеджера.
Этот код устанавливаем в css.

Код

.calTable {
  width:205px;
  height:247px;
  background:url(/img/bg_cal.png) no-repeat;
  padding:0 7px 7px 7px;
}
.calMonth {
  text-transform:uppercase;
  height:29px;
}
.calMonthLink {
  color:#fff;
  text-shadow:0 -1px #7d2e2e;
  line-height:21px;
}
.calWday, .calWdaySe, .calWdaySu {
  color:#3c7cbd;
  font:11px/11px Verdana, Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  padding:5px 3px 8px 3px;
  height:10px;
}
.calMday {
  font:11px Verdana, Arial, Helvetica, sans-serif;
  padding:5px;
  height:10px;
  color:#666666;
}
.calMdayA, .calMdayIsA {
  background:url(/img/cal_active.png) no-repeat 0 2px;
}
.calMdayIs {
  background:url(/img/cal_link.png) no-repeat 1px 6px;
}
.calMdayIsA .calMdayLink {
  background:url(/img/cal_link.png) no-repeat 1px 0;
  display:block;
}
.calMdayLink {
  color:#565555;
  font:11px Verdana, Arial, Helvetica, sans-serif;
}

Красный вид календаря

Установка:
Скачайте архив, распакуйте его и закачайте файлы папки red архива, в папку img файл менеджера.
Этот код устанавливаем в css.

Код

.calTable {
  width:205px;
  height:247px;
  background:url(/img/bg_cal.png) no-repeat;
  padding:0 7px 7px 7px;
}
.calMonth {
  text-transform:uppercase;
  height:29px;
}
.calMonthLink {
  color:#fff;
  text-shadow:0 -1px #7d2e2e;
  line-height:21px;
}
.calWday, .calWdaySe, .calWdaySu {
  color:#bd3c3c;
  font:11px/11px Verdana, Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  padding:5px 3px 8px 3px;
  height:10px;
}
.calMday {
  font:11px Verdana, Arial, Helvetica, sans-serif;
  padding:5px;
  height:10px;
  color:#666666;
}
.calMdayA, .calMdayIsA {
  background:url(/img/cal_active.png) no-repeat 0 2px;
}
.calMdayIs {
  background:url(/img/cal_link.png) no-repeat 1px 6px;
}
.calMdayIsA .calMdayLink {
  background:url(/img/cal_link.png) no-repeat 1px 0;
  display:block;
}
.calMdayLink {
  color:#565555;
  font:11px Verdana, Arial, Helvetica, sans-serif;
}

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Вверх | меню | пользователи

Онлайн всего: 1

Гостей: 1

Пользователей: 0