Just having some fun today with racing flags and angry birds. In this post I’ll recap on changing the background image on a SharePoint page, adding clickable metro tile icons and removing the transparent page overlay.
Time to build: Approximately 30minutes (excluding creating the picture/icons for upload)
Audience: End User and Super User
(End User, Super User, SharePoint Designer, SharePoint System Administrator, Web (.NET) Developer)
Level of fun: Accommodating
(Challenging, Accommodating, and Relaxing Fun)
Responsive: This design is NOT responsive and is aimed at helping End Users have fun & create their own home pages without understanding code or being a developer.
Step 1: Decide on a background image and create your icons to be used as metro tiles
Of course I do this in PowerPoint, I planned the grid design and used shapes and images, added text, saved them as images and resized them in Microsoft Office Picture Manager.
Keep in mind that the icons that “stretch” over 2 or 3 small icons will not be the combined size of the 2 or 3 icons but also needs to include the space between the icons.
I’ve checked the padding allowed in the tables by clicking on F12 > Find > Select element by click (in the browser). I then clicked on a cell in the table (not on the image) and found the padding reference.
See the image below on how I used that to calculate the image sizes. I decided on 140×140 pixels for the single metro tiles, I then added the padding etc. to determine the larger image sizes.
For the background image I chose a landscape image of acceptable quality and shaded the image from the top left corner to display the left and top navigation better. The theme on my site has a transparent left and top nav. In the next blog I’ll show you how to change the background colour of this.
Step 2: Create Page in SharePoint (Settings > Add a page, see previous blogs for more details / alternative just edit your home page)
Step 3: Add background image
1. Upload your background image to your Site Assets (or wherever) and copy the URL for later use
2. While the page is in Edit mode: Insert Tab > Web part > Media and content > Script Editor > Add
3. Edit the script editor web part then click on Edit Snippet on the Web Part
4. Insert the code from the image below, Insert > Ok and Apply the web part. Remember to replace the highlighted area with the URL to your background image (Step 3:1)
Note:
Background image will be stretched across the page, regardless of your resolution settings. If you have a composed look (theme) applied to your site, SharePoint will automatically apply a semi transparent white colour (or what has been specified in your theme) over any background colour or image. To remove this I’ve added the “.ms-core-overlay { background-color: transparent;}” code. If you prefer the transparent look, you can remove this part.
Step 4: Adding the table with the metro tiles
1. First save the page to confirm that the background image is displaying correctly
2. Edit the page > Insert Tab > Table 8W x 4H (my example)
3. Insert the images in the table (keep in mind that you’ll have to merge some of the cells where an image spans across 2 or 3 images)
4. Add the hyperlinks to the images: Insert Tab > Link > From Address
5. Set the table width to 1% and the Table Height to 1px. This will ensure that the images don’t move because of resolution / zoom.
6. If the images move out of line after setting the width / height, remove any spaces before or after images – this should fix it.
7. Remove the table border by setting it to clear: Design Tab > Style > clear
And here’s the final product. How schweet is that?!?!
2 Pingback