Discount Widget CSS Styling Reference
Complete CSS reference for customizing your geo-targeted coupon banners and personalized discount widgets. Create professional-looking campaigns that match your brand while maintaining optimal performance across all devices.
Custom Class Prefix
If you've set a custom class prefix in your banner settings, start all class names with that prefix. For example, if your prefix is
.my-prefix-, the class for the main container would be .my-prefix-ppp-container.Container Styling
Customize the main banner container, positioning, and responsive behavior for your discount widgets.
Visual Elements
Style buttons, icons, text, and interactive elements to match your brand identity.
Advanced Effects
Add animations, transitions, and advanced styling for premium discount campaigns.
Container Classes
| Class Name | Description | Example CSS |
|---|---|---|
| .ppp-container | The main banner container element | .ppp-container { border-left: 4px solid #ff0000; max-width: 1200px; margin: 0 auto; } |
| .ppp-content | The content wrapper inside the banner | .ppp-content { padding: 0 20px; display: flex; align-items: center; } |
| .ppp-floating-content | Content wrapper for floating layout | .ppp-floating-content { max-width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } |
| .ppp-floating-message-container | Message container in floating layout | .ppp-floating-message-container { margin-bottom: 12px; } |
| .ppp-floating-actions | Actions container in floating layout | .ppp-floating-actions { justify-content: space-between; } |
Message & Text Classes
| Class Name | Description | Example CSS |
|---|---|---|
| .ppp-message | The main message text container | .ppp-message { font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } |
| .ppp-floating-message | Message text in floating layout | .ppp-floating-message { font-size: 14px; line-height: 1.4; } |
| .ppp-contextual-text | Additional context text | .ppp-contextual-text { font-style: italic; opacity: 0.8; font-size: 0.9em; } |
| .ppp-popup-header | Header text in popup layout | .ppp-popup-header { text-transform: uppercase; letter-spacing: 1px; text-align: center; } |
| .ppp-popup-body | Body text in popup layout | .ppp-popup-body { text-align: center; margin-bottom: 1em; } |
| .ppp-countdown | Countdown timer display | .ppp-countdown { font-family: monospace; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 4px; } |
| .ppp-branding | CoupEdge branding text | .ppp-branding { display: none; /* Hide branding */ } |
Button & Interactive Element Classes
| Class Name | Description | Example CSS |
|---|---|---|
| .ppp-button | Action button | .ppp-button { text-transform: uppercase; font-weight: bold; transition: transform 0.2s; } .ppp-button:hover { transform: translateY(-2px); } |
| .ppp-copy-button | Copy coupon button | .ppp-copy-button { border: 1px dashed #fff; border-radius: 4px; } .ppp-copy-button.copied { background: rgba(0,0,0,0.1); } |
| .ppp-close | Close button | .ppp-close { background: rgba(0,0,0,0.1); border-radius: 50%; padding: 6px; } .ppp-close:hover { background: rgba(0,0,0,0.2); transform: scale(1.1); } |
| .ppp-icon | Icon container | .ppp-icon { background: rgba(255,255,255,0.2); border-radius: 50%; padding: 4px; margin-right: 8px; } |
| .ppp-floating-icon | Icon in floating layout | .ppp-floating-icon { font-size: 1.2em; margin-top: 2px; } |
State & Modifier Classes
| Class Name | Description | Example CSS |
|---|---|---|
| .ppp-copy-button.copied | Copy button in "copied" state | .ppp-copy-button.copied { background-color: rgba(0,255,0,0.1); color: #fff; } |
| [data-theme="dark"] .ppp-container | Container with dark theme | [data-theme="dark"] .ppp-container { border-color: #333; } |
Advanced CSS Examples
Animated Banner
.ppp-container {
animation: slideDown 0.5s ease-out;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}Pulsing Copy Button
.ppp-copy-button {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}Gradient Text
.ppp-message {
background: linear-gradient(90deg, #ff8a00, #e52e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}Custom Close Button
.ppp-close {
background: transparent;
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.ppp-close:hover {
transform: rotate(90deg);
border-color: white;
}CSS Best Practices
Performance Tips
- Use simple CSS properties that don't trigger layout recalculations (color, background, transform, opacity)
- Avoid excessive animations that might slow down the page
- Use the z-index setting rather than CSS for stacking order
- Keep your custom CSS concise and focused on specific changes
Compatibility Tips
- Test your custom CSS across different browsers
- Use vendor prefixes for experimental CSS properties
- Avoid using CSS that might conflict with your website's styles
- Consider using a custom class prefix to prevent conflicts
Important Note
Custom CSS is applied after all other banner styles. This means your custom CSS will override the default styles, giving you complete control over the appearance of your banner.