Mutable volume mutable-volume
The mutable volume control initially appears as a button that lets a user mute or unmute the video player sound.
When a user rolls over the button, a slider appears that allows a user to set the volume. The mutable volume control can be sized, skinned, and positioned, relative to the control bar that contains it, by CSS.
The appearance of the mutable volume area is controlled with the following CSS class selector:
.s7mixedmediaviewer .s7mutablevolume
CSS properties of the mutable volume
The mute/unmute button appearance is controlled with the following CSS class selector:
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton
You can control background image for each button state. The size of the button is inherited from the size of the volume control.
CSS properties of the button image
state
and selected
attribute selectors, which can be used to apply different skins to different button states. In particular, selected='true'
corresponds to the “muted” state and selected='false'
corresponds to the “unmuted” state.The vertical volume bar area is controlled with the following CSS class selector:
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume
CSS properties of the vertical volume bar area
The track inside vertical volume control is controlled with the following CSS class selectors:
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
CSS properties of the vertical volume control
The vertical volume knob is controlled with the following CSS class selector:
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob
CSS properties of the vertical volume control knob
The button tool tip can be localized. See Localization of user interface elements for more information.
Examples section-e8caea0a303c425a8a637c2a47c06355
To set up a mute button that is 32 x 32 pixels and positioned 6 pixels from the top, and 38 pixels from the right edge of the control bar. Display a different image for each of the four different button states when selected or not selected.
.s7mixedmediaviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}
The following is an example of how you can style the volume slider within the mutable volume control.
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}