Typophone Weather vernünftig darstellen

[Schranzgesteuert]

Moin!

Ich hab' mir das Typophone Weather geladen und das passt hinten und vorne nicht auf meinen Lockscreen...

IMG_0598.jpg

Die Uhrzeit ist zu breit, der Doppelpunkt zwischen Stunden und Minuten ist irgendwie zu hoch, und auch das Datum wird ein wenig abgeschnitten!?

Außerdem ist die Angabe zwischen der Temperatur und dem Celsius Zeichen ziemlich weit auseinander gezerrt...

Über Google habe ich rausfinden können, dass man die Style.css bearbeiten muss...

Nur, wie ist die Datei denn bitte richtig umzuschreiben???

Und auch ein Hintergrundbild wäre was feines, denn schlichtes schwarz ist mit zu langweilig! ^^

Und kann man die weißes Farben auch ändern??

Ich hänge mal den Inhalt der Style.css 1:1 hier mit an, es wäre echt prima wenn mir hier jemand helfen könnte!

@font-face {
font-family: 'HelveticaNeueLT25UltLightRegu';
src: local('HelveticaNeue LT 25 UltLight'), local('HelveticaNeueLTUltraLight'), url('helvetica_lt_25_ultra_light-webfont.svg#webfontwDzQ26Ug') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeueLT45LightRegular';
src: local('HelveticaNeue LT 45 Light'), local('HelveticaNeueLTLight'), url('helvetica_lt_45_light-webfont.svg#webfontc7T4Z6tx') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeueLT95BlackRegular';
src: local('HelveticaNeue LT 95 Black'), local('HelveticaNeueLTBlack'), url('helvetica_lt_95_black-webfont.svg#webfontTOzeoXFt') format('svg');
font-weight: normal;
font-style: normal;
}




*{
-webkit-tap-highlight-color:transparent;
}
body {
margin: 0;
padding: 278px 0 0 0;
height: 480px;
width: 320px;
background-color:black;
color:white;
text-shadow:0px 0px 5px black;
font-family:"helvetica";
overflow:hidden; /*just like my women*/
}
#background
{
display:block;
width:320px;
height:480px;
background:black url('LockBackground.png') no-repeat 0px 0px;
position:absolute;
top:0px;
left:0px;
background-size: 100%;
}
@-webkit-keyframes loaderFadeOut {
0% {
opacity:.8;
}
50% {
opacity:.4;
}
100% {
opacity:0;
}
}
#loader
{
-webkit-animation-name: loaderFadeOut;
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
opacity:.8;
background:url("ajax-loader.gif") no-repeat scroll center center black;
display:none;
height:80px;
left:120px;
position:absolute;
top:300px;
width:80px;
-moz-border-radius: 15px;
border-radius: 15px;
}
@-webkit-keyframes loaderFadeIn {
0% {
opacity:0;
}
50% {
opacity:.4;
}
100% {
opacity:.8;
}
}
#loader.visible
{
display:block;
-webkit-animation-name: loaderFadeIn;
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#timeWrap
{
top:0px;
position:absolute;
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateY(0px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
background:black url('LockBackground.png');
display:block;
height:280px;
overflow:hidden;
width:320px;
background-size: 100%;
background-repeat:no-repeat;
}
#timeWrap.showSelector
{
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateY(-100px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
border-bottom:solid 1px #303030;
}
#locationSelectorBG
{
position:absolute;
height:94px;
display:block;
top:181px;
width:320px;
background:transparent url('linen.png') no-repeat center;
}
#locationSelector
{
display:block;
height:94px;
padding-top:38px;
position:absolute;
top:176px;
width:1600px;
-webkit-transform: translateX(0px);
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-moz-box-shadow:inset 0 0 10px #000000;
}
#locationSelector span
{
text-shadow:0 0 5px black;
width:220px;
font-weight:bold;
text-align:center;
font-size:1.2em;
display:inline-block;
opacity:.7;
}
.location
{
text-overflow: ellipsis;
margin:0px 50px;
overflow: hidden;
white-space:nowrap;
}
#locationSelector span.active
{
text-shadow:0 0 10px black;
font-size:1.5em;
opacity:1;
}
.locationArrows
{
position:absolute;
width:55px;
height:94px;
display:none;
top:183px;
}
#locationLeft
{
background:url('left.png');
left:0px;
}
#locationLeft.visible, #locationRight.visible
{
display:block;
}
#locationRight
{
background:url('right.png');
left:265px;
}
#day {
top:170px;
left:135px;
font-family:HelveticaNeue-Bold;
font-size:28px;
text-transform:uppercase;
letter-spacing:3px;
}

#dayNumeric {
top:147px;
left:-13px;
font-size:120px;
text-transform:uppercase;
background-color:transparent!important;
position:absolute;
font-family:HelveticaNeue;
}

#month {
top:117px;
left:13px;
text-transform:uppercase;
font-family:"HelveticaNeueLT45LightRegular";
font-size:64px;
letter-spacing:12px;
}

