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.