Tile Layout for Course Groups

The Tile Layout for Course Groups optional module displays your Course Groups in a Grid format with "Tiles (or Cards)" for each group.

Installation

The Tile Layout for Course Groups module requires additional files for ACEweb. Please contact your ACEware technician for installation files/instructions.

Tile Layout Rules

Rules that apply to the Tile Layout option:

• You must have an image for each 'tile'.
• You can use .png, .gif, and .jpg type images.
• All images must be the same size. E.g. all images must be 600px by 400px.
• Images must be placed in the ACEweb Images folder (e.g. wconnect\ace\images).
• Image names should be no longer than 12 characters.
• You can also use descriptions--if you do, all groups must have a description.
• All group descriptions must be about the same size. E.g. all should be approximately 100 characters.

Assigning Images/Descriptions

1. Select Module > Codes.
2. Select COURSE: Grouping Codes from the Code Type drop down.
3. Enter the image name only in the File Name for Image field for each group.  You don't need to enter the file extension (i.e. .png, .gif, .jpg).
4. Enter the group description in the Detail field for each group.

Tiles per Row

The default Tile Layout is to display 3 tiles per row. If you want to display 4 per row:

1. Edit the gridGroups.css and set the flex-basis value in the .grpBox style to 23.6%.

.grpBox /- Group container. Flex-basis is set to determine # of boxes per row */

{ flex-basis: 23.6%; /- sets width of boxes */

...

2. Save changes to the gridGroups.css file.

3. Use the Ctrl+F5 shortcut to refresh your group page (forces the browser to reload the gridGroups.css file).