vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   vBulletin CMS Widgets - YoWindow Weather Widget (https://vborg.vbsupport.ru/showthread.php?t=265918)

Gemma 06-27-2011 10:00 PM

YoWindow Weather Widget
 
1 Attachment(s)
What is it?
A simple template modification to bring the YoWindow Weather Widget to vB4

Quote:

Originally Posted by YoWindow Website
YoWindow weather widget works like your window - a landscape reflects the weather. You see weather picture, not just numbers. The widget designed to work on any website including Blogger, Wordpress and MySpace. Click the widget to enter full screen mode.

1. Firstly, you need to set up a new Profile Field. Choose Single-Line Text Box

Title: Weather Location Code
Description: (Whatever you want - here's what I use because the process might confuse some users)
Quote:

If you want to display the weather for your region/location on our index page - go to <a href="http://yowindow.com/weatherwidget.php">YoWindow Weather Widget</a> and fill in the details and generate your code. You now need the number that appears like the hightlight red text <b>location_id=gn:<i><font color="red">1234567</i></font>& - add that number in this box.
Required Field: No, but display at registration
Field Editable by User: Yes
Private Field: Yes
Field Searchable on Members List: No
Show on Members List: No
Display Page: Edit Profile

Take note of the newly created profile field number.

2. Next you need to create a new template. Go to AdminCP > Styles & Templates > Style Manager > Add New Template

Title: block_weather

Code:

<center><li>
    <div class="block smaller">
        <div class="blocksubhead">
            <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
            <span class="blocktitle">{vb:raw blockinfo.title}</span>
        </div>
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<vb:if condition="$bbuserinfo[fieldXX] !=''">
            <div style="width:230px; height:150px;">
    <object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>
        <param name="flashvars"
        value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"
    />
        <a href="http://yowindow.com/weatherwidget.php"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >HTML weather</a>
    </object>
</div>
<div style="width: 220px; height: 15px; font-size: 14px; font-family: Arial,Helvetica,sans-serif;">
    <span style="float:left;"><a target="_top" href="http://yowindow.com?client=widget&amp;link=copyright" style="color: #2fa900; text-decoration:none;" title="Desktop weather">YoWindow.com</a></span>
    <span style="float:right; color:#888888;"><a href="http://yr.no" style="color: #2fa900; text-decoration:none;">yr.no</a></span>
</div>
<vb:else />
<br/><b>Add your <a href="{vb:raw vboptions.bburl}/profile.php?do=editprofile">Weather Location Code</A> to show your weather forecast in this block. <br/></b>  </vb:if>
        </div>
        </div>
    </div>
    <div class="underblock"></div>
</li></center>

Replace the XX (2 times) with the number of the profile field you created earlier.

3. Go to AdminCP > Forums & Moderators > Forum Blocks Manager > Add Block

Title: Weather Forecast
Content Type: HTML
Content: <div></div>
Template To Use: block_weather

Now, this part may prove tricky for some going by what I've seen in other weather widget modifications so I'll try and make it simple and add a few pictures, this process is also required to be done by your members to display their local forecast.

Go to http://yowindow.com/weatherwidget.php and fill in your details and generate the code. The only part of the code you need is the number after id=gn: and before &amp;. Take note of that number and go to Edit Profile on your site, scroll down to the newly made Weather Code Location and blurb box and enter the number. Save your profile. Go back to your forum home and the new block should display with your weather details for the next 5 days. Click on the scenery image and it will expand to full-screen and give a more detailed outlook.

How To Add Location Scenery (village, seaside, airport or oriental)
To Your Weather Widget - https://vborg.vbsupport.ru/showpost....1&postcount=24

How To Add Weather Widget To Member Profiles
- https://vborg.vbsupport.ru/showpost....4&postcount=18

Added: 28.12.2012 An alternative version that uses IP location to display the weather rather than creating and entering data into a profile field can be found here - https://vborg.vbsupport.ru/showpost....8&postcount=36. It also allows the user to display weather forecasts from many other locations via dropdown menus.

If anyone wants to further develop any of my addons, you are free to do so.

Gemma 06-28-2011 11:39 AM

To make a CMS widget

1. Go to AdminCP > Styles & Templates > Style Manager > Add New Template

Title: vbcms_widget_weather

Code:

<div class="cms_widget">
    <div class="block">
        <div class="cms_widget_header">
        <h3><img src="{vb:stylevar imgdir_siteicons}/html.png" alt="" /> {vb:raw widget_title}</h3>
        </div>
        <div class="cms_widget_content_restore_widget_content">
        <center>
<vb:if condition="$bbuserinfo[fieldXX] !=''">
            <div style="width:230px; height:150px;">
    <object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>
        <param name="flashvars"
        value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"
    />
        <a href="http://yowindow.com/weatherwidget.php"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >HTML weather</a>
    </object>
</div>
<div style="width: 220px; height: 15px; font-size: 14px; font-family: Arial,Helvetica,sans-serif;">
    <span style="float:left;"><a target="_top" href="http://yowindow.com?client=widget&amp;link=copyright" style="color: #2fa900; text-decoration:none;" title="Desktop weather">YoWindow.com</a></span>
    <span style="float:right; color:#888888;"><a href="http://yr.no" style="color: #2fa900; text-decoration:none;">yr.no</a></span>
</div>
<vb:else />
<br/><b>Add your <a href="{vb:raw vboptions.bburl}/profile.php?do=editprofile">Weather Location Code</A> to show your weather forecast in this block. <br/></b>  </vb:if>
        </div>
</center>
            </div>
</div>

Again replacing the XX with the number of your profile field. Save the template.

2. Go to AdminCP > vBulletin CMS > Widgets > Create New Widget

Type: Static HTML
Title: Weather Forecast

Save

3. Configure the newly created widget

Enter Static HTML: <div></div>
Template Name: vbcms_widget_weather

Save

4. Go to AdminCP > vBulletin CMS > Layout Manager and place the weather widget where you want it to appear on your CMS grid.

Taurus1 06-28-2011 01:58 PM

That is so cool! Thank you very much!

Gemma 06-28-2011 04:25 PM

Quote:

Originally Posted by Taurus1 (Post 2214084)
That is so cool! Thank you very much!

It is quite configurable too if you want to change the size, units, time, scenery image etc - just match up your new settings (embedded code) to the code I've given and remember to re-add the <vb:if condition="$bbuserinfo[fieldXX] !=''"> and {vb:raw bbuserinfo.fieldXX} bits. :)

zelnik 06-29-2011 09:47 AM

Look great Gemma!!

Just to confirm what happens if there is no weather set in your profile field? what does it default to?

Gemma 06-29-2011 10:16 AM

Quote:

Originally Posted by zelnik (Post 2214436)
Look great Gemma!!

Just to confirm what happens if there is no weather set in your profile field? what does it default to?

If you haven't entered anything in the profile field or are a guest you will see whatever you edit this part of the template to say/display

Code:

<vb:else />
<br/><b>Add your <a href="{vb:raw vboptions.bburl}/profile.php?do=editprofile">Weather Location Code</A> to show your weather forecast in this block. <br/></b>  </vb:if>
        </div>

Or to make it not display at all replace the block_weather template with this

Code:

<vb:if condition="$bbuserinfo[fieldXX]">
<center><li>
    <div class="block smaller">
        <div class="blocksubhead">
            <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
            <span class="blocktitle">{vb:raw blockinfo.title}</span>
        </div>
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
            <div style="width:230px; height:150px;">
    <object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>
        <param name="flashvars"
        value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"
    />
        <a href="http://yowindow.com/weatherwidget.php"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >HTML weather</a>
    </object>
</div>
<div style="width: 220px; height: 15px; font-size: 14px; font-family: Arial,Helvetica,sans-serif;">
    <span style="float:left;"><a target="_top" href="http://yowindow.com?client=widget&amp;link=copyright" style="color: #2fa900; text-decoration:none;" title="Desktop weather">YoWindow.com</a></span>
    <span style="float:right; color:#888888;"><a href="http://yr.no" style="color: #2fa900; text-decoration:none;">yr.no</a></span>
</div>

        </div>
        </div>
    </div>
    <div class="underblock"></div>
</li></center></vb:if>


zelnik 06-29-2011 10:21 AM

Ah thanks, just trying it out now...

Looks great, shame the list is not very comprehensive for Spain, no Balearic islands and so on, hopefully they will add some :)

Gemma 06-29-2011 07:19 PM

I've made a small edit to the block_weather code. I didn't realise I had left a part of my own location in the code and I've also set the miniLocation_bar to false.

To update just replace the block_template code

zelnik 06-30-2011 01:03 PM

Hey Gemma,

Do you know how difficult it would be to add this to a 'weather' tab on a usersprofile instead of a sidebar block? Only thinking as then you don't have an empty block for those who do not want to use it or slowing down loading speeds every time the page is loaded?

Gemma 06-30-2011 01:09 PM

I'll have a look and get back to you about the tab :)

But if you don't want it to show to those who don't enter anything in the profile field replace the block_template code with the code in this post

8thos 07-03-2011 04:20 PM

Hey Gemma, I didn't initially read the whole thread, I just started installing it because it seemed awesome...

...until I realized it required Forum Block Sidebar. :sad:

How can I adapt this so that members can put it in their profile? That's what I initially thought this was. I don't use forum sidebar on my site because members complain it slows down their browser.

Gemma 07-03-2011 05:52 PM

1 Attachment(s)
Quote:

Originally Posted by zelnik (Post 2215035)
Hey Gemma,

Do you know how difficult it would be to add this to a 'weather' tab on a usersprofile instead of a sidebar block? Only thinking as then you don't have an empty block for those who do not want to use it or slowing down loading speeds every time the page is loaded?

Quote:

Originally Posted by Octavius. (Post 2216275)
Hey Gemma, I didn't initially read the whole thread, I just started installing it because it seemed awesome...

...until I realized it required Forum Block Sidebar. :sad:

How can I adapt this so that members can put it in their profile? That's what I initially thought this was. I don't use forum sidebar on my site because members complain it slows down their browser.

THIS CODE HAS BEEN UPDATED IN THIS POST - https://vborg.vbsupport.ru/showpost....4&postcount=18

There is probably a lot simpler way to do this - I've never created a profile block before.

1. Create your profile field as normal.

2. Then create a new template called weather_aboutme

Code:

<div>
  <div>
    <h5 class="blocksubhead smaller">My Weather</h5>
      <div class="blockbody">
        <div class="blockrow">
          <div class="meta">
            <li>
<vb:if condition="$bbuserinfo[fieldXX] !=''">
            <div style="width:230px; height:150px;">
    <object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>
        <param name="flashvars"
        value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"
    />
        <a href="http://yowindow.com/weatherwidget.php"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >HTML weather</a>
    </object>
</div>
<div style="width: 220px; height: 15px; font-size: 14px; font-family: Arial,Helvetica,sans-serif;">
    <span style="float:left;"><a target="_top" href="http://yowindow.com?client=widget&amp;link=copyright" style="color: #2fa900; text-decoration:none;" title="Desktop weather">YoWindow.com</a></span>
    <span style="float:right; color:#888888;"><a href="http://yr.no" style="color: #2fa900; text-decoration:none;">yr.no</a></span>
</div><br/><div>Click the image for expanded forecast.</div>
<vb:else />
<br/><b>Add your <a href="{vb:raw vboptions.bburl}/profile.php?do=editprofile">Weather Location Code</A> to show your weather forecast in this block.<br/><br/></b>  </vb:if>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="underblock"></div>

Remember to change the 2 instances of XX to correspond with the profile field you just created. Save the template.

3. In your AdminCP, go to Plugins & Products > Add New Plugin

Product: vBulletin
Hook Location: member_build_blocks_start
Title: Show Weather In Profile
Execution Order: 5
Plugin PHP Code:
Code:

{
  $weather_aboutme_templater = vB_Template::create('weather_aboutme');
  $weather_aboutme_templater->register('weather_aboutme', $weather_aboutme);
  $template_hook['profile_sidebar_stats'] .= $weather_aboutme_templater->render();
}

Plugin is Active: Yes

8thos 07-03-2011 06:09 PM

You're so awesome it's ridiculous.

Taurus1 07-04-2011 04:14 AM

That is brilliant! Thank you so much!!!

spiritguide 10-17-2011 12:29 PM

Is there one of these that will work on vbulletin forum 4.0? Please would love one

Gemma 10-26-2011 04:41 PM

Quote:

Originally Posted by spiritguide (Post 2258185)
Is there one of these that will work on vbulletin forum 4.0? Please would love one

Yes it works on vB4 :confused:

espkaruna 10-31-2011 02:46 PM

This might be asking for too much, but . . doesn't hurt to try.

I like the idea of adding this widget as a box in the member profile. I went through this post and followed the instructions and it works . . . but . . . I notice that no matter which user profile I am viewing on the forums, it still loads my personalized YoWindow on the page. Is there anyway to make this only display on your personal profile page? and better yet, allow you to view the forecast for other users if you browse their profile?

Gemma 10-31-2011 03:40 PM

Quote:

Originally Posted by espkaruna (Post 2263175)
This might be asking for too much, but . . doesn't hurt to try.

I like the idea of adding this widget as a box in the member profile. I went through this post and followed the instructions and it works . . . but . . . I notice that no matter which user profile I am viewing on the forums, it still loads my personalized YoWindow on the page. Is there anyway to make this only display on your personal profile page? and better yet, allow you to view the forecast for other users if you browse their profile?

Ok, try this.

In your MEMBERINFO template find:
Code:

{vb:raw template_hook.profile_sidebar_stats}
Above that put this
Code:

<!---Weather Profile Block--->
<vb:if condition="$userinfo['fieldXX']">
<div>
  <div>
    <h5 class="blocksubhead smaller">{vb:raw userinfo.username}'s Weather</h5>
      <div class="blockbody">
        <div class="blockrow">
          <div class="meta">
            <li>
            <div style="width:230px; height:150px;">
    <object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>
        <param name="flashvars"
        value="location_id=gn:{vb:raw userinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"
    />
        <a href="http://yowindow.com/weatherwidget.php"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >HTML weather</a>
    </object>
</div>
<div style="width: 220px; height: 15px; font-size: 14px; font-family: Arial,Helvetica,sans-serif;">
    <span style="float:left;"><a target="_top" href="http://yowindow.com?client=widget&amp;link=copyright" style="color: #2fa900; font-weight:bold; text-decoration:none;" title="HTML weather">YoWindow.com</a></span>
    <span style="float:right; color:#888888;"><a href="http://yr.no" style="color: #2fa900; text-decoration:none;">yr.no</a></span>
</div><br/><div><center><b>Click the image for expanded forecast.</b></center></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="underblock"></div></vb:if>
<!---Weather Profile Block--->

Change both instances of fieldXX to correspond with the profile field you created.

No need for the plugin to be added from post#12, this will now show the weather for each member who has entered the profile data, if they haven't entered any data no block will appear....and when anyone else views the member's profile it will show the weather of the person whose profile you are viewing (if data entered). Also I've had to delete the <vb:else /> part of the code - if I get time later I'll look into that.

espkaruna 11-01-2011 12:04 AM

That is exactly what I was looking for. Thank you Gemma ;)

