> ## 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.
# Style des Éléments Mellowtel
Ici, tu verras comment personnaliser l'apparence des Éléments Mellowtel en utilisant les options de style intégrées et le positionnement des conteneurs CSS. Le style des conteneurs te donne un contrôle total sur la mise en page et le positionnement, tandis que les options de style du package contrôlent l'apparence des éléments.
## Options de Style du Package
Le package des Éléments Mellowtel fournit des options de style intégrées qui te permettent de personnaliser l'apparence de tes éléments sans écrire de CSS personnalisé. Tu peux contrôler les couleurs, les dimensions et les propriétés visuelles directement via l'objet de configuration.
```javascript theme={null}
const styles = {
textColor: '#FFFFFF', // Couleur du texte (format hexadécimal)
backgroundColor: '#4CAF50', // Couleur de fond (format hexadécimal)
radius: 8, // Rayon de la bordure en pixels
width: 200, // Largeur en pixels (plage de 50 à 300)
height: 50 // Hauteur en pixels (plage de 20 à 200)
};
```
### Exemple
```javascript theme={null}
// Créer un bouton d'adhésion vert
await mellowtel.createElement('opt-in-container', {
type: 'opt-in',
styles: {
textColor: '#FFFFFF',
backgroundColor: '#10B981',
radius: 12,
width: 180,
height: 45
}
});
```
## Positionnement des Conteneurs
Style les divs de conteneur pour positionner les éléments :
```css theme={null}
/* Positionnement de base */
.mellowtel-container {
display: flex;
gap: 10px;
margin: 20px 0;
}
/* Positionnement fixe */
#opt-in-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
/* Mise en page réactive */
.mellowtel-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
/* Réactif mobile */
@media (max-width: 768px) {
.mellowtel-container {
flex-direction: column;
align-items: center;
}
}
```
### Exemple Complet de Style
```html theme={null}
```