[RELEASE] OSX LEOPARD ADD-ONs

[iUnder]

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

Any change you can upload your private folder, because it's a totaly mess now here with use one widget.html . Thnx

[Bear Hunter]

Ice.... Your a miracle worker man! Sorry I fell asleep last night in the middle of this conversation LOL

For all those following this: Ice9812 has single handedly fixed two issues with the weather widget, and did some outstanding work to take it even further to combine the weather AND calendar into one HTML:

A. Weather Widget:

1. Combining the Weather Widget into one theme..vs. two.
2. Fixing the 10px shift....by modifying the code to combine the weather...

B. Calendar Widget:

1. Ice was able to get both the Weather and Calendar to work off one HTML file!...and everything lines up!

Ice9812 I want to personally thank you for staying up late last night and providing your fix!

[Ice9812]

Any change you can upload your private folder, because it's a totaly mess now here with use one widget.html . Thnx

Ice.... Your a miracle worker man! Sorry I fell asleep last night in the middle of this conversation LOL

For all those following this: Ice9812 has single handedly fixed two issues with the weather widget, and did some outstanding work to take it even further to combine the weather AND calendar into one HTML:

A. Weather Widget:

1. Combining the Weather Widget into one theme..vs. two.
2. Fixing the 10px shift....by modifying the code to combine the weather...

B. Calendar Widget:

1. Ice was able to get both the Weather and Calendar to work off one HTML file!...and everything lines up!

Ice9812 I want to personally thank you for staying up late last night and providing your fix!

Bear...Theres only one issue with the weather...and im gonna work on fixing this.....if someone lives in a city that has a long name, let say Huntington Beach, CA...the weather will look like this in pic 1.

To fix it open up the twoline.css and edit this part, padding left...for a longer city name padding left will be less for a short name the padding will be more:
, #temp{
font-weight:bold;
padding-left:60px;
color:white;

and the weather icon will have to be adjusted by changing the margin top and margin left:
#weatherIcon{
height:34px;
width:34px;
position:relative;
margin-top:-46px;
margin-left: 90px;

its takes alittle time to get the numbers adjusted just right but it can be done..as you can see in pic 2...so right now depending on the city the numbers might have to be tweaked a little ...but its worth having it all together....but ill see if i can come up with something else


iUnder...make sure you delete your old widget.html and wallpaper.html and the private folder from you theme before you add the new ones just to start fresh...

[jabbawalkee]

Ice, looks good man...I need a little help though. I have my set up with the calendar on top and weather widget below. Here's a picture. What do I need to edit on the twoline stylesheet to make it like this...



I will paste the stylesheets below (twoLine.css for 6-day and myopia.css for current weather) I am using for this setup if that helps, let me know! I tried to mess with the stylesheet for yours and it was a disaster haha. I'd really appreciate your help

twoLine.css:
#WeatherContainer{
margin-top:-403px;
width:50%;
color:white;
background-color: rgba(0,0,0,0);
height:20px;
}

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

#city{
text-transform:capitalize;
padding-left:10px;
}

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

#city, #temp, #date{
}

#temp{
font-weight:bold;
padding-left:5px;
}
#date{
font-size:11px;
font-weight:normal;
padding-left:26px;
z-index:1;
}

#desc{
text-transform:capitalize;
text-align: right;
padding-right:43px;
float:right;
z-index:1;
}

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

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

#Forecast {
font-size:11px;
font-family: sans-serif;
font-weight:bold;
text-shadow: rgba(0,0,0,0.7) 0 0 2px;
background-color: rgba(0,0,0,0);
margin:none;
text-align: center;
width:160px;
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;
padding-top:4px;
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:13.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...myopia.css
#WeatherContainer{
float:right;
margin-top:140px;
margin-right:255px;
color:white;
padding:0px 0px 0px 0px;
}

#TextContainer{
clear: both;
text-align: center;
font-family: sans-serif;
text-shadow: #fff 0 0 0px;
font-weight: bold;}

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

#TextContainer p{
padding:0;
margin:0;
}

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

#temp{
font-size: 1em;
}

#weatherIcon{
height:75px;
width:92px;
border:none;
float: right;
margin-top:-56px;
margin-right0px;
}

Or if you could just let me know what values to adjust (on your oneline stylesheet) to bring the calendar up/down and to bring the weather widget up/down that would be amazing...thanks man!

[Ice9812]

Ice, looks good man...I need a little help though. I have my set up with the calendar on top and weather widget below. Here's a picture. What do I need to edit on the twoline stylesheet to make it like this...