Krusty1231 02-23-2012 06:54 AM

Working great! Thanks!

Gemma 02-23-2012 12:59 PM

Quote:

Originally Posted by Krusty1231 (Post 2302570)
Working great! Thanks!

Thank you :)

Gemma 02-24-2012 11:43 AM

I've updated part of the code, it should still work with the old code but if you want to upgrade find:

Code:

<object type="application/x-shockwave-flash" data="http://swf.yowindow.com/wimo/hpPal/hpPal.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/wimo/hpPal/hpPal.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>

Change it to:
Code:

<object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>


Krusty1231 02-26-2012 10:11 AM

Is there a way to add the different scenes to this? On the "block" all I can get is the country side looking one, but on profiles I got the airport one by playing with the code alittle....how would one make the airport or the other scenes work on block?

Or is this even possible?

Thanks in advance.

Gemma 02-26-2012 12:39 PM

1 Attachment(s)
Quote:

Originally Posted by Krusty1231 (Post 2303517)
Is there a way to add the different scenes to this? On the "block" all I can get is the country side looking one, but on profiles I got the airport one by playing with the code alittle....how would one make the airport or the other scenes work on block?

Or is this even possible?

Thanks in advance.

There are two ways you could do this. One would be to find amp;us=metric&amp; in the code and after that add landscape=AAAAAAA&amp; where AAAAAAA would be either village, seaside, airport or oriental. This would however set all the location scenery to whatever option you choose.

