[RELEASE] OSX LEOPARD ADD-ONs

**Bernie-Mac** · 11-10-2008, 07:31 PM

I have an interesting bug maybe?
This morning when i woke up i noticed the weather temperatures for the week were all shifted down so that all the low temps were off the weather icon. I tried a hard restart and nothing changed. So i replaced the files with stock files and it was all center and in place again. After class i noticed that they were all shifted down again so i just put my phone to sleep and was going to post this after my next class to see what the problem was. Well after my next class everything is fine again and has been since. Is this just a bug or did i do something wrong with installation? It has only done this after i modified the clock widget to not show the second hand if that counts for anything

Originally Posted by Bear Hunter

Namikaze4..... You need to install Categories from Cydia and understand how that program works. You also need to install blank applicaitons referenced in the 1st post so you can move your icons where you need them.....and you also need to replace your current icons with the ones provided in the links which are in the README file. Also, if you look several pages back...you will see that MARC posted the icons that I am using. Those icons go into your "Icons" folder in your theme folder.

Ice... I haven't tried rotating wallpaper yet.....Might have to give it a shot, and get a collection of walls together.

Special Thanks to Ice for providing the weather "inline" code a couple pages back. I attempted to modify it a little to replicate the actual Dashboard Weather Widget as close as possible. The only thing I couldn't do was get the "City" centered with the enlarged "Temp". They seem to be locked "inline" from the bottom. If anyone knows how to do what I'm talking about...please let me know.

So with this modification I made a little tweak to the Weather widget: See below...just drag and drop into your PSD file and set the drop shadow to 31 or whatever you have it set as.

Original Dashboard Weather Widget: You will see that the city is centered inline...vs the bottom. Not really concerned with adding "hi/low" to the top since it is the same information as the 6 day below for that day.

Minor adjustments to black and blue weather widgets (see instructions above). For those that do not have Photoshop (free trial) or Gimp (free)...Go get it.

....and a test screenshot with the current day/month color codes changed via instructions provided in the Calendar.theme README file.

Edit: Here is the adjusted code....I just hack so check my work

Nice thanks!

**Ice9812** · 11-10-2008, 08:15 PM

Originally Posted by bacman

Ice9812
You seem to be "the"expert in editing htlm files
can you plz help me to finish translating the Reduced 6 Day Forecast.theme as shown in my screenshot, the changes i made in the wallpaper.js do no work? I've spent hours to try to find the solution.

im no expert but i help out when i can....sure ill help you but im sorry and this might be a stupid question.....but what exactly do you want to change?....
from what to what?....

**oo3** · 11-10-2008, 09:47 PM

Originally Posted by Ice9812

bear,

im sure youve seen this before but incase you havent...check it out

http://www.modmyi.com/forums/winterb...bg-images.html

its a code written by cpjr that rotates wallpapers...i currently have 12 different wallpapers rotating for your theme... two different themes 7 in one and 5 in another one is x-rated and one is not..lol..to get it to work i have all you html codes named to widget.html and this one is wallpaper.html

here is the html code from his post and there are easy direction on how to add more wallpapers in your roatation

HTML Code:

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: black;
margin: 0;
padding: 0;
height: 480px;
width: 320px;
}

img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
position: absolute;
width: 320px;
height: auto;
}

img.fade-out {
opacity: 0;
}

img.fade-in {
opacity: 1;
}
</style>
</head>
<body style="color: black">

<img src="wallpaper/one.png"/>
<img src="wallpaper/two.png"/>
<img src="wallpaper/three.png"/>
<img src="wallpaper/four.png"/>
<img src="wallpaper/five.png"/>
<img src="wallpaper/six.png"/>
<img src="wallpaper/seven.png"/>

<script>
// 
// Displays each <img> once in random order before
// randomizing the list again.
// Just add an <img> tag with your filename to add a pic,
// and change interval to control the cycle speed.

var interval = 4 * 20; // Seconds between change

var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;

var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}

for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);

var fade = function(){

imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';

setTimeout(fade, interval * 1000);
};

fade();
</script>

</body></html>

Am I simply adding that code to the existing wallpaper.html doc?

**Bear Hunter** · 11-10-2008, 10:00 PM

Check it out guys...like I said, I'm no code expert, I took a 6 day forecast for lockscreen and converted to springboard. The 6 day forecast that I downloaded and modified did not have any extra visible information other than the forecast showing on the lockscreen. I collapsed the forecast information and moved it like I showed in the README file.

Since there were sporatic reports of the forecast dropping about 10px I looked a little harder, and it seems the code I adjusted was adjustment off of another hack to display only the forecast and not other information....like other weather information and an additional large weather icon. I looked a little harder at the twoline.css and wallpaper.js

I found that the wallpaper.js was written to show more than just the 6 day forecast. Here is just a portion:

Then looked at the twoline.css and found all this stuff in the middle:

When I collapsed the stuff in the middle of the .css file (below), and changed the top margin of the Widget html file.

Code:

#middle { overflow: hidden; margin-top:174px;

I found that there is extra junk such as another weather icon, city, date, temp, conditions.

