> ## 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 предоставляет встроенные параметры стилизации, которые позволяют настроить внешний вид твоих элементов без написания пользовательского 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}
```