Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Page Tree
root@self
startDepth1

Branding Your Platform

...

Click the Admin button

...

Select the Branding tab in the top of the main content area

...

Tip

Use this page to customize things like colors, logos, and images on your platform.

Customizing the User Onboarding Process

User Onboardings are a way to build engagement and connection with your users before they’ve even joined their first group.

Info

Multiple User Onboardings can be created to give customized experiences to different groups of users.

Create a User Onboarding

...

Click on Admin

...

Click on the User Onboardings dropdown and select Create Onboarding (we also recommend duplicating the Template Onboarding)

...

Click Save

...

Click Create Onboarding Step

...

Add a Name

...

Select the Step type

...

Privacy Settings step types will allow a user to review their Privacy Settings.

...

Add a Photo - help bring each step to life and show off your branding. Photos display vertically on the left half of each step

...

Add Fields to Steps

...

Navigate to the step you would like to add fields to and click Add/Edit Fields

...

Info

You can Preview the entire Onboarding or just a single Step at any time.

How to set up Home Login Pages

The Login Page of a CampusGroups Platform can be highly customized with slideshows and dynamic content upon request to the CampusGroups team.

  1. To enable the custom Home Login pages, please send an email request to support@campusgroups.com to activate the feature.

  2. Once this has been done, you will be able to access and edit the displayed pages from the Admin menu, under Settings then Home Website.

    Image Removed
Info

This page will work like any group Website Builder.

Info

Note that four default pages are added upon creation: Home, Groups, News and Events.
Each of these pages will display public content from the platform. 

Here are examples of such pages:
Home:

...

Groups:

...

Events:

...

  1. You can use custom pictures to populate the slideshows of the home page by clicking on the Slideshow button.

    Image Removed
  2. From the Slideshow page, you will be able to create new slideshows by clicking on the Create Slide button or edit existing ones with their Edit button.

  3. Add a picture, a title and a subtitle to the slide.

Info

It is also possible to add a button to the page in the BUTTON ACTION section. Link it to a specific page by adding the page's address in the Button link field.

...

Optional Features: Additionally, if your campus subscribed to the Page Customizations feature, you will have the ability to:

  • Customize your home page with custom links and widgets

  • Customize your public landing page with more slides

  • Create more public facing web pages and customize the navigation on top of your public landing page

  • Add content to your public facing footer

  •  Customize group pages with custom widgets

How to customize the Homepage

School Administrators can customize the student Homepage platform-wide.

  1. Click on Home

  2. Click on the Customize button on the top-right corner.

    Image Removed
Info

Note that this button is only available to school Administrators.

  1. Click on a grey box with a "+" button on them to customize

  2. Add a name to the box, and feel free to add content.

    • When adding a box, it is also possible to make it a link to any URL

Note

ATTENTION: The "Premade Box" allows you to remove any style on the box, but do not use it unless you add custom CSS to the boxes as it will only display the box's content and title in plain text.
You may also choose an icon and a color for the box.

...

  1. Click on Save and Save Customization when you are done.

Tip

See the Homepage with the newly added box below.

Info

When editing a box, you will be able to delete the box with the Delete button or to move the box in another available slot with the Move button.

Custom Left Menus

Custom Left Menus in your CampusGroups platforms bring together your Campus Apps and your desktop experience. These menus not only make a seamless experience across your platform, but also allow you to customize what and how your users access information on your platform.

Organizing your Custom Left Menu

...

Select the hub you would like to use

...

Click Manage

...

Drag and drop Features from the right to the mobile display on the left

...

Click on Settings and be sure to Publish the hub

...

Info

To add a dropdown menu of user's activities (e.g. My Forms, My Events, My Groups, etc.), drag the My Activity Menu widget into your App Builder

CampusGroups Image Sizing Guide

Welcome to the Image Sizing Guide, this guide is split up by what users can access certain image uploaders. Please be aware that many images are responsive to the screen so it is difficult to provide exact sizing, the below information is simply a starting point.

Note

Please note that this guide is incomplete, these are the most commonly asked for sizes. If there is something not included in this list please contact support@campusgroups.com to request guidelines if you can not find it within the platform notes.

