- Overview of component needs to be re-written to include in greater detail what the component is and it's value and use.
- Images need to be re-done
Please also note that we want to keep this page which is related:
Tiles Component
- Folder Actions
- View Files
- RSS
Are you sure you want to remove this component?
The Tiles Component can be used in a variety of ways to display images, create homepage banners and display navigational tiles linking to pages within your instance of Schoolbox, or external pages. The Tiles Component can display one or more ‘tiles’ and the layout can be adjusted to suit the needs of the page. Text, colours, images and hover colours are able to be added to Tiles, allowing for clear visual navigation and improving the user experience.
Are you sure you want to remove this component?
1. Select the '+' icon at the top of your page.
2. Select the 'Information' tab.
3. Drag and drop the 'Tiles' component to the desired location.
Are you sure you want to remove this component?
1. Navigate to the Tiles component.
2. Select 'Add a tile'.
3. Select '+ Add Tile'.
3. Add the text that will appear on the tile. This can be left blank.
4. Select the minimum and maximum size of your text.
5. Set the colour of your text.
6. If you want a background colour to appear behind your text, set a background colour.
This will only appear behind the text. It will not take up the entire tile.
7. Set the position of your text within the tile.
8. Add a link to the tile.
You can insert a URL for an external site, or choose 'Browse Resources' and locate a page within you school's Schoolbox instance.
9. Choose whether the link will open in the same tab/window or a new tab/window.
10. Set the background of your tile.
This can be a colour using the colour palette, or an image. You can drag and drop, or upload an image. If you are using a background image, you can position it in the tile in two ways:
- Stretch to cover entire tile: this will position the image to take up the entire background of your tile.
- Resize to fit within tile: this will give you the option to select the position of the tile.
11. Set a hover colour.
A hover colour is the colour the tile changes to when you move your mouse over it. The hover acts as a sign that the tile has a link and can be clicked. It is recommend that you use the transparency slider at the bottom of the colour palette to make your hover colour semi transparent. This way, users can continue to see the text and image beneath when they mouse over the tile.
NOTE: We recommend the following hover colour - (rgba 255,255,255, 0.4), which converts to #FFFFFF70 as a hex.
12. Select 'Save'.
13. Continue to add tiles by clicking 'Add Tile' and then following the above steps.
Are you sure you want to remove this component?
1. Unlock your page.
2. Select the 'Settings' cog on the component.
The Tiles component settings allow you to:
- Collapse the content of the component.
- Hide the heading from read-only users.
- Change the heading of the component.
- Select which tiles you would like displayed in the component.
- Add a tile.
- Modify the layout.
- Select an alternative source for your tiles.
Are you sure you want to remove this component?
You can display tiles from another location in Schoolbox through Alt-Sourcing.
1. Unlock your page.
2. Select the settings cog in the component header.
3. Select 'Browse'.
3. Navigate to the location of the folders you wish to include.
4. Select 'Use this Folder'.
5. Use the drop-down arrow under the 'Layout' section to select the alternative tiles you wish to use.
6. Select 'Update'.
Are you sure you want to remove this component?
To remove the component from your homepage, unlock your page, and select the 'X' at the top-right of the components header.
NOTE: Removing the component will not remove the content of the tiles. If you re-add the tiles component later and wish to use the previous content, unlock your page, select the settings cog, and use the drop-down menu under 'Layout' to select the previously created tiles.
Are you sure you want to remove this component?
1. Add a heading to the layout of the tiles.
This is essential for finding the correct tiles layout later, if you wish to use alternative source linking to display the tiles in another locations.
2. Use the drop-down arrow to choose if you wish to have your tiles as a column or a grid.
- Grid: allows you to set the size of the tile, no matter what device or size screen you are viewing the tiles on, they will always be the same size. So, if you create 6 tiles that are 200 pixels, and are viewing the tiles on a larger screen, you will probably be able to see all 6 tiles in one row. However, if you are viewing the tiles on a smaller screen, you might see 3 in the top row, and 3 in the bottom row.
- Column: allows you to set how many tiles appear across each row. So, for example, you may want to set three tiles in each row, no matter the screen size. So, if you’re viewing the tiles on a large screen you will see three quite large tiles in each row. The tiles will then shrink according to the size of the screen.
3. Add padding to the Tiles if required.
4. Set the shape of the tiles.
5. Select 'Save'.