Logo, colours, fonts, the built-in home page and the seven ready landing pages are Level 0 — you set them up yourself, at no extra cost. A landing page of your own is Level 1.
The fastest way: let an AI build your home page
You do not need a designer or a developer. Copy the text below into Claude or ChatGPT, change the two things in square brackets, and send it. The AI builds the page and gives you a file to upload.
Copy the text in the grey box below.
Paste it into Claude or ChatGPT. Replace bumble.com with any site whose look you like, and put your own site's address and name in the other brackets. Send it.
Download the zip file the AI gives you.
In your admin panel go to Add-ons > Landing pages, press Add, upload the zip, and save.
Go to Themes > Generate colorset, press Fill in, then Save. The rest of your site now matches the new page.
Build me a home page for my dating website.Look and feel: like [bumble.com]. Study that site and use the same kind of colours, fonts, spacing and tone of voice.My site is [https://yoursite.com] and its name is [Your site name].My site will refuse the page unless it follows these rules:1. One file called index.html, plus a folder called img for pictures. 2. Every picture or file of your own starts with [site_path], for example: <img src="[site_path]img/hero.jpg"> 3. Every link into my site starts with [site_url], for example: <a href="[site_url]users/login_form">Sign in</a> 4. Put <div id="dp-registration">Loading...</div> where people sign up. 5. All CSS goes inside a <style> block in index.html, not a separate file. 6. Put the colours at the very top as CSS variables with these names: --accent, --accent-ink, --ink, --ink-soft, --paper, --card, --line, --font-body 7. Do not add jQuery. No .php files.When you are done, give me a zip file with index.html and the img folder inside it.
Got text instead of a file? Reply to the AI: give it to me as a zip file.
The upload refused your file? It tells you why. Paste that message back to the AI and ask it to fix the page. Nothing on your site changes until an upload is accepted.
Find what you need
You want to change | Where it is |
Logo, small logo, favicon | Themes > Edit logo |
Colours, font, text sizes | Themes > Generate colorset |
Texts on the built-in home page | Content > Languages > Pages > start |
A different home page altogether | Add-ons > Landing pages |
The copyright line | Content > Text pages |
Colours, fonts and logos all live in one place: Services > Customize your service > System > Themes.
Installed themes are the ones you can activate. One of them is already active.
Available themes have to be installed before they can be activated.
For more designs and extra functionality, visit the Dating Pro Marketplace.
Logo and favicon
Go to Themes > Installed themes, pick the theme you are using, and click Edit logo.
You upload two images:
Logo — shown on the home page. Default size 260 × 50 px.
Small logo — shown on every other page. Default size 30 × 30 px.
An image of a different size is stretched or squeezed to fit, so resize it first in any picture editor. Remember to press Save at the bottom.
You can upload a different logo for each language of your site: switch the language tab on the same screen.
No logo yet? Make one free at freelogodesign.org, or order one from our Experts Team.
Favicon
The favicon is the small icon in the browser tab. Video walkthrough.
Make one at favicon.cc, then generate the other sizes at realfavicongenerator.net. Other free generators: one, two, three, four.
Open your files over FTP or in File Manager and rename the existing
favicon.icotofavicon.ico_.Upload your new files to the root folder.
Clear the browser cache and reload the page.
Colours and fonts
Go to Themes > Generate colorset. The colour schemes that come with the platform are Default, Social, Honey, Arundiana, Luisia, Listera, Dendrobium and Bonatea.
On the left you edit every colour by hand. On the right, the colour wheel builds a whole scheme from one hue.
Under Text you set the font and the text sizes. Font is a list of font names in the order the browser should try them. Font file takes a woff2, woff, ttf or otf file up to 2 MB, and a file you upload overrides the list above it. Make sure the licence allows use on a website.
Taking colours and fonts from your landing page
If you use one of our landing pages, your site can take its colours and its font in one click, so the landing page and the pages behind it stop looking like two different websites.
A panel sits at the top of the Generate colorset page.
Choose a landing page. If you have only one, it is already selected.
Choose what to take. Everything is selected by default. Colours only and Font only are there for the rare case where you want to keep one of them as it is.
Press Fill in. The fields below are filled in and the ones that changed are marked with a dot. Nothing is saved until you press Save, and Revert puts everything back the way it was.
What gets filled in. Sixteen colour fields and the font. Three fields are left alone, because a landing page has no equivalent for them: Lifted in search status, Indicator and Text color on contrasting bg. Text sizes and the Site alerts section are left alone too.
About the font. The Font field is only a list of names — it does not load the font itself. Your landing page loads its font from an outside service with a line of its own, and the pages of your site do not do that. So the platform also takes the font file from your landing page and puts it in Font file. That is part of the same click, there is nothing else to press.
If the file cannot be fetched, you are told so. The name is still filled in, but your site will fall back to an ordinary font and the two will not match. Upload the font file yourself to fix it.
A landing page usually has two fonts, one for headings and one for body text. A colour scheme has one font field, so the body font is the one that is taken. The panel tells you which heading font was left behind.
Nothing happens automatically. If you change the landing page later, the colour scheme does not follow — you may have adjusted the fields by hand, and we are not going to overwrite that quietly. Press Fill in again when you want the new colours.
If your landing page was not built from our template, the panel says so — there is nothing for it to read. Colours are taken from the block of variables at the top of index.html.
The built-in home page
This is the page your visitors see straight after installation, before you add a landing page of your own.
Texts
Log in as admin, go to Content > Languages > Pages and choose start (User and Admin index pages) in the drop-down. Every text on the home page is editable there, in every language your site has.
The main banner and the smaller pictures
You can replace the background image from the admin panel. Short video: replacing the home page background.
Prepare the picture in several sizes. Open /uploads/themes-fixed/<theme name>/images — for example /uploads/themes-fixed/honey/images — look at the sizes that are there, and give your new files the same names. The same rule applies to the rest of the images in that folder.
Links to your mobile apps
If you use a landing page, the app buttons are in its own index.html — change the links there and you are done.
On the built-in home page the buttons are in the theme files, so this one needs file access. Open /application/modules/start/views/flatty and find the index template of your theme — index_honey.twig for the honey theme, and so on. In it, the two app buttons appear twice, once near the top of the page and once near the bottom. Edit the href values, for example:
<a class="btn-getapp btn-getapp_black btn-getatpp_android" target="_blank" href="https://play.google.com/store/apps/details?id=YOUR_APP"></a>
If you only have one app, delete the spare <a> block.
The copyright line
The line at the bottom of every page is edited together with your other text pages: see Terms of use, privacy policy, about us and the copyright line.
Landing pages
A landing page replaces the built-in home page. Seven come with the platform — that is Level 0, switch between them in Add-ons > Landing pages.
A page of your own is Level 1. The quickest way to make one is at the top of this page. If you already have one — made by a designer, a builder or an AI — upload it in the same place.
The page at the address start is what visitors see at the root of your site. Visitors who are already signed in never see it — they go straight to search. One page serves every language: the language part of the address is ignored.
Adding a landing page
Admin panel: Services > Customize your service > System > Landing pages (/admin/landings/index/).
Click Add landing page, give it a name and the part of the address where it should sit. You do not type the full address into the Link field, only the tail.
Upload the ZIP archive with the page files. The archive must contain an index.html file, otherwise the system cannot process it.
Click Preview to see the result. There is no limit on how many pages you add.
If the upload fails, check post_max_size, upload_max_filesize and memory_limit in your php.ini — the archive may simply be larger than your server allows.
For developers and AI assistants
Everything below is for whoever builds the page — you, a developer, or an AI assistant. You do not need it if you used the prompt at the top of this page.
Archive or link
An archive of files — recommended. The page is served from your own domain. The registration form works, visitors stay on one site, and nothing depends on another service staying online. Everything below describes this option.
A link to an external page. The page is fetched from another site every time somebody opens it. Useful when the page already exists somewhere you do not want to move it from. If that site is slow or unavailable, your page is too, and the rules below do not apply to it.
What the archive must contain
Required. A file called index.html, either in the root of the archive or one folder deep. site/index.html is fine; site/pages/index.html is too deep. Whichever folder holds it becomes the folder of your page.
Not accepted. Executable files of any kind: .php in any spelling, .htaccess, .cgi, .pl, .py, .sh. Files from this folder are served from your site, so an executable file would run on your server. An index.php will not be accepted as the main file either.
Not accepted. Paths that reach outside the archive — anything containing .., or starting from a slash or a drive letter.
Everything else is up to you. HTML, CSS, JavaScript, images and fonts, in as many folders as you like. Fonts and stylesheets may also come from an external service such as Google Fonts; only files that actually live in the archive need to be inside it.
Limits. Up to 500 files, and up to 20 MB when unpacked. Going over either usually means the page is carrying something it does not use, most often uncompressed images.
Linking to your own files
The address of your page folder is not known until you upload the archive, so you write it as a placeholder and the platform fills it in.
[site_path]becomes the address of the folder yourindex.htmlis in.[site_url]becomes the address of your site, for links into the platform.
<img src="[site_path]img/hero.svg" alt=""> <a href="[site_url]users/login_form">Sign in</a>
A plain relative link never works. Your page is served from an address of its own, while its files sit in the uploads folder. A link written the ordinary way looks for the file next to that address, where nothing is. There is no arrangement of folders that makes it work — that is what the placeholder is for. The page would still load, just with no styling or missing images, so the upload check refuses it rather than letting you find out afterwards.
Placeholders work in index.html only. They are replaced once, in the main file, at the moment you upload. A [site_path] written inside a separate .css file is never replaced. If a CSS rule points at an image, keep that rule in a style attribute or in a <style> block inside index.html. Mentioning the placeholder in a comment is fine.
External addresses, anchors like #section and data: images are left alone — only files of your own need the placeholder.
The registration form
Put this line where you want the form to appear:
<div id="dp-registration">Loading the form...</div>
The platform fills that element in. Anything you put inside it is treated as a placeholder and replaced, so leaving something like Loading the form… there is a good idea.
How it behaves. The first step — who you are and who you are looking for — appears straight away, with no button to press first. The later steps replace it in the same place: the page grows and scrolls, and nothing opens on top of your design. After registering, the visitor is taken into the site.
Do not add your own jQuery. The platform already loads jQuery and the scripts the form needs. A second copy will conflict with the first.
The older way still works. Pages built before the container existed used a link, <a href="#show-registration-block">, which opened the form on click. Existing pages keep working. For a new page, use the container — it puts the form where you want it instead of at the top of the page.
The sign-in form
A landing page can carry the sign-in form as well as the registration form. Members who already have an account sign in without leaving your landing page, so they never see a page in a different style.
Put this line where you want the form to appear:
<div id="dp-login">Loading the form...</div>
How it behaves. The fields appear straight away, with no button to press first. A wrong password is reported inside the block and the page does not reload. If two-step verification is switched on, the second step replaces the first in the same place. Sign-in buttons for social accounts appear if you have them enabled. After signing in, the visitor is taken into the site, exactly as from the standard sign-in page.
The standard sign-in page stays. Password recovery, social sign-in and two-step verification still live there, and links in emails still point to it. The container only means your visitors no longer need to go there.
Styling the forms
Every landing page has a setting called Registration form styling, with two answers.
Match the site theme. The form takes the colours and text size of your site theme. Nothing to write. Useful when the page has no strong design of its own.
Styled by the landing page. The form arrives with only the styling it cannot work without, and your CSS dresses it.
Six properties cover most cases. The same six work on #dp-registration and on #dp-login.
#dp-registration {
--dp-accent: #5B45D6; /* buttons, links, focus */
--dp-accent-text: #FFFFFF; /* text on the accent colour */
--dp-text: #1A1723;
--dp-border: #E4E0F0;
--dp-field-bg: #FFFFFF;
--dp-font-size: 15px;
}
Anything beyond that is ordinary CSS. Your rules win over ours automatically — you do not need !important. The class names worth knowing:
.btnand.btn-primary— buttons; the primary one carries the accent colour.form-control— text fields and selects.dropdown-menu— the open list of a selector.input-group-addon— the button attached to the end of a field.paginator— the step dots.sign_in-block— the "already have an account" line
Names you cannot use
The platform adds elements of its own to the page. Do not reuse these names in your HTML:
dp-registration— where your registration form goesdp-login— where your sign-in form goespjaxcontainer— the wrapper placed around your pageurl_landing— used by externally linked pagesregistration-widgetandregistration-widget-script— the form and its scriptsbtn-regshow— the older show-the-form button
What is checked when you upload
The archive is checked as soon as you upload it, and refused with the reason if something is wrong. Nothing is written until it passes, so a page that already works stays up while you fix the archive and try again.
The archive opens. A damaged or half-uploaded file cannot be read.
No executable files, and no paths reaching outside the archive.
Under 500 files and under 20 MB unpacked.
index.htmlis in the root or one folder deep.There is somewhere for a form: the registration container, the sign-in container, or the older anchor.
No file of your own is pulled in by a plain relative link.
No
[site_path]inside a stylesheet. Comments are ignored, so a note about the rule is fine.Every
[site_path]file the main page asks for is actually in the archive.
If an error message you see when uploading and this article ever disagree, trust the error message — and please tell us, so we can fix the article.
Where the pages are indexed
If you build pages in an external service, the same page can end up on two addresses: yours and the builder's. Search engines see duplicates and both versions suffer.
Decide which address is the real one, then check robots.txt, canonical addresses and the sitemap — on your site and on the builder's side. Five minutes of setup, and it saves a problem that is hard to diagnose later.
Common questions
I changed the page and nothing changed on the site. Clear the cache for the page to refresh.
The page uploaded but the images are missing. Your own files have to go through the [site_path] placeholder: not img/hero.jpg but [site_path]img/hero.jpg. The same applies to stylesheets and scripts.
How many pages should I have? As many as you have distinct audiences, and no more. Ten pages you never look at are worse than two you test and improve.
How do I know which page works? Registrations per page, not visits.
Using an AI assistant
Using an AI assistant for something more than the prompt at the top of this page? Give it this whole section along with your request — everything it needs to build a page your site will accept is here. Nothing extra is installed on your site for this.
A complete example
A page that satisfies everything above. Two files: index.html and img/hero.svg.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evening Together</title>
<style>
body { margin: 0; font: 16px/1.6 system-ui, sans-serif; color: #1A1723; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.hero { display: grid; grid-template-columns: 1fr 380px; gap: 48px;
align-items: start; padding: 56px 0; }
.art { min-height: 320px; border-radius: 18px;
background: url("[site_path]img/hero.svg") center / cover no-repeat; }
.card { background: #fff; border: 1px solid #E4E0F0;
border-radius: 18px; padding: 26px; }
#dp-registration {
--dp-accent: #5B45D6;
--dp-accent-text: #FFFFFF;
--dp-border: #E4E0F0;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
</style>
</head><body class="page">
<div class="wrap">
<section class="hero">
<div>
<h1>Meet someone this week</h1>
<p>People near you who would rather meet than message for a month.</p>
<div class="art" role="img" aria-label="An evening in the city"></div>
</div> <aside class="card">
<h2>Create your profile</h2>
<div id="dp-registration">Loading the form...</div>
</aside>
</section>
</div>
</body>
</html>
Current limitations
One page per address, in every language. A landing page cannot be translated. To serve languages differently, create separate pages at separate addresses.
Your analytics, not ours. The tracking codes configured in the platform are not added to a landing page. Put your counters into
index.htmlyourself.No preview before upload. The archive is checked, but the only way to see the page is to upload it and open it.
Beyond Level 0
Anything deeper than logo, colours, fonts and landing pages means editing theme files, which needs a developer. If you would rather hand it over, the levels and prices are here: Design your dating site.
Making your own theme
For reference, if you do have a developer. Theme files live in /application/views: flatty is the user interface, gentelella is the admin panel. Copy one of those folders, give it a new name, open theme.php inside it and change the id, name and description:
$_theme["gid"] = "theme_new"; $_theme["type"] = "user"; $_theme["name"] = "New theme for user mode"; $_theme["description"] = "My new theme";
The theme then appears under Available themes in the admin panel. Click Install to activate it, and edit it from there or in the files.