This comprehensive reference lists all CSS classes used in CoupEdge banners, allowing you to create advanced custom styling through the Custom CSS field in your banner settings.
.my-prefix-, the class for the main container would be.my-prefix-ppp-container.| 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; } |
| 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 */ } |
| 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; } |
| 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; } |
.ppp-container {
animation: slideDown 0.5s ease-out;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}.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);
}
}.ppp-message {
background: linear-gradient(90deg, #ff8a00, #e52e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}.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;
}