#year {
top:201px;
left:130px;
font-family:"HelveticaNeueLT25UltLightRegu";
font-size:80px;
font-weight:100;
}

#divtable {
top: -165px;
left: -18px;
height: 461px;
}

#hr1, #hr2, #mn1, #mn2 {
font-size:129px;
font-family:HelveticaNeue-Bold;
top:3px;
position:relative;
}

#ampm {
width:40;
height:85;
}

#unlock {
top:422px;
left:175px;
}

@-webkit-keyframes weatherFadeIn {
0% {
opacity:0;
}
50% {
opacity:.5;
}
100% {
opacity:1;
}
}
#weather{
top:275px;
height:400px;
width:1600px;
position:absolute;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: .3s;
-webkit-timing-function: ease-in-out;
-webkit-transform: translateY(275px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
display:block;
font-family:HelveticaNeue;
opacity:1;
}
.weatherCity, .weatherCurrently
{
left:100px;
width:250px;
}
.weatherTemp
{
font-size:5em;
left:100;
width:250px;
top:35px;
}
.weatherTempHighLow
{
font-size:2.0em;
left:100;
width:250px;
top:38px;
}
#weather1Low, #weather2Low
{
font-size:.8em;
position:relative;
top:-12px;
}
.label
{
width:80px;
display:inline-block;
}
.bold
{
font-size:1.4em;
font-weight:bold;
}
.weatherCurrently
{
top:120px;
text-transform:capitalize;
}
.weatherThumb
{
top:10px;
}

#weather .weatherSection
{
position:relative;
float:left;
width:320px;
height:200px;
top:-15px;
}