So in theory...it would probably be possible to re-write this into one weather widget, without having to run separate current weather within your theme.

If anyone knows how to delete all the extra stuff in the 6 day forecast or combine it into one widget, that would be great. I think the sporatic dropping of the 6 day forecast it that other large icon changing.

I'm sorry guys... I'll look for another source for a weather forecast..I don't know enough about code in the "wallpaper.js" to tell in not to display the other junk you don't see that is off the screen.

**flounder21** · 11-10-2008, 10:06 PM

I just noticed that my temps for the week had suddenly shifted down as well? I read every post since everything was working fine last week and bear had mentioned it. Has anyone figured anything that may be causing this bug?

**Bear Hunter** · 11-10-2008, 11:11 PM

Originally Posted by flounder21

I just noticed that my temps for the week had suddenly shifted down as well? I read every post since everything was working fine last week and bear had mentioned it. Has anyone figured anything that may be causing this bug?

Mine hasn't shifted at all....weird, but I know it has to be the other information in the wallpaper.js and in the middle of the twoline.css as shown above that is doing it. I'm sure it is the large weather icon that you don't see changing and causting the shift.

I need to find a way to take all that other crap you don't see out of the .js and .css file.

Just to let you guys know. I have downloaded two different versions since my last post and they ALL show additional stuff when collapsed: Here is the latest one I am working with. We have to find a way to modify the "wallpaper.js" and "twoline.css" not to display this other stuff that is above the forecast.

**oo3** · 11-10-2008, 11:29 PM

Originally Posted by flounder21

I just noticed that my temps for the week had suddenly shifted down as well? I read every post since everything was working fine last week and bear had mentioned it. Has anyone figured anything that may be causing this bug?

Mine did too today. Funny, I was also trying to figure out how to merge the two weather widgets together to successfully run the wallpaper changer thingy when it happened. I thought I did it so I manually bumped it up 10px to fix it then a couple hours later it corrected itself and then it was too high. So I changed it back...

**Bernie-Mac** · 11-10-2008, 11:37 PM

Originally Posted by oo3

Mine did too today. Funny, I was also trying to figure out how to merge the two weather widgets together to successfully run the wallpaper changer thingy when it happened. I thought I did it so I manually bumped it up 10px to fix it then a couple hours later it corrected itself and then it was too high. So I changed it back...

Wait so what is the fix for this?

**Bear Hunter** · 11-10-2008, 11:48 PM

I deleted some of the middle stuff from the "twoline.css" and the smaller icon you see up in the previous post turned larger. I now think it is the "Widget.html" and "wallpaper.js" files that need to be modified so it does not load the additional icon, date, location, temp, and conditions you see up top near my taskbar. If we can get this out and adjust the forecast back into position...I guarantee it won't drop. Of course the optimal solution would be to adjust the code where it would combine current and and forecast......BUT if you look at the current icon at the top right near my taskbar and the current weather on my widget (embedded in Leopard theme) you see they do not match (even after I changed the icon sets to match). It shows moon cloudy (top right near taskbar) and on my current wx it shows the "moon and clear" which is accurate.

Originally Posted by Bernie-Mac

Wait so what is the fix for this?

The fix is to adjust the "Widget.html", "wallpaper.js", and "twoline.css" not to display any additional information (see all the additional info near the top of my taskbar - pic above).

He just said he made an adjustment and it fixed the drop temporarily, because then it went back to being too high.

**Ice9812** · 11-10-2008, 11:49 PM

Originally Posted by oo3

Am I simply adding that code to the existing wallpaper.html doc?

no the wallpaper rotation code is its own .html....

so what i did was i changed the wallpaper.html in the theme to widget.html...so everything from bears add ons are widget.html and then i run the wallpaper.html to run the wallpaper rotation.....let me know if you need further help....

**Bernie-Mac** · 11-10-2008, 11:52 PM

Originally Posted by Bear Hunter

The fix is to adjust the "Widget.html", "wallpaper.js", and "twoline.css" not to display any additional information (see all the additional info near the top of my taskbar - pic above).

He just said he made an adjustment and it fixed the drop temporarily, because then it went back to being too high.

Oh...so how would we go about doing this? Sorry i have no idea about this stuff, i just know how to follow directions

**Bear Hunter** · 11-11-2008, 12:00 AM

Originally Posted by Bernie-Mac

Oh...so how would we go about doing this? Sorry i have no idea about this stuff, i just know how to follow directions

I just have to play around with it until I see that junk up top disappear, then move the foreccast back in place. I'm not good at code either...so if anyone else can take a look at those three files I specified above to delete that extra stuff...that would fix it.

As stated earlier...I did a search on macthemes for "weather forecast), and downloaded two other versions and they all display the same extra stuff when margns are dropped in "widget.html" and "twoline.css". I'm convinced the answer is modifying the codes NOT to display that stuff.

For now I replaced everything back with my old files since mine does not shift at all.

**Ice9812** · 11-11-2008, 12:43 AM

Originally Posted by Bear Hunter

I just have to play around with it until I see that junk up top disappear, then move the foreccast back in place. I'm not good at code either...so if anyone else can take a look at those three files I specified above to delete that extra stuff...that would fix it.

