How to Add Custom Themes to Your Fomo Notifications🎨
Want your Fomo notifications to reflect your brand’s personality or celebrate cultural moments? We’ve created a growing collection of custom themes including Special Indian Holidays, Italy and Australia-inspired designs, and more that you can easily apply using CSS.
Whether you're running seasonal campaigns or simply want your notifications to feel more aligned with your audience, these themes are designed to help you stand out.
🧭 How to Add a Custom Theme in Fomo
Follow these simple steps to apply any of the themes we share:
Log into your Fomo dashboard
Navigate to the Theme tab on the left-hand menu
Click on the CSS section
Paste the CSS code provided for your chosen theme
Hit Save and your new look will go live instantly
📸 What You’ll Receive
For each theme, we’ll provide:
- A screenshot preview so you can see the design in action
The CSS code to copy and paste into your CSS box
✨ Themes Available
Here’s a sneak peek at some of the styles you can choose from:
.fomo-notification-v2-shorty .fomo-notification-container {
position: relative !important;
overflow: visible !important;
z-index: 1000;
border: 3px solid #017F4D;
box-shadow: 0px 3px 12px #FCC51A;
}
.fomo-notification-v2-shorty .fomo-notification-container::after {
content: '';
position: absolute;
right: -45px; /* adjust position */
width: 60px; /* image width */
height: 60px; /* image height */
background: url('https://cdn.pixabay.com/photo/2013/07/12/16/57/boomerang-151561_1280.png') no-repeat center center;
background-size: contain;
pointer-events: none;
z-index: 1001;
}
.fomo-notification-v2-shorty .fomo-notification-container {
position: relative !important;
overflow: visible !important;
z-index: 1000;
border: 3px solid #00008B;
box-shadow: 0px 3px 12px #FF0000;
}
.fomo-notification-v2-shorty .fomo-notification-container::after {
content: '';
position: absolute;
right: -55px; /* adjust position */
width: 75px; /* image width */
height: 75px; /* image height */
background: url('https://cdn.pixabay.com/photo/2023/02/14/08/12/kangaroo-7789052_1280.png') no-repeat center center;
background-size: contain;
pointer-events: none;
z-index: 1001;
}
.fomo-notification-v2-classic {
border: 3px solid #E8E8E8;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);;
position: fixed;
overflow: visible;
display: flex;
}
.fomo-notification-v2-classic::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: linear-gradient(180deg, #009246 0%, #009246 33%, #FFFFFF 33%, #FFFFFF 66%, #CE2B37 66%, #CE2B37 100%);
border-radius: 15px 0 0 15px;
}
.fomo-notification-v2-classic .fomo-notification-content-wrapper {
}
.fomo-notification-v2-classic .fomo-notification-content-wrapper p {
font-family: 'Trebuchet MS', sans-serif;
line-height: 1.5;
}
.fomo-notification-v2-classic .fomo-notification-content-wrapper a {
color: #CE2B37;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.fomo-notification-v2-classic .fomo-notification-content-wrapper a::after {
}
.fomo-notification-v2-classic .fomo-notification-content-wrapper a:hover {
}
.fomo-notification-v2-classic .fomo-notification-content-wrapper a:hover::after {
}
.fomo-notification-v2-classic .fomo-notification-content-wrapper small {
}
.fomo-notification-v2-classic .fomo-notification-image-wrapper {
border-radius: 7px;
overflow: hidden;
border: 2px solid #E8E8E8;
box-shadow: 0 3px 10px #008000;
flex-shrink: 0;
}
.fomo-notification-v2-classic .fomo-notification-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.fomo-notification-v2-classic .fomo-notification-image-wrapper img:hover {
transform: scale(1.05);
}
.fomo-notification-v2-classic::after {
content: '';
position: absolute;
right: -67px; /* position outside the border */
top: 40%; /* center vertically */
transform: translateY(-50%) rotate(-3deg); /* Slight rotation for playful look */
width: 130px; /* image width */
height: 130px; /* image height */
background: url('https://cdn.pixabay.com/photo/2013/07/13/10/06/italy-156536_960_720.png') no-repeat center center;
background-size: contain;
pointer-events: none;
filter: drop-shadow(0 6px 12px rgba(255, 182, 193, 0.3));
}
.fomo-notification-v2-classic {
background-color: #FFF8DC !important; /* Cornsilk background for warmth */
border-radius: 12px !important;
border: 2px solid transparent !important;
background-image: linear-gradient(#FFF8DC, #FFF8DC),
linear-gradient(120deg, #FF4500, #FFD700, #F08080) !important; /* Saffron, Gold, Coral gradient for the border */
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
/* Main text paragraph: A strong, dark color for excellent readability */
.fomo-notification-v2-classic .fomo-notification-content-wrapper p {
color: #483D8B !important; /* Dark Slate Blue for contrast and elegance */
font-weight: 600 !important; /* Slightly bolder for emphasis */
}
/* Link text: Highlighted with a festive, warm color */
.fomo-notification-v2-classic .fomo-notification-content-wrapper a {
color: #FF4500 !important; /* Saffron Red for a clickable, festive link */
font-weight: 700 !important;
text-decoration: none !important; /* Cleaner look */
border-bottom: 1px dotted #FF4500 !important; /* Subtle underline */
}
/* Timestamp text: Softer color to be less prominent */
.fomo-notification-v2-classic .fomo-notification-content-wrapper small {
color: #F08080 !important; /* Light Coral for a soft, secondary text color */
opacity: 0.9 !important;
}
/* Image container: Ensuring the image fits perfectly */
.fomo-notification-v2-classic .fomo-notification-image-wrapper {
padding: 0 !important; /* Remove any default padding */
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Image styling: Circular shape with a golden glow, like a sacred thali */
.fomo-notification-v2-classic .fomo-notification-image-wrapper img {
border-radius: 50% !important; /* Makes the image circular */
border: 3px solid #FFD700 !important; /* A beautiful gold border */
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important; /* Adds a subtle golden glow */
width: 55px !important; /* Standard size adjustment */
height: 55px !important;
}
.fomo-notification-v2-classic::after {
content: '';
position: absolute;
right: -67px; /* position outside the border */
top: 40%; /* center vertically */
transform: translateY(-50%) rotate(-3deg); /* Slight rotation for playful look */
width: 130px; /* image width */
height: 130px; /* image height */
background: url('https://cdn.pixabay.com/photo/2018/08/26/07/58/graphic-3631650_1280.png') no-repeat center center;
background-size: contain;
pointer-events: none;
filter: drop-shadow(0 6px 12px rgba(255, 182, 193, 0.3));
}
.fomo-notification-v2-classic {
background-color: #004AAD !important; /* Peacock Blue background */
border-radius: 12px !important;
border: 2px solid #FFBF00 !important; /* Amber Yellow border */
box-shadow: 0px 0px 18px rgba(255, 191, 0, 0.4) !important; /* A soft, divine yellow glow */
}
/* Main text paragraph: Clean white text for high visibility on the dark background */
.fomo-notification-v2-classic .fomo-notification-content-wrapper p {
color: #E0FFFF !important; /* Pure White for clarity and serenity */
font-weight: 600 !important;
}
/* Link text: A contrasting green, reminiscent of a peacock's feathers */
.fomo-notification-v2-classic .fomo-notification-content-wrapper a {
color: #98FF98 !important; /* A light, standout Mint Green */
font-weight: 700 !important;
text-decoration: none !important;
border-bottom: 1px dotted #98FF98 !important;
}
/* Timestamp text: A lighter cyan to complement the theme without being distracting */
.fomo-notification-v2-classic .fomo-notification-content-wrapper small {
color: #E0FFFF !important; /* Light Cyan for a soft, ethereal feel */
opacity: 0.8 !important;
}
/* Image container: Centering the image perfectly */
.fomo-notification-v2-classic .fomo-notification-image-wrapper {
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Image styling: Circular with a green border, tying into the peacock theme */
.fomo-notification-v2-classic .fomo-notification-image-wrapper img {
border-radius: 50% !important; /* Circular shape */
border: 3px solid #2E8B57 !important; /* Sea Green border */
box-shadow: 0 0 10px rgba(46, 139, 87, 0.5) !important; /* Adds a subtle green glow */
width: 55px !important;
height: 55px !important;
}
.fomo-notification-v2-classic::after {
content: '';
position: absolute;
left: 257px; /* position outside the border */
top: 40%; /* center vertically */
transform: translateY(-50%) rotate(-3deg); /* Slight rotation for playful look */
width: 130px; /* image width */
height: 130px; /* image height */
background: url('https://cdn.pixabay.com/photo/2022/08/26/04/53/krishna-god-7411693_960_720.png') no-repeat center center;
background-size: contain;
pointer-events: none;
filter: drop-shadow(0 6px 12px rgba(255, 182, 193, 0.3));
}
.fomo-notification-v2-classic {
background-color: #2C3539 !important; /* Gunmetal grey for a dark, elegant night sky */
border-radius: 10px !important;
border: 2px solid transparent !important;
background-image: linear-gradient(#2C3539, #2C3539),
linear-gradient(135deg, #FFD700, #DC143C, #8A2BE2) !important; /* Gold, Crimson, and Blue-Violet for a rich rangoli border */
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 15px rgba(220, 20, 60, 0.4) !important; /* A multi-color glow */
}
/* Main text paragraph: A warm, golden color for readability and a festive feel */
.fomo-notification-v2-classic .fomo-notification-content-wrapper p {
color: #FFD700 !important; /* Gold text to shine against the dark background */
font-weight: 600 !important;
}
/* Link text: A vibrant, celebratory pink from rangoli powders */
.fomo-notification-v2-classic .fomo-notification-content-wrapper a {
color: #FF69B4 !important; /* Hot Pink for a joyful, high-contrast link */
font-weight: 700 !important;
text-decoration: none !important;
border-bottom: 1px dotted #FF69B4 !important;
}
/* Timestamp text: A soft, warm off-white like a gentle candle flame */
.fomo-notification-v2-classic .fomo-notification-content-wrapper small {
color: #FDF5E6 !important; /* Old Lace for a subtle, elegant touch */
opacity: 0.8 !important;
}
/* Image container: Centering the image perfectly */
.fomo-notification-v2-classic .fomo-notification-image-wrapper {
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Image styling: Circular, with a border and a strong glow like a lit diya */
.fomo-notification-v2-classic .fomo-notification-image-wrapper img {
border-radius: 50% !important; /* Circular shape */
border: 3px solid #FF8C00 !important; /* Dark Orange border, like the terracotta of a diya */
box-shadow: 0 0 15px 5px rgba(255, 140, 0, 0.7) !important; /* A strong, warm orange glow, like a flame */
width: 55px !important;
height: 55px !important;
}
.fomo-notification-v2-classic::after {
content: '';
position: absolute;
left: 280px; /* position outside the border */
top: 45%; /* center vertically */
transform: translateY(-50%) rotate(-3deg); /* Slight rotation for playful look */
width: 100px; /* image width */
height: 100px; /* image height */
background: url('https://cdn.pixabay.com/photo/2021/11/05/05/52/diwali-6770363_1280.png') no-repeat center center;
background-size: contain;
pointer-events: none;
filter: drop-shadow(0 6px 12px rgba(255, 182, 193, 0.3));
}
🌐 More Coming Soon – We're constantly adding new styles based on global events and customer feedback
💬 Need Help?
If you’re unsure which theme fits best or want help customizing further, feel free to reach out to hello@fomo.com. We’re here to make sure your notifications look and feel just right.