Hi, im making some changes on damino theme, and im trying to use a weather widget, but since i don't know anything about coding html or css its been a pita.
First of all my theme without the widget running looks like this:
Then on the widget html, it calls a file overlay.png which is a 480x320 image but it only has the bar at the bottom colored black with 50% transparency. When it loads it shows like this:
The thing is I already colored the text on the css to white, but somehow, it overlaps with the transparent overlay.png.
Is there a way i can make the text full white and mantain the transparency of the overlay.png. By the way, it happens the same if I change the dock png to show all the bottom transparent.
Another thing, is there a way I can force it to show only caps? to match the icons.
These are the widget html and css style codes:
Widget.html
Code:
<html>
<head><title>newclock</title></head>
<style>
body {
margin: 0;
/*background: url(Wallpaper.png) no-repeat;*/
background-color: none;
height: 480px;
width: 320px;
}
td#Backgrounds
{
margin-top: -1px;
position: absolute; top: 0px; right: 0px; down: 0px; left: -1px;
}
SPAN#date
{
font-family: Helvetica;
font-weight: normal;
text-align: right;
color: white;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
font-size: 14px;
padding-right:15px;
}
</style>
</head>
<body>
<table><tr>
<td id="Backgrounds"> <img src="Overlay.png"></img> </td>
</tr></table>
<head>
<base href="Private/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="configureMe.js"/>
<script type="text/javascript" src="Wallpaper.js"/>
</head>
</body>
<body onload="onLoad()">
<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>
</body>
</html>
Style sheet:
Code:
/* Inspired by Rainmanbk */
#WeatherContainer{
margin-top:440px;
width:100%;
color:white;
background-color:transparent;
height:27px;
padding-top:7px;
}
#TextContainer{
font-size:15
px; font-family: Helvetica; color:white;
margin:none;
width:320px;
}
#city{
text-transform:capitalize;
padding-left:10px;
}
#TextContainer p{
margin:0;
display:inline;
}
#city,
#temp{
}
#temp{
font-weight:bold;
color=white; padding-left:5px;
}
#desc{
text-transform:capitalize; color=white;
text-align: right;
padding-right:10px;
float:right;
}
#weatherIcon{
height:32px;
width:32px;
position:relative;
margin-top:-23px;
margin-left:144px;
}
Thanks in advance.
07-08-2009, 10:42 AM
Linear Mode