I will paste the stylesheets below (twoLine.css for 6-day and myopia.css for current weather) I am using for this setup if that helps, let me know! I tried to mess with the stylesheet for yours and it was a disaster haha. I'd really appreciate your help

Hi...
if you want to use mine i would use the private folder i uploaded in the above post....and you shouldnt have any problems....

as for the weather...to move up and down you need to open the twoline.css and edit margin-top and that will move all the weather up:
#WeatherContainer{
margin-top:-210px;
padding-left:25px;
width:100%;
color:#1826e0;
background-color: transparent;
height:27px;

as for the calendar open the widget.html and edit padding-top and that will move the calendar up and down:
TABLE.main {
margin-left: 85px;
}
.month {
color:#1826e0;
font-family:Helvetica;
font-size:12px;
font-weight:bold;
padding-top: 215px;

post your wallpaper and ill set it up for you.....and post you city and name

[jabbawalkee]

Ahhh awesome thanks...wallpaper attached below and my city state is: Orlando, Florida

I appreciate it!

[Ice9812]

Ahhh awesome thanks...wallpaper attached below and my city state is: Orlando, Florida

I appreciate it!

for some reason your wallpaper is not showing up for me....would you mind emailing it to me..[email protected]

[jabbawalkee]

Just sent! Let me know how it works. I was just able to pull the calendar up but can't move the weather down

[Ice9812]

Just sent! Let me know how it works. I was just able to pull the calendar up but can't move the weather down

here you go.....dl that private folder from above and copy and paste these two files into it and you should ahve no problem...
would you mind emailing me that wallpaper you have with the shadow of the apple on the brown wood...just the wallpaper not with any widgets on it..Thank you

here is the widget.html:

<?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: 40px;
			}
			.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>

and here is the twoLine.css:

#WeatherContainer{
    margin-top:17px;
    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;
}

[jabbawalkee]

Awesome thanks...just set it all up and it looks good. However, one small problem...the temperature (78 degrees) is overlapping the weather icon. I just sent you the wallpaper you requested btw.

EDIT: Nevermind I figured out the color change...but still need to slide the temp over to the right a tad, let me know what to change for that. Thanks!

[schtozo]

[Ice9812]

Awesome thanks...just set it all up and it looks good. However, one small problem...the temperature (78 degrees) is overlapping the weather icon. I just sent you the wallpaper you requested btw.

EDIT[/B]: Nevermind I figured out the color change...but still need to slide the temp over to the right a tad

inside the twoline.css edit these..play with both of them tweak them both if you move the ttemp too far away it will go down and create another line...just play with both numbers

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

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

Thank you for the wallpaper

edit: i just loaded yours back in mine and it looks fine ....does yours look different than this?

[Bear Hunter]

Awesome work guys!

I'd like to thank Ice9812 again for being instrumental on making these widgets even better and more user friendly.

I haven't tried to combine everything into one HTML yet...(I'm a slow learner)....what I did was take Ice9812's modification to just the weather, and tweaked it to see if I could get it to do what I wanted. None of this would have been possible without Ice9812's hard work

I tried and tried to keep the weather discription ie) "Sunny", but it is not "online" with the temp and instead...below. Here is what it looked like: -- I couldn't get it to fit right.



So after some more modifications to make the "description" transparent (wouldn't work if I took it out of the .html or .css files......here it is (Ice9812...please check). I made some modifications to the HTML and .CSS files and was able to get the weather widget to display current and 6 day forecast they way it looked before, except this time it is all in-one thanks to Ice. Due to the fact that this is now combined...there is no way to move the current weather icon any lower without pushing the 6 day forecast down.




WIDGET.HTML - Got rid of padding and made adjustments in .css only

<?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;
        }
	</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>

twoLine.CSS

#WeatherContainer{
    margin-top:85px;
    margin-left:25px;
    width:100%;
    color:white;
    background-color: transparent;
    height:27px;
    
}

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

#city{
    text-transform:capitalize;
    font-variant: small-caps; 
    font-size: 10px;
    font-weight:bold;
    padding-left:0px;
}

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

#city, #temp{
}

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

}

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

#weatherIcon{
    height:55px;
    width:57px;
    position:inline;
    margin-top:-49px;
    margin-left: 55px;
    
}

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

}
#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:0px;
       padding-left:0px;
}

#icon1, #icon2, #icon3, #icon4, #icon5, #icon0 {
    height:24px;
    width:24px;
    padding-top:4px;
	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;
}

