Article suggestions
  1. Home
  2. Design Settings
  3. Design Settings » Main Design

Design Settings » Main Design

Design Settings » Main Design Main Design Visual Guide of the Main Design 1. Body Font Family 2. Heading Font Family 3. Body Font Size 4. Website Body Width 5. Google Map Theme Main Website Colors 6. Body Background 7. Body Font Color 8. Breadcrumb Link Color 9. Hyperlink Color 10. Hyperlink Hover Color
  • avatar
Written by Chan Nier
Updated on February 20, 2025

Design Settings » Main Design

 Link: https://support.brilliantdirectories.com/support/solutions/articles/12000044545

Main Design

This article explains how to edit settings available in the "Main Design" section of the "Design Settings"

Visual Guide of the Main Design

To get to this area, navigate to:

  • Settings 
  • Design Settings
  • General tab
  • Click on the "Main Design" module to toggle it open

1. Body Font Family 

The typography is generated by Google Fonts,  see their collection https://fonts.google.com/.

For this example we are going to use Open Sans.

2. Heading Font Family

This font setting will change the headings on the site.

3. Body Font Size

Increase or decrease the size of the Body Font. 14 pixels is our recommended Body Font size.


4. Website Body Width

  • Standard (Default)
  • Extra Wide: Recommended for large screens.

5. Google Map Theme

Style the Google Map View, to learn more about this setting, navigate to the following support article: Styled Google Maps

Main Website Colors

6. Body Background

Use the Color Picker to select the color or enter the RGB color code. This is the color that we are going to use for the Body Background: rgb(255, 255, 255).

On the website Color Picker window select the color or enter the RGB code:

Use sites like Adobe ColorsPaletton to generate new color ideas for the website.

Once entered click on Save Changes, then refresh the website homepage, and see the color applied:

7. Body Font Color

The color will apply to the color of the major fonts of the website.



Breadcrumbs offer users a way to trace the path back to their original landing point.


If there is an area on the Body of the site with a link, this is the color that the visitors will see:


If visitors hover the mouse on top of the link they will see the color changing. The hover effect appears when the user positions  the computer cursor over an element without activating it. Hover effects make a website more interactive.



Thank you for leaving a rating!
Did you find this article helpful?
0 out of 0 people found this article helpful so far
Can't find what you're looking for? Get in touch
How can we help?
Send your question below and we'll get back to you as soon as possible.
Cancel
translation missing: en.kb.default.contact_form_error
×
Thanks for your message!
Thanks for your message!
×