As stated earlier...I did a search on macthemes for "weather forecast), and downloaded two other versions and they all display the same extra stuff when margns are dropped in "widget.html" and "twoline.css". I'm convinced the answer is modifying the codes NOT to display that stuff.

For now I replaced everything back with my old files since mine does not shift at all.

Bear,

Im not exactly sure what your trying to do ..but it looks like maybe your trying to get the 6 day and the current weather to be display from the same .html..like one weather theme?
Is that correct?
if so...here you go....this is a one weather widget displaing the 6 day and the current weather together..
my current pic attached is one weather widget
if your setup is a little lower youll have to adjust that in the twoLine.css b/c i dont use the google and yellow pages icons so my weather is higher up than yours

heres the widget.html

HTML Code:

<?xml version="1.0" encoding="UTF-8"?>
<html><head>
    <base href="Private/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <style>
        body {
            background-color: none;
            margin: 310px 0 0 25px;
            padding: 0px 0 0 0;
            height: 480px;
            width: 320px;
        }
	</style>
	<script type="text/javascript" src="configureMe.js"/>
	<script type="text/javascript" src="Wallpaper.js"/>

</head>
<body onload="onLoad()">


</script>

<div id="WeatherContainer">
<div id="TextContainer">
<p id="city">Loading...</p>
<p id="temp">-Âº</p>
<p id="desc">-</p>
</div>
<img id="weatherIcon" src=""/>
<div id="middle" >
</div>
<div id="Forecast" >
<div id="day0" ></div>
<div id="day1" ></div>
<div id="day2" ></div>
<div id="day3" ></div>
<div id="day4" ></div>
<div id="day5" ></div>
</div><div id="Forecast" >
<div id="icon0" ><img id="wIcon0" width="24" heigth="24" src=""/></div>
<div id="icon1" ><img id="wIcon1" width="24" heigth="24 "src=""/></div>
<div id="icon2" ><img id="wIcon2" width="24" heigth="24 "src=""/></div>
<div id="icon3" ><img id="wIcon3" width="24" heigth="24 "src=""/></div>
<div id="icon4" ><img id="wIcon4" width="24" heigth="24" src=""/></div>
<div id="icon5" ><img id="wIcon5" width="24" heigth="24" src=""/></div>
</div><div id="Forecast" >
<div id="hi0" ></div>
<div id="hi1" ></div>
<div id="hi2" ></div>
<div id="hi3" ></div>
<div id="hi4" ></div>
<div id="hi5" ></div>
</div><div id="Forecast" >
<div id="low0" ></div>
<div id="low1" ></div>
<div id="low2" ></div>
<div id="low3" ></div>
<div id="low4" ></div>
<div id="low5" ></div>
</div>

</div>



</body></html>

and here is the twoLine.css

HTML Code:

#WeatherContainer{
    margin-top:-225px;
    width:100%;
    color:#1826e0;
    background-color: transparent;
    height:27px;
    
}

#TextContainer{
    font-size:17px;
    font-family:  Helvetica;
    text-shadow: rgba(0,0,0,0.7) 0 0 2px;
    margin:none;
    width:160px;
    z-index:1;
}

#city{
    text-transform:capitalize;
    font-variant: small-caps; 
    font-size: 0.8em;
    padding-left:10px;
}

#TextContainer p{
    margin:0;
    display:inline;
}

#city, #temp{
}

#temp{
    font-weight:bold;
    padding-left:10px;
    color:white;

}

#desc{
           text-transform:capitalize;
	display:none;
         font-size: 13px;
        color:white;
}

#weatherIcon{
    height:34px;
    width:34px;
    position:relative;
    margin-top:-46px;
    margin-left: 130px;
    z-index:2;
}

#middle {
	overflow:hidden;
       margin-top:10px;

}
#Forecast {
    font-size:11px;
    font-family: Helvetica;
    text-shadow: rgba(0,0,0,0.7) 0 0 2px;
    background-color: transparent;
    margin:none;
    text-align: center;
    width:160px;
    color:white;
    z-index:1;
}

#day1, #day2, #day3, #day4, #day5, #day0 {
	vertical-align:top;
	width:30em!important;width:13.3px;
	display:table-cell!important;display:inline;
	font-weight:bold;
       padding-top:3px;
       padding-left:2px;
}

#icon1, #icon2, #icon3, #icon4, #icon5, #icon0 {
    height:24px;
    width:24px;
	vertical-align:top;
	width:5em!important;width:13.3px;
	display:table-cell!important;display:inline;
}

#hi1, #hi2, #hi3, #hi4, #hi5, #hi0 {
	vertical-align:top;
	width:15em!important;width:33.3px;
	display:table-cell!important;display:inline;
    	font-color:#eeeeee;
}

#low1, #low2, #low3, #low4, #low5, #low0 {
	vertical-align:top;
	width:15em!important;width:13.3px;
	display:table-cell!important;display:inline;
    	font-color:#999999;
       padding-bottom:3px;
}

and the wallpaper.js which i didnt modify:

HTML Code:

var postal;
var demoMode = false;
var enabled;

