Joomla! Україна

Зміна стандартного календаря у Joomla 2.5. Частина 1: зміна стандартного календаря

30.07.2012, 23:45  |  Прочитано: 35520 раз  |  Шаблони та дизайн  |  Автор: Денис Носов

У багатьох розширення використовується стандартний календар, а іноді він зовсім не вписується у дизайн сайту, тому є потреба у його видозміненні. звичайно можна відкрити CSS-файл календаря та візуально його змінити, але цей крок заважить оновленню Joomla через Менеджер оновлень. Оскільки через Менеджер оновлень після оновлення існуючі файли ядра Joomla перезаписуються, то всі наші стання будуть марними. Тому я пропоную використати метод, наведений нище, на рівні шаблону.

Видалення з HTML сторінки посилання на стилі календаря

В файлі шаблону index.php після стрічки defined( '_JEXEC' ) or die( 'Restricted access' ); пропишемо наступний код, який видалятиме посилання на стилі:

unset($this->_styleSheets[JURI::root(true).'/media/system/css/calendar-jos.css']);

Далі скопіюємо файл calendar-jos.css з теки /media/system/css/ до теки стилів нашого шаблону (наприклад: /templates/MyTemplate/css/calendar-jos.css). Саме перенесений файл ми можемо змінювати як завгодно не боячись, що після оновлення Joomla усі стилі будуть змінені на стандартні.

Переписуємо посилання на стилі календаря

Далі потрібно переписати посилання на наш новостворений файл, який розміщений за адресою /templates/MyTemplate/css/calendar-jos.css. Для цього у index.php нижче пишемо:

 $doc =& JFactory::getDocument(); 
$doc->addStyleSheet( JURI::root(true).'/templates/lmrv3/css/calendar-jos.css' );

Ось і все, тепер ми прив'язали новий файл стилів.

Повний вигляд коду

 

$doc =& JFactory::getDocument(); 

unset($this->_styleSheets[JURI::root(true).'/media/system/css/calendar-jos.css']);
$doc->addStyleSheet( JURI::root(true).'/templates/lmrv3/css/calendar-jos.css' );

Змінюємо стилі самого календаря на нові

Я змінив кольорову палітру на більш ніжну та додав синій колір, який у мене на одному з сайтів є основним. Виглядає новий календар так само як на малюнку праворуч.

Сам CSS цього календаря із цією палітрою буде наступний:

/**
 * @copyright     Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 *
 * @modify        Copyright (C) 2012 Joomla! Ukraine (http://joomla-ua.org). All rights reserved.
 * @modify        Copyright (C) 2012 Denys Design Studio (http://denysdesign.com). All rights reserved.
 */

/* The main calendar widget.  DIV containing a table. */
div.calendar {
    position: relative;
    z-index: 100;
    width: 226px;
    border: 1px solid #ececec;
}

.calendar, .calendar table {
    font-size: 11px;
    color: #0074cc;
    cursor: default;
    background: #fff;
}
.calendar table, .calendar table tr, .calendar table td {
    padding: 0;
    margin: 0;
    border: 0 none;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .cal-button { /* "<<", "<", ">", ">>" buttons have this class */
    text-align: center;    /* They are the navigation buttons */
    padding: 2px;          /* Make the buttons seem like they're pressing */
}

.calendar thead .title { /* This holds the current "month, year" */
    font-weight: bold;      /* Pressing it will take you to the current date */
    text-align: center;
    background: #0074cc;
    color: #ffffff;
    padding: 2px;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
    background: #f3f3f3;
    color: #0074cc;
}

.calendar thead .name { /* Cells <TD> containing the day names */
    border-bottom: 1px solid #ececec;
    padding: 2px;
    text-align: center;
    color: #0074cc;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
    color: #ff7f50;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
    background: #fffacd;
    color: #0055cc;
    border: 1px solid #fffacd;
    padding: 1px;
}

.calendar thead .active { /* Active (pressed) buttons in header */
    background: #0055cc;
    color: #fff;
    padding: 2px 0px 0px 2px;
}

.calendar thead .daynames { /* Row <TR> containing the day names */
    background: #f2f2f2;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
    width: 2em;
    text-align: right;
    padding: 2px 4px 2px 2px;
}

.calendar table .wn {
    padding: 2px 3px 2px 2px;
    border-right: 1px solid #ececec;
    background: #f2f2f2;
}

.calendar tbody .rowhilite td {
    background: #0055cc;
    color: #ffffff;
}

.calendar tbody .rowhilite td.wn {
    background: #0055cc;
    color: #ffffff;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
    background: #0074cc;
    color: #ffffff;
    padding: 2px 2px 0px 2px;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
    color: #ff7f50;
}

.calendar tbody td.selected { /* Cell showing today date */
    font-weight: bold;
    border: 1px solid #0074cc;
    padding: 1px 3px 1px 1px;
    background: #0074cc;
    color: #ffffff;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
    background: #fffacd;
    padding: 1px 3px 1px 1px;
    border: 1px solid #fffacd;
    color: #0055cc;
}

.calendar tbody td.today {
    font-weight: bold;
}

.calendar tbody .disabled {
    color: #aeaeae;
}

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
    visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
    display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
    text-align: center;
    background: #e1e1e1;
    color: #0074cc;
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
    border-top: 1px solid #ececec;
    background: #fafafa;
    color: #0074cc;
    padding: 2px 4px;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
    background: #0055cc;
    border: 1px solid #ff652b;
    padding: 1px;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
    background: #aeaeae;
    padding: 2px 0px 0px 2px;
}

/* Combo boxes (menus that display months/years for direct selection) */

.combo {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 4em;
    cursor: default;
    border: 1px solid #0074cc;
    background: #ffffff;
    color: #0074cc;
    font-size: smaller;
}

.combo .label {
    width: 100%;
    text-align: center;
}

.combo .hilite {
    background: #fffacd;
}

.combo .active {
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    background: #fafafa;
    font-weight: bold;
}

У наступній статті я поділюся, яким чином можна замінити стандартний календар Joomla на інший на прикладі JQuery UI Datepicker.