...

Events

Event Photos

The Event Photo is a nice photo or background image representing your event. It will be displayed in the upcoming events slider on the home page, on the right of your event page, and in the mobile app. This is a great way to promote your event.

It will be cropped into 380px high and 760px wide rectangle. Please upload a photo with of width of 760px or more. Photos with an aspect ratio of 1:2 will work best, so 12in x 6in (864 px x 432 px) will preserve quality and fit great.

Size: 12in Width x 6in Height (864 W x 432 H pixels)

File Type: JPG or PNG

Resolution: 72 ppi

...

Event Flyer

Your Flyer is the key information about your event displayed in a visual way. We will display your flyer to people who mouse over your event in the calendar, in email invitations, and in the event details section of your event page.

Event Flyers will display in the full width of the details section (roughly 1100px wide). This means that portrait sized photos will fill in that width and can appear oversized.

Size: 1200 W x 630 H pixels

File Type: JPG or PNG

Resolution: 72 ppi

Event Flyer ImageImage RemovedImage Removed

Event Ticket Covers

Your Ticket Cover is a photo that will be placed on top of your event tickets. It will be cropped into 180px high and 980px wide rectangle.

Event ticket covers will also be used in automatic email communications from the event and registration process.

Size: 14in Width x 4.8in Height (980 W x 180 H pixels)

File Type: JPG or PNG

Resolution: 72 ppi

Event Ticket CoverImage Removed

Ticket

Image Removed

Email Notifications

Image Removed

Profile/Groups

Profile Photos/Group Logos

Group logos and profile photos fit a 1:1 aspect ratio. Any square image will crop perfectly for these two photos.

Size: 300 W x 300 H pixels

File Type: JPG or PNG

Resolution: 72 ppi

Group Cover Photo - CGU OrientationImage RemovedImage Removed

Cover Photos/Group Cover Photos

Profile and group cover photos will crop to fit the width of your image. For the best image quality, we recommend standard social media cover photo sizing.

Size: 1400-1920 W x 200 H pixels

File Type: JPG or PNG

Resolution: 72 ppi

Profile and Group Cover PhotoImage Removed

Feed Photos

Photos posted onto the group feed or the campus-wide feeds will allow full image viewing if selected and will preserve the aspect ratio in the feed.

Standard social media image sizing is recommended for the best viewing of all content on an image posted in the feed.

Size: 1924 W x 1924 H pixels

File Type: JPG or PNG

Resolution: 72 ppi

Feed ImageImage Removed

Badges

Size: 300 W x 300 H Pixels (Max)

File Type: JPG or PNG

Resolution: 72 ppi

BadgeImage RemovedDirectory Card with BadgesImage Removed

Event Hubs

Hub Icon

Your app icon will appear in multiple places across the platform. Please follow the standard app icon sizing. No smaller than 300 W x 300 H pixels and no larger than 1024 W x 1024 H pixels.

Size: 1024 W x 1024 H pixels or 512 W x 512 H px

File Type: JPG

Resolution: 72 ppi

App IconImage RemovedImage Removed

The app header logo will be resized down to fit a height of 100 pixels and the width will resize automatically. It is best to use a logo with a 5:1 aspect ratio, this allows for the most visibility and clarity of your logo. Keep these logos simple and transparent to contrast the background.

Size: 500 W x 100 H pixels

File Type: PNG

Resolution: 72 ppi

App Header LogoImage Removed

Website Builder

This logo will be located on the top left corner of the web platform.
Please upload a photo with of height of 50px or more, and a width of 200px or more.

Website logos are automatically pulled from the logo of the school if you wish to upload a custom logo for a group website then you will need to follow the same minimum requirements.

Size: 500 W x 100 H pixels
File Type: PNG

Resolution: 72 ppi

CG University LogoImage RemovedWebsite with custom logoImage Removed

Banners & Cover Photos

Website banners are fully responsive to the width of your image. Depending on the widget you choose from the website builder the height of the image can vary.

Size: 1920 W x 350-800 H pixels

File Type: JPG or PNG

Resolution: 72 ppi

Image Removed

Image Removed

Email Builder