@-webkit-keyframes weatherFadeOut {
0% {
opacity:1;
}
50% {
opacity:.5;
}
100% {
opacity:.0;
}
}
#weather.loading
{
-webkit-animation-name: weatherFadeOut;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#weather.forecast0
{
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(0px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
#weather.forecast1
{
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(-320px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
#weather.forecast2
{
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(-640px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
#weather.showSelector
{
-webkit-transform: translateX(0px);
border-top:solid 1px #303030;
top:274px;
}
.weatherCurrently, .weatherThumb, .weatherCity, .weatherTemp, .weatherTempHighLow{
position:absolute;
text-shadow:0px 0px 5px black;
}
#day, #month, #year, #divtable, #mainDiv, #unlock {
position:absolute;
}
#unlock.faded
{
opacity:.4;
}
@-webkit-keyframes opacity {
0% {
opacity:1;
}
50% {
opacity:.4;
}
100% {
opacity:1;
}
}
.hidden
{
display:none!important;
}
#unlock {
-webkit-animation-name: opacity;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
font-size:30px;
text-shadow:0px 0px 5px black;
font-family:"HelveticaNeueLT95BlackRegular";
top:420px;
text-align:right;
width:300px;
display:block;
left:0px;
}

[KölscheJeck]

Hier habe ich dir mal das Datum und den Tag angepasst. Die Doppelpunkte von der Uhr müssen irgendwo in dem Ordner als .png Bilddatei liegen. Bearbeite die einfach mal, also öffne das bild und zieh die Doppelpunkte tiefer. Oder häng die datei mal hier an dann mach ich es falls du es nciht kannst. Zur Größe der Uhr da muss noch irgendwo im Ordner eine andere CSS Datei sein oder eine HTML Datei sein oder du hast nicht den ganzen Code hier rein kopiert da in deinem code keien Uhr auftaucht.

Farbe ändern dürfte auch kein Problem sein nur brauch ich dafür den kompletten Code.

Zum Hintergrund:

In den meisten fällen liegt in dem ordner des Themes/LS eine datei Lockbackground.png oder background.png. Dieses bild einfach mit deinem Bild was du als Hintergrund verwenden möchtest ersetzen.

@font-face {
font-family: 'HelveticaNeueLT25UltLightRegu';
src: local('HelveticaNeue LT 25 UltLight'), local('HelveticaNeueLTUltraLight'), url('helvetica_lt_25_ultra_light-webfont.svg#webfontwDzQ26Ug') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeueLT45LightRegular';
src: local('HelveticaNeue LT 45 Light'), local('HelveticaNeueLTLight'), url('helvetica_lt_45_light-webfont.svg#webfontc7T4Z6tx') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLT95BlackRegular';
	src: local('HelveticaNeue LT 95 Black'), local('HelveticaNeueLTBlack'), url('helvetica_lt_95_black-webfont.svg#webfontTOzeoXFt') format('svg');
	font-weight: normal;
	font-style: normal;
}




*{
-webkit-tap-highlight-color:transparent;
}
body {
margin: 0;
padding: 278px 0 0 0;
height: 480px;
width: 320px;
background-color:black;
color:white;
text-shadow:0px 0px 5px black;
font-family:"helvetica";
overflow:hidden; /*just like my women*/
}
#background
{
display:block;
width:320px;
height:480px;
background:black url('LockBackground.png') no-repeat 0px 0px;
position:absolute;
top:0px;
left:0px;
background-size: 100%;
}
@-webkit-keyframes loaderFadeOut {
0% {
opacity:.8;
}
50% {
opacity:.4;	
}
100% {
opacity:0;
}
}
#loader
{
-webkit-animation-name: loaderFadeOut;
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
opacity:.8;
background:url("ajax-loader.gif") no-repeat scroll center center black;
display:none;
height:80px;
left:120px;
position:absolute;
top:300px;
width:80px;
-moz-border-radius: 15px;
border-radius: 15px;
}
@-webkit-keyframes loaderFadeIn {
0% {
opacity:0;
}
50% {
opacity:.4;	
}
100% {
opacity:.8;
}
}
#loader.visible
{
display:block;
-webkit-animation-name: loaderFadeIn;
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#timeWrap
{
top:0px;
position:absolute;
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateY(0px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
background:black url('LockBackground.png');
display:block;
height:280px;
overflow:hidden;
width:320px;
background-size: 100%;
background-repeat:no-repeat;
}
#timeWrap.showSelector
{
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateY(-100px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
border-bottom:solid 1px #000000;
}
#locationSelectorBG
{
position:absolute;
height:94px;
display:block;
top:181px;
width:320px;
background:transparent url('linen.png') no-repeat center;
}
#locationSelector
{
display:block;
height:94px;
padding-top:38px;
position:absolute;
top:176px;
width:1600px;
-webkit-transform: translateX(0px);
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-moz-box-shadow:inset 0 0 10px #000000;
}
#locationSelector span
{
text-shadow:0 0 5px black;
width:220px;
font-weight:bold;
text-align:center;
font-size:1.2em;
display:inline-block;
opacity:.7;
}
.location
{
text-overflow: ellipsis;
margin:0px 50px;
overflow: hidden;
white-space:nowrap;
}
#locationSelector span.active
{
text-shadow:0 0 10px black;
font-size:1.5em;
opacity:1;
}
.locationArrows
{
position:absolute;
width:55px;
height:94px;
display:none;
top:183px;
}
#locationLeft
{
background:url('left.png');
left:0px;
}
#locationLeft.visible, #locationRight.visible
{
display:block;
}
#locationRight
{
background:url('right.png');
left:265px;
}
#day {
top:180px;
left:135px;
font-family:HelveticaNeue-Bold;
font-size:33px;
text-transform:uppercase;
letter-spacing:3px;
}

#dayNumeric {
top:166px;
left:5px;
font-size:100px;
text-transform:uppercase;
background-color:transparent!important;
position:absolute;
font-family:HelveticaNeue;
}

#month {
top:117px;
left:13px;
text-transform:uppercase;
font-family:"HelveticaNeueLT45LightRegular";
font-size:64px;
letter-spacing:12px;
}

#year {
top:201px;
left:130px;
font-family:"HelveticaNeueLT25UltLightRegu";
font-size:80px;
font-weight:100;
}

#divtable {
top: -165px;
left: -18px;
height: 461px;
}

#hr1, #hr2, #mn1, #mn2 {
font-size:129px;	
font-family:HelveticaNeue-Bold;
top:3px;
position:relative;
}

#ampm {
width:40;
height:85;
}

#unlock {
top:422px;
left:175px;
}

