Стилизация uCoz-календаря от uGarts.pro
827материалов
228тем на форуме
3004комментария
6157пользователей

Стилизация 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
Материал просмотрен: 1195 раз
Категория материала: Скрипты для 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
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта