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
![Suave_theme_by_Tody00.png]()
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
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 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 -
![photo-1-1.png]()
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
Brief History
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
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 -
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