if (location.href.indexOf("Wallpaper")  > 0){
	stylesheet = stylesheetLock;
	iconSet = iconSetLock;
	iconExt = iconExtLock;
	enabled = enableLockScreen;
}else{
	stylesheet = stylesheetWall;
	iconSet = iconSetWall;
	iconExt = iconExtWall;
	enabled = enableWallpaper;
}

if(enabled == true){
if(iconSet == null || iconSet == 'null' || iconSet == ""){
	var iconSet = stylesheet;
}

var headID = document.getElementsByTagName("head")[0];         
var styleNode = document.createElement('link');
styleNode.type = 'text/css';
styleNode.rel = 'stylesheet';
styleNode.href = 'Stylesheets/'+stylesheet+'.css';
headID.appendChild(styleNode);

var scriptNode = document.createElement('script');
scriptNode.type = 'text/javascript';
scriptNode.src = 'Sources/'+source+'.js';
headID.appendChild(scriptNode);
}

function onLoad(){
	if (enabled == true){ 
	if (demoMode == true){
		document.getElementById("weatherIcon").src="IconSets/"+iconSet+"/"+"cloudy1"+iconExt;
		document.getElementById("city").innerText="Somewhere";
		document.getElementById("desc").innerText="Partly Cloudy";
		document.getElementById("temp").innerText="100º";		
		document.getElementById("forecast").innerText="Sun";	
	}else{ 
	document.getElementById("weatherIcon").src="IconSets/"+iconSet+"/"+"dunno"+iconExt;
	validateWeatherLocation(escape(locale).replace(/^%u/g, "%"), setPostal)
	}
	}else{
		document.getElementsByTagName("body")[0].innerText='';
	}
}

function convertTemp(num)
{
	if (isCelsius == true)
		return Math.round ((num - 32) * 5 / 9);
	else
		return num;
}

function setPostal(obj){
	
	if (obj.error == false){
		if(obj.cities.length > 0){
			postal = escape(obj.cities[0].zip).replace(/^%u/g, "%")
			document.getElementById("WeatherContainer").className = "";	
			weatherRefresherTemp();
		}else{
			document.getElementById("city").innerText="Not Found";
			document.getElementById("WeatherContainer").className = "errorLocaleNotFound";	
		}
	}else{
		document.getElementById("city").innerText=obj.errorString;
		document.getElementById("WeatherContainer").className = "errorLocaleValidate";	
		setTimeout('validateWeatherLocation(escape(locale).replace(/^%u/g, "%"), setPostal)', Math.round(1000*60*5));
	}
}

function dealWithWeather(obj){

	if (obj.error == false){
		document.getElementById("city").innerText=obj.city;
		document.getElementById("desc").innerText=obj.description.toLowerCase();
		
		if(useRealFeel == true){
			tempValue = convertTemp(obj.realFeel);
		}else{
			tempValue = convertTemp(obj.temp)
		}
		document.getElementById("temp").innerText=tempValue+"Âº";
		document.getElementById("weatherIcon").src="IconSets/"+iconSet+"/"+MiniIcons[obj.icon]+iconExt;
		
		/*ProductRed*/
		lastResults = new Array;
		lastResults[0] = {daycode:obj.daycode, icon:obj.icon, hi:obj.hi, lo:obj.lo, now:obj.temp};
		var c = obj.forecast.length;

		if (c > 6) c = 6; // just to be safe
		for (var i=0; i<c; ++i)
		{
			var forecast = obj.forecast[i];

			document.getElementById('day'+i).innerText = forecast.daycode;
			document.getElementById('hi'+i).innerText = convertTemp(forecast.hi)+"Âº";;
			document.getElementById('low'+i).innerText = convertTemp(forecast.lo)+"Âº";;
			document.getElementById('wIcon'+i).src="IconSets/"+iconSet+"/"+MiniIcons[forecast.icon]+iconExt;
			
			lastResults[i+1] = {daycode:forecast.daycode, icon:forecast.icon, hi:forecast.hi, lo:forecast.lo};

		}
		/*ProductRed*/

		document.getElementById("WeatherContainer").className = "";	

		
	}else{
		//Could be down to any number of things, which is unhelpful...
		document.getElementById("WeatherContainer").className = "errorWeatherDataFetch";	
	}
	
var this_weekday_name_array = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var this_month_name_array = new Array("January","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")	//predefine month names
var this_date_timestamp = new Date()
var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()
var this_year = this_date_timestamp.getYear()

if (this_year < 1000)
    this_year+= 1900;
if (this_year==101)
    this_year=2001;

document.getElementById("date").innerText=this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date  
	
}

function weatherRefresherTemp(){ //I'm a bastard ugly hack. Hate me.
	fetchWeatherData(dealWithWeather,postal);
	setTimeout(weatherRefresherTemp, 60*1000*updateInterval);
}

**Bear Hunter** · 11-11-2008, 12:46 AM

Originally Posted by Ice9812

Bear,

Im not exactly sure what your trying to do ..but it looks like maybe your trying to get the 6 day and the current weather to be display from the same .html..like one weather theme?
Is that correct?
if so...here you go....this is a one weather widget displaing teh 6 day and the current weather together..
my current pic attached is one weather widget

