Customizing Theme Presets

Customizing your theme's preset allows you to take the modification of your site even further. By customizing the preset, you'll be able to make choices in regard to the colors and fonts being used on your site and more. To see how to change your theme and theme preset, please go here.

To customize your theme preset, select the Site Configuration options from the menu, then Theme. Select the Customize button in the Theme section.

 

Read on for more information regarding what the different customization fields do.

 

Anatomy of a Site

Before explaining each of the customization fields in more detail, it's important to note that the customization options are typically grouped by which portion of the site it affects. In general, the options will be divided by:

Below is an example of a website page with the corresponding sections outlined:

 

Each theme will have variations on what can be customized, but a general outline of some of the possibilities that you may find are listed below, along with an explanation on what to expect if changed.

 

Body

Background Color: The background color changes the background color page body. Note that other background colors may override the overall body background color (like page background or header and footer background).

Background Image: This will allow you to add an image to the background of your page body. It is not recommended to put in a background image that makes it difficult to read your text.
 

TIP: You can utilize a body image with a solid white "Page Element Container Background Color" to create a solid background color behind the elements of your page to make sure your text is legible while still being able to see the background image around that. (See here for an example).

 

When adding a background image, there are different types of behaviors and sizes you may have the option to select from:

  • Repeat Behavior:
    • No repeat
    • Repeat (this will repeat the image both horizontally and vertically)
    • Vertical repeat
    • Horizontal repeat
       
TIP: In most cases, repeat behaviors are used when the image being used is a small pattern. When using a larger image, selecting "no repeat" is most common.

 

  • Attachment Behavior:
    • Fixed
      Background will remain fixed, regardless of scrolling (it moves along with the rest of the page)
    • Scroll
      Background will move with the scroll of the page

To see an example of both behaviors, see here.

  • Size
    • Retain original image size
      This will use the original size of the image being used
    • Fit to fill screen
      This will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
    • Fit to show full image
      This will resize the background image to make sure the image is fully visible

Font: This will set the font used for the whole page (unless overridden in specific sections). Select from the drop-down to view the available fonts.

Font Size: This will set the font size for the whole page (unless overridden in specific sections)

Font Color: This will set the font color used for the whole page (unless overridden in specific sections).

Link Color: This will set the font link color used for the whole page (unless overridden in specific sections).

Link Color (hover): This will set the font color on links when being hovered over (unless overridden in specific sections). To see an example of a link color changing on hover, hover your mouse over this link.

 

Header

Font: This will set the font used for any text in the header section. Select from the drop-down to view the available fonts.

Font Size: This will set the font size for any text in the header section.

Font Color: This will set the font color for any text in the header section.

Background Color: This will set the background color of the header section.

Icon Color: You may notice that certain header templates will include icons. (For example: or ) You can change the color of the icons using this option.

 

Navigation Menu

Background color: This sets the color of the background for the menu. Depending on the theme, the background area typically will go all the way to the left and right edges of the page.

Border color: Depending on the theme, you may have the option to set a border color. In the example image about, the border will display on the top and bottom of the menu.

Item: In the context of the menu, an item refers to the menu title (text) and surrounding area (background) of it. For example, using the above image example, Home, Cruises, Tours, Close to Home, and Customer Services are all individual items.

Item (text):

  • Color: This will set the font color for the text in the menu.
    • Hover: This will set the font color on the text of the items when being hovered over
    • Selected: This will set the font color on the text of the times when it is the selected item. (In the example above, Home is the selected item and has a different item text color and background).
  • Weight: Determines the degree of boldness of the text
    • Hover: Determines the degree of boldness of the text on hover
  • Capitalization: This will give you the option to override the capitalization on the item text as input in the menu title and make it all capital letters instead.
  • Font: This will set the font used for the menu item text.
  • Size: This will set the font size used for the menu item text.

Item background color: This will set the background color to the items.

  • Hover: This will allow you to set a color for the background item on hover.
  • Selected: This will allow you to set a color for the background item when selected.

 

Page

The page aspect of the customization options will primarily focus on determining the styling for the different elements (or modules) included in NexCite.

Element container background color: This will set the background color for almost all elements within the page (See here for an example).

Element heading font color: This will be used for the font color of any headings (<h1>, <h2>, <h3>, etc. and will often be used for the title of any elements).

Element primary background color: This will typically be used as the dominant background color in elements (in the example above, you'll see that it is used for the search box, and as a background to the offer title in some offer group displays)

Element primary border color: This will set the border color for any elements that use them. This will be based on theme, and the display choice of that element.

Element primary font color: This will set the main font of your elements.