Requirements
To customise the appearance of your Online Ordering system, you’ll need:
Basic HTML and CSS knowledge
Access to your website settings via the Flipdish Portal
Set the highlight colour and font
You can set the highlight colour and font used across the Online Ordering system in the Flipdish Portal.
Steps to update styles:
Go to Flipdish Portal > Sales Channels > Website > Website builder > Customise your site > Edit website > Styles
Select the highlight colour from the available options.
Choose a readable font to use across your website.
Font options:
You have two methods to set your preferred font:
Choose a font from Google Fonts (most are supported by Flipdish)
Send the font family of an existing font used on your website
To apply your selected font, please email the details to [email protected].
Customise the ordering system using CSS
If you have technical knowledge, you can apply custom CSS to change the appearance of the Online Ordering system beyond basic settings.
⚠️ This section is technical and intended for users familiar with CSS.
Custom CSS can be added directly in the Flipdish Portal via the Website Builder under Styles. Make sure your CSS changes do not interfere with the ordering flow or readability.
Request customisation from Flipdish
If you’d like Flipdish to help with customisation, you can reach out to the Customer Success or Support team. Include details about the changes you'd like, such as:
Brand colour schemes
Font preferences
Layout requirements
📌 Please note that some requests may fall under premium services and may incur a fee.
If your Flipdish Online Ordering system is embedded into your website, you can apply custom CSS to change its look and feel. This article is intended for users with advanced CSS knowledge.
⚠️ This is a technical guide intended for developers or users familiar with writing and maintaining CSS.
To customise your embedded Online Ordering system using CSS, you will need:
Advanced CSS knowledge
Access to your website’s source code
Time to maintain your styling, as code may need to be updated when new Flipdish features are released
Add custom CSS to your website
To apply custom styles, we recommend adding your CSS rules to the <head> section of your website.
This allows you to apply styles directly to the embedded ordering elements without affecting the rest of your site.
Best practices and limitations
When styling the embedded system, keep the following in mind:
Do not target dynamic classes
Avoid targeting classes such asbudapest23, as these are dynamic and may change with every page load.Use specific selectors
The system uses the!importantrule in many of its styles to prevent conflicts with websites. To override these, use more specific selectors by adding a parent class.Example:
Instead of:cssCopyEdit.container h1 { color: red; }Use:
cssCopyEdit.fd-page .container h1 { color: red; }
This approach makes your CSS more resilient and reduces the chance of future breakage.
Example
Here’s an example of how you might target the page header in the ordering system:
cssCopyEdit.fd-page .container h1 { font-size: 28px; color: #333; }This will style the main heading while avoiding conflicts with other areas of your website.
To learn more about Flipdish's products or how to grow your online business enrol for FREE in the Flipdish Academy here: http://academy.flipdish.com/