heres the widget.html

HTML Code:

<?xml version="1.0" encoding="UTF-8"?>
<html><head>
    <base href="Private/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <style>
        body {
            background-color: none;
            margin: 310px 0 0 25px;
            padding: 0px 0 0 0;
            height: 480px;
            width: 320px;
        }
	</style>
	<script type="text/javascript" src="configureMe.js"/>
	<script type="text/javascript" src="Wallpaper.js"/>

</head>
<body onload="onLoad()">


</script>

<div id="WeatherContainer">
<div id="TextContainer">
<p id="city">Loading...</p>
<p id="temp">-Âº</p>
<p id="desc">-</p>
</div>
<img id="weatherIcon" src=""/>
<div id="middle" >
</div>
<div id="Forecast" >
<div id="day0" ></div>
<div id="day1" ></div>
<div id="day2" ></div>
<div id="day3" ></div>
<div id="day4" ></div>
<div id="day5" ></div>
</div><div id="Forecast" >
<div id="icon0" ><img id="wIcon0" width="24" heigth="24" src=""/></div>
<div id="icon1" ><img id="wIcon1" width="24" heigth="24 "src=""/></div>
<div id="icon2" ><img id="wIcon2" width="24" heigth="24 "src=""/></div>
<div id="icon3" ><img id="wIcon3" width="24" heigth="24 "src=""/></div>
<div id="icon4" ><img id="wIcon4" width="24" heigth="24" src=""/></div>
<div id="icon5" ><img id="wIcon5" width="24" heigth="24" src=""/></div>
</div><div id="Forecast" >
<div id="hi0" ></div>
<div id="hi1" ></div>
<div id="hi2" ></div>
<div id="hi3" ></div>
<div id="hi4" ></div>
<div id="hi5" ></div>
</div><div id="Forecast" >
<div id="low0" ></div>
<div id="low1" ></div>
<div id="low2" ></div>
<div id="low3" ></div>
<div id="low4" ></div>
<div id="low5" ></div>
</div>

</div>



</body></html>

and here is the twoLine.css

HTML Code:

#WeatherContainer{
    margin-top:-225px;
    width:100%;
    color:#1826e0;
    background-color: transparent;
    height:27px;
    
}

#TextContainer{
    font-size:17px;
    font-family:  Helvetica;
    text-shadow: rgba(0,0,0,0.7) 0 0 2px;
    margin:none;
    width:160px;
    z-index:1;
}

#city{
    text-transform:capitalize;
    font-variant: small-caps; 
    font-size: 0.8em;
    padding-left:10px;
}

#TextContainer p{
    margin:0;
    display:inline;
}

#city, #temp{
}

#temp{
    font-weight:bold;
    padding-left:10px;
    color:white;

}

#desc{
       text-transform:capitalize;
	display:none;
       color:white;
}

#weatherIcon{
    height:34px;
    width:34px;
    position:relative;
    margin-top:-46px;
    margin-left: 130px;
    z-index:2;
}

#middle {
	overflow:hidden;
       margin-top:10px;

}
#Forecast {
    font-size:11px;
    font-family: Helvetica;
    text-shadow: rgba(0,0,0,0.7) 0 0 2px;
    background-color: transparent;
    margin:none;
    text-align: center;
    width:160px;
    color:white;
    z-index:1;
}

#day1, #day2, #day3, #day4, #day5, #day0 {
	vertical-align:top;
	width:30em!important;width:13.3px;
	display:table-cell!important;display:inline;
	font-weight:bold;
       padding-top:3px;
       padding-left:2px;
}

#icon1, #icon2, #icon3, #icon4, #icon5, #icon0 {
    height:24px;
    width:24px;
	vertical-align:top;
	width:5em!important;width:13.3px;
	display:table-cell!important;display:inline;
}

#hi1, #hi2, #hi3, #hi4, #hi5, #hi0 {
	vertical-align:top;
	width:15em!important;width:33.3px;
	display:table-cell!important;display:inline;
    	font-color:#eeeeee;
}

#low1, #low2, #low3, #low4, #low5, #low0 {
	vertical-align:top;
	width:15em!important;width:13.3px;
	display:table-cell!important;display:inline;
    	font-color:#999999;
       padding-bottom:3px;
}

and the wallpaper.js which i didnt modify:

HTML Code:

var postal;
var demoMode = false;
var enabled;

if (location.href.indexOf("Wallpaper")  > 0){
	stylesheet = stylesheetLock;
	iconSet = iconSetLock;
	iconExt = iconExtLock;
	enabled = enableLockScreen;
}else{
	stylesheet = stylesheetWall;
	iconSet = iconSetWall;
	iconExt = iconExtWall;
	enabled = enableWallpaper;
}

if(enabled == true){
if(iconSet == null || iconSet == 'null' || iconSet == ""){
	var iconSet = stylesheet;
}

var headID = document.getElementsByTagName("head")[0];         
var styleNode = document.createElement('link');
styleNode.type = 'text/css';
styleNode.rel = 'stylesheet';
styleNode.href = 'Stylesheets/'+stylesheet+'.css';
headID.appendChild(styleNode);

var scriptNode = document.createElement('script');
scriptNode.type = 'text/javascript';
scriptNode.src = 'Sources/'+source+'.js';
headID.appendChild(scriptNode);
}

