All Collections
Manage
Customize your dating service
Themes
System : Themes. Design services. Done for you.
System : Themes. Design services. Done for you.

How to customize your website's Theme, logo, images, and colors

Andrew avatar
Written by Andrew
Updated this week

Themes. Rebrand your platform with a unique design from thousands of themes for apps and websites..

Design services for dating websites and apps

We offer to create customized versions of themes from the

  1. Dating Pro marketplace — 100+ designs

  2. Behance — Hundreds or thousands of the best designs

  3. and Dribbble — Also hundreds or thousands

We tailor adaptations from Behance, Dribbble, and marketplace themes for the dating niche. Of course, you can also design your own unique design for apps and websites

Examples of good landing pages to increase trust in your platform among your new clients: Youapp, Hinge.

Uniqueness

Your launched site or apps are noticeably similar in navigation to the basic Dating Pro, with differences in design, color scheme, fonts, and logo.

Your launched site or apps do not resemble the basic Dating Pro.

Price for Web

Cost $300: Integrate fresh, unique landing pages that carry your ID and complement your site's color theme.

From $10,000
Contact sales

A complete overhaul of the application or website, featuring a unique design or adapted dating replicas from Behance and Dribbble.

Price for Apps

Cost $440 is included as a "Done for you" component of the Advanced package.

From $10,000
Contact sales

Roles assigned *1

CSM + D + UX/UI

CSM + D + UX/UI

Launch timeline

1.1 1-2 business days
1.2. 3-5 business days
2. 3-5 business days

From 1 week

*1 look at the role descriptions here.

FAQ

How to get the rebranding service:

1. Send us the link to your chosen theme and your logo.

2. Make the payment, specifying the amount agreed upon with your manager.

3. Receive your apps and website with a fresh, unique design.

How do we rebrand several times faster than usual?

By using the tool Figma Plugin, we can now transfer any website or application to Figma using the links you provide and make design edits.​

Where I can edit my site’s colors schemes images and logos?

Edit your site’s colors schemes, fonts, images and logos in the administration control panel under Services > Customize your service > System > Themes.

  • Installed themes stand for the themes that you can activate. One of them is already active.

  • Available themes need to be installed first before they can be activated.

​​Visit Dating Pro Marketplace to enhance functionality and select a unique design.

If you would like to create a custom theme though, some programming knowledge will be required, and you will need to access site files via FTP or with File Manager.

This is how it works

1. To create a new theme, open your site files and go to /application/views. You will find /flatty and /gentelella directories that contain templates, CSS files and other files that constitute a design theme:

  • gentelella’ stands for the administration panel,

  • flatty’ stands for the user interface.

2. Copy a selected directory (with its contents) and give it a new name. Here, I copied a directory for the user interface:

PG Dating Pro: Modify the design of your dating site


3. Within the new directory, open file theme.php and edit the following lines:

$_theme[“gid”] = “theme_new”; //give your theme a new ID
$_theme[“type”] = “user”;
$_theme[“name”] = “New theme for user mode”; //a new name
$_theme[“description”] = “New theme 2022”; //a new description

4. The theme will appear under ‘Available themes’ in the administration panel.

Click ‘Install’ to activate this theme and edit it.

5. After that, you are free to edit the theme files. Or proceed with editing themes directly from the administration panel.

PG Dating Pro: Modify the design of your dating site

Theme editor

Editing a theme – Logotype editor

1. Go to Interface > Themes > Installed themes > select the theme that you want to edit logotype for > click on Edit logo.

You are able to change the background image and logotype on the index page by clicking Edit logo.

2. You will get to the Logo editor:

Upload desktop and mobile background image according to the recommended sizes.

3. Now you can upload two types of logos:

  • Logo image is used on the index page

  • Small logo is used for all the other site pages

4. Make sure to save the changes.

Note: To edit the logo and the background image on the main page, please view this detailed manual How do I modify the main page of my dating site?

