/*Онлайн чат*/
Добро пожаловать в чат
Вход / Регистрация
/*Онлайн чат*/ /*TimeLine*/
Обновления на сайте
  • Adrian Monino
    Premium Member
  • /*TimeLine*/

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

    Изображение материала
    Информация
    КатегорияСкрипты и модификация
    АвторГость
    Кол-во просмотров504
    Кол-во скачиваний0
    Кол-во комментарий1
    Ссылка на демоДЕМО
    ИсточникПерейти
    Дата добавления24.12.2019 / 07:55
    Описание

     

     

     

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

    1. 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;}


    Ненужные части стилей удаляем, дабы не нагружать сайт.
    И вставляем календарь:
    $CALENDAR$

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

     

     

     

     

     

     

    Комментарии
    • vover6

      vover6

      Ну так то красиво)
    Добавить комментарий
    Этот сайт использует файлы cookies для более комфортной работы пользователя. Продолжая просмотр страниц сайта, вы соглашаетесь с Политикой использования файлов cookies.