Fomo's theme editor provides an array of options to customize font colors, imagery, and other notification styles on your website:
But, you may need more configuration to suit your needs. You have full control over the look of your notification via our custom CSS editor:
Users may also consider using our CSS editor if their websites' existing CSS interferes with their Fomo notification's theme setup. Adding
!important should help override existing themes.
Here are a few examples to get you started.
Change the background color
If you're OK with images being excluded, simply navigate to Theme, then select the "Colorful" and save.
If you want images + a custom (non-white) background color, try this:
- Navigate to Theme
- Select the "CSS" tab below the theme preview, to expose the editor
- Paste the code below, above the first line in the file
background-color: #ffffff !important;
Change "#ffffff" to whatever color (hex code) you want. You may also simply write a color like "purple !important" (no hashtag) if you don't have an exact preference.
Your file will look something like this:
Click to 'save' your progress in the top corner, and you're all set. You should also be able to see your new background color in the preview box itself, before saving.
Another widget is hiding Fomo
We provide an easy way to show Fomo "above" other content on your page, here.
A chat box or badge needs to be fixed below / above Fomo
Inside Fomo navigate to Theme (top navigation), then click the CSS tab.
To nudge your Fomo notification "up" towards the top of the browser, try adding "bottom: 40px !important" inside the first few lines of code.
If you want to move your Fomo notifications further away from the side edge of your visitor's screen, add "right: 40px !important" or "left: 40 px !important".
Experiment with different values (between 20 - 80) and sides (bottom, top, left, right) until you achieve what you want.
Link or text colors not working
If you specify a custom color for your Fomo notification text or links, and it isn't showing up on your website, it's because an existing website CSS style is overriding Fomo.
To remedy this, navigate to Fomo > Theme > CSS tab and find the "p" (paragraph, text) or "a" CSS declaration:
Note, your code may look different than this, pending which Fomo theme you've selected.
To ensure your chosen colors appear on your website, visit the "Fine Tune" tab and copy the 6 digit "hex" code. In this case its "E71010", which is a red link color.
Now go back to the CSS tab and insert this code. If you want to change the link color, insert it inside the "a" declaration. If you want to customize the "p" (regular text) color, insert it inside the "p" declaration.
Refresh your website, and your link will now be the intended color.
Font size too large
If some existing CSS on your website is overriding your Fomo notification's font size, you can add a font-size manually.
Navigate to Fomo > Theme > CSS tab and find the "p" (paragraph, text) CSS declaration:
Make the entire notification larger or smaller
You can proportionally scale notifications by using the
zoom CSS style.
To make the notification larger, try adding something like this:
This will magnify the notification to 200% of its original size.
zoom is our preferred solution because:
(i) it scales up the fonts, image, and shadow so they remain sharp,
(ii) respects the positioning of the notification (e.g. bottom right) and scales it in opposite direction, and
(iii) works with every theme
If you want to make your notification smaller, try a value less than 1. A
zoom of ` is equivalent to 100% of its original size.
Feel free to use decimals like 0.5, 0.7, 1.4, 2.3, and so on.
If you'd like some help with a custom CSS override, feel free to reach out to email@example.com for help.