[WIP]"That one theme"

Discussion in 'Jailbreaks and iOS Hacks' started by murdercitydevil, Aug 22, 2010.

  1. murdercitydevil macrumors 68000

    murdercitydevil

    Joined:
    Feb 23, 2010
    Location:
    california
    #1
    First and foremost, I take absolutely NO CREDIT for the various components (icons, widget, dock) of this "theme" of sorts, nor the actual arrangement of them. All I have done is modified some images and lines of code in order to mimic a very popular iPhone layout that has been circulating around these forums. The only thing that I created myself, in fact, was the wallpaper and iconoclasm layout. Everything else is the hard work of others, and I thank them for it! With that, I present "That one theme"

    Brief History
    [​IMG]
    So apparently, a while ago someone on the MacThemes forums posted a screenshot of their iPhone, and it quickly got a lot of people's attention. Many inquired about what the person did to achieve such a result, but from what I understand, they never divulged any information. At some point, this now-infamous screen shot made its way to our beloved MacRumors, where it likewise starting attracting attention. A thread devoted to the subject determined several things - The icons were based of the Suave theme, there was a weather/time/date widget present, and a custom dock/font/page indicators/etc were being used. Not much else was known, and the lack of resources made it difficult to achieve this look on the iPhone 4. I, among others, set out to do just that. So here it is.

    ***Please keep in mind that this is a WORK IN PROGRESS!! There are still a few things that are unfinished/broken, and I will address those at the end***


    What You Will Need
    - Jailbroken iPhone 4
    - Winterboard
    - Base Suave HD theme (available on Cydia or on MacThemes -> click
    - Iconoclasm and my custom 3x3 dense layout (Iconoclasm available through Cydia, my layout included in zip file below)
    - Transparent Status Bar for iOS4 theme (Cydia)
    - WeatherFurik widget/theme (modified, *almost fixed* version included in zip file below)
    - Infinidock or 5-icon dock (optional)
    - iBlank (optional, only necessary to squeeze dock icons together and align with main springboard icons)
    - No Docked Icon Labels 4.0 theme (Cydia)
    - Custom dock image (included in zip, as well as in my own personal Suave HD theme)
    - UbuntuTiling font (optional, included in zip)


    Suave theme/Icon layout
    The icons used here are from the Suave HD theme by Thyraz. I have attached my own copy of Suave HD, which differs from the "official" one that you will find on cydia or wherever else. Images are changed/replaced, icons are different, the dock is different, etc. If you want to make your phone look EXACTLY like mine, then use this and just SSH it to your phone, into the Themes directory, and then enable it in winterboard. Keep in mind that if you do this, and you have any apps on your phone that there isn't a bundle there for, they won't be themed! It will be up to you to hunt down those icons, resize them if necessary, and SSH them into the Bundles folder.

    As for the icon layout, Iconoclasm has a "3x3" dense layout included. It works fine, but the problem is that the vertical space between icons is too small, and there is no room for the labels. If you use "No Undocked Icon Labels", this isn't a problem. Keep in mind that the wallpaper will no longer fit your icons perfectly, that's what the .psd is for! If you want your icons labeled, you will have to use my custom Iconoclasm layout, which spreads the icons vertically to make room for their labels. Just SSH into your phone and put the included .plist into /Library/Iconoclasm/Layouts/, select it in Iconoclasm, and respring.


    Wallpaper
    I have included the .psd file for the wallpaper used here, so if someone wants to modify it, they can. As you will probably find out, I'm not exactly a photoshop master :eek: The image looks the way it does because there is a problem with the weather widget and how it displays wallpaper (more on that below). It looks off center when you view it in photoshop, but centered on the phone. All you have to do to use it put it in your camera roll and assign it as wallpaper, then respring. The weather widget will use it.

    Weather Widget
    THIS IS BY FAR THE MOST PROBLEMATIC PART OF THIS THEME!! A few days ago, someone found an iOS4 compatible weather widget called WeatherFurik. All well and good, except it's a mess. It appears to have been coded by at least 2 or 3 different people, the theme directory is a mess, there are what appear to be duplicates of various files/folders, etc. If you don't want to mess with anything and just want it to look like it does on my phone, don't touch anything. It is set up so that it should work on any iphone 4. All you need to do is set your location, so it displays the correct weather. To do that, modify both "configureme.js" files, located in /Private and /Private/WeatherWidget/Private. Find the line that says var locale and put your location there. If you are in the US, just put your zip code. Mine for instance is 92867 (Orange, CA), so my configureme.js files say
    If you're not in the US, you need to find your weather ID and input that. Here's a more in-depth guide on that -> click

    If you DO want to change things, like the position of the date/weather, show the clock, change the stylesheet, etc, go for it. I assume you have a basic knowledge of html/css if you opt to make adjustments. The code for the date/time is all located in Widget.html, in the root theme directory. To change the size/position of the weather widget, you need to edit the stylesheet "myopia.css" in Private/WeatherWidget/Private/Stylesheets. Why is it done like this? I don't know. I told you this thing was a mess.


    Font
    I found out that the font used in this theme is called UbuntuTiling, included in the zip file. It's easy to replace system fonts with custom ones, such as replacing Helvetica. The problem is it gets changed EVERYWHERE. What I wanted to do originally was have this font used only in the weather widget, but couldn't figure out, for the life of me, how to do it. More on that below.

    If you want to use this font (keep in mind it will change every instance of Helvetica on your iphone to UbuntuTiling), SSH into your phone and navigate to /System/Library/Fonts/Cache and replace "Helvetica.ttc" with the one provided in the UbuntuTiling folder in the zip file. ***Make sure to backup the original!! Name it Helvetica_original or something.***


    And without ado, if you do all this, here is the end result as it looks on my phone -
    [​IMG]


    What Else Needs to be Done
    As I said, this is a work in progress. There are several things that are still unfinished. The biggest obstacle is the weather widget. Someone with html/css skills much greater than mine should just clean up the entire thing and make it intuitive. As it is now, it's very confusing and redundant. One of the biggest problems is the way it handles wallpaper. In Wallpaper.html, you'll notice that the entire background is sized at 320x480 (the old 3G/3GS resolution) and that for whatever reason, it is not centered on the phone. There is some padding somewhere that moves it to the right, and I can't figure out where. Also, because of this, the background image must be sized down to 61%, but this doesn't fit the retina display perfectly. This is why, as I mentioned above, the image looks off-center in photoshop, but looks fine on the phone - it is to accommodate for the weird sizing that the widget html dictates!

    Also, I couldn't, no matter how hard I tried, get the date centered. Moving the elements around is tricky; change the wrong thing with the date/time, and the weather widget gets moved off screen. All I understand from the code is that the whole thing is contained within a table, and that apparently the "align" tags apparently do nothing. So even though on my screenshot it looks centered, when it's Wednesday, the text will now hang off to the right. This needs to be fixed!

    The way the widget handles wallpaper also causes it to go black when opening a folder on the springboard. I don't even know where to begin with this, so it's up to someone else to find a workaround. Not a huge deal though.

    The font should optimally be used only by the widget. At the very least, I'd like to figure out how this is done. It's not desirable to have all of Helvetica replaced by a custom font everywhere on your phone.

    Last, there are minor things like the page indicators and status bar icons. I haven't begun work on these yet, but it would be nice to get those in retina size as well.


    That's about it! Questions/comments/concerns/suggestions/improvements...have at it!

    Zip file -> http://dl.dropbox.com/u/6912935/ThatOneTheme.zip
     
  2. Krafty macrumors 601

    Krafty

    Joined:
    Dec 31, 2007
    Location:
    La La Land
    #2
    Sorry is this is problematic, but is there a way to rid the date?
     
  3. D1G1T4L macrumors 68000

    D1G1T4L

    Joined:
    Jun 26, 2007
    Location:
    Phoenix, AZ
    #3
    Quick question. Your guide has been very easy to follow but not sure what to so with the "SBDockBG@2x.png file. Did I just miss it in your guide?


    Guess I figured it out as it is working. Went with the 4x4 layout and besides the small clipping on the weather it looks great. Thanks for all the hardwork!

    [​IMG]
     
  4. i11i1i macrumors regular

    Joined:
    Jul 28, 2008
    #4
    I haven't read any of this yet, but have been following in the wallpaper thread.

    THIS IS GOING TO BE EPIC.
     
  5. Krafty macrumors 601

    Krafty

    Joined:
    Dec 31, 2007
    Location:
    La La Land
    #5
    Nevermind, got it.

    Now trying to look into the wallpaper disappearing on folders problem.
     
  6. agoat macrumors regular

    Joined:
    Jun 12, 2010
  7. spoonk7 macrumors member

    Joined:
    Aug 15, 2010
    Location:
    CA
    #7
    Noooo I have iphone 3gs. Owells, I'll do this when I get my iphone 4 in a few months. Great write up op
     
  8. Krafty macrumors 601

    Krafty

    Joined:
    Dec 31, 2007
    Location:
    La La Land
    #8
    I give up. I've been fighting with it for the past hour. Thanks for your contribution, but until someone else figures it out I'm just gonna keep it deactivated. At least I got my layout already set up:
    [​IMG]
     
  9. ahhhhwhoa macrumors newbie

    Joined:
    Aug 22, 2010
    #9
    just a couple questions..

    one - did you make the background with the darker part bigger for 4x4 layout and if so can you please post it? I would like to use 4x4 also and the one in the theme isn't big enough.

    two - when I install the suave theme my dock icons do not have reflection? I am using an iphone 3g not a 4 but I am on 4.0.2. Is it just something with suave HD that has dock reflections and regular suave doesn't because I really like them and can't seem to find a way to get them working.

    thanks!
     
  10. kre62 macrumors 68000

    Joined:
    Jul 12, 2010
    #10
    I deleted the wallpaper.png out of the Suave theme folder, and it stopped turning the bgnd black...
     
  11. darnovo macrumors regular

    Joined:
    Jun 29, 2009
    #11
    how can you change the date / at&t logo on the top bar to say what you want... I want to keep the time from the widget but remove it from the top bar

    also, how do you get the weather widget to separate the weather icon to the bottom and the date up top? mine appears on the bottom and includes the city info... do you have to change anything?
     
  12. Krafty macrumors 601

    Krafty

    Joined:
    Dec 31, 2007
    Location:
    La La Land
    #12
    So it works when you open folders?
    EDIT: I dont have Wallpaper.png in mines.
     
  13. pittman87 macrumors regular

    Joined:
    Jun 24, 2010
  14. darnovo macrumors regular

    Joined:
    Jun 29, 2009
    #14
    it's the icon program that ruins using folders... it doesn't know how to open the folder on the screen with the program forcing the icons in a new array... it has nothing to do with backgrounds or anything.

    this probably can't be fixed... unless the makers of the iconoclasm figure out a way to work around this. If I disable iconoclasm, then I can use folders... when it's on, I can't....

    i dono
     
  15. Krafty macrumors 601

    Krafty

    Joined:
    Dec 31, 2007
    Location:
    La La Land
  16. trayanscragg macrumors regular

    trayanscragg

    Joined:
    Jun 9, 2010
    #16
    Great, however i would have loved the leopard dock indicators instead of the arrows..thanks
     
  17. ahhhhwhoa macrumors newbie

    Joined:
    Aug 22, 2010
    #17
    Well it took about 2 hours of photoshop (still very new) and working with other themes to get it how I wanted it but its finally done. Still waiting on the how to for the dock icon indicators but might end up just photoshopping those on tomorrow. But for now its looking good. Thanks!

    [​IMG]
     
  18. Kimball macrumors regular

    Joined:
    Aug 3, 2010
    #18
    Great stuff murdercitydevil, will try it later!
     
  19. murdercitydevil thread starter macrumors 68000

    murdercitydevil

    Joined:
    Feb 23, 2010
    Location:
    california
    #19
    Thanks guys. The dock indicators are basically just for looks, they don't serve any purpose except imitating a real dock from OS X. You can get the indicator images from your own dock, or if you don't have OS X, probably find them online, just search for leopard dock indicators or something. You can line them up on the dock image, but they will get overlapped by the icons in the dock. I just took my phone icon and put the indicator on top of it so it looks true to life. It's simple to do in PS. I didn't make any mention of it because I'm not sure if I will keep them or not, but if I do, then I'll post the indicator png and more detailed instructions at a later time.

    I would really appreciate it though if someone could look into the html specific bugs in the weather widget...I will probably spend some more time grinding away at it tomorrow though. I'm relearning HTML and CSS throughout all this :D
     
  20. murdercitydevil thread starter macrumors 68000

    murdercitydevil

    Joined:
    Feb 23, 2010
    Location:
    california
    #20
    Hey I just noticed that for you, the weather widget doesn't seem to shift the wallpaper right, it looks like it's actually centered. can you upload your WeatherFurik.theme please so I can take a look at the code? Also where did you get those icon notification badges? Looks cool. Thanks.
     
  21. iPhone4UK macrumors 6502

    Joined:
    Jun 15, 2010
    #21
    Post the wallpaper please :)
     
  22. localboy28 macrumors 6502a

    Joined:
    Jul 27, 2010
    #22
    Brilliant write up thanks

    Did as you said with fonts
    Mine only changed the fonts on springboard tho
     
  23. bushido Suspended

    bushido

    Joined:
    Mar 26, 2008
    Location:
    Germany
    #23
    theres a bug on mine, i cant open my folders it just shows a blank springboard of nothing

    + my weather icon didnt change (probably bc its german) and i dont have the darker black part on my background?
     
  24. darnovo macrumors regular

    Joined:
    Jun 29, 2009
    #24
    does anybody have a template for making those icons that size / shape... when i use the magic wand tool it doesn't give a perfect select around the icon. Also some of the icons have that silver border. Can someone post a .PSD template for these icons so I can make ones that aren't in the theme already?
     
  25. Kimball macrumors regular

    Joined:
    Aug 3, 2010
    #25
    That weather widget sure is one evul bee-yotch!

    [​IMG]

    Didnt really like the noisy background, so I smoothed it up a little!
    Found the day / month inputs so I could translate it to swedish, but thats about all I could manage lol. Whatever I set to "var locale = " I cant get my weather to show up. According to accuweather the ID for Helsingborg, Skane, Sweden, is 314777, but this wont give me the right weather even if I change it in both of the confirueme.js files, "Helsingborg, Sweden" didnt work either :(

    Also, whats the friggin arrow under my phone? Since Im using murdercitydevil's Suave HD it might be YOUR doing I take it? :eek: Ill just need to replace it ^^
     

Share This Page