Можно ли выделят числа в календаре на сайте разными цветами? Если да, то как?

голоса: 0
Я - владелец лиги, мне нужно как-нибудь выделять цвета в календаре. т.е. Зелёный цвет-победы, а красный - поражения. Можно ли это сделать?
| Автор: | Категория: Дизайн сайта
Переоткрытие | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0

Выделить можно, но делается это псевдокласами с помощью стилей, как пример выделить 5 число текущего месяца в красный цвет можно стилями вот так:

.calTable tr:nth-child(4) td:nth-child(3) {color:red;}

получается мы стилями указываем 4-й tr в который завернуты ячейки td и далее мы конкретно указываем к какой именно применить стили выше. Предоставьте ссылку на сайт и какие даты вам нужно выделить, будем смотреть на конкретном примере. 

| Автор:
http://mlfr.ucoz.net выделить нужно вчерашнее число зелёным цветом, т.е. 16 число-победа.
Андрей Измалков,

Конкретно в вашей ситуации 16 число выделить можно так:

.calTable tr:nth-child(5) td:nth-child(7) a.calMdayLink {color:red;}

вместо red пропишите свой цвет, подобрать можно на сайте - http://www.color-hex.com/

Yuri_Geruk,
Подскажите где можно всё это ввести? Я просто начинающий пользователь) вы извините что так много вопросов)
Андрей Измалков,

Перейти в Панель управления - Главная - Дизайн - Управление дизайном(CSS), удалить все содержимое, после вместо удаленного содержимого установить содержимое с файла http://mlfr.ucoz.net/.s/src/css/1257.css - Сохранить. После в самый низ вставьте стили что выше и нажмите кнопку Сохранить.

Yuri_Geruk,
с прочими числами та же процедура? и можете подсказать если зелёный цвет нужно что писать? пишу данную комбинацию вместо "red" : #7BA462 , ничего не происходит.
Андрей Измалков,

С прочими в календаре такая же процедура если нужно выделить отдельное число. По смене цвета, у вас ошибка, вы прописали код цвета так #7BA462кавычка выделенная красным там лишняя.

Yuri_Geruk,
кавычку убрал, число красное.
Андрей Измалков,
Очистите кеш в браузере выполнив несколько раз комбинацию клавиш CTRL+F5 / либо по инструкции http://faq.ucoz.ru/faq/31-1
Yuri_Geruk,
Спасибо) всего доброго)
Yuri_Geruk,

Снова добрый день, Юрий, мне нужно выделить 17 число. Я ввёл ту же самую строку что выше в вопросе но ничего не произошло. На одно число - одна строка? по типу: .calTable tr:nth-child(5) td:nth-child(7) a.calMdayLink {color:red;} 

Андрей Измалков,

Для 17 числа вот так:

.calTable tr:nth-child(6) td:nth-child(1) {color:red;} 

цвет смените на свой.

Yuri_Geruk,
А можно для каждого из чисел получить строку?
Андрей Измалков,
Для каждого это получается всем один цвет задать или каждому по отдельности? Для всех по отдельности получится для одного месяца 30-31 строка, для нового месяца снова столько же, но не одинаковых так как сутки не совпадают и порядок будет другой, если для вас это не очень важно, советовал бы не выделять так как слишком много мороки для вас если не знаете html и css.
Yuri_Geruk,
Каждому по отдельности. Это конечно сложно будет, я это понимаю.
Андрей Измалков,
Ближе к 18-19 часам напишу вам список для целого месяца.
Андрей Измалков,

Вот так, это для текущего месяца (цвет смените на свой для каждого числа кроме 16-17):

.calTable tr:nth-child(3) td:nth-child(6){color:red;} /*1 число*/
.calTable tr:nth-child(3) td:nth-child(7){color:red;} /*2 число*/
.calTable tr:nth-child(4) td:nth-child(1){color:red;} /*3 число*/
.calTable tr:nth-child(4) td:nth-child(2){color:red;} /*4 число*/
.calTable tr:nth-child(4) td:nth-child(3){color:red;} /*5 число*/
.calTable tr:nth-child(4) td:nth-child(4){color:red;} /*6 число*/
.calTable tr:nth-child(4) td:nth-child(5){color:red;} /*7 число*/
.calTable tr:nth-child(4) td:nth-child(6){color:red;} /*8 число*/
.calTable tr:nth-child(4) td:nth-child(7){color:red;} /*9 число*/
.calTable tr:nth-child(5) td:nth-child(1){color:red;} /*10 число*/
.calTable tr:nth-child(5) td:nth-child(2){color:red;} /*11 число*/
.calTable tr:nth-child(5) td:nth-child(3){color:red;} /*12 число*/
.calTable tr:nth-child(5) td:nth-child(4){color:red;} /*13 число*/
.calTable tr:nth-child(5) td:nth-child(5){color:red;} /*14 число*/
.calTable tr:nth-child(5) td:nth-child(6){color:red;} /*15 число*/
.calTable tr:nth-child(5) td:nth-child(7) a.calMdayLink {color:#7ba462;} /*16 число*/
.calTable tr:nth-child(6) td:nth-child(1) {color:#7ba462;} /*17 число*/
.calTable tr:nth-child(6) td:nth-child(2){color:red;} /*18 число*/
.calTable tr:nth-child(6) td:nth-child(3){color:red;} /*19 число*/
.calTable tr:nth-child(6) td:nth-child(4){color:red;} /*20 число*/
.calTable tr:nth-child(6) td:nth-child(5){color:red;} /*21 число*/
.calTable tr:nth-child(6) td:nth-child(6){color:red;} /*22 число*/
.calTable tr:nth-child(6) td:nth-child(7){color:red;} /*23 число*/
.calTable tr:nth-child(7) td:nth-child(1){color:red;} /*24 число*/
.calTable tr:nth-child(7) td:nth-child(2){color:red;} /*25 число*/
.calTable tr:nth-child(7) td:nth-child(3){color:red;} /*26 число*/
.calTable tr:nth-child(7) td:nth-child(4){color:red;} /*27 число*/
.calTable tr:nth-child(7) td:nth-child(5){color:red;} /*28 число*/
.calTable tr:nth-child(7) td:nth-child(6){color:red;} /*29 число*/
.calTable tr:nth-child(7) td:nth-child(7){color:red;} /*30 число*/
.calTable tr:nth-child(8) td:nth-child(1){color:red;} /*31 число*/

Yuri_Geruk,
Спасибо большое!
...