регистрация
856материалов
3341комментарий
239тем на форуме
7058пользователей

Стилизация uCoz-календаря от uGarts.pro

Описание:

Привет, сегодня разберем такую тему как вид календаря для uCoz, по моему мнению этот блок является бесполезным и не нужным элементом на сайте, я просто не вижу в нем необходимости, но если не вижу ее я, это не значит что ее не видят другие, особенно администраторы новостных сайтов, поэтому для тех кто ставит у себя календарь uCoz, я предлагаю несколько цветовых стилизаций и схем оформления uCoz-календаря, которые были разработаны порталом и нашим хорошим другом uGarts.pro

Первый вариант:

Код стилей:
Код
/* Default calendar uGarts.pro*/     
table.calTable a {     
     font-family: Open sans;     
}     
table.calTable {     
     font-family: Open sans;     
     width: 265px;     
     position: relative;     
     background: url(http://triangle.ucoz.com/images/calbg.jpg) no-repeat;     
     background-size: cover;     
     border-radius: 5px;     
     -moz-border-radius: 5px;     
     -webkit-border-radius: 5px;     
     padding: 5px;     
     color: #FFFFFF;     
     font-size: 14px;     
     border-spacing: 0;     
}     
table.calTable tr:nth-child(7n+2) {     
     position: absolute;     
     top: 60px;     
     background: rgba(255, 255, 255, .3);     
     left: 0px;     
     width: 100%;     
}     
td.calMday,td.calMdayIs {     
     padding: 9px;     
     cursor: default;     
     transition: all .3s ease;     
     border-radius: 50%;     
     -moz-border-radius: 50%;     
     -webkit-border-radius: 50%;     
}     
td.calMday:hover,td.calMdayIsA:hover,.calMdayIs:hover,.calMdayA:hover {     
     background: rgba(255, 255, 255, .3);     
     border-radius: 50%;     
     -moz-border-radius: 50%;     
     -webkit-border-radius: 50%;     
     transition: all .3s ease;     
}     
td.calMdayIsA, .calMdayA {     
     border: 1px solid;     
     border-radius: 50%;     
     -moz-border-radius: 50%;     
     -webkit-border-radius: 50%;     
}     
a.calMdayLink,.calMonthLink:hover {     
     color: #fff;     
     text-decoration: underline;     
position: relative;     
}     
td.calWday, td.calWdaySe, td.calWdaySu {     
     text-transform: uppercase;     
     padding: 5px 10px;     
     width: 14.2857142857%;     
}     
td.calWday:hover, td.calWdaySe:hover, td.calWdaySu:hover {     
     background: rgba(255, 255, 255, .3);     
     cursor: default;     
}     
.calMonth {     
     padding: 45px 5px;     
     padding-top: 10px;     
}     
.calMonthLink {     
     color: #fff;     
     font-size: 1.6em;     
     text-decoration: none !important;     
}     
.calMonth a:first-child {     
     margin-left: 15px;     
     float: left;     
     margin-top: 6px;     
     width: 0;     
     height: 0;     
     font-size: 0;     
     border-top: 10px solid transparent;     
     border-right: 8px solid #fff;     
     border-bottom: 10px solid transparent;     
}     
.calMonth a:first-child:after {     
     position: absolute;     
     content:'';     
     border-top: 10px solid transparent;     
     border-right: 8px solid #95819A;     
     border-bottom: 10px solid transparent;     
     margin-top: -10px;     
     margin-left: 2px;     
}     
.calMonth a:last-child {     
     margin-right: 15px;     
     float: right;     
     margin-top: 6px;     
     width: 0;     
     height: 0;     
     font-size: 0;     
     border-top: 10px solid transparent;     
     border-left: 8px solid #fff;     
     border-bottom: 10px solid transparent;     
}     
.calMonth a:last-child:after {     
     position: absolute;     
     content:'';     
     border-top: 10px solid transparent;     
     border-left: 8px solid #C6CFD1;     
     border-bottom: 10px solid transparent;     
     margin-top: -10px;     
     margin-left: -10px;     
}     
a.calMdayLink:after {position: absolute; content:'';width: 30px;height: 30px;left: -10px;bottom: -5px;}     
.calMdayA {     
     cursor: default;     
}     
/* Default calendar uGarts.pro*/

Второй вариант:

Код стилей:
Код
/* Light calendar uGarts.pro*/     
table.calTable a {     
     font-family: Open sans;     
}     
table.calTable {     
     font-family: Open sans;     
     width: 265px;     
     position: relative;     
     background: #FFFFFF;     
     background-size: cover;     
     border-radius: 5px;     
     -moz-border-radius: 5px;     
     -webkit-border-radius: 5px;     
     padding: 5px;     
     color: #FFFFFF;     
     font-size: 14px;     
     border-spacing: 0;     
}     
table.calTable tr:nth-child(7n+2) {     
     position: absolute;     
     top: 60px;     
     background: #3498db;     
     left: 0px;     
     width: 100%;     
}     
td.calMday,td.calMdayIs {     
     padding: 9px;     
     cursor: default;     
     transition: all .3s ease;     
     border-radius: 50%;     
     color: #3498db;     
     -moz-border-radius: 50%;     
     -webkit-border-radius: 50%;     
}     
td.calMday:hover,td.calMdayIsA:hover,.calMdayIs:hover,.calMdayA:hover {     
     background: #3498DB;     
     border-radius: 50%;     
     -moz-border-radius: 50%;     
     -webkit-border-radius: 50%;     
     transition: all .3s ease;     
     color: #fff;     
}     
td.calMdayIsA, .calMdayA {     
     border: 1px solid #3498db;     
     border-radius: 50%;     
     -moz-border-radius: 50%;     
     -webkit-border-radius: 50%;     
     color: #3498db;     
}     
a.calMdayLink,.calMonthLink:hover {     
     color: #7F8C8D;     
     text-decoration: underline;     
     position: relative;     
}     
td.calWday, td.calWdaySe, td.calWdaySu {     
     text-transform: uppercase;     
     padding: 5px 10px;     
     width: 14.2857142857%;     
}     
td.calWday:hover, td.calWdaySe:hover, td.calWdaySu:hover {     
     cursor: default;     
}     
.calMonth {     
     padding: 45px 5px;     
     padding-top: 10px;     
}     
.calMonthLink {     
     color: #7f8c8d;     
     font-size: 1.6em;     
     text-decoration: none !important;     
}     
.calMonth a:first-child {     
     margin-left: 15px;     
     float: left;     
     margin-top: 6px;     
     width: 0;     
     height: 0;     
     font-size: 0;     
     border-top: 10px solid transparent;     
     border-right: 8px solid #7f8c8d;     
     border-bottom: 10px solid transparent;     
}     
.calMonth a:first-child:after {     
     position: absolute;     
     content:'';     
     border-top: 10px solid transparent;     
     border-right: 8px solid #fff;     
     border-bottom: 10px solid transparent;     
     margin-top: -10px;     
     margin-left: 2px;     
}     
.calMonth a:last-child {     
     margin-right: 15px;     
     float: right;     
     margin-top: 6px;     
     width: 0;     
     height: 0;     
     font-size: 0;     
     border-top: 10px solid transparent;     
     border-left: 8px solid #7f8c8d;     
     border-bottom: 10px solid transparent;     
}     
.calMonth a:last-child:after {     
     position: absolute;     
     content:'';     
     border-top: 10px solid transparent;     
     border-left: 8px solid #fff;     
     border-bottom: 10px solid transparent;     
     margin-top: -10px;     
     margin-left: -10px;     
}     
a.calMdayLink:after {position: absolute; content:'';width: 30px;height: 30px;left: -10px;bottom: -5px;}     
.calMdayA {     
     cursor: default;     
}     
/* Light calendar uGarts.pro*/

Третий вариант:

Код стилей:
Код
/* Dark calendar uGarts.pro*/     
table.calTable a {     
     font-family: Open sans;     
}     
table.calTable {     
     font-family: Open sans;     
     width: 265px;     
     position: relative;     
     background: #34495E;     
     background-size: cover;     
     border-radius: 5px;     
     -moz-border-radius: 5px;     
     -webkit-border-radius: 5px;     
     padding: 5px;     
     color: #FFFFFF;     
     font-size: 14px;     
     border-spacing: 0;     
}     
table.calTable tr:nth-child(7n+2) {     
     position: absolute;     
     top: 60px;     
     background: #1abc9c;     
     left: 0px;     
     width: 100%;     
}     
td.calMday,td.calMdayIs {     
     padding: 9px;     
     cursor: default;     
     transition: all .3s ease;     
     border-radius: 50%;     
     -moz-border-radius: 50%;     
     -webkit-border-radius: 50%;     
}     
td.calMday:hover,td.calMdayIsA:hover,.calMdayIs:hover,.calMdayA:hover {     
     background: #1abc9c;     
     border-radius: 50%;     
     -moz-border-radius: 50%;     
     -webkit-border-radius: 50%;     
     transition: all .3s ease;     
}     
td.calMdayIsA, .calMdayA {     
     border: 1px solid #1ABC9C;     
     border-radius: 50%;     
     -moz-border-radius: 50%;     
     -webkit-border-radius: 50%;     
}     
a.calMdayLink,.calMonthLink:hover {     
     color: #fff;     
     text-decoration: underline;     
position: relative;     
}     
td.calWday, td.calWdaySe, td.calWdaySu {     
     text-transform: uppercase;     
     padding: 5px 10px;     
     width: 14.2857142857%;     
}     
td.calWday:hover, td.calWdaySe:hover, td.calWdaySu:hover {     
     cursor: default;     
}     
.calMonth {     
     padding: 45px 5px;     
     padding-top: 10px;     
}     
.calMonthLink {     
     color: #fff;     
     font-size: 1.6em;     
     text-decoration: none !important;     
}     
.calMonth a:first-child {     
     margin-left: 15px;     
     float: left;     
     margin-top: 6px;     
     width: 0;     
     height: 0;     
     font-size: 0;     
     border-top: 10px solid transparent;     
     border-right: 8px solid #fff;     
     border-bottom: 10px solid transparent;     
}     
.calMonth a:first-child:after {     
     position: absolute;     
     content:'';     
     border-top: 10px solid transparent;     
     border-right: 8px solid #34495E;     
     border-bottom: 10px solid transparent;     
     margin-top: -10px;     
     margin-left: 2px;     
}     
.calMonth a:last-child {     
     margin-right: 15px;     
     float: right;     
     margin-top: 6px;     
     width: 0;     
     height: 0;     
     font-size: 0;     
     border-top: 10px solid transparent;     
     border-left: 8px solid #fff;     
     border-bottom: 10px solid transparent;     
}     
.calMonth a:last-child:after {     
     position: absolute;     
     content:'';     
     border-top: 10px solid transparent;     
     border-left: 8px solid #34495E;     
     border-bottom: 10px solid transparent;     
     margin-top: -10px;     
     margin-left: -10px;     
}     
a.calMdayLink:after {position: absolute; content:'';width: 30px;height: 30px;left: -10px;bottom: -5px;}     
.calMdayA {     
     cursor: default;     
}     
/* Dark calendar uGarts.pro*/


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 18.11.2015 в 09:00
Материал просмотрен: 1558 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 6 комментариев

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

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


maks@@@
Красиво=)
Ромчик
И стильно)
maks@@@
А что у вас с Метрикой?
https://yadi.sk/i/L4Q3QIXQkZXos
Ромчик
Цитата maks@@@
А что у вас с Метрикой?
https://yadi.sk/i/L4Q3QIXQkZXos

Настройки сбились
mrcherzzz
Mr Cherz @mrcherzzz 31.12.2015 15:346
0
А как ставить-то?
avatar
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0