Using tools on the Site Branding page in the Admin app, you can customize the Widen Collective login page and the interior pages of your site to highlight your company's branding. Things like the logo and background graphics, your login page, and logos for mobile sites can all be customized.


Read more in our site branding FAQs.


System messages

Include your brand logo and colors in system messages on your dashboard. The login page and system messages are ideal areas to pull your brand identity into the app.

Learn more about creating system messages in this article.


Site logo and favicon

The site logo will display on all interior pages and in email notifications sent from the Collective. It's displayed in the header of the page to the left of the search bar. The favicon will display in your browser's tab.


File specifications: The logo graphics file for interior pages can be a GIF, JPEG, JPG, or PNG file that is 140-200 px wide and 55-70 px high. Upload a high-resolution file for retina display, or upload a retina quality file with '@2x' as the last characters of the filename. You can select a file from your computer to upload or click Search for Files to search the site for a file to upload. Files will be automatically resized upon upload to fit the recommended dimensions.


File recommendations: For retina support, provide a separate file that is twice as large.

Login page

Customize the login page of the site with logo and background graphics and choose to set the color of the buttons on the page. The login page is standard, and the logo graphic for your brand displays to the left of the login page. The login page is best viewed on screen resolutions of 1280 width. Animated GIFs can be used on login pages.

After logo and background graphics are uploaded, a live preview can be viewed before changes are applied. (Note that if your site uses the legacy login page, updating the login page with the site branding tool will replace the layout with the layout in the screenshot shown below. Contact the Widen Central Support team to make changes and preserve your legacy login page.)


Login page with hero layout



Center area background color

The central area background color is the background color for the main section of the page behind the login page.


Logo graphic

The logo graphic is the logo that's on the login page.


File specifications: The logo graphic file for login pages can be a GIF, JPEG, JPG, or PNG transparent image that's approximately 470 px x 360 px. Upload a high-resolution file for retina display or upload a retina-quality file with '@2x' as the last characters in the filename. You can select a file from your computer to upload or click Search for Files to search the site for a file to upload. Files will be automatically resized upon upload to fit the recommended dimensions.


File recommendations: The logo graphic will float on top of the background graphic, so we recommend that they complement each other. Often a version of a company logo is selected. Its position will adjust based on screen resolutions or when users resize browser windows.


File adjustments: If additional text should be presented on the login page, the text can be combined with the logo graphic. If the logo graphic should not float on top of the background graphic, add it to the background graphic and it will be static. Be aware that the login page may float over it.


Background graphic

The background graphic is the background image on the login page.


File specifications: The background graphic file for login pages can be a GIF, JPEG, JPG, or PNG image that's approximately 1600 px x 1067 px. You can select a file from your computer to upload or click Search for Files to search the site for a file to upload. Files will be automatically resized upon upload to fit the recommended dimensions.


File recommendations: The login page and logo graphic float on top of the background graphic, and the logo graphic is anchored in the top left corner as the screen size changes. A background graphic sized at 1600 px x 1067 px works best with a background image that's graphical in nature without a focal point, as that focal point may be covered for different screen resolutions.


Focal point: For background graphics on the login page, select an area of the image as the focal point. The focal point will anchor the area on the screen whenever the window is resized. By default, the graphic will display in the center of the page.


File adjustments: Once a login page is in place, you may notice the page or footer cropping in ways that aren't desirable for the background image. In this case, the background image should be cropped and resized for optimal presentation.


Mobile app and site

A logo and retina logo can be selected for the mobile app. The logo will be used on the login page of the site and the mobile app. The retina logo will be used on the login page of devices with retina screens.


Mobile logo

File specifications: Select a GIF, JPEG, JPG, or PNG to upload. Upload a high-resolution file for retina display or upload a retina-quality file with '@2x' as the last characters in the filename. You can select a file from your computer to upload or click Search for Files to search the site for a file to upload. Files will be automatically resized upon upload to fit the recommended dimensions.


Review changes

You can review your changes using the live preview, then apply changes to update the site immediately.


Apply and save changes

On each tab on the Site Branding page, Save All and Apply All Changes Now buttons display. You can click Save All to save the changes until you're ready to apply them to the site. Click Apply All Changes Now to apply the changes immediately.


Changes must be saved or applied in each tab. For example, if you make changes to one of the fields on the Mobile site tab then click the Login Page tab without saving or applying changes, the fields will revert back to the original settings.