.module_music ? Making a custom header module for the music player

[Phaivone]

I have implemented a custom graphic for my module headers using css.
Only one module header I cant get my custom header on and thats the music player.
Here is my website

I thought I could just write it like all the other modules,
.module_blog
.module_members
.module_photo
And so on, But when I tried .module_music it does not work.

Does anyone know how I could get my graphic module header on the music box on the main page?

Thanks

[TJ @ jQueryHelp]

All the module headers are in a div classed with xg_module_head. Have you tried just styling that class?

If you want to keep doing it the way you've been doing it, try using this class for the music module:

xg_module_music

[Phaivone]

Thanks NingMaster!, Yea I tried it both ways to no avail..... I am not sure what class the music player is in. Here is my css, Look it over and tell me what I'm doing wrong.......

.xg_module_music .xg_module_head {
background-image:url(MY IMAGE URL);
background-repeat:no-repeat;
height:21px;
}

Thanks!

[TJ @ jQueryHelp]

Looks like your graphic is showing for the Music module, but so is the word "Music" in black. You can remove that by adding this to your Analytics textbox which you can find by clicking Manage and then clicking the Analytics icon:


<script type="text/javascript">

x$(document).ready(function() {

// Remove Music head title:
x$("div.xg_module_music").find("h2").remove();
});
</script>


You might be able to get rid of "Music" with the Language Editor, try both ways and see what's better for you!

[Phaivone]

Thanks again for the help.

Weird thing tho, The module music header was only visible on explorer and not on firefox or chrome. And I saw what you referred to the black text that went over the graphic. So I added your code to the analytics and it worked, it removed the black text.

But then I checked it again with chrome and firefox and still no graphic. Just a blank white space so I removed the code, css and graphic.

I wonder why it's only the music player header thats giving me problems and only visible on explorer?..hmmm....

I hate to say I give up but........

I wonder if the music player is a .html_module_music

[TJ @ jQueryHelp]

One more try! Add this under the line that says // Remove Music head title:


var cssObj = {
'background-image' : 'url(YOURLINK)',
'height' : '21px'
}
x$("div.xg_module_music").find("xg_module_head").css(cssObj);


Replace YOURLINK with the link to your Music Header Pic. I used your Picture Header at https://api.ning.com/files/5J-XQAhFewU7FJmddbOiEnJVkG6zeIzPoN83hH%2... to test this and it worked for me, but of course it showed "Picture".

[The Camo Lounge]

TJ, would you know how to change the "Music Note" image in the player by chance?

[Ms Sexy Ruca]

here is the code you use i use this code it works the problem was the music module header has no name it's just (module_head) this also changes the headers of your text boxes to so enjoy the code i made this myself using firefox firebug i came up with my own code put bits of pieces together to make it work.

.xg_module_head {
background-image:url(URL_OF_IMAGE_GOES_HERE);
background-repeat:no-repeat;

[Jerry White]

Thanks so much for this tip. I've been pulling my hair out (what little I have left) trying to get an image into the sign-in box and in the chat box on both my networks. Since I only need a background image to use with the default titles, this did the trick.

www.cruiseinpix.ning.com
www.hinsonroots.org

Ms Sexy Ruca said:

here is the code you use i use this code it works the problem was the music module header has no name it's just (module_head) this also changes the headers of your text boxes to so enjoy the code i made this myself using firefox firebug i came up with my own code put bits of pieces together to make it work.

.xg_module_head {
background-image:url(URL_OF_IMAGE_GOES_HERE);
background-repeat:no-repeat;

[Ms Sexy Ruca]

glad it worked out for you... took me awile to get it right lol

Jerry White said:

Thanks so much for this tip. I've been pulling my hair out (what little I have left) trying to get an image into the sign-in box and in the chat box on both my networks. Since I only need a background image to use with the default titles, this did the trick.

www.cruiseinpix.ning.com
www.hinsonroots.org

Ms Sexy Ruca said:

here is the code you use i use this code it works the problem was the music module header has no name it's just (module_head) this also changes the headers of your text boxes to so enjoy the code i made this myself using firefox firebug i came up with my own code put bits of pieces together to make it work.

.xg_module_head {
background-image:url(URL_OF_IMAGE_GOES_HERE);
background-repeat:no-repeat;