Regular Coders
How to increase/decrease the space between the text and play button
Hi,
Here's a sample code:
Many thanks in advance!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>
Mike
Global Moderator
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:
And: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;
}
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:#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;
}
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.Code:<style type="text/css"> #ymp-play { margin: 0 30px !important; } </style>
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Posting Permissions
Reply With Quote
Bookmarks