Category

Design Categories

These Design Categories can be found by using the Edit Page Style option. As there are so many, you can use this guide to help decide what setting it is that you wish to change. Note that if you set a Page Style Design or have a Global Setting, certain aspects of your page will be changed without being reflected in Edit Page Style.

Colors:

H1 – Admission/Sponsor Headline

H3 – Event Name/Donation Headline

H4 – Event Date/Time and Event Location

H5 – Grouping Header Text

Colors – WellBorderColor = the outline box around the page

Emphasis (Emphasis)
The Emphasis color is used throughout the Customizable skin as the key accent color for the layout. This color will be inherited by all colored background sections, buttons and some headlines.

Emphasis 2 (Emphasis2)
The Emphasis 2 color is available as a second brand-based color highlight.

Emphasis Reverse (EmphasisReverse)
Emphasis Reverse is intended for text that is placed within an Emphasis-colored block. As such, Emphasis Reverse should be set to a color that contrasts with your Emphasis color in order to be readable. For example, if your Emphasis color is a dark red, your Emphasis Reverse color should be white. This will result in white text on a dark red field.

Button Color (ButtonColor)
Buttons will default to Emphasis color unless a Button Color is selected.

Button Text Color (ButtonTxtColor)
Button text will default to white (#FFFFFF) unless a Button Text Color is selected.

Footer Pane 1 Text Color (FooterPane1TextColor)
Sets the color of text in the first footer pane.

Footer Pane 2 Text Color (FooterPane2TextColor)
Sets the color of text in the second footer pane.

Footer Pane 3 Text Color (FooterPane3TextColor)
Sets the color of text in the third footer pane.

Colors - InfoBoxBackground
Background color of info box.
op_info_1.jpg

Colors - InfoBoxText
Text color inside box
op_info_1.jpg

Catalog Widget Text (CatalogWidgetText)
Sets the color of the text in catalog widget controls including the Page/Package Counter and the Pager.

Well Text Color (WellTextColor)
Sets the color of the text within a bootstrap-well container.

Well Link Color (WellLinkColor)
Sets the color of links within a bootstrap-well container.

Well Link Hover Color (WellLinkHoverColor)
Sets the color of the links on hover within a bootstrap-well container.

Deluxe Template Sidebar Text Color (DlxTemplateSidebarTextColor)
Sets the color of the text in the Deluxe Template Sidebar

Deluxe Template Sidebar Link Color (DlxTemplateSidebarLinkColor)
Sets the link color in the Deluxe Template Sidebar

Deluxe Template Sidebar Link Hover Color (DlxTemplateSidebarLinkHoverColor)
Sets the link hover color in the Deluxe Template Sidebar

Simple Template Header Color (SimpleTemplateHeaderColor)
Sets the color of a header in the Simple Template.

Simple Template Sidebar Header Color (SimpleTemplateSidebarHeaderColor)
Sets the color of a header in the sidebar of the Simple Template.

Dom Left Nav Link (DomLeftNavLink)
Sets the color of the link text in the Simple-Fixed-Width-Heavy-Left-Sidebar version of the Customizable skin.

 

Backgrounds:
 

Backgrounds –Footer2PaneBckgd = bar color for About Us/Contact Us

Backgrounds –Footer3PaneBckgd = bar color for Greater Giving Bar

Top Pane Background (TopPaneBckgd)
Sets the color of the Top Pane Background

Top Pane Background Image (TopPaneBckgdImage)
Allows you to upload an image to be used as the background for the Top Pane (parallax).

Content Pane 2 Background (ContentPane2Bckgd)
Sets the color of the Top Pane Background

Content Pane 2 Background Image (ContentPane2BckgdImage)
Allows you to upload an image to be used as the background for the Content Pane 2 (parallax).

Footer Pane 1 Background (FooterPane1Bckgd)
Sets the color of the Footer Pane 1 Background

Footer Pane 1 Background Image (FooterPane1BckgdImage)
Allows you to upload an image to be used as the background for Footer Pane 1.

Footer Pane 2 Background (FooterPane2Bckgd)
Sets the color of the Footer Pane 2 Background

Footer Pane 2 Background Image (FooterPane2BckgdImage)
Allows you to upload an image to be used as the background for Footer Pane 2.

Footer Pane 3 Background (FooterPane3Bckgd)
Sets the color of the Footer Pane 3 Background

Footer Pane 3 Background Image (FooterPane3BckgdImage)
Allows you to upload an image to be used as the background for Footer Pane 3.

Icon Square Background (IconSquareBckgd)
Sets the background color for the social media icon squares. If no selection is set for this property the background color will be your Emphasis color.

Icon Square Background Hover (IconSquareBckgdHvr)
Sets the background color for the social media icon squares on hover. If no selection is set for this property the background color will be your Emphasis color.

Catalog Widget (CatalogWidget)
Sets the background of Catalog controls including the Page/Package Counter and the Pager.

Well Background (WellBckgd)
Sets the background color of the bootstrap-well container.

Deluxe Template Sidebar (DlxTemplateSidebar)
Sets the background color of the Deluxe template sidebar.

Simple Template Background (SimpleTemplateBkgd)
Sets the background color for the content area of the Simple Template. If you would like to have a page background other than white (for example, a black background with white text), use this setting.

Event Left Nav Background (EventLeftNavBckgd)
Sets the background color of the left navigation bar in the specialty option Simple-Fixed-Width-Heavy-Left-Sidebar.

Dominant Left Nav Link Hover (DomLeftNavLinkHover)
Sets the hover color for the navigation items in the left navigation bar in the specialty option Simple-Fixed-Width-Heavy-Left-Sidebar.

Background Style
The settings in this section allow you to control the look of your background image. This permits a wide range of background image designs, from a small image repeated many times to create a textured pattern background to a single image set to take up the entire height and width of the browser.

Page Background Image Style (PageBkgdImageStyle)
If you would like to have a single background image that takes up the entire height and width of the browser window (a "cover" image), you can select "cover" for this option. Otherwise, select nothing or "auto." Note that if you wish to use a cover image, you will need to make selections for the following four Background Style options as well.

Page Background Image Repeat (PageBkgdImageRepeat)
If you would like to use a single background image, set this to "no-repeat." If you would like a repeating background image, make no selection or select "repeat." You can also select "repeat-x" or "repeat-y" to repeat your image along a single axis.

Page Background Image Position 1 (PageBkgdImagePos1)
Allows you to set the first position of your background image. To use a cover image, select the "center" option.

Page Background Image Position 2 (PageBkgdImagePos2)
Allows you to set the second position of your background image. To use a cover image, select the "center" option.

Page Background Attachment (PageBkgdAttachment)
Allows you to select whether the background image is fixed or scrolls with the rest of the page. For a cover image, select the "fixed" option.

 

Pane Display:

The following panes can be hidden via the page designer. To hide a pane, follow the steps below.

  1. Ensure you are in Edit mode by clicking Edit Page in the top right corner (if it says View Page, you are in Edit Mode).
  2. Hover over Page Settings and select Design.
  3. Scroll to the bottom and click the drop down titled Change Fonts and Colors. Select Edit Page Style.
  4. Click the <Setting> drop down menu and select “PaneDisplay – TheNameofthePane”, where TheNameofthePane is the Pane you wish to hide.
  5. Click the <Option> drop down menu and select None. This will hide the pane.
    • To show the pane again, select Block or Inline

Button Navigation Display (BtnNavDisplay)

Navigation Display (NavDisplay)

Banner Pane Display (BannerPaneDisplay)

Top Pane Display (TopPaneDisplay)

Top Pane 2 Display (TopPane2Display)

Content Pane 2 Display (ContentPane2Display)

Content Pane 3 Display (ContentPane3Display)

Footer Pane 1 Display (FooterPane1Display)

Footer Pane 2 Display (FooterPane2Display)


Was this article helpful?
2 out of 3 found this helpful