Стандартные стили блока «Файл» в уроках GetCourse немного устарели и я решил их освежить.
Здесь поделюсь стилями и небольшим скриптом. Без скрипта не вышло реализовать автоматическое определение типа файла. По атрибуту src стили отказались «цепляться».
JS-код, который добавит соответствующий класс к изображению типа файла и родительскому тегу div:
//Для блока «Файл» проверяем тип файла и присваиваем класс, чтобы изменить иконку
window.addEventListener('DOMContentLoaded', (event) => {
const images = document.querySelectorAll('img');
const fileTypes = [
{ substring: 'pdf-icon', class: 'pdf-icon' },
{ substring: 'docx-icon', class: 'docx-icon' },
{ substring: 'pptx-icon', class: 'pptx-icon' },
{ substring: 'xlsx-icon', class: 'xlsx-icon' },
{ substring: 'fileservice', class: 'image-icon' },
{ substring: 'txt-icon', class: 'txt-icon' },
{ substring: 'log-icon', class: 'file-icon' },
{ substring: 'mp3-icon', class: 'mp3-icon' },
// Добавьте другие типы файлов здесь
];
images.forEach(image => {
const src = image.getAttribute('src');
fileTypes.forEach(fileType => {
const regex = new RegExp(fileType.substring, 'i'); // 'i' для игнорирования регистра
if (regex.test(src)) {
image.classList.add(fileType.class);
const parentDiv = image.parentElement;
if (parentDiv) {
parentDiv.classList.add(fileType.class);
}
}
});
});
});Теперь добавляем стили.
В GetCourse уже используется иконочный шрифт FontAwesome. Его и будем использовать для вывода новых иконок. Дополнительно загружать и подключать ничего не понадобится. Это быстрее, проще, выглядит аккуратно и минималистично. А ещё позволяет быстро и легко изменить размер и цвет иконок.
Размеры я задавал в относительных единицах. Если используете абсолютные, исправьте по месту.
/*Блок «Файл»*/
.lt-lesson-files .lt-block-wrapper {
margin-top: 1rem;
margin-bottom: 1rem;
padding: .5rem 1rem !important;
background: #f8f8f8; /*Цвет фона блока с файлом*/
border-radius: 10px;
}
.lt-lesson-files .lt-block-wrapper .container {
margin: 0;
}
.lt-lesson-files .table>tbody>tr>td,
.lt-lesson-files .table {
border: none !important;
margin: 0;
}
.files-row > div,
.lt-lesson-files .container .col-md-12 {
padding: 0 !important;
}
.lt-lesson-files .table td {
vertical-align: middle;
padding: .5rem !important;
}
.lt-lesson-files .table td div {
height: auto !important;
}
.lt-lesson-files .table td:nth-child(2) {
color: #777; /*Цвет текста с размером файла*/
}
.lt-lesson-files .table td:nth-child(3) a {
display: block;
padding: 1rem 0;
color: #141414; /*Цвет ссылок на загрузку файла*/
}
.lt-lesson-files .table td:nth-child(3) a:hover {
color: #167be5; /*Цвет ссылок при наведении*/
}
.lt-lesson-files .files-table img {
display: none;
}
.lt-lesson-files .files-table div.image-icon,
.lt-lesson-files .files-table div.pdf-icon,
.lt-lesson-files .files-table div.docx-icon,
.lt-lesson-files .files-table div.xlsx-icon,
.lt-lesson-files .files-table div.pptx-icon,
.lt-lesson-files .files-table div.txt-icon,
.lt-lesson-files .files-table div.file-icon,
.lt-lesson-files .files-table div.mp3-icon {
font-family: 'Font Awesome 6 Free';
font-weight: 600;
font-size: 2rem;
color: #888;
}
.lt-lesson-files .files-table div.image-icon:before {
content: "\f1c5";
color: #167be5; /*Здесь и ниже задаём цвет иконок*/
}
.lt-lesson-files .files-table div.pdf-icon:before {
content: "\f1c1";
color: #b40a00;
}
.lt-lesson-files .files-table div.docx-icon:before {
content: "\f1c2";
color: #1b60bd;
}
.lt-lesson-files .files-table div.xlsx-icon:before {
content: "\f1c3";
color: #107c40;
}
.lt-lesson-files .files-table div.pptx-icon:before {
content: "\f1c4";
color: #bd3817;
}
.lt-lesson-files .files-table div.txt-icon:before {
content: "\f15c";
color: #888;
}
.lt-lesson-files .files-table div.file-icon:before {
content: "\f15b";
}
.lt-lesson-files .files-table div.mp3-icon:before {
content: "\f1c7";
color: #167be5;
}Код можно вставить в настройках аккаунта в поле «Счетчики и прочие скрипты для BODY», либо в блоки CSS и JavaScript непосредственно в уроке, либо использовать в теме.
Если найдёте баг, дайте знать в комментариях или напишите мне.