Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.
08-15-2012, 08:46 AM #1
So you want to Mod your iPhone/iPad? The basics, revisited - for noobs
Hello ModMyi community,
What an awesome group of talented and sharing people there are here. So like all of us - you were a 'noob' once ( a new person to the forum wanting to mod your phone). You saw all these great widgets and mods but you wanted to change this or that element to a different position on the screen. Well me too. And I've only been here a few months but with the help of veteran modders I've come a long way and can do MANY things with my phone now without help. Our poor awesome veteran modders need to be free to make us new stuff so I thought I'd start a thread that they could refer people to for the basics - for the questions they get asked day after day over and over again and that send these threads up into the thousands of posts. So I'm gonna try and demystify some of the stuff for ya.
I'm going to assume you already know how to jailbreak your phone and you've been able to download from Cydia a text editor software like iFile or iFunBox or that you know how to SSH into your phone from your computer using CyberDuck or some such software that gives you access to the file systems of your iPhone or iPad. There are other places to go to find out how to get started with an editor that I won't go into here. Get yourself iFile or an SSH Client for your computer, please learn how to use it and then come back here.
So I will title the lessons and move only as fast as I have time to contribute. Like everyone else here I have a job and this is just a hobby - turned addiction! LOL!!
And we'll also assume for these lessons that you love your MAIN theme and are mostly and only interested in modding some aspect of a Lockscreen widget or SpringBoard widget you've downloaded that you liked - but want to play with its positioning.
Here's to the journey into modding our phones!
Where are the things I need?
Your Main themes, LockScreen widgets and SpringBoard widgets are located in /Library/Themes (or /var/stash/Themes depending on how you like to move around your SSH client). PerPageHTML+ widgets are located in /var/mobile/Library/PerPageHTML. And iWidgets (if you have any) are located in /var/mobile/Library/iWidgets. These folders contain the main documents the direct your phone to project things onto the screen in a certain place/time, etc..
.html?, .css?, widget? wallpaper? Doc names..
There are several different docs you need understand the function of to mess with your phone. I'm not going to go into long explanations about how code works and how to extensively write code. That's not the purpose of this thread. I'm going to give broad explanations - that the veterans will correct me on - and then I'll edit my posts so as to not confuse others who find the thread later. But there are several documents you'll work in a lot to mod your phone.
Wallpaper.html - this is the main document in the root directory of a theme or Springboard Widget (SB Widget) that gives the very basic layout of the theme or Widget and identifies the other documents that will be called on to make things happen.
LockBackground.html - this is the same as above but the required words for use in a Lockscreen theme only.
Widget.html - this, again, is the same as above but the required words for use in a PerPageHTML+ widget or iWidget (much more on these later).
Inside the root directory of a lockscreen/springboard/PPHTML or iWidget you find one of the three documents above and then other docs and folders that all have unique roles to play in the layout of the screen of your phone or tablet.
Style.css -or- "AnyName".css
Though a lot of the positional data can be placed in the .html documents in the root directory of the theme/widget often times - coders will put that data in a StyleSheet named Style.css or "AnyName".css. This will often be in the folder called Style or Resources. Sometimes the .css will be found in the root directory. Code writers place things differently - so sometimes you just need to hunt around. But you will spend a lot of time in the Main.css or Style.css document.
Lesson #1b will teach you how to mess with your very first code command "top: ## px" where ## is a numbers of pixels you can change to change to the position vertically of an element in the widget you're working with.
If you're dying to get started -- I'll give you this lesson 1b right now before I go to work --
Go into either the LockBackground.html or Wallpaper.html or Style.css (Main.css) document in the folder of a favorite Weather widget you have and look around for #city or #city name. Then to the right of that or on the next line of code look for something like "top: 234px". Go into edit mode of your SSH client or iFile and change that number up or down by 10 or so - so you can see the change you make. If the number is 0 - you can also go into negative numbers and sometimes have to. Don't be afraid of negative numbers. Save the results of your change. And then respring your phone. Look at the position of the City Name in the Weather widget now. !!! Don't you love the power! :-) More coming....
Lesson 2: Converting a SpringBoard Theme weather widget to an iWidget
Last edited by NewD; 09-10-2012 at 04:01 PM.
The Following 11 Users Say Thank You to NewD For This Useful Post:
08-15-2012, 09:04 AM #2
Hey King quick question. You told me the other day about a slave theme, can I put other folders of the theme Im using to take up less space in winterboard or just my widgets and icons? TYIA
I didnt know I left the MiOS thread. New, do you know the answer?
Last edited by Nsomnia34; 08-15-2012 at 09:08 AM. Reason: oops
08-15-2012, 09:29 AM #3
I don't know if that answers your question - but that's the idea of a slave theme. From my knowledge it's not about saving space though. Ask King in the main thread and see what he tells you.
08-15-2012, 09:39 AM #4
08-15-2012, 10:04 AM #5
08-15-2012, 06:05 PM #6
08-16-2012, 02:31 PM #7
Sorry gang. This is taking a little longer than anticipated. Hopefully some of you have been able to move the 'top: xx" value of some things since the other day.
Lesson 2 coming shortly. We'll learn how to find the different elements that we want to move. And then a few lessons after that I'll show you how to add a CONTAINER to a widget so that you can move it up or down on the page ALL at the same time without having to go into every single element and change the 'top and left' commands. Hang in there..
09-10-2012, 03:59 PM #8
Lesson 2: Converting a Spring Board weather widget to an iWidget
Okay - Sorry this has been dead for so long. I've been learning so much and figuring the best and most organized way to teach you things. From my lesson 1 there you should be a real pro about move simple object in a widget around top and left values.
Let's sorta dive in with the most popular new craze - happening over at the iWidget thread. Wouldn't you love to just have the 'widget'/weather info part of Spring Board widgets sometimes - and NOT the background pictures that modders create to go with it? You just want to add the widget part to YOUR pages anywhere you want. The best thing to do is get Eldwin's tweak called iWidget. Just go to his thread and on post #2 download the stable version of iWidget (the unstable is perfectly stable too - but my explanation will let you use either. Once that's installed go find your favorite weather widget you wish were 'cut out' of its background images and you could move it around on your screen like an icon.. And let's get to work:
Many thanks to Schnedi and Durben and others who helped me understand how to do this:
1)First, after installing iWidget - make a copy of the SB (SpringBoard) Theme that you want to convert into an iWidget and then move the copy into var/mobile/Library/iWidgets and then rename the main .html document in the theme from "Wallpaper.html" to "Widget.html". Also change the name of the folder containing the 'former theme' to something like "_old name___-iWidget" and remove the extension ".Theme" from the end.
2) Then 95% of all SB Theme Widgets have a background wallpaper that you'll have to get rid of. It's often an IMG Source reference early in the Wallpaper.html(renamed to Widget.html now) you have to get rid of.
Look for something like this:
<img src="background -or- converted............................" style="position: absolute; top: 0px; left: 0px; width: 320px; height: 480px; z-index: -20;">
..and get rid of everything between <img src= and the ">
DON'T GET rid of anything called: <img src="....Overlay.png">
You'll need that OVERLAY and sometimes UNDERLAY for the widget part you want to covert. You're just getting rid of the 'full page background' in this first step.
3) Then you need to move the OVERLAY and UNDERLAY (if there is an underlay) from where it is on the original SB Widget to as uppermost and leftmost as possible as if the corner of the overlay (rounded or squared) were sitting at the top left of the screen. This takes some playing with but you can use negative numbers to achieve this.
For example if it looks like this:
<img src="Style/Overlay.png" style="position:absolute; top:301px; left:20px; width:320px; height:480px; z-index:-10;">
You could change the top:301px to top:0px and the left:20px to left:0px.
--NOW - that only works if the Overlay (main art behind the information of the widget) is separated out as its own image. If it's part of a larger dual layer document where there's a transparent part of image surrounding the overlay part that defines your widget - then you'll already see it sitting at Top:0 and Left:0... In that case you have to trick it a bit by using negative numbers.. as if you were sliding the page up and off the left part of the screen.. So top:-201px and left: -18px.. (or whatever values take your overlay to uppermost and leftmost). Then the main pic BEHIND the weather info now sits in the upper left.
THEN - the tedious part starts.. You have to subtract that same amount (-201 and -18 from above example) from the top and left values of all your style stuff in the Main.css file.
#lo temp..... for ALL of them you'd have to subtract 201 from the top value and 18 from left value of EACH info tag (#......)
4) Then often, for GPS weather widgets, the reference to the MyLocation.txt file - its path needs to be changed in the Location.js script file - since an iWidget is located in a different path in the OS from Themes. If - in the first JQueryGet command in Location.js you see "file://......." - then you're good as is! But if you see a bunch of ".. /../../ ....." before "var" -- then you have to remove them all until you just see "/var ......."
5) Lastly create a .txt document called "Widget.plist" and place it in the root directory of your iWidget, and then all you'll have to do is reset the height and width numbers to something that's a little larger than your actual widget to define its boundaries. Make sense?
That should get you going.
This is a pretty advanced lesson given what lesson 1 was. But it will help you really delve into it and not be TOO over your head.
Veterans -- if I'm leaving out anything important - please chime in...