All Collections
General
Troubleshooting
Edit Your Fomo Notification with Custom CSS Overrides
Edit Your Fomo Notification with Custom CSS Overrides

Advanced tips to improve the look and feel of Fomo on your website.

Ryan Kulp avatar
Written by Ryan Kulp
Updated over a week ago

Fomo's theme editor provides an array of options to customize font colors, imagery, and other notification styles on your website:

You can even grab colors directly from your website so your notifications match perfectly!

But, what if you need more customization? What if you want a larger notification? A different font? Good news - you have full control over the look of your Fomo notification using 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.

I don't code - what am I looking at?

All you need to worry about are the brackets {} at the end of the lines - that is where you'll place your customizations.

If you want the changes to apply to your entire Fomo notification, put your code in the first set of brackets (line 1 in the image above).

If you want to modify only the text of your Fomo notifications then add your code to the brackets following the p (paragraph) line (line 5 in the image above).

If you want to modify only the links in your Fomo notifications, then add your code to the brackets following the a (anchor text) line (line 7 in the image above).

Your CSS changes should always have a semicolon ; at the end before the closing bracket }.


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 "Colorful" and save.

If you want images + a custom (non-white) background color, try this:

  1. Navigate to Theme

  2. Select the "CSS" tab below the theme preview, to expose the editor

  3. Paste the code below, above the first line in the file

.fomo-notification-content-wrapper {
    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 in front the color name) 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.

Change the font / font size / font style:

In this recording, we change the font from Arial to Times New Roman:

Screen Recording 2022-11-02 at 05.44.27 PM

If you also want to change the font size, add font-size: xxpt ! important; where xx is the font size 10, 12, 14 etc...

If it doesn't work, try switching out pt for px or eliminating the letters - platforms will vary!

You can also add font-style: bold / italic / strikethrough to customize the look of your fonts.

If you specify a custom color for your Fomo notification text or links, and it isn't showing up on your website, it's likely because an existing website CSS style is overriding Fomo.

Adding !important; to the end of any CSS customization you make will ensure your changes are displayed with priority over any existing website settings.

Change the Text Direction

If you've translated your site into a language that is read right-to-left, add this to the fomo-notification line:

direction: rtl !important; text-align: right !important

Your notification will display the image on the right hand side and the text from right to left.

Fomo Theme 2023-09-13 at 12.23.31 PM

Add an outline to your notification:

You can outline your notification by adding a border using the command: outline-style: solid !important;

Other outline styles can be found here: CSS Outline from W3 Schools

Make your entire notification larger or smaller:

You can change the size of your entire notification using the Zoom command, which will scale up the entire notification proportionally.

Screen Recording 2022-11-02 at 05.57.44 PM

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.

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.

Check out this article for a full tutorial on creating a fun rainbow border for your notification!


If you'd like help with a custom CSS override, feel free to reach out to hello@fomo.com for help.


Did this answer your question?