function onLoad(){
	if (enabled == true){ 
	if (demoMode == true){
		document.getElementById("weatherIcon").src="IconSets/"+iconSet+"/"+"cloudy1"+iconExt;
		document.getElementById("city").innerText="Somewhere";
		document.getElementById("desc").innerText="Partly Cloudy";
		document.getElementById("temp").innerText="100º";		
		document.getElementById("forecast").innerText="Sun";	
	}else{ 
	document.getElementById("weatherIcon").src="IconSets/"+iconSet+"/"+"dunno"+iconExt;
	validateWeatherLocation(escape(locale).replace(/^%u/g, "%"), setPostal)
	}
	}else{
		document.getElementsByTagName("body")[0].innerText='';
	}
}

function convertTemp(num)
{
	if (isCelsius == true)
		return Math.round ((num - 32) * 5 / 9);
	else
		return num;
}

function setPostal(obj){
	
	if (obj.error == false){
		if(obj.cities.length > 0){
			postal = escape(obj.cities[0].zip).replace(/^%u/g, "%")
			document.getElementById("WeatherContainer").className = "";	
			weatherRefresherTemp();
		}else{
			document.getElementById("city").innerText="Not Found";
			document.getElementById("WeatherContainer").className = "errorLocaleNotFound";	
		}
	}else{
		document.getElementById("city").innerText=obj.errorString;
		document.getElementById("WeatherContainer").className = "errorLocaleValidate";	
		setTimeout('validateWeatherLocation(escape(locale).replace(/^%u/g, "%"), setPostal)', Math.round(1000*60*5));
	}
}

function dealWithWeather(obj){

	if (obj.error == false){
		document.getElementById("city").innerText=obj.city;
		document.getElementById("desc").innerText=obj.description.toLowerCase();
		
		if(useRealFeel == true){
			tempValue = convertTemp(obj.realFeel);
		}else{
			tempValue = convertTemp(obj.temp)
		}
		document.getElementById("temp").innerText=tempValue+"Âº";
		document.getElementById("weatherIcon").src="IconSets/"+iconSet+"/"+MiniIcons[obj.icon]+iconExt;
		
		/*ProductRed*/
		lastResults = new Array;
		lastResults[0] = {daycode:obj.daycode, icon:obj.icon, hi:obj.hi, lo:obj.lo, now:obj.temp};
		var c = obj.forecast.length;

		if (c > 6) c = 6; // just to be safe
		for (var i=0; i<c; ++i)
		{
			var forecast = obj.forecast[i];

			document.getElementById('day'+i).innerText = forecast.daycode;
			document.getElementById('hi'+i).innerText = convertTemp(forecast.hi)+"Âº";;
			document.getElementById('low'+i).innerText = convertTemp(forecast.lo)+"Âº";;
			document.getElementById('wIcon'+i).src="IconSets/"+iconSet+"/"+MiniIcons[forecast.icon]+iconExt;
			
			lastResults[i+1] = {daycode:forecast.daycode, icon:forecast.icon, hi:forecast.hi, lo:forecast.lo};

		}
		/*ProductRed*/

		document.getElementById("WeatherContainer").className = "";	

		
	}else{
		//Could be down to any number of things, which is unhelpful...
		document.getElementById("WeatherContainer").className = "errorWeatherDataFetch";	
	}
	
var this_weekday_name_array = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var this_month_name_array = new Array("January","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")	//predefine month names
var this_date_timestamp = new Date()
var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()
var this_year = this_date_timestamp.getYear()

if (this_year < 1000)
    this_year+= 1900;
if (this_year==101)
    this_year=2001;

document.getElementById("date").innerText=this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date  
	
}

function weatherRefresherTemp(){ //I'm a bastard ugly hack. Hate me.
	fetchWeatherData(dealWithWeather,postal);
	setTimeout(weatherRefresherTemp, 60*1000*updateInterval);
}

Sweet brother....Ice comes through again! Thanks for posting this. Is it possible to have the current weather look like this up top? (Icon in the middle, condition description under the city, and current temp to the right?)

**Ice9812** · 11-11-2008, 12:54 AM

Originally Posted by Bear Hunter

Sweet brother....Ice comes through again! Thanks for posting this. Is it possible to have the current weather look like this up top? (Icon in the middle, condition description under the city, and current temp to the right?)

ya let me work on it check the twoline again ..i added a font size for the condition discription...if you copied it copy a second time again...check the pic it looks better

**mr.sparky** · 11-11-2008, 01:05 AM

You guys are the BEST KEEP UP ALL THE GREAT WORK

**Ice9812** · 11-11-2008, 01:17 AM

Originally Posted by Bear Hunter

Sweet brother....Ice comes through again! Thanks for posting this. Is it possible to have the current weather look like this up top? (Icon in the middle, condition description under the city, and current temp to the right?)

Here is the best i can get it for now...for some reason when i try to move the temp even over a px it splits the city and condition...im gonna work on it

