🔥 Новая модификация: Система скролл-эффектов!
Стилизация ссылок в Тильде
Модификация стилизует текстовые ссылки: настраивай цвет, стили и анимацию подчеркивания, а также отступ линии от текста. Применить настройки можно сразу ко всему сайту, отдельно к стандартному блоку, zero block или тексту внутри него. Также стили можно задать любой ссылке на сайте через кастомный селектор. Посмотреть демо →
Как стилизовать ссылки
- Выбери область применения стилизации ссылокСтилизуй все ссылки на сайте сразу или настрой их точечно: для конкретного стандартного блока, zero block или отдельного элемента внутри него. Также можно указать кастомный селектор, чтобы применить стиль к любой выбранной ссылке.
- При точечной стилизации ссылок задай класс блока или элемента, например: .yu-016-custom-linkУкажи блоку свой css-класс, инструкция как добавить. Либо укажи элементу свой css-класс, инструкция как добавить. Вписывай класс в генераторе с точкой в начале.
- Настрой все предложенные стили в генераторе— Варианты подчеркивания и работу функции «Разрывать линию под буквами» можно наглядно увидеть в демо.
— Если ссылка должна подчеркиваться только при наведении, тогда в поле «Цвет подчеркивания до наведения» укажите значение transparent. - Установи код на сайт, например, в блок T123Скопируй готовый код и вставь его на сайт, памятка по вставке кода.
<%
const selectorBlock = it.SELECTORBLOCK?.split(',').map(item => item.trim()).filter(Boolean).join(',') || '';
const selectorBlockIs = selectorBlock.includes(',') ? `#allrecords :is(${selectorBlock}) a:not([class])` : `#allrecords ${selectorBlock} a:not([class])`;
const selectorZeroBlock = it.SELECTORZEROBLOCK?.split(',').map(item => item.trim()).filter(Boolean).join(',') || '';
const selectorZeroBlockIs = selectorZeroBlock.includes(',') ? `#allrecords :is(${selectorZeroBlock}) a:not([class])` : `#allrecords ${selectorZeroBlock} a:not([class])`;
const selectorElement = it.SELECTORELEMENT?.split(',').map(item => item.trim()).filter(Boolean).join(',') || '';
const selectorElementIs = selectorElement.includes(',') ? `#allrecords :is(${selectorElement}) a:not([class])` : `#allrecords ${selectorElement} a:not([class])`;
const selectorCustom = it.SELECTORCUSTOM || '';
const selectorTypes = {
'все ссылки': '#allrecords a:not([class])',
'стандартный блок': selectorBlock && selectorBlockIs,
'zero block': selectorZeroBlock && selectorZeroBlockIs,
'элемент в zero block': selectorElement && selectorElementIs,
'кастомный селектор': selectorCustom
};
const selectorErrorNames = {
'стандартный блок': 'Введи хотя бы один селектор: класс стандартного блока.',
'zero block': 'Введи хотя бы один селектор: класс zero block.',
'элемент в zero block': 'Введи хотя бы один селектор: класс элемента в zero block.',
'кастомный селектор': 'Введи хотя бы один кастомный селектор.'
};
const selectorFinal = selectorTypes[it.SELECTORTYPE] || '';
if (!selectorFinal) return selectorErrorNames[it.SELECTORTYPE];
const decorationLine = it.DECORATIONLINE ? `text-decoration-line:underline!important` : `text-decoration-line:none!important`;
const decorationSkipInk = it.DECORATIONLINE ? (it.DECORATIONSKIPINK ? `text-decoration-skip-ink:auto!important` : `text-decoration-skip-ink:none!important`) : ``;
const decodarionStyle = (it.DECORATIONLINE && it.DECORATIONSTYLE) ? `text-decoration-style:${it.DECORATIONSTYLE}!important` : ``;
const dT = (it.DECORATIONTHICKNESSUNIT === '>_' ? it.DECORATIONTHICKNESSCUSTOM : (it.DECORATIONTHICKNESS ? it.DECORATIONTHICKNESS + (Number(it.DECORATIONTHICKNESS) === 0 ? '' : it.DECORATIONTHICKNESSUNIT) : '')) || '';
const decorationThickness = (it.DECORATIONLINE && dT) ? `text-decoration-thickness:${dT}!important` : ``;
const d = (it.DURATIONUNIT === '>_' ? it.DURATIONCUSTOM : (it.DURATION ? it.DURATION + it.DURATIONUNIT : '0s')) || '0s';
const transition = `transition:all ${d} ${it.TIMINGFUNCTION}!important`
const textColor = it.COLOR ? `color:${it.COLOR}!important` : ``;
const textColorHover = it.COLORHOVER ? `color:${it.COLORHOVER}!important` : ``;
const decorationColor = (it.DECORATIONLINE && it.DECORATIONCOLOR) ? `text-decoration-color:${it.DECORATIONCOLOR}!important` : ``;
const decorationColorHover = (it.DECORATIONLINE && it.DECORATIONCOLORHOVER) ? `text-decoration-color:${it.DECORATIONCOLORHOVER}!important` : ``;
const uO = (it.UNDERLINEOFFSETUNIT === '>_' ? it.UNDERLINEOFFSETCUSTOM : (it.UNDERLINEOFFSET ? it.UNDERLINEOFFSET + (Number(it.UNDERLINEOFFSET) === 0 ? '' : it.UNDERLINEOFFSETUNIT) : '')) || '';
const underlineOffset = (it.DECORATIONLINE && uO) ? `text-underline-offset:${uO}!important` : ``;
const uOHover = (it.UNDERLINEOFFSETHOVERUNIT === '>_' ? it.UNDERLINEOFFSETHOVERCUSTOM : (it.UNDERLINEOFFSETHOVER ? it.UNDERLINEOFFSETHOVER + (Number(it.UNDERLINEOFFSETHOVER) === 0 ? '' : it.UNDERLINEOFFSETHOVERUNIT) : '')) || '';
const underlineOffsetHover = (it.DECORATIONLINE && uOHover) ? `text-underline-offset:${uOHover}!important` : ``;
const properties = [
decorationLine,
decorationSkipInk,
decodarionStyle,
decorationThickness,
textColor,
decorationColor,
underlineOffset,
transition
].filter(Boolean).join(';');
const propertiesHover = [
textColorHover,
decorationColorHover,
underlineOffsetHover
].filter(Boolean).join(';');
%> <%-~'\n'_%>
Понравилось решение?