Добавляем возможности окрасить фон в разные цвета, в разных вариантах.
Ниже представленны фрагменты кода.
Варинант #1: Заливка фона в шахматном исполнении
$('.pl .lt-tsr-block .lt-tsr-content:even').css('background-color','#f4f7f9') /*нечетные*/
$('.pl .lt-tsr-block .lt-tsr-content:odd').css('background-color','#6E9ECF') /*четные*/
$('.pl .lt-tsr-block .lt-tsr-content:odd .lt-tsr-text-part').css('color','#ffffff') /*цвет текста плитки*/
$('.pl .lt-tsr-block .lt-tsr-content:odd .button button').css('background-color','#ffffff') /*фон кнопки*/
$('.pl .lt-tsr-block .lt-tsr-content:odd .button button').css('color','#000') /*цвет кнопки*/
Варинант #2: Заливка фона в идивидуальном исполнении
$('.pl .lt-tsr-block .lt-tsr-content').eq(0).css('background-color','#f4f7f9') /*1 плитка*/
var num_block1 = $('.pl .lt-tsr-block .lt-tsr-content').eq(1).css('background-color','#00a86b') /*2 плитка*/
var num_block2 = $('.pl .lt-tsr-block .lt-tsr-content').eq(2).css('background-color','#ffa500') /*3 плитка*/
var num_block3 = $('.pl .lt-tsr-block .lt-tsr-content').eq(3).css('background-color','#ff7f50') /*4 плитка*/
var num_block4 = $('.pl .lt-tsr-block .lt-tsr-content').eq(4).css('background-color','#5490de') /*5 плитка*/
var num_block5 = $('.pl .lt-tsr-block .lt-tsr-content').eq(5).css('background-color','#d1c2f0') /*6 плитка*/
var num_block6 = $('.pl .lt-tsr-block .lt-tsr-content').eq(6).css('background-color','#c2c2c2') /*7 плитка*/
var num_block7 = $('.pl .lt-tsr-block .lt-tsr-content').eq(7).css('background-color','#b0b7c6') /*8 плитка*/
var num_block8 = $('.pl .lt-tsr-block .lt-tsr-content').eq(8).css('background-color','#a98307') /*9 плитка*/
$(num_block1).find('.lt-tsr-text-part').css('color','#ffffff'); /*2 плитка*/
$(num_block2).find('.lt-tsr-text-part').css('color','#ffffff'); /*3 плитка*/
$(num_block3).find('.lt-tsr-text-part').css('color','#ffffff'); /*4 плитка*/
$(num_block4).find('.lt-tsr-text-part').css('color','#ffffff'); /*5 плитка*/
Варинант #1: Заливка фона в шахматном исполнении
Шаг 1.
Для добавления фона для плиток необходимо добавить новый новый блок “JavaScript-код” сокращенно JS!
Добавляем блок JS на странице геткуса
В него добавить нужный кусок кода из представленных вариантов, который вам необходим под вашу задачу.
Шаг 2.
В JS-блок добавим код «шахматной заливки фона» представленный выше.
Плитки геткурс, добавление кода в блок JS.
Шаг 3.
Разберем как все работает!
$('.pl .lt-tsr-block .lt-tsr-content:even').css('background-color','#f4f7f9')
- этот код отвечает за окраску четных плиток, т.е 2,4,6 и т.д. согласно порядковому номеру плитки.
$('.pl .lt-tsr-block .lt-tsr-content:odd').css('background-color','#00a86b')
- этот код отвечает за окраску нечетных плиток, т.е 1,3,5,7 и т.д. согласно порядковому номеру плитки.
Данный фрагмент — css('background-color','#f4f7f9') — а именно выделенный текст, отвечает за цвет плитки, и его можно менять на свое усмотрение как этого требует дизайн сайта.
В коде для четных плиток, указан более темный фон, поэтому мы добавили еще фрагмент кода для придания тексту читабельного цвета.
В данном случае это белый.
$('.pl .lt-tsr-block .lt-tsr-content:odd .lt-tsr-text-part').css('color','#ffffff')
Если в свое дизайне вы используете кнопки, так же как и с текстом, для четных плиток необходимо добавить следующий фрагмент кода:
$('.pl .lt-tsr-block .lt-tsr-content:odd .button button').css('background-color','#ffffff') /*фон кнопки*/
$('.pl .lt-tsr-block .lt-tsr-content:odd .button button').css('color','#000') /*цвет текста кнопки*/
Полезно! Нужные цвета можно брать тут.
Шаг 4.
Что важно соблюдать, чтобы все работало!?
Важно! Обязательно обращайте внимание на синтаксис и пунктуацию, добавление или случайное удаление кавычек или запятых может привести к поломке кода.
Важно! Для того, чтобы все работало, плитки (записи) необходимо добавлять в рамках одного блока, как указано на картинке.
Добавление записей в рамках одного блока геткурс
🧞♂️
После добавления всех настроек получилась вот такая аккуратная плитка, которая закрашена в шахматном исполнении:
Варинант #2: заливка фона в идивидуальном исполнении
Шаг 5.
В JS-блок добавим код для «индивидуальной заливки плиток» представленный выше.
Плитки геткурс, добавление кода в блок JS.
Шаг 6.
Разберем как все работает во втором случае!
Код состоит из двух частей, заливка фона, и окраска текста.
Логично, что если фон залит темными тонами, то текст необходимо красить в светлые, тогда он будет читабелен для пользователя.
Первая часть кода, отвечает за окраску фона:
$('.pl .lt-tsr-block .lt-tsr-content').eq(0).css('background-color','#f4f7f9') /*1 плитка*/
var num_block1 = $('.pl .lt-tsr-block .lt-tsr-content').eq(1).css('background-color','#00a86b') /*2 плитка*/
var num_block2 = $('.pl .lt-tsr-block .lt-tsr-content').eq(2).css('background-color','#ffa500') /*3 плитка*/
var num_block3 = $('.pl .lt-tsr-block .lt-tsr-content').eq(3).css('background-color','#ff7f50') /*4 плитка*/
var num_block4 = $('.pl .lt-tsr-block .lt-tsr-content').eq(4).css('background-color','#5490de') /*5 плитка*/
var num_block5 = $('.pl .lt-tsr-block .lt-tsr-content').eq(5).css('background-color','#d1c2f0') /*6 плитка*/
var num_block6 = $('.pl .lt-tsr-block .lt-tsr-content').eq(6).css('background-color','#c2c2c2') /*7 плитка*/
var num_block7 = $('.pl .lt-tsr-block .lt-tsr-content').eq(7).css('background-color','#b0b7c6') /*8 плитка*/
var num_block8 = $('.pl .lt-tsr-block .lt-tsr-content').eq(8).css('background-color','#a98307') /*9 плитка*/
Вторая часть кода, отвечает за окраску текста внутри блока:
$(num_block1).find('.lt-tsr-text-part').css('color','#ffffff'); /*2 плитка*/
$(num_block2).find('.lt-tsr-text-part').css('color','#ffffff'); /*3 плитка*/
$(num_block3).find('.lt-tsr-text-part').css('color','#ffffff'); /*4 плитка*/
$(num_block4).find('.lt-tsr-text-part').css('color','#ffffff'); /*5 плитка*/
Если внимательно рассмотреть строку, то можно обратить внимание на порядковый номер в скобках.
var num_block2 = $('.pl .lt-tsr-block .lt-tsr-content').eq(2).css('background-color','#ffa500')
Этот номер как раз таки отвечает за порядковый номер плитки в составе одного блока, и присваивает ему цвет фона.
Только считать нужно от нуля!
0 = 1 плитка, 1 = 2 плитка, 2 = 3 плитка, 3 = 4 плитка и т.д
Следуя этой логике вы с легкостью сможете добавить цвет фону, например для 10-й по счету плитки.
var num_block9 = $('.pl .lt-tsr-block .lt-tsr-content').eq(9).css('background-color','#a98307') /10 плитка*/
Важно! Обязательно обратите внимание на цифру в начале строки, она должна соответствовать цифре внутри скобок!
Это необходимо, если вы захотите поменять цвет текста внутри плитки в случае если фон будет выполнен в темных тонах.
Для замены цвета добавьте следующую строку кода:
$(num_block9).find('.lt-tsr-text-part').css('color','#ffffff'); /*2 плитка*/
где цифра num_blockN равна цифре кода для фона плитки eq(9) и num_block9.
🧞♂️
После добавления всех настроек получилась вот такая аккуратная плитка, которая закрашена в индивидуальном исполнении:
авторизуйтесь