[HowTo] Der Theme Baukasten für Anfänger und Fortgeschrittene

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • [HowTo] Der Theme Baukasten für Anfänger und Fortgeschrittene

      Ich möchte Euch heute und in den folgenden Tagen meinen Theme Bauksten vorstellen. Er bietet meiner Meinung nach einen "einfachen" Einstieg in die Winterboard Theme Erstellung.
      Er enthält einige Widgets die beliebig kombiniert werden können und einfach in einer Setup Datei An/Aus geschaltet werden. Für Euch bleibt dann "Nur" noch die Positionierung und der grafische Feinschliff. :wink:
      Erst mal eine Übersicht, was schon alles enthalten ist.


      1. Uhr
      2. Kalender
      3. Line Kalender
      4. Wetter
      5. Wetter forecast
      6. UniAW5.0 credits to Ian Nicoll
      7. Wall Weather
      8. slideshow


      Und das ganze gibt es natürlich schon in Deutsch und Englisch.
    • Das Theme besitzt lokales und GPS Wetter. D.h., ihr gebt wie gewohnt euren Ort als WOEID in der Setup Datei ein. Sollte auf dem Gerät die location.txt vorhanden sein, schaltet das Theme automatisch auf GPS Wetter um.
      Die Demo soll Euch nur einen Überblick der vorhanden Widgets und Elemente verschaffen. Aber keine Angst, es sind alle Informationen, die die einzellnen API's hergeben, vorhanden. Ihr braucht sie nur noch Zuweisen und Anzeigen.
      Eine Übersicht der Funktionen.

      Wetter

      Quellcode

      1. // The location of this forecast
      2. obj.city = findChild(effectiveRoot, "yweather:location").getAttribute("city");
      3. // Units for various aspects of the forecast
      4. obj.tempunit = findChild(effectiveRoot, "yweather:units").getAttribute("temperature");
      5. obj.visibilityunit = findChild(effectiveRoot, "yweather:units").getAttribute("distance");
      6. obj.pressureunit = findChild(effectiveRoot, "yweather:units").getAttribute("pressure");
      7. obj.windunit = findChild(effectiveRoot, "yweather:units").getAttribute("speed");
      8. // Forecast information about wind
      9. obj.chill = findChild(effectiveRoot, "yweather:wind").getAttribute("chill");
      10. obj.winddir = findChild(effectiveRoot, "yweather:wind").getAttribute("direction");
      11. obj.windspeed = findChild(effectiveRoot, "yweather:wind").getAttribute("speed");
      12. // Forecast information about current atmospheric pressure, humidity, and visibility
      13. obj.humidity = findChild(effectiveRoot, "yweather:atmosphere").getAttribute("humidity");
      14. obj.visibility = findChild(effectiveRoot, "yweather:atmosphere").getAttribute("visibility");
      15. obj.pressure = findChild(effectiveRoot, "yweather:atmosphere").getAttribute("pressure");
      16. obj.rising = findChild(effectiveRoot, "yweather:atmosphere").getAttribute("rising");
      17. // Forecast information about current astronomical conditions
      18. obj.sunrise = findChild(effectiveRoot, "yweather:astronomy").getAttribute("sunrise");
      19. obj.sunset = findChild(effectiveRoot, "yweather:astronomy").getAttribute("sunset");
      20. // The current weather conditions
      21. conditionTag = findChild(findChild(effectiveRoot, "item"), "yweather:condition");
      22. obj.description = conditionTag.getAttribute("text");
      23. obj.icon = conditionTag.getAttribute("code");
      24. obj.temp = conditionTag.getAttribute("temp");
      25. obj.date = conditionTag.getAttribute("date");
      Alles anzeigen

      Wetter forecast

      Quellcode

      1. obj.Today = xmlDoc2.getElementsByTagName("forecast")[0].getAttribute("day");
      2. obj.TodayHi = xmlDoc2.getElementsByTagName("forecast")[0].getAttribute("high");
      3. obj.TodayLo = xmlDoc2.getElementsByTagName("forecast")[0].getAttribute("low");
      4. obj.TodayCode = xmlDoc2.getElementsByTagName("forecast")[0].getAttribute("code");
      5. obj.Day1 = xmlDoc2.getElementsByTagName("forecast")[1].getAttribute("day");
      6. obj.Day1Hi = xmlDoc2.getElementsByTagName("forecast")[1].getAttribute("high");
      7. obj.Day1Lo = xmlDoc2.getElementsByTagName("forecast")[1].getAttribute("low");
      8. obj.Day1Code = xmlDoc2.getElementsByTagName("forecast")[1].getAttribute("code");
      9. obj.Day1Date = xmlDoc2.getElementsByTagName("forecast")[1].getAttribute("date");
      10. obj.Day2 = xmlDoc2.getElementsByTagName("forecast")[2].getAttribute("day");
      11. obj.Day2Hi = xmlDoc2.getElementsByTagName("forecast")[2].getAttribute("high");
      12. obj.Day2Lo = xmlDoc2.getElementsByTagName("forecast")[2].getAttribute("low");
      13. obj.Day2Code = xmlDoc2.getElementsByTagName("forecast")[2].getAttribute("code");
      14. obj.Day2Date = xmlDoc2.getElementsByTagName("forecast")[2].getAttribute("date");
      15. obj.Day3 = xmlDoc2.getElementsByTagName("forecast")[3].getAttribute("day");
      16. obj.Day3Hi = xmlDoc2.getElementsByTagName("forecast")[3].getAttribute("high");
      17. obj.Day3Lo = xmlDoc2.getElementsByTagName("forecast")[3].getAttribute("low");
      18. obj.Day3Code = xmlDoc2.getElementsByTagName("forecast")[3].getAttribute("code");
      19. obj.Day3Date = xmlDoc2.getElementsByTagName("forecast")[3].getAttribute("date");
      20. obj.Day4 = xmlDoc2.getElementsByTagName("forecast")[4].getAttribute("day");
      21. obj.Day4Hi = xmlDoc2.getElementsByTagName("forecast")[4].getAttribute("high");
      22. obj.Day4Lo = xmlDoc2.getElementsByTagName("forecast")[4].getAttribute("low");
      23. obj.Day4Code = xmlDoc2.getElementsByTagName("forecast")[4].getAttribute("code");
      24. obj.Day4Date = xmlDoc2.getElementsByTagName("forecast")[4].getAttribute("date");
      Alles anzeigen

      GeoLocation

      Quellcode

      1. obj.quality = data.ResultSet.Results[0].quality;
      2. obj.latitude = data.ResultSet.Results[0].latitude;
      3. obj.longitude = data.ResultSet.Results[0].longitude;
      4. obj.radius = data.ResultSet.Results[0].radius;
      5. obj.line1 = data.ResultSet.Results[0].line1;
      6. obj.line2 = data.ResultSet.Results[0].line2;
      7. obj.line3 = data.ResultSet.Results[0].line3;
      8. obj.line4 = data.ResultSet.Results[0].line4;
      9. obj.house = data.ResultSet.Results[0].house;
      10. obj.street = data.ResultSet.Results[0].street;
      11. obj.postal = data.ResultSet.Results[0].postal;
      12. obj.neighborhood = data.ResultSet.Results[0].neighborhood;
      13. obj.city = data.ResultSet.Results[0].city;
      14. obj.county = data.ResultSet.Results[0].county;
      15. obj.state = data.ResultSet.Results[0].state;
      16. obj.country = data.ResultSet.Results[0].country;
      17. obj.countrycode = data.ResultSet.Results[0].countrycode;
      18. obj.statecode = data.ResultSet.Results[0].statecode;
      19. obj.woeid = data.ResultSet.Results[0].woeid;
      20. woeid = data.ResultSet.Results[0].woeid;
      21. obj.woetype = data.ResultSet.Results[0].woetype;
      22. obj.uzip = data.ResultSet.Results[0].uzip;
      Alles anzeigen


      Fortsetzung folgt.....

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von oldster ()

    • Das Theme Verzeichnis

      Die einzellnen Ordner und deren Bedeutung/Verwendung:
      images -> Ordner für alle Bilddateien (Background, Layer, Banner, usw.)
      large_icons - > Ordner für die Standard Wetter Icons
      script -> Hier müsst ihr nur rein, wenn das Theme erweitert werden soll
      slideshow -> Ordner für die Bilddateien der slideshow
      small_icons -> Ordner für die forecast Wetter Icons
      style ->Euer Lieblingsordner. Da stellt ihr Position und Größe der einzellnen Elemente ein.
      UniAW -> wie der Name schon sagt
      wall_icons -> Ordner für die Wall Wetter Icons
      LockBackground.html -> Wollt ihr das Theme auf dem HomeSreen haben, einfach in Wallpaper.html umbenennen
      myLocation.txt -> Nur für mich. Damit ich das Theme mit Adobe Dreamweaver testen kann.
      setup.js -> wie der Name schon sagt
    • Die setup.js

      Quellcode

      1. /****************************
      2. * theme construction kit *
      3. * created by oldster *
      4. * Version 1.0 24.05.2012 *
      5. * [URL]http://itheming.de/[/URL] *
      6. ****************************/
      7. var locale = 20065445; // WOEID
      8. var weather_unit = 'c'; // cELSIUS (German) - fAHRENHEIT (English)
      9. var show_weather_wall = false;
      10. var show_uniaw = false; // UniAW5.0 update by oldster
      11. var show_clock = true;
      12. var hour24 = true; // false 12h am/pm
      13. var show_sec = true;
      14. var show_calendar = true;
      15. var show_linecalendar = false;
      16. var show_forecast = true;
      17. var show_weather = true;
      18. var show_slideshow = false;
      19. var intervall = 15; // minutes
      Alles anzeigen

      Wenn ihr das Theme auf "Englisch" umstellt (var weather_unit = 'f') , ändern sich auch automatisch die Einheiten für Temp, Luftdruck, Geschwindigkeit, Sicht, usw.

      Fortsetzung folgt ...
    • In der style.css (Ordner style) stellt ihr alles ein, was das Aussehen (Schrift, Farbe, Position, Größe, usw.) des themes betrifft. Mit Ausnahme der Slideshow und dem UniAW5.0.
      Darum fange ich auch mit den beiden an. :001_tt2:
      Die slideshow:
      xfade2.css (Ordner style)
      Bitte nur folgende ID verändern.
      #imageContainer img { /* slideshow position */
      display:none;
      position:absolute;

      top: 0px; Position von oben
      left: 0px; Position von links
      width: 320px; Bildbreite
      z-index: 5;
      }

      Nie, nie , niemals Ändern. Es sei denn, Ihr wisst was Ihr tut.
      Hier stellt ihr die Position und Größe der slideshow ein. Mit dem z-index legt ihr fest, auf welcher Ebene die slideshow liegen soll. Wollt ihr zum Beispiel einen Layer (Rahmen) über die slideshow legen, so bekommt dieser den z-index: 6; .
      Einigen ist bestimmt aufgefallen, dass ich keine Angabe für height (Bildhöhe) gamacht habe. Ja,ja, das Alter. Nee war Absicht. Wenn nur eine Bildgröße angegeben wird, bleit das Seitenverhältnis bestehen und das Bild wird nicht gestreckt/gestaucht angezeigt
      .

      UniAW.css (Ordner UniAW)
      Bitte nur folgende ID verändern.
      #day_nightContainer { /* UniAW 5.0 position */
      background-color: transparent;
      position: absolute;
      top: 140px;
      left: 25px;
      width: 270px;
      height: 205px;
      z-index: 8;
      overflow: hidden;
      }

      Nie, nie , niemals Ändern. Es sei denn, Ihr wisst was Ihr tut.
      Hier stellt ihr die Position und Größe
      des animierten Wetters ein.
    • So jetzt geht es aber mal richtig los. Die style.css.

      Quellcode

      1. /****************************
      2. * theme construction kit *
      3. * created by oldster *
      4. * Version 1.0 24.05.2012 *
      5. * [URL]http://itheming.de/[/URL] *
      6. ****************************/
      7. body {
      8. font-family: Helvetica, Arial, sans-serif;
      9. font-size: 12px;
      10. color: #FFF;
      11. background-color: #000;
      12. margin: 0px;
      13. padding: 0px;
      14. }
      15. #status { display:none;
      16. position:absolute;
      17. top:1px;
      18. left:0px;
      19. width:320px;
      20. text-align:center;
      21. }
      22. /******************************************************************/
      23. #clock_container { /* clock position */
      24. display:block;
      25. position:absolute;
      26. top:30px;
      27. left:5px;
      28. width:140px;
      29. height:45px;
      30. -webkit-border-radius:5px;
      31. background:grey;
      32. background:-webkit-linear-gradient(top, #848487, #3c3c3c);
      33. z-index:20;
      34. }
      35. #clock {
      36. position: absolute;
      37. top: 0px;
      38. left: 0px;
      39. width:105px;
      40. font-size: 40px;
      41. text-align:right;
      42. }
      43. #secs {
      44. position: absolute;
      45. top: 2px;
      46. left: 110px;
      47. font-size: 18px;
      48. }
      49. #am_pm {
      50. position: absolute;
      51. top: 19px;
      52. left: 110px;
      53. font-size: 18px;
      54. }
      55. /******************************************************************/
      56. #calendar_container { /* calendar position */
      57. position:absolute;
      58. top:80px;
      59. left:20px;
      60. width:280px;
      61. height:20px;
      62. -webkit-border-radius:5px;
      63. background:grey;
      64. background:-webkit-linear-gradient(top, #848487, #3c3c3c);
      65. z-index:20;
      66. }
      67. #calendar {
      68. position:absolute;
      69. top:2px;
      70. width:280px;
      71. text-align:center;
      72. }
      73. /******************************************************************/
      74. #weather_container { /* weather position */
      75. position:absolute;
      76. top:350px;
      77. left:10px;
      78. width:300px;
      79. height:60px;
      80. -webkit-border-radius:5px;
      81. background:grey;
      82. background:-webkit-linear-gradient(top, #848487, #3c3c3c);
      83. z-index:20;
      84. }
      85. #weatherIcon{
      86. top: 0px;
      87. left: 200px;
      88. position: absolute;
      89. width: 80px;
      90. z-index:20;
      91. }
      92. #hilo{
      93. position: absolute;
      94. top: 45px;
      95. left: 20px;
      96. width:220px;
      97. font-weight: 900;
      98. text-align: center;
      99. font-size: 10px;
      100. }
      101. #desc{
      102. position: absolute;
      103. top: 24px;
      104. left: 20px;
      105. width:220px;
      106. font-weight: 900;
      107. text-align: center;
      108. font-size: 12px;
      109. }
      110. #temp{
      111. position: absolute;
      112. top: 10px;
      113. left: 5px;
      114. width:200px;
      115. font-weight: 900;
      116. text-align: left;
      117. font-size: 36px;
      118. }
      119. #city{
      120. position: absolute;
      121. top: 0px;
      122. left:20px;
      123. width: 220px;
      124. text-transform: capitalize;
      125. text-align: center;
      126. font-size: 20px;
      127. font-weight: 900;
      128. }
      129. #geo{
      130. position: absolute;
      131. top: 45px;
      132. left:5px;
      133. text-transform: capitalize;
      134. font-size: 10px;
      135. font-weight: 900;
      136. }
      137. /******************************************************************/
      138. #weather_wall { /* weather background position */
      139. position:absolute;
      140. top:0px;
      141. left:0px;
      142. width:320px;
      143. z-index:5;
      144. }
      145. /******************************************************************/
      146. #forecast { /* forecast position */
      147. position:absolute;
      148. top:415px;
      149. left:20px;
      150. width:280px;
      151. height:60px;
      152. -webkit-border-radius:5px;
      153. background:grey;
      154. background:-webkit-linear-gradient(top, #848487, #3c3c3c);
      155. z-index:20;
      156. }
      157. #day1 {
      158. position:absolute;
      159. top:40px;
      160. left:0px;
      161. width:70px;
      162. color: #e7ebd7;
      163. text-align:center;
      164. text-transform: 900;
      165. }
      166. #day1icon {
      167. position:absolute;
      168. top:0px;
      169. left:10px;
      170. }
      171. #day2 {
      172. position:absolute;
      173. top:40px;
      174. left:70px;
      175. width:70px;
      176. color: #e7ebd7;
      177. text-align:center;
      178. text-transform: 900;
      179. }
      180. #day2icon {
      181. position:absolute;
      182. top:0px;
      183. left:80px;
      184. }
      185. #day3 {
      186. position:absolute;
      187. top:40px;
      188. left:140px;
      189. width:70px;
      190. color: #e7ebd7;
      191. text-align:center;
      192. text-transform: 900;
      193. }
      194. #day3icon {
      195. position:absolute;
      196. top:0px;
      197. left:150px;
      198. }
      199. #day4 {
      200. position:absolute;
      201. top:40px;
      202. left:210px;
      203. width:70px;
      204. color: #e7ebd7;
      205. text-align:center;
      206. text-transform: 900;
      207. }
      208. #day4icon {
      209. position:absolute;
      210. top:0px;
      211. left:220px;
      212. }
      213. /******************************************************************/
      214. #linecalendarcontainer { /* linecalendar position */
      215. margin-left: 0px;
      216. margin-top: 0px;
      217. position: absolute;
      218. top: 105px;
      219. left: 5px;
      220. width: 310px;
      221. height: 28px;
      222. -webkit-border-radius:5px;
      223. background:grey;
      224. background:-webkit-linear-gradient(top, #848487, #3c3c3c);
      225. }
      226. #linebackground {
      227. width: 320px;
      228. height: 482px;
      229. position: absolute;
      230. top: 0px;
      231. left: 0px;
      232. z-index:30;}
      233. #linecalendar {
      234. position:absolute;
      235. top:0px;
      236. width: 320px;
      237. text-align: center;
      238. font-variant: normal;
      239. font-size: 22px;
      240. color: white;
      241. text-shadow: 0px 0px 3px black;
      242. -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.8, #666));
      243. }
      244. #lineweek {
      245. margin-top: 0px;}
      246. .linedaysofweek, #linedays {
      247. font-size: 12px;
      248. padding: 0 2px;}
      249. .linetoday {
      250. color: #00aaff;
      251. font-size: 14px;
      252. padding: 2px 2px;
      253. text-shadow: 0px 0px 5px black;
      254. -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.8, #666));}
      Alles anzeigen

      Jeder Ausgabebereich ist in Container aufgeteilt. Die einzellnen Container werden durch
      /******************************************************************/
      getrennt. Die Container beinhalten die Bereiche, die in der setup.js An/Aus geschaltet werden können.
      #clock_container
      #calendar_container
      #weather_container
      #weather_wall
      #forecast
      #linecalendarcontainer
      Oops, hab ja bei zweien vergessen Container dran zu hängen. :o Macht aber nix, funktioniert trotzdem.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von >>It's Mi<< ()

    • Der Grundaufbau ist bei allen Containern gleich.

      Quellcode

      1. #clock_container { /* clock position */
      2. [COLOR=#ff0000]display:block;
      3. position:absolute;
      4. [/COLOR][COLOR=#0000ff] top:30px;
      5. left:5px;
      6. width:140px;
      7. height:45px;
      8. [/COLOR] [COLOR=#008000]-webkit-border-radius:5px;
      9. background:grey;
      10. background:-webkit-linear-gradient(top, #848487, #3c3c3c);[/COLOR]
      11. z-index:20;
      12. }
      Alles anzeigen

      Sorry, das der Code jedes mal so auseinander gerissen wird, wenn ein Schlüsselwort (z.B. display) vorkommt. Oder auch nicht :confused1:
      Nie, nie , niemals Ändern. Es sei denn, Ihr wisst was Ihr tut.
      Hier stellt ihr die Position und Größe des Containers ein. Wenn ihr z.B. beim Wetter forecast noch die Min/Max Temperaturen anzeigen wollt, müsst ihr height vergrößern.
      Damit wird ein dynamischer Layer erzeugt. Er hat im obrigem Beispiel die Größe von 140px*45px und die Ecken sind mit einem Radius von 5px abgerundet.
      Und der Hintergrund besitzt einen Farbverlauf von #848487 nach #3c3c3c.

      Wenn der Layer stört, einfach die Zeilen löschen oder mit vorgesetzten // Auskommentieren.

      Danach könnt ihr den Inhalt des Containers gestalten.

      Quellcode

      1. #clock {
      2. position: absolute;
      3. top: 0px;
      4. left: 0px;
      5. width:105px;
      6. font-size: 40px;
      7. text-align:right;
      8. }
      9. #secs {
      10. position: absolute;
      11. top: 2px;
      12. left: 110px;
      13. font-size: 18px;
      14. }
      15. #am_pm {
      16. position: absolute;
      17. top: 19px;
      18. left: 110px;
      19. font-size: 18px;
      20. }
      Alles anzeigen


      Ich möchte jetzt nicht mit Eltern und Kind Elementen anfangen........Bin ja schon Opa.
      Aber worauf ihr bei der Positionierung der Elemente achten solltet. Der einfachheit halber sind alle Positionen absolut. D.h., die Position des Containers erfolg von der linken oberen Ecke des Lock/Homescreens. Und die Elemente werden ab der linken oberen Ecke des Containers positioniert.

      Wenn Fragen auftauchen.......nicht warten....sofort stellen




      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von >>It's Mi<< ()

    • Ich bin hier stiller Mitleser und Mitlerner und ich finde es absolut genial was du hier machst...
      Es ist noch vieles Bahnhof und ich steh auf Gleis 2 aber ich lese fleißig mit und versuch das alles zu verstehen

      Danke für die Arbeit und Mühe die du dir hier machst für uns bzw. Anfänger wie ich einer bin ;)
      Ich ziehe meinen Hut
    • @hell
      Du bist der Beste :girly:

      Demnächst schicke ich meine Themes zuerst zu dir. Du übernimmst dann das Qualitätsmanagement.

      Der Variablen obj.city wird an 2 Stellen der Ort zugewiesen. Einmal in der Wetter Funktion, das andere mal in der GPS Funktion. Bei mir auf dem Dorf kommt das gleiche Ergebnis dabei raus. :001_tt2:

      Jetzt für dich zum Ausprobieren, welcher Ort besser passt.
      Mache mal folgende Änderungen in der theme.js. (Ordner script)
      Ganz am Anfang:
      function updateDisplay() {
      document.getElementById("status").innerHTML = "updateDisplay";
      document.getElementById("weatherIcon").src="large_icons/"+obj.icon+".png";
      document.getElementById("city").innerHTML = obj.city2;
      document.getElementById("geo").innerHTML = obj.geo;
      document.getElementById("hilo").innerHTML = "H: " + obj.TodayHi + "° L: " + obj.TodayLo + "°";

      Und ziemlich am Ende:
      function UpdateLocation() {
      document.getElementById("status").innerHTML = "UpdateLocation";

      jQuery.get('../../../../var/mobile/Documents/myLocation.txt', function(appdata) {
      //jQuery.get('myLocation.txt', function(appdata) {
      var myvar = appdata;
      var substr = appdata.split('\n');
      var templatitude=(substr[0]).split('=');
      var templongitude=(substr[1]).split('=');
      var latitude = $.trim(templatitude[1]);
      var longitude = $.trim(templongitude[1]);
      var Yahooappid =""
      if (prevlatitude != latitude || prevlongitude != longitude) {
      var url = "where.yahooapis.com/geocode?location=" + latitude + "+" + longitude + "&locale=de_DE&gflags=R&flags=J";

      $.getJSON(url, function(data) {
      obj.quality = data.ResultSet.Results[0].quality;
      obj.latitude = data.ResultSet.Results[0].latitude;
      obj.longitude = data.ResultSet.Results[0].longitude;
      obj.radius = data.ResultSet.Results[0].radius;
      obj.line1 = data.ResultSet.Results[0].line1;
      obj.line2 = data.ResultSet.Results[0].line2;
      obj.line3 = data.ResultSet.Results[0].line3;
      obj.line4 = data.ResultSet.Results[0].line4;
      obj.house = data.ResultSet.Results[0].house;
      obj.street = data.ResultSet.Results[0].street;
      obj.postal = data.ResultSet.Results[0].postal;
      obj.neighborhood = data.ResultSet.Results[0].neighborhood;
      obj.city2 = data.ResultSet.Results[0].city;
    • Wenn Du in dem Kalender nur einen Zeilenumbruch haben möchtest, der Rest aber so bleiben so wie er ist (Schriftgröße, Ausrichtung, usw.), genügt folgender Tag <br>.

      Also wieder in die theme.js (Ordner script)
      Folgende Funktion suchen:
      setInterval( function time() {
      UpdateLocation();

      if(!show_clock) document.getElementById("clock_container").style.display='none';
      if(!show_calendar) document.getElementById("calendar_container").style.display='none';
      if(!show_linecalendar) document.getElementById("linecalendarcontainer").style.display='none';
      else LineCalendar();
      if(!show_forecast) document.getElementById("forecast").style.display='none';
      if(!show_weather) document.getElementById("weather_container").style.display='none';
      if(!show_slideshow) document.getElementById("imageContainer").style.display='none';

      var now_Date = new Date();
      var secs = now_Date.getSeconds();
      var mins = now_Date.getMinutes();
      var hours = now_Date.getHours();
      var date = now_Date.getDate();
      var day = now_Date.getDay();
      var month = now_Date.getMonth();
      var year = now_Date.getFullYear();
      var am_pm = "";

      secs = ( secs < 10 ? "0" : "" ) + secs;
      mins = ( mins < 10 ? "0" : "" ) + mins;
      hours = ( hours < 10 ? "0" : "" ) + hours;

      if(show_sec)document.getElementById("secs").innerHTML= secs ;
      else document.getElementById("secs").innerHTML= "" ;
      if(hour24)document.getElementById("clock").innerHTML= hours + ":" + mins ;
      else {
      am_pm = ( hours < 12 ) ? "AM" : "PM";
      hours = ( hours > 12 ) ? hours - 12 : hours;
      hours = ( hours == 0 ) ? 12 : hours;
      //hours = ( hours < 10 ? "0" : "" ) + hours;
      document.getElementById('clock').innerHTML = hours + ":" + mins;

      }
      document.getElementById('am_pm').innerHTML = am_pm;

      if(weather_unit == 'c') {
      document.getElementById("calendar").innerHTML= this_weekday_name_array[day] + ", <br><font color=#00aaff>" + this_date_name_array[date] + " " +
      this_month_name_array[month] + "</font> " + year;
      } else {
      document.getElementById("calendar").innerHTML= this_weekday_name_array[day+7] + ", <br><font color=#00aaff>" + this_month_name_array[month+12]+ " " +
      this_date_name_array[date+32] + ",</font> " + year;
      }
      var currentTime = new Date ();
      if (locale != woeid && woeid != "") {
      locale = woeid;
      readWeather();
      }
      if (lastWeather == 0){
      readWeather();
      lastWeather = currentTime.getTime();
      }
      else{
      if (currentTime.getTime() - lastWeather >= nextWeather){
      lastWeather = currentTime.getTime();
      readWeather();
      }
      }

      }, 1000 );

      Einfügen
      Jetzt hast Du 2 Zeilen mittig untereinander.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von >>It's Mi<< ()