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.
Site backgroundYou 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.) Accepted file formats are gif, jpg, and png.
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. The site background image should be high enough resolution to appear crisp, but a small enough file size not to affect the speed of the intranet. The average size of screen the site will be viewed on will also help to determine the minimum size for the background image.
Background color: This color displays in areas of the background not covered by a site background image.
GradientsBackground gradients can be achieved by creating a small image of the gradient effect you want and selecting one of the two repeat options under Image treatment (options appear once an image is uploaded to the Site background section).
If you want to have control over the gradient height so it remains consistent on every page, regardless of the page length, create your image at 10px wide by 1440px tall (or however tall you wish) and choose Repeat horizontally along the top. This will repeat the gradient image horizontally for the full width of any screen, but not vertically, allowing the gradient to blend seamlessly into the background brand colour that you’ve set to be the same as the bottom colour of your gradient.
HeaderThe 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.
- Background color: This color displays in the background of the site header. If you are using a full screen background, you can choose the transparent color swatch to make the header transparent.
- 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.
- Sug image margin: By adjusting the top and right margins you can change how close the sub image is to the top right corner of the header. Enter margin values in pixels. Note that the right margin is from the edge of the sub image to the edge of the page content, not the edge of the page background (as the background width may change depending on screen resolution). See Site logo for an example image of margins in the header.
FooterThe 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.
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.
- 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.
- 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.