Editing a theme – Color schemes editor

1. Go to Interface > Themes > Installed themes > select theme > click Edit colours:

You can also edit color schemes of your website.


2. The color schemes that you see in the list are: Default, Honey, Arundiana, Luisia, Listera, Dendrobium and Bonatea.

3. Click ‘Edit colours’ for the selected scheme, and you will be able to edit the colors and fonts:

Color generator will help you create matching colors.


Fonts editor also present in Interface section of the admin panel.
You can customize site notifications according to the site's color scheme.

How can I change the logotype and a favicon of my dating site?

How to change logotype

Watch this video with detailed instructions: YouTube

A logotype is an identifying symbol that serves the purpose of branding your site.

It also lets you get back to the homepage from any other page if you click on it.

To change the site logotype, go to your admin panel > Services > Customize your service > System > Themes > Edit coloset > Edit logo

This section allows site administrator to manage site logotype.

To upload another logo, browse for the necessary image that should be displayed as logotype.

Please note that the default logo size is 260*50 px.

If the image you selected is of a different size, the system will automatically fit it to the default sizes.

That’s why it may be stretched or squeezed.

6_logo.png


You can change the logo size settings in the same site section; just make sure that it matches the site layout.

You can resize the logo picture in any picture editor.


Don’t forget to click the ‘Save‘ button at the bottom of the page.


This is how a new logotype looks like on the index (landing page | main page) page in the user mode.


In “Logotype” section you can also edit the small logotype.


The small logo appears on all site pages except for the Index Page (landing page | main page).


Small logo default size is 30*30 px. Please note that the site design may be corrupted if you exceed the default sizes.

While uploading your logo images, the system will automatically adapt them to fit the indicated sizes.

If your logo doesn’t fit the required sizes, we recommend that you resize it in any picture editor.

13_logo.png


Don’t forget to click the ‘Save‘ button at the bottom of the page.


It is possible to create a unique logotype for each language version of your site.

Choose another language tab and you will get a form to modify logotype for the selected language version.


If you don’t have a logo yet, you may order a custom one from our Experts Team. The custom logo will meet your requirements and fit your business objectives.

Create your logo design online for your business or project. Its Free to use. Customize a logo for your company easily with free online logo maker:

How to change favicon

Here is detailed video in which you could know how to change your favicon:

Favicon is a website icon or a file containing one or more small icons, associated with a particular Website or Web page.

It is one of the key factors forming your website branding. It should reflect the main point of your website. Furthermore, it should be individual and remarkable.

Let’s take a look at how you can easily create your own favicon with a free online editor:

Create your own favicon. You can paint your own or import the file;

favicon.png

• Download the file favicon.ico to your PC;

favicon_2.png

• Now you need to create various-sized types of your favicon, so it will look perfect in different browsers and devices. You may use https://realfavicongenerator.net/.

• Open your FTP or cPanel and rename the default favicon.ico file to favicon.ico_;

• Upload the newly created file to the root folder;

• Upload the newly created files to the root folder the same way you updated favicon.ico earlier;


• Clear browser cache and refresh your website page to see changes.

You may prefer using other favicon generators available online for no extra fee: Favicon Generator One, Favicon Generator Two, Favicon Generator Three, and Favicon Generator Four.

Done for you - white label rebranded Dating Pro website and mobile apps on Google Play and App store

How it work

1. Branding mobile apps and website

For your mobile app and website we create custom app icon, launch/splash, and login screens

  1. You have sent a "completed brief".

  2. You have approved the element screens.

2. Marketing Design

We create the graphics you need to market your new app in the app stores

3. Your 100% unique rebranded white-label mobile apps and website published

  • Your Dating Pro App is completely white-label, there's no Dating Pro branding or links, anywhere.

  • Your app is published in your own Apple App Store and Google Play Store developer accounts. Your website is hosted.

  • You will be unique. Your customers won't confuse you with other dating services.

