How to customize the spin hint message
To inform users that an image is an interactive spin, a hint message is displayed over the image.
The standard hint message looks like this:
The instructions below show how to change the "Drag to spin" text and the design of the message.
Change the hint text
To change the text, either go to the profile or the spin file and enter the text you'd like to show. Different text can be set for desktop and touch-screen devices:
Change the hint design
You can change the location, graphics, and style of the message with CSS.
To move the hint up or down, use the top and bottom properties in the .spin-figure .sirv-spin-hint CSS rules. For example, to align the hint to the bottom edge of images:
<style>
.spin-figure .sirv-spin-hint {
top: auto;
bottom: 0;
}
</style>
Below are all the styles available to be edited. Add padding, margin, font styles and other CSS as you require to create the design you wish:
<style>
.spin-figure .sirv-spin-hint {
/* Styles of the hint box */
}
.spin-figure .sirv-spin-hint .hint-side {
/* Styles of the left/right sides of hint box (arrows) */
}
.spin-figure .sirv-spin-hint .hint-side.left {
/* Styles of the left side of hint box (left arrow) */
}
.spin-figure .sirv-spin-hint .hint-side.right {
/* Styles of the right side of hint box (right arrow) */
}
.spin-figure .sirv-spin-hint .hint-text {
/* Styles of the hint text */
}
</style>
Here's a spin with a custom design:
The purple message underneath was created with this CSS:
<style type="text/css">
.spin-figure .sirv-spin-hint {
background-image: none;
background-color: rgba(173, 45, 91, 0.6);
font-size: 14px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 0.3em 0.1em;
box-shadow: none;
border:none;
border-radius: 0px;
opacity: 1;
width: 100%;
max-width: 100%;
top: auto;
bottom: 0;
left: 0;
right: 0;
-webkit-transform: none !important;
transform: none !important;
-webkit-font-smoothing: antialiased;
}
.spin-figure .sirv-spin-hint .hint-side, .sirv-spin-hint-side {
display: none;
}
.spin-figure .sirv-spin-hint .hint-text {
width: auto;
max-width: 96%;
color: #fff;
display: inline !important;
}
</style>
