Log in

View Full Version : How to increase/decrease the space between the text and play button


Rain Lover
11-30-2011, 04:17 AM
Hi,

Here's a sample code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Yahoo! Media Player</title>
</head>
<body>
<a href="http://www.example.com/song.mp3">Song Title</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>

Many thanks in advance!
Mike
jscheuer1
11-30-2011, 11:47 AM
Maybe go here:

http://tech.groups.yahoo.com/group/yhoomediaplayer/

Or use a DOM inspector to find out the id and class names, as well as any existing styles. You can then add your own overriding styles using the !important keyword.

For example, if I inspect the play button I see:


id="ymp-play"
class="ymp-btn-play ymp-skin"

And:


.ymp-skin{
background-image: url("http://l.yimg.com/us.yimg.com/i/us/mus/ymwp/mediaplayer-2.0.31.png");
background-repeat: no-repeat;
}

And:


#ymp-body a, #ymp-tray a {
margin-top: 0pt;
margin-right-value: 0pt;
margin-bottom: 0pt;
margin-left-value: 0pt;
margin-left-ltr-source: physical;
margin-left-rtl-source: physical;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
padding-top: 0pt;
padding-right-value: 0pt;
padding-bottom: 0pt;
padding-left-value: 0pt;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
outline-width: medium;
outline-style: none;
outline-color: -moz-use-text-color;
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
font-family: Arial,Helvetica;
border-top-width: medium;
border-right-width-value: medium;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-bottom-width: medium;
border-left-width-value: medium;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: none;
border-right-style-value: none;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-bottom-style: none;
border-left-style-value: none;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: -moz-use-text-color;
border-right-color-value: -moz-use-text-color;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: -moz-use-text-color;
border-left-color-value: -moz-use-text-color;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-image: none;
}

And:


#ymp-body a.ymp-btn-play, #ymp-body a.ymp-btn-pause {
display: block;
position: absolute;
top: 2px;
left: 32px;
width: 35px;
height: 33px;
cursor: pointer;
background-position: -50px 0pt;
z-index: 2;
text-indent: -9000px;
}

These are from stylesheets appended to the head by the script. So, as I say any changes to these styles would need to use the !important keyword. Additions to them probably wouldn't. To increase the space around it, try adding some margin:


<style type="text/css">
#ymp-play {
margin: 0 30px !important;
}
</style>

I did, but the results, though noticeable, weren't ideal. Things are packed in pretty tightly in that feature and positioning as well as z-index is used to get it just the way it is. So it may take some creativity visa vis the styles to move things around. Like if you want more space between, you may have to make the container wider to allow for that, and then use the left coords of the buttons and other elements to space things out.