Стилизация календаря uCoz под стиль Flat
827материалов
228тем на форуме
3004комментария
6159пользователей

Стилизация календаря uCoz под стиль Flat

Есть несколько цветовых вариантов календаря: синий, зеленый, желтый, оранжевый, красный, фиолетовый и черный. Несколько вариантов по размерам: большой - растягивается на всю ширину родительского блока, имеет большие отступы и размер шрифта; стандартный - средние шрифты и отступы, календарь шириной в 335px; маленький - мелкий шрифт и отступы, календарь шириной в 225px. Также есть "закомментированная" строка, которая позволяет установить собственную ширину календарю. 

Копируем стили в CSS: 
Код
/*   
   * Стилизация uCoz-календаря   
   * Автор: Kelin   
   * Сайт: Web41k.ru   
   * Рай для WEB-мастера   
*/   
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic);   
.calMonth {font:300 20px 'Open Sans';padding:15px;}   
.calTable {border-radius:5px;overflow:hidden;border-collapse:collapse;box-shadow:0 0 10px #ddd;}   
.calWday,.calWdaySe,.calWdaySu {font:300 15px 'Open Sans';color:#fff;padding:10px;}   
.calMday,.calMdayIs,.calMdayA,.calMdayIsA {font:15px 'Open Sans';color:#ccc;padding:15px;}   
.calMdayA {color:#fff;}   
.calMonth a,.calMdayIs a,.calMdayIsA a {color:#fff;}   

/* Уберите / * в начале и * / в конце след. строки, если хотите задать точную ширину блоку календаря */   
/* .calTable {table-layout:fixed;width:200px;} */   

/* На всю ширину */   
.big .calTable {width:100%;}   
.big .calMonth {font-size:25px;padding:20px;}   
.big .calWday,.big .calWdaySe,.big .calWdaySu {font-size:20px;padding:10px;}   
.big .calMday,.big .calMdayIs,.big .calMdayA {font-size:20px;padding:15px;font-weight:300;}   

/* Уменьшенный размер */   
.small .calMonth {padding:10px;font-weight:400;font-size:14px;}   
.small .calWday,.small .calWdaySe,.small .calWdaySu {font-weight:400;font-size:11px;padding:5px;}   
.small .calMday,.small .calMdayIs,.small .calMdayA,.small .calMdayIsA{font-weight:400;font-size:11px;padding:10px;}   

/* Синий цвет */   
.blue .calMonth {background:#4eb8df;}   
.blue .calWday,.blue .calWdaySe,.blue .calWdaySu{background:#4095b4;}   
.blue .calMdayIsA,.blue .calMdayA {background:#4095b4;}   
.blue .calMdayIs a {color:#4095b4;}   
.blue .calMdayIs a:hover {border-bottom:1px dotted #4095b4;}   

/* Зеленый цвет */   
.green .calMonth {background:#57d68d;}   
.green .calWday,.green .calWdaySe,.green .calWdaySu{background:#46ae72;}   
.green .calMdayA,.green .calMdayIsA {background:#46ae72;}   
.green .calMdayIs a {color:#46ae72;}   
.green .calMdayIs a:hover {border-bottom:1px dotted #46ae72;}   

/* Желтый цвет */   
.yellow .calMonth {background:#ffce34;}   
.yellow .calWday,.yellow .calWdaySe,.yellow .calWdaySu{background:#dab02c;}   
.yellow .calMdayA,.yellow .calMdayIsA {background:#dab02c;}   
.yellow .calMdayIs a {color:#dab02c;}   
.yellow .calMdayIs a:hover {border-bottom:1px dotted #dab02c;}   

/* Оранжевый цвет */   
.orange .calMonth {background:#f5a258;}   
.orange .calWday,.orange .calWdaySe,.orange .calWdaySu{background:#ce884a;}   
.orange .calMdayA,.orange .calMdayIsA {background:#ce884a;}   
.orange .calMdayIs a {color:#ce884a;}   
.orange .calMdayIs a:hover {border-bottom:1px dotted #ce884a;}   

/* Красный цвет */   
.red .calMonth {background:#df4e4e;}   
.red .calWday,.red .calWdaySe,.red .calWdaySu {background:#b44040;}   
.red .calMdayA,.red .calMdayIsA {background:#b44040;}   
.red .calMdayIs a {color:#b44040;}   
.red .calMdayIs a:hover {border-bottom:1px dotted #b44040;}   

/* Фиолетовый цвет */   
.violet .calMonth {background:#df4ed3;}   
.violet .calWday,.violet .calWdaySe,.violet .calWdaySu{background:#b541ab;}   
.violet .calMdayA,.violet .calMdayIsA {background:#b541ab;}   
.violet .calMdayIs a {color:#b541ab;}   
.violet .calMdayIs a:hover {border-bottom:1px dotted #b541ab;}   

/* Черный цвет */   
.black .calMonth {background:#4e4e4e;}   
.black .calWday,.black .calWdaySe,.black .calWdaySu{background:#404040;}   
.black .calMdayA,.black .calMdayIsA {background:#404040;}   
.black .calMdayIs a {color:#404040;}   
.black .calMdayIs a:hover {border-bottom:1px dotted #404040;}

Ненужные части стилей удаляем, дабы не нагружать сайт. 
И вставляем календарь: 
Код
<div class="размер цвет">$CALENDAR$</div>

Размер: значение "big" растягивает календарь на всю ширину родителя и дает большие отступы и шрифт, значение "small" уменьшает отступы и шрифт. Вы можете не указывать это значение, и тогда календарь примет стандартный вид. 
Цвет: blue, green, yellow, orange, red, violet или black на выбор.

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 17.07.2013 в 23:22
Материал просмотрен: 705 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта