The Appearance tab controls the color, font, and certain graphic aspects of the site’s design. It can be used to allow easy access to common design elements in drop-downs across the WordPress Back-End. Find more details on each tab, its contents, and their uses below.

Colors

Primary Color

The default color for elements like buttons (banner buttons, book buttons, activity block buttons, etc.), and the main color scheme used site-wide.

Secondary Color

The default color for accents (e.g. separators [full or stubby setting]) and sometimes used for secondary buttons (call-to-actions that do not interact with the booking flow like information requests, links to galleries, etc.).

Banner Button Color

Controls the color of the Banner Button. If there is no color selected for this, the banner button will default to the Primary Color.

This is also the color of the Hamburger Menu Icon. If you like to use the Menu Font Color as the color for the Hamburger menu icon go to, Banner & Menu > Menu > Menu Font Options > Use menu font color for hamburger menu button.

Color Palette

The Color Palette is used to keep easy access to multiple colors in the color customization drop-down across the Back-End.

Any non primary or secondary color used on the site should be defined in this section.

Logos

Logo Name

The logo name is the alt text that will show up if the logo image does not load. This should be the company name.

Logo Link Override

By default the logo will always link back to the homepage of the site. If the site requires the logo to link to another page, use this field to define that link. Be careful as most users expect the logo to take them to the homepage.

Logo

The logo image added in this field will show up in the header of the site.

Mobile Logo

Mobile Logos are useful when the client has a particular complicated Logo. If they have a simple, but still recognizable alternative logo, upload that as a Mobile Logo to help keep the mobile display/header looking clean.

Site Icon Section

Site Icons, or favicons, are the imagery that displays to the left of the Title Tag at the top of a browser.

Site Icons have specific requirements:

• Be Square
• Be at least 512×512 pixels

Fonts

Headline Font

The default headline font. Changing this will update any headline without a specific font applied to it depending on the Theme used for the site.

Headline Font Weight

Controls the thickness of headline text. For example, standard text sits around 400, where as bold text sits around 700.

Body Font

The default paragraph font. Changing this will update any paragraph text without a specific font applied to it depending on the Theme used for the site.

Styles

Single Activity Block Style

Controls the appearance of Activity Blocks in Item Grids or Single Activity blocks.

Style Options

• Card will add an encapsulating shadow border around the activity block, to make it look like a card.
• Plain will remove the border from the card setting.
• Plain – Squished will mildly compress the title and summary of the activity block beneath the imagery.

Corner Rounding

Controls the appearance of corners on various elements site-wide like buttons, banner buttons, activity blocks.

Style Options

• Square Corners will be the default, and gives the elements above rigid, rectangular corners.
• Round Corners will round off the corners compared to the default, but retain the otherwise rectangular shape of all elements.
• Pill Shaped will change the end of certain elements ( buttons, banner buttons) to semicircles and round the corners of all other elements.

Image Button Style

Image Buttons are commonly used to link to segmentation pages on the site. This setting will determine the style of all image buttons across the site.

Style Options

• Plain will display the text on an image button at the bottom-left and add an overlay.
• Plain Centered will display the text on an image button with an overlay and will center the text.
• Bar in Middle will create a centered, overlaid stripe for the text on an image button.
• Bar on Bottom will create a overlaid stripe for the text at the bottom of an image button.

Social Media Icon Color

This changes the color of the social media icons.

Image Hover Effect

This field affects the hover effect on image buttons and cards with clickable images. The default is fade.

• Fade will make an overlay be applied to the image on hover
• Zoom will make the image zoom in on hover
• None will make the image do nothing on hover

Site Background

This tab sets a background for every page of the site. This should be used sparingly and only subtle patterns/colors should be used.

Heading Options

Global heading options will set the default of the heading blocks for brand and style consistency. The more specific the target, the more priority it has. If nothing is set on the heading block it will fall back to the global heading styles, and then to defaults which are already defined but can be referenced below. The following can affect heading blocks, slideshows (both standard and activity slide), and testimonial rows. By default, there will be nothing selected under Heading Options.

• Jumbotron headings only inherit text styles: cases, bold, and italics (sub headings and paragraph text do not inherit any global settings). Activity page headings inherit the same as jumbotrons with the additions of color from global heading settings (Taglines do not inherit any global settings). If you want to override the global heading color on activities, you can set a color under Activity Settings -> Display -> Activity Title Color.

Text styling

WCS and clients can now globally change heading text. Text styles can be combined, for example headings can be both uppercase and italic. Additionally, styles can be combined on the global and block level or they can be exclusive to a certain block. The case options build on top of one another so for example if both sentence case and title case are checked, then title case will override sentence case.

Heading text style overrides

If this option is selected on a particular heading, then the heading will no longer inherit any text styling from under Appearance -> Look and Feel. However, individual block level styles can be applied to the block.

Sentence case

If this option is checked then the text put into the heading will be transformed into sentence casing, meaning that only the first character will be capitalized, while the rest will be lowercase.

Title Case

If this option is checked then the text put into the heading will be transformed into title casing, meaning that only the first character of each word will be capitalized, while the rest will be lowercase.

UPPERCASE

If this option is checked then the text put into the heading will be transformed into all uppercase.

Bold

If this option is checked the heading will become bold.

Italic

If this option is checked the heading will become italic.

Size

If a size is not set at the block level, it falls back to the size set under heading options in Look and Feel. The size set on the block level overrides that of the size under heading options in Look and Feel. If it is not set on the global heading it will default to an h3 for heading blocks, h3 for a standard slide, and h3 for a testimonial row. You cannot set a size on multiple activity slides, but they are as follows: h2 for Maunakea and h5 for all other themes. Size options:

• Extra Large (h1)
• Large (h2)
• Medium (h3) – Default
• Small (h4)
• Extra Small (h5)

Global Heading Color

If a color is not set at the block level, it will fall back to the global heading color in Look and Feel. If it is not set there, then the heading color will either be white if the background is dark or black if the background is light. The color set on the block level overrides that of the global heading. Heading colors will have access to palette colors set under colors in Look and Feel.

Text Alignment

If the text alignment is not set at the block level, it will fall back to text alignment under heading options in Look and Feel. Text alignment set on the block level overrides that of the size under heading options in Look and Feel. If it is not set under heading options or on the block it will fall back to center for heading blocks. On Maunakea standard slides will default to center while other themes will default to left. On Maunakea activity slides will default to left, and center on all other themes. The testimonial row title does not have the option to be anything but center aligned.

Horizontal Rule Type

By default, the separator will have the selection of none. If either Thin (1px), Regular (3px), or Bold (5px) separator types are selected then that type of separator will be added under all heading blocks, under headings in standard and activity slides, and under the heading for the testimonial row title. Separators can be removed on a block-by-block basis by selecting “Do NOT include the global separator with this heading” on each block type.

Separator Image

Add a (preferably) .png image as a separator, replacing the full or stubby line look. When adding an image as a separator. The Horizontal Rule thickness AND Separator Color field will both disappear as these options do not apply when using an image as a separator. Use the Separator Height, Separator Width, and Horizontal Alignment field to apply how the separator should look under the heading.

Separator Height

Define the height between the separator and heading.

Separator Width

Define the width of the separator. When using an image, this will define how small or large the image separator will be from the original width of the image. When using default separator, this is where we can define if we want a stubby line (40px), a medium line (Half 50% – half of the width of the column), or a full line (Full 100% – the entire width of the column).

Horizontal Alignment

Define if you want the separator to be left, center, or right aligned

Separator Color

Define the color of the separator. The options of colors comes from Colors tab.

Global Jumbotron Options

Adjust Jumbotron Row options at a global level. In order to override, set on a row level.

Global Breadcrumbs

Global breadcrumbs will be available on sites starting with the MK theme. Global breadcrumbs will appear by default upon creation, on all pages, activities, blog pages and blog posts on MK to make all pages consistent in styling. There is a secondary option for displaying the global breadcrumbs in the footer as well. The active state color, alignment, and location can be determined globally, while whether or not they are hidden can be determined on a page-by-page basis. In the footer, the home section of the breadcrumbs is represented by a home icon. Global breadcrumbs will not display on the homepage.

Global Breadcrumb Options

By default, global breadcrumbs will be available in the header, underneath the menu on sites. There is the option to not display them in the header and another option to add global breadcrumbs in the footer.

You also have the option to show breadcrumbs only on activity pages. If you select this option, activity page breadcrumbs will follow the first to options to determine if they will show in the menu, footer, or both. (This is new since activity breadcrumbs used to appear under the jumbotron.)

Active State Breadcrumb Color

If a color is not set under global breadcrumbs in Look and Feel, it will fall back to the secondary color of the site. If it is not set there, then the color will either be white if the background is dark or black if the background is light. The color will only appear on the active state in the header breadcrumbs, and not in the footer.

Alignment

By default, the alignment for global breadcrumbs is left aligned. The alignment can be set globally to either left, center or right and will apply to both the header and footer.

Mobile

Global breadcrumbs will only display in the footer on mobile, regardless of the selection of position within Look and Feel.

Page Options

Breadcrumbs can be hidden on a page-by-page basis. Additionally, breadcrumbs can be hidden on the blog as a whole.