That being said...this is just a combination of Current and 6 Day forecast. I haven't combined all of the widgets yet. You will need to delete the "Wallpaper.html", "LockBackground.html", and "Private Folder" from your Leopard theme folder and replace the two files above inside your "Reduced 6 Day Forecast.theme"

[Ice9812]

Awesome work guys!

I'd like to thank Ice9812 again for being instrumental on making these widgets even better and more user friendly.

I haven't tried to combine everything into one HTML yet...(I'm a slow learner)....what I did was take Ice9812's modification to just the weather, and tweaked it to see if I could get it to do what I wanted. None of this would have been possible without Ice9812's hard work

I tried and tried to keep the weather discription ie) "Sunny", but it is not "online" with the temp and instead...below. Here is what it looked like: -- I couldn't get it to fit right.



So after some more modifications to make the "description" transparent (wouldn't work if I took it out of the .html or .css files......here it is (Ice9812...please check). I made some modifications to the HTML and .CSS files and was able to get the weather widget to display current and 6 day forecast they way it looked before, except this time it is all in-one thanks to Ice. Due to the fact that this is now combined...there is no way to move the current weather icon any lower without pushing the 6 day forecast down.




WIDGET.HTML - Got rid of padding and made adjustments in .css only



That being said...this is just a combination of Current and 6 Day forecast. I haven't combined all of the widgets yet. You will need to delete the "Wallpaper.html", "LockBackground.html", and "Private Folder" from your Leopard theme folder and replace the two files above inside your "Reduced 6 Day Forecast.theme"

looks good...now lets get this calendar to update........
are you running the calendar seperate ?
i dont see it in the html
i just tried your code and added the description...i like it
check it out

[jabbawalkee]

Thank you for the wallpaper

edit: i just loaded yours back in mine and it looks fine ....does yours look different than this?

It didn't look exactly like that at first...the temp was covering the weather icon. I increased the padding for temp to 78px and now it looks much better (almost identical to yours). Any idea how to make the temp size bigger (like in bearhunter's screenie)?

[Bear Hunter]

Ice,

Yours looks so nice...it makes me want to rebuild the weather widget background to make the lines "line up". Looks great man....I like the description on yours. I haven't combined all widgets yet. Thanks to you right now we have the following:

1. Weather Widget...all in one (Thanks to Ice9812)....This means no more sporatic "dropping" of the 6 day forecast, and there is no need to run current weather inside your Leopard theme folder.

2. Calendar Widget

3. Clock Widget

I need to go back and re-read everything you wrote about getting everything into one HTML. I think that will be a nice option to have so people can choose what they want....or run them all on one HTML.

Sometime tonight I will re-upload these widgets and update the links. Your contribution, just simplified a lot of problems people were having installing this theme.....with your permission, I would like to give you full credit for the "all-in-one" weather widget.....and when I figure out how to get everything to one HTML...give you full cred for that as well.

[samber]

My latest Setup. I tried various combination but there was too much lag. So i finally settled on this one where things seem to be working really smooth.



Let me know your thoughts

[Bear Hunter]

Guys...I was able to get around "not being able to move the current weather icon down" more....

Being inspired by Ice... I am in the process of re-making the weather widgets to display the condition description.... What do you think?

This is a work in progress...ignore the fact that things don't color match right now.

I'll post the mod to the code here in a little bit:

[Bernie-Mac]

Looks great bear, and with the new code we get weather description (partly cloudy, etc.) and it solves the shifting down problem?

[Ice9812]

Ice,

Yours looks so nice...it makes me want to rebuild the weather widget background to make the lines "line up". Looks great man....I like the description on yours. I haven't combined all widgets yet. Thanks to you right now we have the following:

1. Weather Widget...all in one (Thanks to Ice9812)....This means no more sporatic "dropping" of the 6 day forecast, and there is no need to run current weather inside your Leopard theme folder.

2. Calendar Widget

3. Clock Widget

I need to go back and re-read everything you wrote about getting everything into one HTML. I think that will be a nice option to have so people can choose what they want....or run them all on one HTML.

Sometime tonight I will re-upload these widgets and update the links. Your contribution, just simplified a lot of problems people were having installing this theme.....with your permission, I would like to give you full credit for the "all-in-one" weather widget.....and when I figure out how to get everything to one HTML...give you full cred for that as well.

i posted the whole folder all the widgets together with the calendar a page or so back dl that file and than just replace the twoline.css with yours......im working on adding your clock to it...but i dont use it so i have to get it working first.....ill let you know what i come up with....you can add whatever you would like to the theme ...im sharing what i come up with to make it easier......