Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
/
Редактирование внешнего вида LGT при помощи HTML, CSS, JavaScript
Редактирование внешнего вида LGT при помощи HTML, CSS, JavaScript
Если вам не хватает встроенных возможностей редактора для изменения внешнего вида встроенных форм, виджетов и всплывающих окон LGT на вашем сайте и вам требуется полная интеграция с дизайном вашего сайта, вы можете следовать нескольким простым шагам:
Откройте ваш LGT перейдите во вкладку "Содержимое"
Нажмите “+ Блок“ и выберите “Пользовательский HTML-блок“
Выберите один из шаблонов и скопируйте код
Вставтье код на LGT во вкладке “Содержимое“ в поле “HTML-код“
Описание: Этот код создает вертикальный карусельный слайдер, который автоматически прокручивает текстовые элементы. Каждое сообщение появляется с анимацией, создавая динамичное и плавное отображение.
Вставте код в поле “Пользовательский HTML-блок“:
<style>
*, *::before, *::after {
box-sizing: border-box;
}
.font {
color: #fff;
}
.wrapper {
background: #1C1C1C;
height: 600px;
width: 450px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
}
.carousel {
position: relative;
width: 100%;
max-width: 500px;
display: flex;
justify-content: center;
flex-direction: column;
}
.carousel__item {
display: flex;
align-items: center;
position: absolute;
width: 100%;
padding: 0 12px;
opacity: 0;
filter: drop-shadow(0 2px 2px #555);
will-change: transform, opacity;
animation: carousel-animate-vertical 27s linear infinite;
color:rgb(0, 0, 0);
}
.carousel__item:nth-child(n) {
animation-delay: calc(3s * (var(--index) - 1));
}
.carousel__item-head {
border-radius: 50%;
background-color: #d7f7fc;
width: 90px;
height: 90px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
.carousel__item-body {
width: 100%;
background-color: #fff;
border-radius: 20px;
padding: 16px 20px 16px 20px;
color:rgb(0, 0, 0);
}
.title {
text-transform: uppercase;
font-size: 20px;
margin-top: 10px;
}
@keyframes carousel-animate-vertical {
0% { transform: translateY(-100%) scale(0.5); opacity: 0; visibility: hidden; }
3%, 11.11% { transform: translateY(-100%) scale(0.7); opacity: 0.4; visibility: visible; }
14.11%, 22.22% { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
25.22%, 33.33% { transform: translateY(100%) scale(0.7); opacity: 0.4; visibility: visible; }
36.33% { transform: translateY(100%) scale(0.5); opacity: 0; visibility: visible; }
100% { transform: translateY(100%) scale(0.5); opacity: 0; visibility: hidden; }
}
</style>
<div class='wrapper'>
<div class='carousel'>
<div class='carousel__item' style='--index:1'><div class='carousel__item-body'><p>Cryptocurrency is a digital asset that uses cryptography for secure transactions and to control the creation of new units. It operates in a decentralized manner, without control from banks or governments.</p></div></div>
<div class='carousel__item' style='--index:2'><div class='carousel__item-body'><p>Blockchain is a technology that ensures transparency and security in cryptocurrency transactions. It consists of sequential blocks of information that cannot be altered.</p></div></div>
<div class='carousel__item' style='--index:3'><div class='carousel__item-body'><p>Mining is the process of verifying transactions on the blockchain and creating new blocks. Miners solve complex problems to receive cryptocurrency rewards.</p></div></div>
<div class='carousel__item' style='--index:4'><div class='carousel__item-body'><p>DeFi (decentralized finance) allows users to perform financial operations without banks. It opens opportunities for lending, trading, and passive income.</p></div></div>
<div class='carousel__item' style='--index:5'><div class='carousel__item-body'><p>NFTs are unique digital assets that verify ownership of digital content such as art, videos, or music.</p></div></div>
<div class='carousel__item' style='--index:6'><div class='carousel__item-body'><p>The metaverse is a virtual space where people interact through avatars. Cryptocurrencies play a key role in enabling the purchase of digital assets within it.</p></div></div>
<div class='carousel__item' style='--index:7'><div class='carousel__item-body'><p>Crypto trends for 2025 include the widespread adoption of stablecoins, the development of Layer-2 solutions, the growth of DeFi, and the integration of cryptocurrencies into traditional finance.</p></div></div>
</div>
</div>
Описание: Этот код создает веб-страницу с несколькими стильными кнопками, каждая из которых при нажатии открывает скрытый контент с текстом. Когда пользователь кликает по заголовку, соответствующий блок с контентом плавно раскрывается, благодаря чему текст становится видимым.
Вставте код в поле “Пользовательский HTML-блок“:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programming Texts</title>
<style>
.adaptive-container {
top: -90px;
}
:root {
--color-bg: #34304c;
--color-bg2: #534d7a;
--color-highlight: #fff;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body {
padding: 7.5vh 10px 0 10px;
font-family: var(--font);
background: var(--color-bg);
color: var(--color-highlight);
}
.title {
cursor: pointer;
color: var(--color-highlight);
font-weight: bold;
font-size: 1.5rem;
background: var(--color-bg2);
padding: 0.5rem 1rem;
border-radius: 8px;
margin: 2px 0; /* Reduced the margin */
display: block;
text-align: center;
max-width: 400px;
margin-left: auto;
margin-right: auto;
transition: background 0.3s ease-in-out;
}
.title:hover {
background: #675c99;
}
.content {
display: block;
margin: 10px 2px;
padding: 0 10px;
background: var(--color-bg2);
border-left: 4px solid #2b293d;
border-radius: 8px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, padding 0.5s ease-in-out;
}
.content.active {
opacity: 1;
max-height: 500px; /* You can adjust this value depending on your content size */
padding: 10px;
}
.title::before,
.title::after {
content: '↓'; /* Стрілка вниз з обох боків */
margin-right: 10px;
font-size: 1.2rem;
}
.title::after {
margin-left: 10px; /* Стрілка з правого боку */
}
</style>
</head>
<body>
<h2 class="title">Code is Magic! 🧙♂️</h2>
<div class="content">
<p>Programming is an art ✨ where lines of code turn into powerful apps 🚀.</p>
<p>Bugs? 🐞 No worries! Debugging is our best friend 🔍.</p>
<p>Create, experiment, and change the world with every commit! 💡💾</p>
<p>Keep coding, keep innovating! 🚀👨💻</p>
</div>
<h2 class="title">From Idea to Reality 🚀</h2>
<div class="content">
<p>Coding transforms ideas into reality 🎨💡.</p>
<p>A few lines of logic and—boom!—a new feature is born 💥.</p>
<p>Errors? 🤔 Just stepping stones to mastery 🏆.</p>
<p>Keep learning, keep growing, and build the future, one line at a time! 🔥👨💻</p>
</div>
<h2 class="title">0s and 1s Rule the World 🌍</h2>
<div class="content">
<p>Behind every app, game, and website lies the power of binary 🖥️⚡.</p>
<p>Programming is the secret language of innovation 💡.</p>
<p>A single bug 🐞 can break things, but a great coder always finds a way! 💪</p>
<p>Debug, optimize, and make tech magic happen! ✨</p>
</div>
<h2 class="title">Code, Coffee, Repeat ☕</h2>
<div class="content">
<p>Late nights, countless lines of code, and endless cups of coffee ☕—that's the coder's life! 🔥</p>
<p>A single semicolon can make or break your day 😅.</p>
<p>But when your code runs perfectly, it's pure joy! 🎉</p>
<p>Keep pushing, keep coding, and never stop learning! 💡</p>
</div>
<h2 class="title">Change the World with Code 💻</h2>
<div class="content">
<p>Every great invention starts with a single line of code 📜.</p>
<p>Whether you're making apps 📱, AI 🤖, or websites 🌐, your work shapes the future! 💡</p>
<p>Keep coding, keep dreaming, and build something amazing! 🚀</p>
</div>
<h2 class="title">Think. Code. Innovate. 🚀</h2>
<div class="content">
<p>Coding is not just about writing syntax—it’s about solving problems 🧩.</p>
<p>With logic, creativity, and persistence, you can build anything 💡.</p>
<p>The best part? The only limit is your imagination! 🌟</p>
<p>So start coding and bring your ideas to life! ⚡</p>
</div>
<h2 class="title">The Power of Programming 🖥️</h2>
<div class="content">
<p>Code runs the world 🌍—from smartphones 📱 to AI 🤖.</p>
<p>One algorithm can change everything! 💡</p>
<p>Learning to code is like learning a superpower 🦸♂️.</p>
<p>So keep typing, keep debugging, and keep building amazing things! 🔥</p>
</div>
<script>
document.querySelectorAll('.title').forEach(title => {
title.addEventListener('click', () => {
const content = title.nextElementSibling;
content.classList.toggle('active');
});
});
</script>
</body>
</html>
