[Cheat Sheet Tutorial] Music Player Themes

Discussion in 'iOS Themes and Customization' started by theiThemer, Feb 17, 2010.

  1. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    Cheat Sheet #2
    - Music Player Themes
    - by iThemer

    This "cheat sheet" is an extension of my guide on how to make a WinterBoard theme, found here.

    Making a music player theme can be accomplished by following the guide; this "cheat sheet" just gives you a head start and does all the dirty work for you.

    So with that out of the way...


    Music themes skin the display you get on the "Now Playing" screen on the music player. Today, I'll be teaching you mostly just how to skin the control area.

    Please Register or Log in to view images



    Storing Locations

    Okay first things first, create a new folder, and call it "MusicPlayer.theme", where "MusicPlayer" can be anything you want. If you read my original theme tutorial, you'd know that the "Folders" and "Bundles" folder each do the same thing. For the sake of this tutorial, we're going to use the easiest option, the "Folders" folder. So inside your "MusicPlayer.theme" folder, create a new folder, and call it "Folders". Inside your "Folders" folder, you have two options:

    Creating a folder inside the "Folders" folder called "MediaPlayer.framework" is the most common use of a music player theme. It will allow you to modify the "Next Track", "Previous Track", "Play/Pause", and "Volume Knob" buttons. It will also allow you to customize the white bar you see when the volume is not up, and also the blue bar you see when the volume is up. On top of all that, inside the "MediaPlayer.framework" folder, you can customize the background shown on the control area, and the rest of the background shown on the non-control area, (the very top bar that displays the song info, and the album art area).

    Creating a folder inside the "Folders" folder called MobileiPod.app will allow you to customize all the small buttons, such as the Shuffle On/Off buttons, and all the small stuff. We will not be getting into this today, so please refrain from creating this folder. If you must, you can navigate to /Applications/MobileiPod.app, and look inside to see your options.

    So after youre done, you should have a folder called "MediaPlayer.theme", and inside that you should have a folder called "Folders". Inside the "Folders" folder, you should have a folder called "MediaPlayer.framework".

    File Names, Purposes and Dimensions:

    These are all the files, properly named, that are going inside the "MediaPlayer.framework, their dimensions, and their purposes

    NowPlayingBottomOverlay.png This is a 320x96px image that will be the background shown at the very bottom, behind all of the bottom controls. It can contain transparency, or any semi-transparency that will be replaced with a reflection of the album cover.

    NowPlayingTopOverlay.png This is a 320x480px image that will become the background of anything that is not covered by the ^ bottom overlay. It can be more than 320x480, or less. It covers the bar at the top that displays all the song info, and the album info area. Remember to leave a 96 pixel fully transparent area at the bottom, that will be taken up by the bottom overlay. Other than that, this image cannot contain any transparency.

    VolumeMusicWhiteFill.png This is a 1x9px image that will be repeated however many times needed. It is the white background you see on the volume bar when the volume is not up. It can, technically, contain transparency. Any transparency will be replaced by the bottom overlay.

    VolumeBlueFill.png This is a 1x9px image that will be repeated however many times needed. It is the blue background you see on the volume bar when the volume is up. It can, technically, contain transparency. Any transparency will be replaced by the bottom overlay.

    VolumeWhiteMusicCap.png This is 5x9px image. It will become the "cap" that goes on the right side of the volume bar. It should be the same color(s) as your "VolumeWhiteMusicFill.png". It creates the rounded rectangle effect on the right end of the volume bar. It can, and "must" contain transparency, to show the rounded rectangle.

    VolumeBlueCap.png This is a 5x9px image. It will become the "cap" that goes on the left side of the volume bar. It should be the same color(s) as your "VolumeBlueFill.png". It creates the rounded rectangle effect on the left end of the volume bar. It can, and "must" contain transparency, to show the rounded rectangle.

    MusicVolumeKnob.png This is a self-explanatory 25x24px image that will become the volume slider knob. It can contain transparency. Any transparency will be replaced by the bottom overlay and/or the volume bar fills.

    play.png This is a self-explanatory 33x49px image that will become the play button that will be shown while music is paused. It can contain transparency. Any transparency will be replaced by the bottom overlay.

    pause.png This is a self-explanatory 20x45px image that will become the pause button that will be shown while music is playing. It can contain transparency. Any transparency will be replaced by the bottom overlay.

    prevtrack.png This is a self explanatory 34x45px image that will become the previous track/rewind button. It can contain transparency. Any transparency will be replaced by the bottom overlay.

    nexttrack.png This is a self explanatory 34x45px image that will become the next track/fast forward button. It can contain transparency. Any transparency will be replaced by the bottom overlay.

    So when youre done, you should have something similar to this tree below:

    Please Register or Log in to view images



    Now all you have to do is navigate to /Library/Themes via SSH and copy and paste your .theme file right there. Enable in WinterBoard and you're all set.

    -----------------------------------------

    Remember that you, too can make "cheat sheets". Just pick a theming topic of your choice, write a tutorial, PM me, and if I like it, I'll create a thread and link to it on the main tutorial guide.

    Thanks for reading my tutorial.
    Happy Theming!
  2. Zman104

    Zman104 Member

    Joined:
    Mar 10, 2010
    Messages:
    190
    Likes Received:
    0
    Device:
    iPhone 4S (Black)
    Thanks! This helped a lot!
  3. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    NowPlayingTopOverlay is NOT in use anymore.
    ... It hasn't been for a while; my mistake

    If you want to skin the top bar, it will be the same for all Cydia/Default apps and some App Store apps, so make sure it fits right.

    I believe the name for it is UINavigationBar, but I could be (and probably am) wrong. The top bar image goes in Folders/UIKit.framework
  4. Happyman7

    Happyman7 Member

    Joined:
    Sep 2, 2009
    Messages:
    679
    Likes Received:
    7
    Device:
    4G iPod touch
    'Ya forgot VolumeBlueTrack and VolumeWhiteTrack (or maybe you did it intentionally, I don't know):

    VolumeBlueTrack.png
    is the bar on the left of the "track" bar
    VolumeWhiteTrack.png is the bar on the right of the "track" bar

    Both go in the MediaPlayer.framework folder.

    Hope it helped

    Please Register or Log in to view images

  5. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    Thanks.
    I really need to update this with newer information, however... im a lazy sack

    Please Register or Log in to view images

  6. P-Dawg

    P-Dawg New Member

    Joined:
    Aug 14, 2009
    Messages:
    18
    Likes Received:
    0
    Device:
    iPod touch
    thanks a bunch dude it helped a lot however it didnt fix my entire problem.
    so i managed to change the music controls in the music app but now i wanna change the controls that appear when i double tap the home button. also i want to change the blue bar that i see when the track plays
    any suggestions?
    thanks

    Attached Files:

  7. zstra7

    zstra7 Member

    Joined:
    Jun 25, 2010
    Messages:
    53
    Likes Received:
    0
    Device:
    3G iPod touch
    Thanks tonnes. Just what i have been looking for.
  8. Unregistered

    Unregistered Guest

    The Volume bar doesn't change for me? help
  9. misterium

    misterium New Member

    Joined:
    Jul 11, 2011
    Messages:
    1
    Likes Received:
    0
    OK, i used your guide to make my own music layer skin but i found out there are a few little errors.
    First: the play and pause MUST NOT BE CAPITALIZED!
    Second: MusicVolumeKnob.png should actually be VolumeKnob.png
    Third: this is more of a continuation rather than an issue. to make a theme for Retina displays you need to add @2x behind each file you save and each file should be twice the size than what you mentioned in your tutorial, for example; NowPlayingBottomOverlay.png which is 320x96px should be; NowPlayingBottomOverlay@2x.png and is now 640x192px.
    Also To make the theme SD and Retina compatible, just put both sets of files in the same folder as he mentioned in the tutorial above.
    Thanks for your help theiThemer
    Misterium Out

Share This Page