> ## 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', // टेक्स्ट का रंग (हेक्स फॉर्मेट)
backgroundColor: '#4CAF50', // पृष्ठभूमि का रंग (हेक्स फॉर्मेट)
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
}
});
```
## कंटेनर पोजिशनिंग
तत्वों को पोजिशन करने के लिए कंटेनर डिव्स की स्टाइलिंग करें:
```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}
```