In this article we will take you through the steps to customize your Website Theme.


  • On the Dashboard, click on the Design Website button.



  • The Theme Editor will be displayed. Customize the theme by changing any of the theme items you want.



The following is a description of what each of the items mean:



MISCELLANEOUS


  • THEME TYPE: This is the type of event you are hosting.



  • THEME TITLE: This is the title(name) of your theme, for example: Dazzling Time.

  • WEBSITE LAYOUT: This refers to the display of your website. The choice of website layout also affects the arrangement of the menu items. Below is an example of an Old School layout, where the menu items are on the left-hand side.



  • BACKGROUND PATTERNS: The background pattern will be added to your website's background. Click on the dropdown arrow and you should see a screen similar to the one below. Background patterns can be displayed on top of a background color or image.
  • **Note: These are built-in patterns and cannot be edited nor customized.



  • BUILT-IN BACKGROUND IMAGES: The background image will be added to your website's background. Click on the dropdown menu in order to choose a background.



  • CUSTOM BACKGROUND IMAGE: Here you can upload your own background image. You can even upload a GIF animation as a background.



  • BACKGROUND-IMAGE POSITION: Here you can specify the positioning of your background image. 
  • Center: This will align the image to a position of center.
  • Fill: This will stretch the image to occupy the whole space of your screen.
  • Fit Width: This fits the image into a container.
  • Tile: This will repeat the image.


  • HEADER AND FOOTER PATTERNS: These are applied to your headers and footers. Click on the dropdown item and the options will be displayed.



  • HEADER ICON: The header icon will be added to your website. This will be added in the middle of your header section. Click on the dropdown and a list of different built-in header icons will be displayed.



  • FOREGROUND BORDERS: Click on the dropdown to add a border to your website.



  • CONTENT POSITION: Choose whether the information on the page should be aligned left, right or center.


  • DISPLAY MENU ITEM ICONS: This tick box will determine if the menu icons are shown or not.

  • THEME ANIMATIONS: Click on the drop down menu in order to choose which animation to use for your website.
  • **Note: This animation does not show on a mobile.

  • FOREGROUND OPACITY: This option changes the opacity of the foreground. 0% means the foreground won't display while 100% means it will be a solid color.



FONTS


Under the fonts tab you can change the size and font type of headings on your website.


  • CONTENT FONT: Here you can specify the type of font to be used for your content. Click on the dropdown arrow and a list of fonts will be displayed. Whichever font option is selected will be used throughout your site.


  • HEADING FONT: This is used to specify the type of font for the header.


  • SUB HEADING FONT: This is used to specify the type of font for the sub header.


  • EVENT DATE FONT: This is used to specify the type of font for the event date. 


COLORS


  • Under the color tab you can change the colors of the website, from your headings colors to your background colors.



  • When you click on a color, the following window will show, where you can add the RGB or Hex(#) color value.