When you add featured content to your organization Home, it displays below your banner in a ribbon gallery and provides button navigation to view the items you’ve shared. Using simple style overrides you can change the look and feel of these buttons for featured content displayed on your organization’s Home, or even remove them if not needed.
By default the featured content includes previous and next buttons displayed on the left and right of the ribbon gallery.
Where to add the overrides?
Style overrides can be added to your Home page HTML source. You will need Administrator privileges to make these changes. Go to My Organization, click Edit Settings, then in the Home Page tab make changes in the Banner custom design section by editing the HTML source.
How to remove the buttons
One user asked “How do I remove the buttons?” In this case there were only 4 items in the featured gallery, so the buttons were unnecessary. To remove the buttons, add the following style overrides to your Home page HTML:
<style>
.prevButton {
width: 0 ;
}
.nextButton {
width: 0 ;
}
</style>
This hides the buttons, as shown below:
But remember if you add more than 4 items to your featured content group, there will be no way to advance to view them, and you will need to remove the overrides.
Eliminate the gap
Many organizations use different size banner graphics than the default size of 960 x 180 px to provide a unique or bolder look. If you’ve made a banner 960 x 400 px or larger (see details in a previous post), you will see a small gap between the edge of the buttons and the featured content container. While this is a minor cosmetic issue, it’s easy enough to fix. There are two ways to resolve this: you can add small gray stripes along the edges of your banner graphic to cover this gap (you’ll need to do this in your graphic editor), or use a style override to nudge the previous and next buttons to align correctly to each side.
Here’s the style override:
<style>
.prevButton {
left: 0;
}
.nextButton {
right: 0 ;
}
</style>
Change the buttons
You can change the buttons by creating new graphics to replace the existing ones, and using a style override to replace the default look and feel. The original graphics can be found here:
When making edits make sure that you make changes in the exact same position as the originals, and save the graphic as a PNG with a transparent background. Host the PNG from your own server, then you can use the following to add your new graphics (replacing the URL path with the location of your graphics):
<style>
.prevButton {
background: url('http://your-prev-button.png');
}
.nextButton {
background: url('http://your-next-button.png');
}
</style>
Here is an example of altered buttons:
It is recommended that you use style overrides sparingly and with caution. Some of the styling is complex, and is subject to change over time. Stick with the basic and essential elements necessary to achieve your desired design goals, and remember that in most cases less is more.
For more information
