title: How to modify yahoo weather appearance on my page?
body: <p>I've just got the basic yahoo weather feed on my page...</p>
  
  <p>The following code renders the image below:</p>
  
  <pre><code>$ipaddress = $_SERVER['REMOTE_ADDR'];
  
  // API username and key masked as sensitive and irrelevant to this question
  $locationstr = "http://api.locatorhq.com/?user=MYAPIUSER&amp;key=MYAPIKEY&amp;ip=".$ipaddress."&amp;format=xml";
  
  $xml = simplexml_load_file($locationstr);
  
  $city = $xml-&gt;city;
  
  // We'll only be accounting for certain cities to start off with...
  switch ($city)
  {
      case "Pretoria":
          $loccode = "SFXX0044";
  
          $weatherfeed = file_get_contents("http://weather.yahooapis.com/forecastrss?p=".$loccode."&amp;u=c");
          if (!$weatherfeed) die("weather check failed, check feed URL");
          $weather = simplexml_load_string($weatherfeed);
  
          readWeather($loccode);
          break;
  }
  
  function readWeather($loccode)
  {
      $doc = new DOMDocument();
      $doc-&gt;load("http://weather.yahooapis.com/forecastrss?p=".$loccode."&amp;u=c");
  
      $channel = $doc-&gt;getElementsByTagName("channel");
  
      foreach($channel as $ch)
      {
          $item = $ch-&gt;getElementsByTagName("item");
  
          foreach($item as $rcvd)
          {
              $desc = $rcvd-&gt;getElementsByTagName("description");
  
              // Save the weather data to a session variable for placement on the page
              $_SESSION["weather"] = $desc-&gt;item(0)-&gt;nodeValue;
          }
      }
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/zBasC.png" alt="My Yahoo Weather data"></p>
  
  <p>It looks pretty terrible in my opinion, so I want to change the overall design here to fit it in with the rest of my site.</p>
  
  <p>I had an idea about rewriting the rendered html with jquery, but I'm not getting anywhere there.</p>
  
  <p>Here's the code I'm getting rendered currently:</p>
  
  <pre><code>&lt;div id="weather-feed"&gt;
      &lt;img src="http://l.yimg.com/a/i/us/we/52/34.gif"/&gt;
      &lt;b&gt;Current Conditions:&lt;/b&gt;
      Partly Cloudy, 17 C
      &lt;b&gt;Forecast:&lt;/b&gt;
      Tue - PM Thunderstorms. High: 26 Low: 16
      Wed - Mostly Sunny. High: 27 Low: 16
  
      &lt;a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html"&gt;Full Forecast at Yahoo! Weather&lt;/a&gt;
      (provided by &lt;a href="http://www.weather.com" &gt;The Weather Channel&lt;/a&gt;)
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically, all I want to do with this is to modify this rendered code as follows:</p>
  
  <pre><code>&lt;div id="weather-feed"&gt;
      &lt;div class="weather-icon"&gt;
          &lt;img src="http://l.yimg.com/a/i/us/we/52/34.gif"/&gt;
      &lt;/div&gt;
      &lt;div class="conditions"&gt;
          Partly Cloudy, 17 C
      &lt;/div&gt;
      &lt;div class="forecast"&gt;
          &lt;b&gt;Forecast:&lt;/b&gt;
          Tue - PM Thunderstorms. High: 26 Low: 16
          Wed - Mostly Sunny. High: 27 Low: 16
  
          &lt;a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html"&gt;Full Forecast at Yahoo! Weather&lt;/a&gt;&lt;/div&gt;
      &lt;div class="credit"&gt;
          provided by &lt;a href="http://www.weather.com" &gt;The Weather Channel&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm not having any luck finding anything that'll guide me on how to do this.</p>
  
  <p>Are there any api calls I can leverage to get a different presentation of my requested data?</p>
  
  <p>If not, can anyone suggest how I could successfully rewrite this code? Maybe with a small example...</p>