Created
March 26, 2024 13:23
-
-
Save baslie/802d0ecf33b8bc3d9e8d3e9229168a20 to your computer and use it in GitHub Desktop.
Меняем кнопки и цвета у блока BF905A в Тильде
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
const ucNewIcons = { | |
"t898__icon-telegram_wrapper": { | |
"iconPath": "none", // Нет новой иконки | |
"tooltipText": null // Нет нового названия для тултипа | |
}, | |
"t898__icon-whatsapp_wrapper": { | |
"iconPath": "none", | |
"tooltipText": null | |
}, | |
"t898__icon-vkontakte_wrapper": { | |
"iconPath": "none", | |
"tooltipText": "ВКонтакте" | |
}, | |
"t898__icon-skype_wrapper": { | |
"iconPath": "none", | |
"tooltipText": null | |
}, | |
"t898__icon-phone_wrapper": { | |
"iconPath": "https://static.tildacdn.com/tild6638-6464-4664-a364-376238326233/phone.svg", | |
"tooltipText": "Телефон" // Пример нового текста для тултипа | |
} | |
}; | |
document.addEventListener('DOMContentLoaded', function() { | |
Object.keys(ucNewIcons).forEach(className => { | |
const iconWrappers = document.querySelectorAll(`.${className}`); | |
iconWrappers.forEach(iconWrapper => { | |
const { iconPath, tooltipText } = ucNewIcons[className]; | |
const tooltip = iconWrapper.querySelector('.t898__tooltip'); | |
// Если путь к иконке задан и отличен от "none" | |
if (iconPath && iconPath !== "none") { | |
// Очищаем содержимое, кроме тултипа | |
Array.from(iconWrapper.childNodes).forEach(node => { | |
if (!node.classList || !node.classList.contains('t898__tooltip')) { | |
node.remove(); | |
} | |
}); | |
// Добавляем новую иконку | |
const imgElement = document.createElement('img'); | |
imgElement.setAttribute('src', iconPath); | |
imgElement.setAttribute('width', '50'); | |
imgElement.setAttribute('height', '50'); | |
imgElement.setAttribute('alt', 'Icon'); | |
iconWrapper.prepend(imgElement); // Добавляем изображение перед тултипом | |
} | |
// Обновляем текст тултипа, если это необходимо | |
if (tooltipText && tooltip) { | |
tooltip.textContent = tooltipText; | |
} | |
}); | |
}); | |
}); | |
</script> | |
<style> | |
/* Убираем тень у виджета с кнопками */ | |
.t898__btn_label, | |
.t898__btn_label:hover, | |
.t898__icon_link, | |
.t898__icon_link:hover { | |
box-shadow: none; | |
} | |
/* FIX: исправляем пробел у тултипа + меняем фон */ | |
.t898__tooltip:after { | |
right: -18px; | |
border-left-color: #55514E; | |
} | |
.t898__tooltip { | |
background: #55514E; | |
} | |
/* Цвет фона основной кнопки */ | |
.t898__btn_label, | |
.t898__btn_input:checked+label { | |
background: #55514E !important; | |
} | |
/* Цвет иконки у основной кнопки */ | |
.t898__icon-write { | |
stroke: #F4F2EF; | |
} | |
/* Цвет иконки «Close» */ | |
.t898__icon-close g { | |
fill: #F4F2EF; | |
} | |
/* Подсказка у основной кнопки */ | |
.t898__hint { | |
background: #55514E; | |
opacity: 1; | |
} | |
.t898__hint:after { | |
right: -18px; | |
border-left-color: #55514E; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment