[HOW TO][2.X.X] Use WinterBoard for everything you need to theme!

Discussion in 'iOS Themes and Customization' started by Gitykins, Sep 30, 2008.

  1. Gitykins

    Gitykins Banned

    Joined:
    May 16, 2008
    Messages:
    3,760
    Likes Received:
    1
    How To: Use WinterBoard for all of your theme needs

    Firstly, you'll need to know how you use and navigate via SSH. If you have no clue what that is, then take a look at a great thread made by spoonforknife called "The Various Ways of File Transfer"

    Also, check out Manic Nimrod's thread answering many common questions about WinterBoard, and explaining how to do some basic things, called "WinterBoard FAQ - A Guide"

    After setting up SSH, navigate to /var/stash/Themes.xxxxxx (xxxxxx = random, different from iPod to iPod). In this guide /var/stash/Themes.xxxxxx will be referred to as "~Themes"

    This is the themes directory, and all themes will be added here. Alternatively, navigate to /Library/Themes to come to this directory in 2 (WHOAMG) steps.


    Batteries

    This seems to be one of the most common questions asked. Since 2.x Customize sucks, how can I use WinterBoard to add my custom battery?

    This is a basic use of WinterBoard. Make a folder in ~Themes, naming it whatever you want. I will use "Battery" in this guide

    Inside ~Themes/Battery, make another folder called "Bundles". Open that directory, and make a folder called "com.apple.springboard". Inside this folder, place your battery. The files must be named accordingly to the system files. The names are:

    BatteryBG_1.png (least filled)
    BatteryBG_2.png (2nd least filled)
    BatteryBG_3.png (3rd least filled)

    etc, all the way to:

    BatteryBG_17.png (fully filled)

    Enter Winterboard, and drag the Theme to where is appropriate based on your findings from Manic Nimrod's thread. Then, select the theme name, exit WinterBoard, and wait to respring.

    Icons

    Inside ~Themes, create a theme folder. I'll call this one Icons.theme. Inside this folder make another folder called "Icons". Inside here, you can put icons for any app. Just name it as it appears on the home screen. Enigmo would be Enigmo.png. Safari would be Safari.png. App Store would be App Store.png, etc.

    Sliders, Highlight Masks, and Bottom Bars

    Another common question, How do I use sliders with WinterBoard?

    And also, another very basic use of editing frameworks, but still plausibly confusing.

    In ~Themes, create a folder for the slider. In this example, I will use the name "Slider".

    In ~Themes/Slider, create a folder called "Bundles" (WHOA!). In that folder, create a folder called "com.apple.TelephonyUI" (Switching it up!).

    Inside this folder is where you put the sliders. Name for a regular (lock screen) slider:

    bottombarknobgray.png

    Power slider:

    bottombarknobred.png

    Call Slider (lol):

    bottombarknobgreen.png

    Highlight mask:

    bottombarlocktextmask.png

    Bottom Bar:

    bottombarbkgnd.png

    and

    bottombarbkgndlock.png (need to do both)


    Wallpapers, Status Bar, Lock Screen Wallpapers, and Docks

    Now on to the really simple things. These are for the faint of heart that are unwilling to try anything without a guide, or the plain clueless.

    In ~Themes, create a folder. I'll use "Theme" this time.

    In that folder, you would put this for a wallpaper (320x480):

    Wallpaper.png

    Dock:

    Dock.png

    Status Bar:

    StatusBar.png

    Lock Screen Wallpaper:

    LockBackground.png

    Those were tough. Now on to some tougher ones!

    Weather Widgets

    Thankfully, Manic Nimrod already did this for me!

    "The Weather Widget - The Guide"

    Info.plist editing

    This is a totally new feature implemented only in WinterBoard. You can edit many things in here, including the location and color of the status bar clock, the same for the calendar icons day and date, color of the icon labels, both docked and undocked, and some more. To make an Info.plist, make a text file called Info, and change the extension to .plist. Put this at the beginning of the text file:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0"><dict>
    
    </dict>
    </plist>
    To move the time far to the right, near the battery, or change the color, type this between <dict> and </dict>:

    Code:
    <key>TimeStyle</key>
    <string>margin-left: 99px; color: transparent</string> (see below for other colors. transparent will disable the status bar time)
    To change the color of the docked or undocked icon labels, type this between <dict> and </dict>:

    Code:
    <key>DockedIconLabelStyle</key> (Replace "Docked" with "Undocked" for the der)
    <string>color: transparent</string> (Supports many colors, from steelgray to lightblue to #000000. transparent will disable the labels)
    To change the color of the calendar day (Wednesday, etc) or date (12th, 23rd, etc), type this between <dict> and </dict>:

    Code:
    <key>CalendarIconDayStyle</key> (Replace Day with Date for the der)
    <string>color: blue</string> (See above for other options. Can be eliminated by typing transparent)
    WiFi and other SpringBoard images

    WiFi bars and other things, such as badges (red popup number) and carrier images (iPod in top left) can be edited through WinterBoard.

    Create the folder Bundles in the top directory of theme (With Wallpaper.png), and enter it. Create com.apple.springboard in there, and enter again.

    Now, WiFi bars are tricky. You will need to duplicate them in order to have them show up both in applications and on the home screen.

    Take the one that is totally unfilled, and name it both Default_0_AirPort.png and FSO_0_AirPort.png. Take the one 1/3 filled up, and name it both Default_1_AirPort.png and FSO_1_AirPort.png, until you use all 4 images.

    Carrier images usually come in pairs. The lighter or white one should be named FSO_CARRIER_IPOD.png and the dark one is Default_CARRIER_IPOD.png.

    Badges are small circles, about 20x20 px. They go in the same folder, named SBBadgeBG.png

    Keyboard skinning

    Keyboards are VERY tough to explain in making, so I'm going to upload a QWERTY keyboard for you to poke around in, if you are interested. If you get only images, you must make a theme in /Library/Themes called Keyboard.theme, and make a folder in there called UIImages, and put the images in there.

    Neutra Keys NeutraFace font keyboard - itiz.in - .zip - created by CompC of MacThemes using NeutraFace font by Richard Neutra (cost = $449.00)

    Music Player

    ~Themes/Music Player.theme/Bundles/com.apple.MobileMusicPlayer

    >> image

    nexttrack.png

    || image

    pause.png

    > image

    play.png

    << image

    prevtrack.png

    Knob on top of blue volume bar at bottom

    VolumeBlueCap.png

    Filling for volume bar at bottom (small circle, stretches to fit the bar)

    VolumeBlueFill.png

    Knob on top of track progression bar on top

    VolumeWhiteMusicCap.png

    Filling for track progression bar (small circle, stretches to fit the bar)

    VolumeWhiteMusicFill.png


    I'll finish later with some toughies, Most likely I'll do some editing the Info.plist, editing some Safari images, editing MobileMusicPlayer images, keyboards, Page dots, WiFi, adding icons, carrier images, and maybe try to help with Wallpaper.html's.
  2. spoonforknife

    spoonforknife Retired Moderator

    Joined:
    Nov 15, 2007
    Messages:
    6,896
    Likes Received:
    317
    Nice job, can I include it in the ever growing WinterBoard section in the User's Manual?
  3. Tman47

    Tman47 Active Member

    Joined:
    Feb 13, 2008
    Messages:
    2,883
    Likes Received:
    20
    Device:
    iPhone 4S (Black)
  4. Allstar247

    Allstar247 New Member

    Joined:
    Aug 28, 2008
    Messages:
    43
    Likes Received:
    0
  5. Gitykins

    Gitykins Banned

    Joined:
    May 16, 2008
    Messages:
    3,760
    Likes Received:
    1
    Sure. Thanks, I feel honored

    Please Register or Log in to view images



    seriously
  6. Joe Rossignol

    Joe Rossignol Community Manager Staff Member

    Joined:
    Jan 9, 2008
    Messages:
    11,500
    Likes Received:
    1,268
    Device:
    iPhone 5 (Black)
    Explanitory, well done.
  7. Gitykins

    Gitykins Banned

    Joined:
    May 16, 2008
    Messages:
    3,760
    Likes Received:
    1
    Wow, 2 of the best guide makers with compliments!

    Please Register or Log in to view images

    I must be getting good at this, a bit at least.
  8. Frozen72

    Frozen72 New Member

    Joined:
    Jul 30, 2008
    Messages:
    465
    Likes Received:
    0
    Nice but adding the dimensions for each item would make it so much better.
  9. Aninda

    Aninda New Member

    Joined:
    May 4, 2008
    Messages:
    19
    Likes Received:
    0
    Device:
    iPod touch
    I found this download to be exponentially helpful. It's a directory of all the different images that can be modded using the "UIImages" folder. You can mod most anything using this, including the files from Other.Artwork (such as the top bar in the lock screen, which is called "UI-something-or-rather"). Critically helpful.
  10. Joseph

    Joseph Retired Moderator

    Joined:
    Oct 21, 2007
    Messages:
    2,749
    Likes Received:
    51
    Good job!
    This deserves a sticky :]

Share This Page