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

    • Du weisst ja was mich dieses Wetter kann,hehe
      Habe es so eingetragen(auch richtig )
      bekomme in 15 Minuten Edingen > dann Altrip und zuletzt
      froggy wird sich freuen;) > Mannheim angezeigt.
      Wenn ich wüsste wie das geht,würde ich das ganze Wetter löschen : lol:

      Wie man Zeilenumbruch macht weiß ich,
      das war aber nicht meine Frage,sorry
      Danke dir
      MFG
    • Ich gebe nicht auf :wink:

      Nur für dich. Das GPS Wetter zum An/Aus Schalten.
      In der 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. [COLOR=#ff0000]var gps_weather = true; // false No GPS Weather
      9. [/COLOR]var weather_unit = 'c'; // cELSIUS (German) - fAHRENHEIT (English)
      10. var show_weather_wall = false;
      11. var show_uniaw = false; // UniAW5.0 update by oldster
      12. var show_clock = true;
      13. var hour24 = true; // false 12h am/pm
      14. var show_sec = true;
      15. var show_calendar = true;
      16. var show_linecalendar = false;
      17. var show_forecast = true;
      18. var show_weather = true;
      19. var show_slideshow = false;
      20. var intervall = 15; // minutes
      Alles anzeigen

      In der theme.js

      Quellcode

      1. setInterval( function time() {
      2. [COLOR=#ff0000] if(gps_weather)[/COLOR] UpdateLocation();

      Einfügen

      Wenn Du den Kalender aufteilen möchtest, musst Du für jedes Element in der style.css eine ID vergeben.
      z.B.

      Quellcode

      1. /******************************************************************/
      2. #calendar_container { /* calendar position */
      3. position:absolute;
      4. top:80px;
      5. left:20px;
      6. width:280px;
      7. height:20px;
      8. -webkit-border-radius:5px;
      9. background:grey;
      10. background:-webkit-linear-gradient(top, #848487, #3c3c3c);
      11. z-index:20;
      12. }
      13. #calendar {
      14. position:absolute;
      15. top:2px;
      16. width:280px;
      17. text-align:center;
      18. }
      Alles anzeigen

      Quellcode

      1. [COLOR=#0000ff]#deineID1 {
      2. position:absolute;
      3. top:2px;
      4. width:280px;
      5. text-align:center;
      6. }
      7. #deineID2 {
      8. position:absolute;
      9. top:2px;
      10. width:280px;
      11. text-align:center;
      12. }
      13. [/COLOR]
      Alles anzeigen

      Quellcode

      1. Die neuen ID's dann in der html Datei einbinden
      2. <!-- calendar -->
      3. <div id="calendar_container">
      4. <div id="calendar">calendar</div>

      Quellcode

      1. [COLOR=#0000ff]<div id="deineID1">deineID1</div>
      2. <div id="deineID2">deineID2</div>
      3. [/COLOR]</div>

      Und zum Schluss in der theme.js den ID's etwas zuweisen.

      Quellcode

      1. setInterval( function time() {
      2. if(gps_weather) UpdateLocation();
      3. if(!show_clock) document.getElementById("clock_container").style.display='none';
      4. if(!show_calendar) document.getElementById("calendar_container").style.display='none';
      5. if(!show_linecalendar) document.getElementById("linecalendarcontainer").style.display='none';
      6. else LineCalendar();
      7. if(!show_forecast) document.getElementById("forecast").style.display='none';
      8. if(!show_weather) document.getElementById("weather_container").style.display='none';
      9. if(!show_slideshow) document.getElementById("imageContainer").style.display='none';
      10. var now_Date = new Date();
      11. var secs = now_Date.getSeconds();
      12. var mins = now_Date.getMinutes();
      13. var hours = now_Date.getHours();
      14. var date = now_Date.getDate();
      15. var day = now_Date.getDay();
      16. var month = now_Date.getMonth();
      17. var year = now_Date.getFullYear();
      18. var am_pm = "";
      19. secs = ( secs < 10 ? "0" : "" ) + secs;
      20. mins = ( mins < 10 ? "0" : "" ) + mins;
      21. hours = ( hours < 10 ? "0" : "" ) + hours;
      22. if(show_sec)document.getElementById("secs").innerHTML= secs ;
      23. else document.getElementById("secs").innerHTML= "" ;
      24. if(hour24)document.getElementById("clock").innerHTML= hours + ":" + mins ;
      25. else {
      26. am_pm = ( hours < 12 ) ? "AM" : "PM";
      27. hours = ( hours > 12 ) ? hours - 12 : hours;
      28. hours = ( hours == 0 ) ? 12 : hours;
      29. //hours = ( hours < 10 ? "0" : "" ) + hours;
      30. document.getElementById('clock').innerHTML = hours + ":" + mins;
      31. }
      32. document.getElementById('am_pm').innerHTML = am_pm;[COLOR=#000000]
      33. [COLOR=#0000ff]document.getElementById("deineID1").innerHTML= this_weekday_name_array[day];
      34. document.getElementById("deineID2").innerHTML= tyear;
      35. [/COLOR]
      36. [/COLOR]
      37. if(weather_unit == 'c') {
      38. document.getElementById("calendar").innerHTML= this_weekday_name_array[day] + ", <br><font color=#00aaff>" + this_date_name_array[date] + " " +
      39. this_month_name_array[month] + "</font> " + year;
      40. } else {
      41. document.getElementById("calendar").innerHTML= this_weekday_name_array[day+7] + ", <font color=#00aaff>" + this_month_name_array[month+12]+ " " +
      42. this_date_name_array[date+32] + ",</font> " + year;
      43. }
      44. var currentTime = new Date ();
      45. if (locale != woeid && woeid != "") {
      46. locale = woeid;
      47. readWeather();
      48. }
      49. if (lastWeather == 0){
      50. readWeather();
      51. lastWeather = currentTime.getTime();
      52. }
      53. else{
      54. if (currentTime.getTime() - lastWeather >= nextWeather){
      55. lastWeather = currentTime.getTime();
      56. readWeather();
      57. }
      58. }
      59. }, 1000 );
      Alles anzeigen



      Viel Spass beim Ausprobieren.

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Mokabaer ()

    • Das GPS zum ausschalten habe ich eingetragen,kenne ich ja von Dacal
      einer der Besten auch in html,allerdings zeigt es bei dem auch nicht richtig an.
      Nach dem Eintrag keine Änderung,immer noch Mannheim
      und da mir das zu blöd ist,habe ich wie früher meinen Ort im script rein geschrieben,hehe.
      Werde nie verstehen was alle mit diesem GPS Wetter haben :lol:
      Hier mal wie es aussehen kann,was du > Master oldster < gezaubert hast



      Besten Dank , grosser Massa,hehe
      _________________________________________________________

      Fragen
      Wenn GPS aus ist,warum zeigt er die Geodaten an
      Habe ich in der style ausgeblendet.

      Warum schreibst du manchmal "zeit" und anders wieder 'zeit'

      Ich bräuchte wie ich Datum und Monat zusammen anzeigen kann.
      Hast du meine Mail gelesen ?
      MFG
    • Hier nun vorerst der letzte Teil meines HowTo's.
      Das Theme mit schon vorhandenen Variablen erweitern.
      Wie ihr im Post 2 gelesen und auswendig gelernt habt :w00t:, enthält die Variable obj schon alles was das Theme hergibt. Am Beispiel der Windgeschwindigkeit zeige ich Euch, wie man diese im Theme zur Anzeige bringt.
      Ich möchte die Windgeschwindigkeit incl. Einheit über der Temperatur im Wetterwidget haben.
      Folgende 3 Schritte wiederholen sich für jeden Wert.
      Schritt 1:
      In der style.css (Ordner style) eine ID vergeben und "Einrichten". Im Grunde ist es egal, wo die ID eingetragen wird. Aber da dieser Wert aus der Wetter Api kommt, trage ich ihn der Übersicht halber auch dort ein.

      Quellcode

      1. /******************************************************************/
      2. #weather_container { /* weather position */
      3. position:absolute;
      4. top:350px;
      5. left:10px;
      6. width:300px;
      7. height:60px;
      8. -webkit-border-radius:5px;
      9. background:grey;
      10. background:-webkit-linear-gradient(top, #848487, #3c3c3c);
      11. z-index:20;
      12. }
      13. #weatherIcon{
      14. top: 0px;
      15. left: 200px;
      16. position: absolute;
      17. width: 80px;
      18. z-index:20;
      19. }
      20. #hilo{
      21. position: absolute;
      22. top: 45px;
      23. left: 20px;
      24. width:220px;
      25. font-weight: 900;
      26. text-align: center;
      27. font-size: 10px;
      28. }
      29. #desc{
      30. position: absolute;
      31. top: 24px;
      32. left: 20px;
      33. width:220px;
      34. font-weight: 900;
      35. text-align: center;
      36. font-size: 12px;
      37. }
      38. #temp{
      39. position: absolute;
      40. top: 10px;
      41. left: 5px;
      42. width:200px;
      43. font-weight: 900;
      44. text-align: left;
      45. font-size: 36px;
      46. }
      47. #city{
      48. position: absolute;
      49. top: 0px;
      50. left:20px;
      51. width: 220px;
      52. text-transform: capitalize;
      53. text-align: center;
      54. font-size: 20px;
      55. font-weight: 900;
      56. }
      57. #geo{
      58. position: absolute;
      59. top: 45px;
      60. left:5px;
      61. text-transform: capitalize;
      62. font-size: 10px;
      63. font-weight: 900;
      64. }
      65. [COLOR=#ff0000]#wind_speed{
      66. position: absolute;
      67. top: 0px;
      68. left:5px;
      69. text-transform: capitalize;
      70. font-size: 10px;
      71. font-weight: 900;
      72. }[/COLOR]
      Alles anzeigen

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

    • Schritt 2:
      Nun muss die neu erstellte ID in der html Datei mit eingebunden werden.

      Quellcode

      1. <!-- weather -->
      2. <div id="weather_container">
      3. <img id="weatherIcon" src="large_icons/na.png"/>
      4. <div id="city">city</div>
      5. <div id="geo">geo</div>
      6. <div id="hilo">hilo</div>
      7. <div id="desc">desc</div>
      8. <div id="temp">temp</div>
      9. [COLOR=#ff0000] <div id="wind_speed">[/COLOR][COLOR=#0000ff]wind_speed[/COLOR][COLOR=#ff0000]</div>[/COLOR]
      10. </div>
      Alles anzeigen


      Das Zuweisen des Textes wind_speed hat den Vorteil, dass ich schon am PC im Safari Browser sehen kann, wo später der Wert für die Windgeschwindigkeit erscheint.

      Schritt 3:
      Die ID mit "Leben" füllen. Das passiert in der theme.js (Ordner script) in der Funktion updateDisplay(). Ich Frage mich immer noch, warum das die 1. in der Datei ist. :lol:

      Quellcode

      1. function updateDisplay() {
      2. [COLOR=#ff0000]document.getElementById("wind_speed").innerHTML = obj.windspeed + obj.windunit;
      3. [/COLOR] document.getElementById("status").innerHTML = "updateDisplay";
      4. document.getElementById("weatherIcon").src="large_icons/"+obj.icon+".png";
      5. document.getElementById("city").innerHTML = obj.city;
      6. document.getElementById("geo").innerHTML = obj.geo;


      Das war's auch schon. :001_rolleyes:

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

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

      Hallo oldster,

      habe hierzu mal zwei fragen.

      1. wenn ich einzelne Teile ausblenden will z.B. die geo Daten, muss ich dann den teil in der style.css löschen?

      2. "Das Theme mit schon vorhandenen Variablen erweitern." habe ich nicht ganz verstanden.
      kannst du das noch mal am Beispiel vom Luftdruck erklären? Ich wollte es anstelle der geo Daten haben und habe den Teil #geo in der style.css, html und theme.js wie oben beschrieben geändert. Danach wurden keine Wetterdaten mehr angezeigt.


      Wer Fehler findet, darf sie behalten. Ich habe schon genug.
    • AW: [HowTo] Der Theme Baukasten für Anfänger und Fortgeschrittene

      Hi cellinet,

      hier gibt es das aktuelle iTheming Basic Theme. Das ist eine überarbeitete Version von diesem Theme Baukasten. Es ist auch ein pdf Dokument für die ersten Schritte mit in dem download. Arbeite dich also besser dort ein :)

      Es ist auch viel einfacher in der Handhabung :)

      Und bei Fragen......immer Melden.