@-webkit-keyframes weatherFadeIn {
0% {
opacity:0;
}
50% {
opacity:.5;	
}
100% {
opacity:1;
}
}
#weather{
top:275px;
height:400px;
width:1600px;
position:absolute;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: .3s;
-webkit-timing-function: ease-in-out;
-webkit-transform: translateY(275px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
display:block;
font-family:HelveticaNeue;
opacity:1;
}
.weatherCity, .weatherCurrently
{
left:100px;
width:250px;
}
.weatherTemp
{
font-size:5em;
left:100;
width:250px;
top:35px;
}
.weatherTempHighLow
{
font-size:2.0em;
left:100;
width:250px;
top:38px;
}
#weather1Low, #weather2Low
{
font-size:.8em;
position:relative;
top:-12px;
}
.label
{
width:80px;
display:inline-block;
}
.bold
{
font-size:1.4em;
font-weight:bold;
}
.weatherCurrently
{
top:120px;
text-transform:capitalize;
}
.weatherThumb
{
top:10px;
}

#weather .weatherSection
{
position:relative;
float:left;
width:320px;
height:200px;
top:-15px;
}

@-webkit-keyframes weatherFadeOut {
0% {
opacity:1;
}
50% {
opacity:.5;	
}
100% {
opacity:.0;
}
}
#weather.loading
{
-webkit-animation-name: weatherFadeOut;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#weather.forecast0
{
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(0px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
#weather.forecast1
{
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(-320px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
#weather.forecast2
{
-webkit-transition: -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(-640px);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
#weather.showSelector
{
-webkit-transform: translateX(0px);
border-top:solid 1px #303030;
top:274px;
}
.weatherCurrently, .weatherThumb, .weatherCity, .weatherTemp, .weatherTempHighLow{
position:absolute;
text-shadow:0px 0px 5px black;
}
#day, #month, #year, #divtable, #mainDiv, #unlock { 
position:absolute;
}
#unlock.faded
{
opacity:.4;
}
@-webkit-keyframes opacity {
0% {
opacity:1;
}
50% {
opacity:.4;	
}
100% {
opacity:1;
}
}
.hidden
{
	display:none!important;
}
#unlock {
-webkit-animation-name: opacity;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
font-size:30px;
text-shadow:0px 0px 5px black;
font-family:"HelveticaNeueLT95BlackRegular";
top:420px;
text-align:right;
width:300px;
display:block;
left:0px;
}