leafleafleafDocly banner shape 01Docly banner shape 02Man illustrationFlower illustration
Updated on January 6, 2022

Visual Settings

Author: SportsPlus 1023 views

The visual setting allows you to customize your organization’s public website’s overall visual look and feel by changing the background, font style, size matching to your organization’s etiquette.

Favicon:

The favicon, short for favorite icon, is displayed in the browser’s address bar, in the browser history, before the page’s name in a list of bookmarks, and before the page’s title on the tab.

  • Choose the favicon from your local file system, and it will be immediately reflected on your organization’s public website.

Note: Onlyupload PNG files with the size 16×16 or 32×32 pixels only. 

  • To delete the favicon, click on the trash icon located at the right of the favicon.

Header:

  • An eye-catching header will inspire people to explore more of your website. In this section, you can easily customize the overall appearance of the header, as shown below.
  • Customize the website header’s background by selecting a color or uploading an image, or expanding the body background image or color.

The preview of the uploaded image will appear on the right side of the section.

  • Organization name: The name set here will only be reflected on the public website. The name set in the Super Admin area will reflect inside the application and everywhere else.
  • Header height: Choose the height of the website header region area.
  • Organization logo and name location: Choose to display the organization logo and name on to its left or center website header.
  • Organization name font size: The selected size is applied to the organization name displayed on the website header.
  • Header Text Color: The selected color is applied to the header area text, including organization name, feature links, etc.
  • Header Text Style: The selected style is applied to the header area text, including organization name, feature links, etc.
  • Feature Links: Choose to show or hide the feature links at the website header’s top right area.
  • Organization Logo: Choose to show or hide the organization logo in the website header.

Header links/menu: 

  • Background Color: Specify the background color of the header links or menus.
  • Link or menu name text color: Specify the text color of the header links or menus. 
  • Link or menu background-color: Specify the background color of the header links or menus. 
  • Active link or menu background-color: The link or menu’s background color is currently viewed after clicking on it. 
  • Text style: Specify the text style of the header links or menus.
  • Text size: Specify the text size of the header links or menus.
  • Link/menu text in bold: If you want the text of the header links or menus to be displayed in bold, then select Yes or else select No.

Body:

  • Background image or color: Customize the background by either choosing a system provided image or by uploading your image. Otherwise, select a color.
  • Page background-color: The background color of the entire page area. If this is set, then this color will cover most of the body area of all pages. This option uses the transparency option to show the body background image or color.
  • Transparency: The higher number will make it more transparent and allow seeing the underlying body background image or color. This option uses the page background color option to show the right percentages of page background color and body background image or color.
  • Text style: Specify the style of the body text.
  • Text size: Specify the size of the body text.
  • Text color: Specify the color of the body text.
  • Link Text color: Specify the color of the body text, which is having the hyperlinks.
  • Page header background-color: The page header is where the page title is displayed after the main header. Page content starts with the page header.
  • Table header background-color: This applies only to those pages where the data is displayed in a tabular form. Example: Standings
  • Page header text color: The page header is where the page title is displayed after the main header. Page content starts with the page header.
  • Table header text color: This applies only to those pages where the data is displayed in a tabular form. Example: Standings
  • Page body header: Choose whether to display or not display the header and title of a page after the main header.

Footer:

  • Background color: Specify the background color of the website footer area.
  • Footer text style: Specify the style of the text displayed in the website footer area.
  • Footer plain text color: Specify the color of the normal text displayed under the footer area.
  • Footer link text color: Specify the color of the linked text (hyperlink text) under the footer area.

Widgets:

  • Border type: Specify how you want to apply the border for the widgets. You can choose to apply on all four sides or only on one of the sides or no border at all.
  • Border color: Specify the color of the widget border.
  • Border corner shape: Specify the border corner shape of the widgets.This applies only if the border type is a box where there is a border on all four sides. You can choose between the square or rounded corners.
  • Bottom border single line: The thickness of the bottom border. Select Yes to display the bottom border of the widget with single line thickness. Otherwise, the bottom border is displayed in a thick 3d like shape.

Advanced settings

  • Widget header
    • Header height: Select the height of the widget header area. You can choose between- Small, Medium, Large, and Extralarge.
    • Header text alignment: Select the alignment of the text displayed on the widget header area. You can choose between – Left, Right, or Center.
    • Header text style: Specify the style of the text displayed on the widget header area.
    • Header text size: Select the size of the text displayed on the widget header area.
    • Header text color: Specify the color of the text displayed on the widget header area.
    • Header background color: Specify the background color of the widget header area.
    • Header text in bold: If you want the header’s text to be displayed in bold, select Yes or else select No.
  • Widget body
    • Body text style: Specify the style of the text displayed in the body area.
    • Body text size: Specify the size of the text displayed in the body area.
    • Body text color: Specify the text’s color displayed in the body area.
    • Body background color: Specify the background color of the body area.
    • Body link text color: Specifythe widget body text’s color, which is having the hyperlinks. It applies to all widgets when there are links in the body of the widgets.
    • Extra space between list items: If you want to add extra space between the list of items displayed under the widgets like quicks links, latest news, documents, then select Yes or else select No.
    • Spacing color: The selected color will be applied to the space between the list of items.
    • Body text in italic:  On selecting Yes, the link at the widget body text will be displayed in italic.
    • Bottom link in bold: On selecting Yes, the link at the widget body’s bottom will be displayed in the bold.