> ## 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 Mellowtel Elements
Here you will see how to customize Mellowtel Elements appearance using built-in styling options and CSS container positioning.
Container styling gives you full control over layout and positioning, while package styling options control the element appearance.
## Package Styling Options
Mellowtel Elements package provides built-in styling options that allow you to customize the appearance of your elements without writing custom CSS. You can control colors, dimensions, and visual properties directly through the configuration object.
```javascript theme={null}
const styles = {
textColor: '#FFFFFF', // Text color (hex format)
backgroundColor: '#4CAF50', // Background color (hex format)
radius: 8, // Border radius in pixels
width: 200, // Width in pixels (50-300 range)
height: 50 // Height in pixels (20-200 range)
};
```
### Example
```javascript theme={null}
// Create a green opt-in button
await mellowtel.createElement('opt-in-container', {
type: 'opt-in',
styles: {
textColor: '#FFFFFF',
backgroundColor: '#10B981',
radius: 12,
width: 180,
height: 45
}
});
```
## Container Positioning
Style the container divs to position elements:
```css theme={null}
/* Basic positioning */
.mellowtel-container {
display: flex;
gap: 10px;
margin: 20px 0;
}
/* Fixed positioning */
#opt-in-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
/* Responsive layout */
.mellowtel-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
/* Mobile responsive */
@media (max-width: 768px) {
.mellowtel-container {
flex-direction: column;
align-items: center;
}
}
```
### Complete Styling Example
```html theme={null}
```