twoLine.css

HTML Code:

#WeatherContainer{
    margin-top:-225px;
    width:100%;
    color:#1826e0;
    background-color: transparent;
    height:27px;
    
}

#TextContainer{
    font-size:17px;
    font-family:  Helvetica;
    text-shadow: rgba(0,0,0,0.7) 0 0 2px;
    margin:none;
    width:160px;
    z-index:1;
}

#city{
    text-transform:capitalize;
    font-variant: small-caps; 
    font-size: 0.8em;
    padding-left:0px;
}

#TextContainer p{
    margin:0;
    display:inline;
}

#city, #temp{
}

#temp{
    font-weight:bold;
    padding-left:65px;
    color:white;

}

#desc{
       text-transform:capitalize;
	display:none;
       font-size: 13px;
       color:white;
       z-index:2;
}

#weatherIcon{
    height:34px;
    width:34px;
    position:relative;
    margin-top:-46px;
    margin-left: 90px;
    
}

#middle {
	overflow:hidden;
       margin-top:10px;

}
#Forecast {
    font-size:11px;
    font-family: Helvetica;
    text-shadow: rgba(0,0,0,0.7) 0 0 2px;
    background-color: transparent;
    margin:none;
    text-align: center;
    width:160px;
    color:white;
    z-index:1;
}

#day1, #day2, #day3, #day4, #day5, #day0 {
	vertical-align:top;
	width:30em!important;width:13.3px;
	display:table-cell!important;display:inline;
	font-weight:bold;
       padding-top:3px;
       padding-left:2px;
}

#icon1, #icon2, #icon3, #icon4, #icon5, #icon0 {
    height:24px;
    width:24px;
	vertical-align:top;
	width:5em!important;width:13.3px;
	display:table-cell!important;display:inline;
}

#hi1, #hi2, #hi3, #hi4, #hi5, #hi0 {
	vertical-align:top;
	width:15em!important;width:33.3px;
	display:table-cell!important;display:inline;
    	font-color:#eeeeee;
}

#low1, #low2, #low3, #low4, #low5, #low0 {
	vertical-align:top;
	width:15em!important;width:13.3px;
	display:table-cell!important;display:inline;
    	font-color:#999999;
       padding-bottom:3px;
}

**Ice9812** · 11-11-2008, 01:58 AM

Its starting to get alittle cleaner.....i only have two theme folders running this theme..i have the theme with the weather widget, wallpaper rotation and clock in it..and the second theme with the calendar .........now im gonna work on getting the calendar in with the weather...prolly not gonna work but ill give it a shot

Edit :..ok i got everything to display from one html (as you can see in pic 4)..but now i have to work on getting it in ther right spots

Edit 2:
in pic five i have everything running from one Widget.html....it took awhile but i got it...here are the codes for weather and 6 day and calendar(youll have to add the calendar.js to you Private folder) from one html...if you would like a simple clock display like in my picks ill post it if someone wants it:

Now this theme runs from only one folder and only one Widget.html...

Bear if we can just get that calendar to auto update.....

Widget.html

HTML Code:

<?xml version="1.0" encoding="UTF-8"?>
<html><head>
    <base href="Private/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <style>
        body {
            background-color: none;
            margin: 0px 0 0 0px;
            padding: 0px 0 0 0;
            height: 480px;
            width: 320px;
        }
        TABLE.main {
				margin-left: 85px;
			}
			.month {
				color:#1826e0;
				font-family:Helvetica;
				font-size:12px;
				font-weight:bold;
				padding-top: 215px;
			}
			.daysofweek {
				font-size:9px;
				color: #808080;
				font-family:Helvetica;
				font-weight:bold;
			}
			.days {
				font-size:9px;
				color:white;
				font-family:Helvetica;
				font-weight:bold;
			}
		       .days #today {
				font-size:9px;
				color: #1826e0;
				font-family:Helvetica;
				font-weight:bold;
			}
	</style>
	<script type="text/javascript" src="configureMe.js"/>
	<script type="text/javascript" src="Wallpaper.js"/>
       <script type="text/javascript" src="calendar.js"/>

</head>
<body onload="onLoad()">
                <div class="info" id="DisplayCalendarIcon">
			<script type="text/javascript">
				var todaydate = new Date();
				var curmonth = todaydate.getMonth()+1;
				var curyear = todaydate.getFullYear();
				document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days"));


</script>