Email images will automatically resize to fit their space. You have complete freedom to create whatever you would like in these spaces. There is not one recommended size for these, feel free to use whatever images you have, it should work to accommodate most images and sizes.

For both options, the width really doesn't need to be much larger than the recommended minimum, however, I wouldn't go much smaller either. For the Height of each option, this is what it most flexible. The image uploaders will resize the images to fit the width of the space so the image aspect ratio will be preserved.

Full-Width Photos

Size: 1200 W x 200-500 H pixels

Format: JPG or PNG

Resolution: 72ppi

Half-Width Photos

Size: 500 W x 500 H pixels

Format: JPG or PNG

Resolution: 72ppi

Virtual Fair

Booth Main Image

The virtual fairs booth's main photo follows the same aspect ratio rules as our event photos. Please keep text and other important information such as logos in the center of the image as this could be cropped undesirably in the booth view, for the best results use an image that does not contain text content.

It will be cropped into 380px high and 760px wide rectangle. Please upload a photo with of width of 760px or more. Photos with an aspect ratio of 1:2 will work best, so 12in x 6in (864 px x 432 px) will preserve quality and fit great.

Size: 12in Width x 6in Height (864 W x 432 H pixels)

File Type: JPG or PNG

Resolution: 72 ppi

Image Removed

Accessed by Administrators Only

This logo will be located on the top left corner of the web platform.
Please upload a photo with of height of 50px or more, and a width of 200px or more.

The Campus Logo will be resized down to fit within 200 W x 50 H, to allow for the best resolution and clarity please double this size and add additional padding to the left and right of your logo asset. This will ensure the best spacing of your logo when the buttons on either side of the logo are selected.

Size: 500 W x 100 H pixels
File Type: PNG

Resolution: 72 ppi

CG University LogoImage Removed

Virtual Fair

Virtual Fair Custom Map

The dimensions of the map will really depend entirely on what kind of user experience you want your users to have. Our map view is flexible and responsive so there isn’t one correct size to use for this map. Here are a few of our recommendations from our Graphic Designer.

...

If you want more freedom and creativity and you don’t mind a user experience of scrolling down the page to view your full map then you have total freedom to create whatever dimensions you want, keeping in mind the

...

Maximum 2000px X 2000px

...

File Type: JPG or PNG

...

Resolution: 72ppi

Home Page

Custom Full Banner

The height can be flexible but we wouldn't recommend larger than a 400px height or smaller than a 200px Height.

Size: 1920 W x 350 H pixels

File Type: JPG or PNG

Resolution: 72 ppi

Half-width Buttons

The height can be flexible but we wouldn't recommend larger than a 400px height or smaller than a 200px Height.

Size: 960 W x 350 H pixels

File Type: JPG or PNG

Resolution: 72 ppi

1/3 width Buttons

The height can be flexible but we wouldn't recommend larger than a 400px height or smaller than a 200px Height.

Size: 640 W x 350 H pixels

File Type: JPG or PNG

Resolution: 72 ppi

User Onboarding

The dimensions of the onboarding image will be responsive to fit within 50% of the screen width on desktop and tablet devices, on mobile devices this will adjust to 100% width above the text content.

This means that the most important information in your image should be centered on your image to preserve readability.

  • Recommended Size: 1920 W x 1080 H pixels.

    • Minimum 1080px X 1080px

    • Maximum 2000px X 2000px

  • File Type: JPG or PNG

  • Resolution: 72ppi

...

Hub Builder Menu Icons

Please contact support@campusgroups.com to have our development team upload these icons to your custom icon library in the Hub Builder. All icons should be small transparent square icons.

  • Recommended Size:

    • Minimum 100px X 100px

    • Maximum 200px X 200px

  • File Type: PNG

  • Resolution: 72ppi

...

Customization Tips & Resources

As a general rule of thumb images over 1920px are not necessary for the platform, standard web sizes and graphics are just fine. This will help increase load times and to preserve the best quality on your platform.

Listed below are some free resources to help you gather beautiful images and create well-designed graphics for your campus or organization.

Free Design tools:

Free Stock Photo Resources:

Please contact support@campusgroups.com with any questions or if you would like to see anything added to this listing.