Documentation

Component style

The Component style section is the fourth tab on the Theme editing page. To access the options on this page, go to the Admin panel: User interface section > Theme page. The Component style tab contains options for various site components, including the application toolbar, site background, site header, site footer and default images.

Application toolbar

You can choose a light theme or a dark theme for the Application Toolbar that shows at the top of every page. Select the radio button for the theme that you want.



You can customize the appearance of the Toolbar further using Custom CSS under the Custom HTML, CSS and Javascript tab on the Theme page. See Custom HTML, CSS and JavaScript for more information.

Site background

You can choose an image or color to display as the background of your site if you wish. The site background appears behind the application toolbar, header, main navigation and page cards and content. Depending on your site header selections, it can also show as the background of the site header. Depending on device width, it may show on the left and right of the page behind the cards and content.

To upload a site background image, Drag and drop or Browse to upload your image file. (Click Replace if there is already an image uploaded.)

There are four site background image treatment options to choose from once you upload an image: Align top center, Align top left, Repeat horizontally and vertically, and Repeat horizontally along the top. After you upload an image, you can select the radio buttons for these options to view a preview of how this will affect how the image displays. For non-repeating options, the image must be a minimum size of 2560(w) x 1440(h) px. Accepted file formats are gif, jpg, and png.

Background color: This color displays in areas of the background not covered by a site background image.

Header

The header is the area on the page below the application toolbar and above the main navigation bar.

Site header background

  • Image: Drag and drop or Browse to upload an image to display in the header section. Minimum image width is 1470 pxs. Image height is flexible but needs to be accommodated by the background overall height setting. Accepted file formats are gif, jpg, and png.
  • Overall height: Adjust this value to set the overall height of the header in pixels. This needs to be adjusted to accommodate the size of the site logo added on the Logos tab, and the site header background image above.
  • Border: To add a border to the header, add a width in pixels and select a border color from the color picker.
  • Extend header to edges of browser: Selecting this checkbox will extend the header to the edges of the browser regardless of the site width.

Sub image on the header

  • Image: Drag and drop or Browse to upload an image to display on the far right of the header section. (Click Replace if there is already an image uploaded.) This image overlays the site header background. Minimum image width is 280 pixels. Image height is flexible but needs to be accommodated by the background overall height setting under the Site header background section. Accepted file formats are gif, jpg, and png.

Footer

The footer is the informational area below all page content.


 
  • Image: As with the header, you may specify a background image to display. Drag and drop or Browse to upload an image to display in the footer. (Click Replace if there is already an image uploaded.) Minimum size in pixels is 2560 width x 51 height if the option "Extend footer to edges of browser" is selected. If that option is not selected, then minimum size is 1470 width x 51 height. Accepted file formats are: gif, jpg, and png. 
  • Background color: This color displays in areas of the footer not covered by an image. Select a color from the color picker.
  • Text color: Select a color for text in the footer from the color picker.
  • Link color: Select a color for links in the footer from the color picker.
  • Border: To add a border to the footer, add a width in pixels and select a border color from the color picker.
  • Extend footer to edges of browser: Selecting this checkbox will extend the footer to the edges of the browser regardless of the site width. 

Default images

If a user has not added a profile picture, or a group page does not have a thumbnail image, default profile and group images will display on profile pages, in the People Directory, in the Groups Directory and in search results. You can upload your own default images for profiles and groups.

Profile image

  • Drag and drop or Browse to upload an image that will appear on profile pages, the People Directory and search results when a user has not uploaded a profile picture. (Click Replace if there is already an image uploaded.) The image must be a minimum of 500px width and height. Accepted file formats are gif, jpg, and png. If you don't upload an image, the user's initials will show as their profile image.

    7.0Admin9649DefaultProfileImage.jpg

Group image

  • The Group image field is populated with a default group image that appears on the Groups Directory and in search results when a group page has no image added to it or set as the thumbnail image. Click Replace to use a different image. Then Drag and drop or Browse to upload a new image. The image must be a minimum of 500px width and height. Accepted file formats are gif, jpg, and png. If you don't upload a new image, the default Group image will be used.