<div id="WeatherContainer">
<div id="TextContainer">
<p id="city">Loading...</p>
<p id="temp">-Âº</p>
<p id="desc">-</p>
</div>
<img id="weatherIcon" src=""/>
<div id="middle" >
</div>
<div id="Forecast" >
<div id="day0" ></div>
<div id="day1" ></div>
<div id="day2" ></div>
<div id="day3" ></div>
<div id="day4" ></div>
<div id="day5" ></div>
</div><div id="Forecast" >
<div id="icon0" ><img id="wIcon0" width="24" heigth="24" src=""/></div>
<div id="icon1" ><img id="wIcon1" width="24" heigth="24 "src=""/></div>
<div id="icon2" ><img id="wIcon2" width="24" heigth="24 "src=""/></div>
<div id="icon3" ><img id="wIcon3" width="24" heigth="24 "src=""/></div>
<div id="icon4" ><img id="wIcon4" width="24" heigth="24" src=""/></div>
<div id="icon5" ><img id="wIcon5" width="24" heigth="24" src=""/></div>
</div><div id="Forecast" >
<div id="hi0" ></div>
<div id="hi1" ></div>
<div id="hi2" ></div>
<div id="hi3" ></div>
<div id="hi4" ></div>
<div id="hi5" ></div>
</div><div id="Forecast" >
<div id="low0" ></div>
<div id="low1" ></div>
<div id="low2" ></div>
<div id="low3" ></div>
<div id="low4" ></div>
<div id="low5" ></div>
</div>

</div>



</body></html>

twoLine.css need to put everything in the right spot:

HTML Code:

#WeatherContainer{
    margin-top:-210px;
    padding-left:25px;
    width:100%;
    color:#1826e0;
    background-color: transparent;
    height:27px;
    
}

#TextContainer{
    font-size:17px;
    font-family:  Helvetica;
    text-shadow: rgba(0,0,0,0.7) 0 0 2px;
    margin:none;
    width:160px;
    z-index:1;
}

#city{
    text-transform:capitalize;
    font-variant: small-caps; 
    font-size: 0.8em;
    padding-left:0px;
}

#TextContainer p{
    margin:0;
    display:inline;
}

#city, #temp{
}

#temp{
    font-weight:bold;
    padding-left:65px;
    color:white;

}

#desc{
       text-transform:capitalize;
	display:none;
       font-size: 13px;
       color:white;
       z-index:2;
}

#weatherIcon{
    height:34px;
    width:34px;
    position:relative;
    margin-top:-46px;
    margin-left: 90px;
    
}

#middle {
	overflow:hidden;
       margin-top:10px;

}
#Forecast {
    font-size:11px;
    font-family: Helvetica;
    text-shadow: rgba(0,0,0,0.7) 0 0 2px;
    background-color: transparent;
    margin:none;
    text-align: center;
    width:160px;
    color:white;
    z-index:1;
}

#day1, #day2, #day3, #day4, #day5, #day0 {
	vertical-align:top;
	width:30em!important;width:13.3px;
	display:table-cell!important;display:inline;
	font-weight:bold;
       padding-top:3px;
       padding-left:2px;
}

#icon1, #icon2, #icon3, #icon4, #icon5, #icon0 {
    height:24px;
    width:24px;
	vertical-align:top;
	width:5em!important;width:13.3px;
	display:table-cell!important;display:inline;
}

#hi1, #hi2, #hi3, #hi4, #hi5, #hi0 {
	vertical-align:top;
	width:15em!important;width:33.3px;
	display:table-cell!important;display:inline;
    	font-color:#eeeeee;
}

#low1, #low2, #low3, #low4, #low5, #low0 {
	vertical-align:top;
	width:15em!important;width:13.3px;
	display:table-cell!important;display:inline;
    	font-color:#999999;
       padding-bottom:3px;
}

**bacman** · 11-11-2008, 02:56 AM

Originally Posted by Ice9812

im no expert but i help out when i can....sure ill help you but im sorry and this might be a stupid question.....but what exactly do you want to change?....
from what to what?....

Ice9812,
I just want to change "Mon" "Tue" "Wed".....etc with
"Lun", "Mar" ,Mer", "Jeu","Ven" and "Sam"
If you have an idea for the changes in the wallpaper.js do not work properly.

**Ice9812** · 11-11-2008, 03:08 AM

Originally Posted by bacman

Ice9812,
I just want to change "Mon" "Tue" "Wed".....etc with
"Lun", "Mar" ,Mer", "Jeu","Ven" and "Sam"
If you have an idea for the changes in the wallpaper.js do not work properly.

Ive never tried to change that but i just did and like you said it didnt work....the only thing that im thinking is that it gets the "Day Name" displays from the source weather.....but ill look into it more for you and let you know what i come up with...

Edit: here is and idea but it will only be acurate for the start of the week...if you edit the .css that your using for the #day0-5 to have the color: transparent..then edit the wallpaper to have the names you want there...like i said it would only be accurate in the start of the week but at least youll have those names there....

Thread: [RELEASE] OSX LEOPARD ADD-ONs

LinkBack

Thread Tools

Display

The Following 2 Users Say Thank You to Ice9812 For This Useful Post:

The Following User Says Thank You to Bernie-Mac For This Useful Post:

The Following User Says Thank You to Bear Hunter For This Useful Post:

The Following 3 Users Say Thank You to Ice9812 For This Useful Post:

The Following User Says Thank You to Bear Hunter For This Useful Post:

The Following 2 Users Say Thank You to Ice9812 For This Useful Post:

The Following User Says Thank You to mr.sparky For This Useful Post:

The Following User Says Thank You to Ice9812 For This Useful Post:

The Following User Says Thank You to Ice9812 For This Useful Post:

The Following 2 Users Say Thank You to Ice9812 For This Useful Post:

Posting Permissions