All Collections
General
Advanced Features
Fully customize your notifications with CSS
Fully customize your notifications with CSS

What's possible with the CSS Theme Editor?

Hideko avatar
Written by Hideko
Updated over a week ago

We have a large library of hand-drawn illustrated themes from our talented design team within your Theme tab. You can also choose across colors, padding, shadow, hover animation, and more pre-selected options.

But curious what the CSS editor can do?

The most common reason to use the editor is because existing CSS on their site is overriding the theme for your Fomo notification.

However, you can also get creative and design something like the below using the CSS editor (found on Theme tab > click the CSS subtab):

Here's the full CSS added to achieve the above design with the extra image + rainbow border. Make sure to press the green "save" button!:

.fomo-notification::before {
position: absolute;
right: 0;
bottom: 100%;
height: 75px;
width: 75px;
content: '';
background-image: url(https://fomo.com/assets/landing/product-tour/new/footer-fde111fde241e0716d16c2f18db717987a1dbd961d3fff540128ddd68b5873a1.svg);
background-size: contain;
}

.fomo-notification::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border-radius: inherit;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

.fomo-notification .fomo-notification-container {
display: inline;
background: #fff;
position: relative;
z-index: 2;
margin: 3px;
border-radius: inherit;
}

Did this answer your question?