In a recent project I worked on creating an internal SharePoint site that would serve as an informational website for staff. The goal was to implement a design that would have buttons for navigating to informational resources. Basically, the site needed to be dressed up a bit without a lot of custom development.
I decided to add some flair to the pages by using the Promoted Links web part as the top menu of each page. The team I was working with asked if each tile could have a different color to correspond to the colors of a process chart they had created.
This is the final result:
For our requirements we had an image for each tile, and only needed to change the color of the details box, which is the lower portion of the tile that expands to the height of the full tile when hovering over it. The CSS (Cascading Style Sheets) below includes changing the color for the entire box by using both .ms-tileview-tile-content and .ms-tileview-tile-detailsBox classes. Because yellow was the color of the second tile, I changed the font color to black for readability. To change the description as well, use the class provided in the comment for Tile 2.
In smaller projects like this one, I often avoid activating the publishing infrastructure because that is more than I need to make a few small style changes. I also like to avoid putting CSS directly into a content editor web part on each page because if several pages are using the same CSS, I like to be able to edit the style files from one location and ideally from one single file. This allows me to refresh the pages when the style files are changed to be able to see the changes right away similar to what one would do on a publishing site using the Style Library. To do this, I add a text file that will serve as my CSS file to the site assets library. The CSS in the text file must be wrapped in a Style element. If you are worried about the file getting accidently deleted, unique permissions could be set on it. A good idea is to also enable versioning on the library for reverting to previous versions, if necessary.
Each page gets a content editor web part with a link to the text file using the Content Link field as shown in the first highlighted field below. To hide the web part, select “None” for the Chrome Type. If you have to add this web part to many pages, you may want to create one web part, export it, then upload it to the web part gallery so it will already be configured with the link and chrome settings when you add it to a page.
Tech Talk Live is the only conference of its kind in the region specifically designed for IT pros in education.
1020 New Holland Avenue
Lancaster, PA 17601