Or you could do it this way.

Create a new user profile field.

Profile Field Type: Single-Selection Radio ButtonTitle: Weather Location Scene
Description: Choose from Village, Seaside, Airport and Oriental imagery for the background of your weather forecast report.
Options:
village
seaside
airport
oriental

Set Default: Yes
Field Required: No
Field Editable By User: Yes
Private Field: Yes
Field Searchable on Members List: No
Show on Members List: No

Take note of the profile field number.
Save
Note: the scenery options must be in lowercase letters (village, seaside, airport or oriental).

In your template find
Code:

amp;us=metric&amp;
Right after that put (where YY is the profile field number)
Code:

{vb:raw bbuserinfo.fieldYY}
So it looks like
Code:

amp;us=metric&amp;{vb:raw bbuserinfo.fieldYY}
Save the template.

Krusty1231 02-26-2012 05:23 PM

Wow, just wow. Thank you very much. I used the first option you gave, as I then can switch it up for the members when I want them to see something different.

Thank you for taking the time Gemma! Very much appreciated.

Gemma 02-27-2012 06:11 PM

Quote:

Originally Posted by Krusty1231 (Post 2303626)
Wow, just wow. Thank you very much. I used the first option you gave, as I then can switch it up for the members when I want them to see something different.

Thank you for taking the time Gemma! Very much appreciated.