What a "completed brief" means

  1. Logo, range of colours, fonts from the media kit. If you don't have them: you can choose the colour scheme yourself. or with our help.

  2. Texts for part of the listed screens. Below is the standard list for any application.

When designing screens for mobile apps, you should consider both the guidelines set forth by Google Play (for Android apps) and the App Store (for iOS apps). These guidelines help ensure your app provides a consistent and high-quality user experience. Here are some key considerations for what screens your app should include:

1. Splash (Launch) Screen:

Display your app's logo or branding briefly during app startup.

2. Onboarding Screens (Optional):

Provide introductory screens to familiarize users with your app's features and functionality, especially if your app has complex or unique features.

3. Sign-Up/Log-In Screens:

Include screens for new users to sign up for an account and for returning users to log in.

4. Home (Main) Screen:

The primary screen where users land after logging in. This should present key app features and content.

5. Navigation Drawer (Android) / Tab Bar (iOS):

For easy navigation between different sections of your app.

6. Content Screens:

Screens that display your app's main content, such as articles, products, or messages.

7. User Profile Screen:

Allow users to view and edit their profile information.

8. Settings Screen:

Include options for customization, notifications, and other app settings.

9. Search Screen:

If your app includes a search feature, provide a dedicated search screen or a search bar in the navigation.

10. Detail Screens:

- For displaying detailed information about specific items or content.

11. Form Screens:

- If your app requires user input, create screens for data entry or forms.

12. Messaging/Chat Screens (if applicable):

- Include screens for one-on-one or group conversations.

13. Notifications Screen:

- Display a list of notifications and allow users to manage their notification preferences.

14. Purchase/Checkout Screens (if applicable):

- For e-commerce apps, include screens for selecting products and completing purchases.

15. Error/Feedback Screens:

- Provide user-friendly error messages and a way for users to report issues or provide feedback.

16. About/Info Screens:

- Include information about your app, such as version number, terms of service, and privacy policy.

17. Logout/Exit Confirmation (Optional):

- If your app allows users to log out or exit, consider including a confirmation screen to prevent accidental actions.

Where can I find design themes for apps and websites?

How can we integrate their design? You purchase the source files from the author. Or we will create a replica adapted for Dating Pro. All this is part of the "Done for you" service.

Publishing the application in the iOS Apple Store. Guideline 4.3 - Design - Spam

Publishing on Google Play involves fewer difficulties. In the Apple Store, app moderation is more challenging.

Contact our customer service managers to increase your chances of publication. They will advise you on how your proposal should be and how it should differ from others. Your chances of publication significantly increase if:


1. Your offering is distinctly different from the competition. There are many opportunities for differentiation in comparison.

*For example, order us to add to your app: addons from the comparison list of Dating Pro apps with the website, any features of your competitors. We always provide a free cost estimate.

2. Your app comes with its own ID and layouts. Order our design services as described at the beginning of this article. View App Store Review Guidelines.

3. You have a business account.

4. You frequently call the Apple Store's app support service for publication.

What is “responsive design”?

It’s an approach to web design that allows creating a fluid web page that can expand or contract to fit the end user’s screen size.

With responsive design, your users will be able to enjoy the site on any devices, be it a laptop, tablet, mobile phone, smart TV or even onboard computer of a car.

Dating Pro websites are mobile-friendly, looks good and works well on any device

FAQ


Do you create the app/layout or are we just purchasing it then we do it?

We do app/layout - see point 2. To do this:


Step 2. I will send you an approximate cost of connection.
For example, $2000. They are added to the cost of the necessary components in the Apps Pro package. For example, +$3599. Total: $5599


Step 3. After agreeing on the cost, send (or you can already do it now) the completed questionnaire about your ID

Step 4. We will repeat the theme you choose (step 2) in the application, without changing its elements.

If you want to change elements (screens, logic, button layout and elements) - you need a description. And there will be a separate cost estimate through step 2.



Did this answer your question?