Everything on this page is part of Level 0 — the design you set up yourself, in the admin panel, at no extra cost. No developer, no order form.

Right after installation, the home page of your site looks something like this:

Colours, fonts and logos all live in one place: Services > Customize your service > System > Themes.

For more designs and extra functionality, visit the Dating Pro Marketplace.

Go to Themes > Installed themes, pick the theme you are using, and click Edit logo.

You upload two images:

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.

The favicon is the small icon in the browser tab. Video walkthrough.

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.

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.

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.

This is the page your visitors see straight after installation, before you add a landing page of your own.

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.

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.

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 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.

A landing page replaces the built-in home page with one of your own. Seven are included, and you can upload more. Full instructions: System: Landing pages.

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>

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 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.

Do not add your own jQuery. The platform already loads it.

Making it match your design. Exactly as for the registration form. Set Registration form styling to Styled by the landing page, then six properties cover most of it:

#dp-login { --dp-accent: #5B45D6; --dp-accent-text: #FFFFFF; --dp-text: #1A1723; --dp-border: #E4E0F0; --dp-field-bg: #FFFFFF; --dp-font-size: 15px; }

Beyond that it is ordinary CSS, and your rules win without !important. The class names are the same ones the registration form uses: .btn and .btn-primary, .form-control, .sign_in-block.

What changes in the upload check. A landing page is accepted if it has either the registration container, or the sign-in container, or the older anchor. A page with only a sign-in form is fine. dp-login joins the list of names the platform uses, which you must not reuse in your own HTML: dp-registration, dp-login, pjaxcontainer, url_landing, registration-widget, registration-widget-script, btn-regshow.

This is Level 1, and you no longer have to order it. Four steps:

The full rules an archive has to follow are in System: Landing pages, and your installation ships with instructions an AI assistant can read, so you can simply ask it to build the page for you.

Would rather we did it? We connect a landing page you already have for about $99 — contact a manager.

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.

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.