You are more than welcome :)

MoreLinux 03-09-2012 09:29 PM

Thanks, Gemma. Installed this one on my test board and it look super cool!!

MoreLinux 03-10-2012 10:26 AM

@Gemma, Your widget language stays in English, but the original yowindow widget can change the language.

I changed the line
Code:

value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"
and included the lang=nl&amp; option. Now it looks like this and the day's of the week are displayed in Dutch.
Code:

value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;lang=nl&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"

Gemma 03-11-2012 04:00 PM

Quote:

Originally Posted by MoreLinux (Post 2308227)
@Gemma, Your widget language stays in English, but the original yowindow widget can change the language.

I changed the line
Code:

value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"
and included the lang=nl&amp; option. Now it looks like this and the day's of the week are displayed in Dutch.
Code:

value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;lang=nl&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"

I didn't pick up on that, good spot :)

MoreLinux 03-17-2012 02:48 PM

I have this mod now running on my board in the CMS as a widget, but changed the code a tiny bit so that it auto-scales. Now the code looks like this (my changes are marked in RED)

Code:

<div class="cms_widget">
    <div class="block">
        <div class="cms_widget_header">
        <h3><img src="{vb:stylevar imgdir_siteicons}/html.png" alt="" /> {vb:raw widget_title}</h3>
        </div>
        <div class="cms_widget_content_restore_widget_content">
        <center>

            <div style="width:auto; height:200px;">
        <object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="100%" height="100%">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>
        <PARAM NAME="SCALE" VALUE="exactfit">
        <param name="flashvars"
