Три простых и красивых варианта оформления стилем CSS календаря для uCoz сайтов, с возможностью замены необходимого цвета, для наглядности представлен серый, синий и красный цвет.
При необходимости можно подключить переключатель цвета путем подмены стиля через скрипт смены цвета дизайна самого шаблона ресурса.
В установке не чего сложного нету, мы просто используем дополнительный стиль, все остальное и классы уже прописаны по умолчанию в самом блоке, мы только даем этим классам направление и цветность.
Установка:
1 Первый вариант синий цвет:
копируем код и вставляем в таблицу стилей в самый низ
Код
.calTable {
width:205px;
height:247px;
background:url(http://ucozon.ru/_dr/65/47087364.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(http://ucozon.ru/_dr/65/33623062.png) no-repeat 0 2px;
}
.calMdayIs {
background:url(http://ucozon.ru/_dr/65/01753129.png) no-repeat 1px 6px;
}
.calMdayIsA .calMdayLink {
background:url(http://ucozon.ru/_dr/65/01753129.png) no-repeat 1px 0;
display:block;
}
.calMdayLink {
color:#565555;
font:11px Verdana, Arial, Helvetica, sans-serif;
}
2 Второй вариант красный цвет:
копируем код и вставляем в таблицу стилей в самый низ
Код
.calTable {
width:205px;
height:247px;
background:url(http://ucozon.ru/_dr/65/62863645.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(http://ucozon.ru/_dr/65/16436536.png) no-repeat 0 2px;
}
.calMdayIs {
background:url(http://ucozon.ru/_dr/65/05198224.png) no-repeat 1px 6px;
}
.calMdayIsA .calMdayLink {
background:url(http://ucozon.ru/_dr/65/05198224.png) no-repeat 1px 0;
display:block;
}
.calMdayLink {
color:#565555;
font:11px Verdana, Arial, Helvetica, sans-serif;
}
3 Третий вариант серый цвет:
копируем код и вставляем в таблицу стилей в самый низ
Код
.calTable {
width:205px;
height:247px;
background:url(http://ucozon.ru/_dr/65/58540832.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(http://ucozon.ru/_dr/65/64183179.png) no-repeat 0 2px;
}
.calMdayIs {
background:url(http://ucozon.ru/_dr/65/80913584.png) no-repeat 1px 6px;
}
.calMdayIsA .calMdayLink {
background:url(http://ucozon.ru/_dr/65/80913584.png) no-repeat 1px 0;
display:block;
}
.calMdayLink {
color:#565555;
font:11px Verdana, Arial, Helvetica, sans-serif;
}
Меню сайта
Меню сайта
