> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Стилізація елементів Mellowtel
Тут ти дізнаєшся, як налаштувати зовнішній вигляд елементів Mellowtel, використовуючи вбудовані параметри стилізації та позиціонування CSS контейнера. Стилізація контейнера дає тобі повний контроль над макетом і позиціонуванням, тоді як параметри стилізації пакету контролюють зовнішній вигляд елементів.
## Параметри стилізації пакету
Пакет Mellowtel Elements надає вбудовані параметри стилізації, які дозволяють налаштувати зовнішній вигляд твоїх елементів без написання власного CSS. Ти можеш контролювати кольори, розміри та візуальні властивості безпосередньо через об'єкт конфігурації.
```javascript theme={null}
const styles = {
textColor: '#FFFFFF', // Колір тексту (у форматі hex)
backgroundColor: '#4CAF50', // Колір фону (у форматі hex)
radius: 8, // Радіус бордюру в пікселях
width: 200, // Ширина в пікселях (діапазон 50-300)
height: 50 // Висота в пікселях (діапазон 20-200)
};
```
### Приклад
```javascript theme={null}
// Створити зелену кнопку підписки
await mellowtel.createElement('opt-in-container', {
type: 'opt-in',
styles: {
textColor: '#FFFFFF',
backgroundColor: '#10B981',
radius: 12,
width: 180,
height: 45
}
});
```
## Позиціонування контейнера
Стилізуй div-контейнери для позиціонування елементів:
```css theme={null}
/* Основне позиціонування */
.mellowtel-container {
display: flex;
gap: 10px;
margin: 20px 0;
}
/* Фіксоване позиціонування */
#opt-in-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
/* Адаптивний макет */
.mellowtel-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
/* Адаптивність для мобільних */
@media (max-width: 768px) {
.mellowtel-container {
flex-direction: column;
align-items: center;
}
}
```
### Повний приклад стилізації
```html theme={null}
```