<vb:if condition="$bbuserinfo[field9] !=''">
        value="location_id=gn:{vb:raw bbuserinfo.field9}
<vb:else />
        value="location_id=gn:2745912
</vb:if>

&amp;time_format=24&amp;unit_system=metric&amp;lang=nl&amp;background=#FFFFFF&amp;mini_locationBar=true&amp;copyright_bar=false"/>
        <a href="http://yowindow.com?client=widget&amp;link=stub"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >Desktop weather</a>
    </object>
</div>
<div style="width: 220px; height: 15px; font-size: 14px; font-family: Arial,Helvetica,sans-serif;">

</div>
        </div>
</center>
            </div>
</div>

I also changed the location of the <vb:if condition="$bbuserinfo[field9] !=''"> a bit so that when a user or a guest user have no ID it defaults to a city in the middle of The Netherlands.

Gemma 07-17-2012 08:32 PM

Think my weather widget is broken. All it has done is show rain since the beginning of June :(

migratoria 07-21-2012 11:26 AM

I inserted the code in the block, created the custom field and the number assigned in the field code. On vbulletin 4.2 shows always newyork is normal?

Gemma 07-21-2012 06:52 PM

Quote:

Originally Posted by migratoria (Post 2350105)
I inserted the code in the block, created the custom field and the number assigned in the field code. On vbulletin 4.2 shows always newyork is normal?

Did you enter your weather code that correspondes to your area from the YoWindow website into your profile?

grey_goose 07-22-2012 08:50 PM

Very nice, installed, along with a moon phase widget below.

Gemma 08-30-2012 08:08 AM

The template code has been updated slightly, to update find:
Code:

<a href="http://yowindow.com?client=widget&amp;link=stub"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >Desktop weather</a>

Replace it with:
Code:

<a href="http://yowindow.com/weatherwidget.php"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >HTML weather</a>


Gemma 12-28-2012 09:14 PM

1 Attachment(s)
Here is an alternative method of displaying the widget. In this one it should display your weather according to your IP and also give you the option to view other locations.

To use this method, create a new template called block_weather and copy the following code:
Code:

<li>
    <div class="block smaller">
        <div class="blocksubhead">
            <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
            <span class="blocktitle">{vb:raw blockinfo.title}</span>
        </div>
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<!-- Location Chooser component -->
    <script type="text/javascript" src="http://js.yowindow.com/js/yolc.js"></script>
<!-- YoWindow widget component -->
    <script type="text/javascript" src="http://js.yowindow.com/js/yowidget.js"></script>   
    <script language="JavaScript">
 
//To track if commands can be sent to YoWidget
        window.isYoWidgetReady = false;
 
        function onLoad() {
            installLocationChooser();
            installYoWidget();
        }
 
        function installLocationChooser() {
            var place = document.getElementById('location_chooser_place');
//Create YoLocationChooser and keep it as a variable of HTML window
            this.locationChooser = new YoLocationChooser(place);
 
//Subscribe to onLocationChange event
            this.locationChooser.onLocationChange = onLocationChange;
 
/**
lc.open(); - let the user to choose the location, starting on country-level
lc.open("#auto"); - detect location by IP and open it
lc.open("United Kingdom/Stirling"); - open London
*/
            this.locationChooser.open("#auto");
        }
 
/**
Event of YoLocationChooser
It is called every time the location changes.
When location was deselected - node is null
node format
node = {
    @id, // GeoNames id
    @name, // Name from the Geonames data-base
    @p // Population
}
 
Here we reflect selected location in the widget.
*/
        function onLocationChange(node) {
//Do not do anything if location was deselected (node is null).
            if (!node) {
                return;
            }
            var locationId = node['@id'];
 
//You can call yowidget methods only after it gets ready to intercept commands
            var yowidget = document.getElementById('yowidget');
            if (!window.isYoWidgetReady) {
                return;
            }
//Select location in YoWindow widget
            yowidget.setLocationId(locationId);
        }
 
/**
Creates YoWindow widget and adds it to the place-holder "yowidget_place"
*/
        function installYoWidget() {
 
/**
flashvars parameters
See http://yowindow.com/widget_parameters.php
 
I have put some examples in the code, uncomment to see them in effect
*/
            var flashvars = {
                location_id: "auto"
//              landscape: "seaside",
//              background: "#FFFFFF",
//              lang: "de",
//              unit_system: "metric",
//              time_format: "24"
            };
 
/**
Flash parameters
*/
            var params = {
                quality: "high",
                bgcolor: "#FFFFFF",
                allowscriptaccess: "always",
                allowfullscreen: "true",
                wmode: "opaque"
            };
 
            var attributes = {
//Optionally control the color of the copyright text
//              copyright_color: "#0000FF",
//              copyright_link_color: "#FF0000",
 
//id and name of YoWindow widget in HTML DOM
                id: "yowidget",
                name: "yowidget"
            };
 
            YoWidget.embed(
                "yowidget_place", //place-holder id
                240, //width
                150, //height
                flashvars,
                params,
                attributes
            );
        }
 
//This function is called by YoWidget SWF when it is ready for commands
        function yowidget_onReady() {
            window.isYoWidgetReady = true;
            var yowidget = document.getElementById('yowidget');
//Display location selected in Chooser if any
            var node = this.locationChooser.selectedLocation;
            if (node) {
                var locationId = node['@id'];
                yowidget.setLocationId(locationId);
            }
        }
 
    </script>

 
<body onLoad="onLoad();">
 
    <div>
        <span id="yowidget_place" style="display:inline-block;">
        </span>

 <span id="location_chooser_place" style="display:inline-block; width:240px; vertical-align:top;">
        </span>
    </div><br/>
<div><center><b>Click the image for expanded forecast.</b></center></div>

 
        </div>
        </div>
    </div>
    <div class="underblock"></div>
</li>

Now add a new forum block. AdminCP > Forums & Moderators > Forum Blocks Manager > Add Block > Custom HTML/PHP

Title: Weather Forecast
Description: Whatever
Cache Time: You Decide
Display Order: Up to you
Content Type: HTML
Content: <div></div>
Template To Use: block_weather

Save. Purge cache.

You should be able to add this to your CMS or MEMBERINFO (profile) template by substituting the block_weather code into the relevant template.

CoZmicShReddeR 12-29-2012 08:40 PM

Excellent work on this mod am wondering why it keeps defaulting to Temperature: °C??
Is there something I need to edit for it to either ask or default it to Temperature: °F?

I am using the IP auto version which I think is really neat!

thermax04 12-29-2012 09:00 PM

1 Attachment(s)
Quote:

Originally Posted by Gemma (Post 2393278)
Here is an alternative method of displaying the widget. In this one it should display your weather according to your IP and also give you the option to view other locations.


You should be able to add this to your CMS or MEMBERINFO (profile) template by substituting the block_weather code into the relevant template.

Dear Gemma,
Thank you for your method, it is working , but with some problems for me:

How to create a new template called block_weather?

in pic 1:
what is this box (with ? in my pic)
how to change from F to Celsius degrees? although I have this in the code : unit_system: "metric"

in pic 2:
I have these blocks, but when i activate the weather block, it pushes these blocks to the bottom of the forum screen and with full size of the screen as in pic 3!!

Gemma 12-29-2012 09:24 PM

Quote:

Originally Posted by CoZmicShReddeR (Post 2393464)
Excellent work on this mod am wondering why it keeps defaulting to Temperature: ?C??
Is there something I need to edit for it to either ask or default it to Temperature: ?F?

I am using the IP auto version which I think is really neat!

I thought by being set to auto it would change automatically depending on IP. Obviously not :(

Find:
Code:

            var flashvars = {
                location_id: "auto"
//              landscape: "seaside",
//              background: "#FFFFFF",
//              lang: "de",
//              unit_system: "metric",
//              time_format: "24"
            };

Change it to:
Code:

            var flashvars = {
//              location_id: "auto"
//              landscape: "seaside",
//              background: "#FFFFFF",
//              lang: "de",
                unit_system: "us",
//              time_format: "24"
            };


Gemma 12-29-2012 09:53 PM

Quote:

Originally Posted by thermax04 (Post 2393469)
Dear Gemma,
Thank you for your method, it is working , but with some problems for me:

in pic 1:
what is this box (with ? in my pic)
how to change from F to Celsius degrees? although I have this in the code : unit_system: "metric"

in pic 2:
I have these blocks, but when i activate the weather block, it pushes these blocks to the bottom of the forum screen and with full size of the screen as in pic 3!!

Find:
Code:

var flashvars = {
                location_id: "auto"
//              landscape: "seaside",
//              background: "#FFFFFF",
//              lang: "de",
//              unit_system: "metric",
//              time_format: "24"
            };

Change it to:
Code:

            var flashvars = {
//              location_id: "auto"
//              landscape: "airport",
//              background: "#FFFFFF",
//              lang: "de",
                unit_system: "us",
                u_temperature: "c",
//              time_format: "24"
            };

For the second problem, can you post me the contents of your block_html template so I can look at the code


All times are GMT. The time now is 02:21 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01697 seconds
  • Memory Usage 1,962KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (25)bbcode_code_printable
  • (16)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (40)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete