Adding a Weather Klip


In this post, I'll explain how you can add a weather Klip on your Dashboard using the weather information source forecast.io


How the Klip/Dashboard would look like-




1. Log into Klipfolio Dashboard.

2. Go to Library.

3. Click on ‘Build a New Klip’ button.

4. Select ‘HTML Template’.

5. Select ‘Don’t use a data source’.

6. In the Klip Editor Select HTML Template and under Properties put the following iframe code:

<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="https://forecast.io/embed/#lat=18.520430&lon=73.856744&name=Pune, India&color=#00aaff&font=Georgia&units=ca">


The above embed takes a few parameters. The longitude and latitude of the point you want the forecast for, the name of the location as you want it to appear at the top of the embed, and the width of the embed.
You can find the latitude and longitude of most locations using a tool like itouchmap

You can change the font, the color of the temperature bars, and the localization of the units (‘us’ for Fahrenheit and mph, ‘uk’ for Celsius and mph, ‘ca’ for Celsius and km/h, and ‘si’ for Celsius and m/s).




  • 0
    Jon Crosby

    Thanks Arshad, Any idea how to change the font color so that it will show up on the dark dashboards?  Also, how did you do your clock Klip? Thanks!

  • 0
    Max Corrigan

    Arshad - is it possible to change the colors of the days, and images to white instead of black? I am currently using a dark background and that information doesn't show because of the black font.



  • 0
    Arshad Hayat

    Hi Jon, Max,

    This weather klip is using DarkSky embed code to show the forecast. Unfortunately, they don't seem to have a parameter to specify the color for text. Though the bars color can be changed. You can view their documentation here



    For clocks, you can refer these community posts-





  • 0
    ITZ01 Cliff Petersen

    Hi there - you can change the background by adding 

    <p style="background-color:rgb(200, 200, 200);">  

    the above is grey but change the rgb settings to whatever you wish

  • 0
    Thomas Mattison

    I have been using Klipfolio for 5 days now, I just dont understand why there are not klip templates for things like these..
    Clocks, weather, customized text, etc. Its such an easy thing to have prebuilt for your clients. Why do I need to come to the community section to find these. I would like to see a regular joe non coder bring in some more customer friendly options to the mix.

  • 0
    Janice Janczyn

    Hi Thomas,

    Given the large number of available REST APIs and flexibility of our klips, the possibilities are almost limitless. The klip templates in our gallery are built based on customer demand and we do have 3 weather klips in our Klip Gallery (search on the word "weather" (without quotes) to find them on the page). For customized text, you can try the Label klip and on the Properties tab, set font style and size. For greater flexibility, you can use the HTML klip however this does require some knowledge of HTML tags.

    Thank you,

Please sign in to leave a comment.