Virtual Forum Tour

[Brian]

Download

Features

• Add tours to your forum through the use of tooltips
  
• Point the tour at specific elements on the page
  
• Highlight certain sections of the forum
• Individual tour items can be used in multiple tours simultaneously
  
• Autoplay
  

Installation: Adding Landmarks

All of your tour stops are configured in the Tour Landmarks tab of the plugin.

The ID field should be a unique ID for the current landmark. It cannot be shared with any of your other landmarks.

The CSS Selector field determines which element should be targeted to be used as the landmark. If the CSS selector you specify matches multiple elements the tour will use the first element matched. You can learn more about how to use CSS selectors here. If you'd prefer not to highlight any elements for a specific tour landmark you can specify body as your CSS Selector and the tooltip element will appear in the middle of the page without highlighting any elements.

The Parent Selector field is completely optional. You can specify the tag, class, or ID of one of the parents of the element targeted by the CSS Selector field to highlight it instead of the element. This is useful if you're targeting a small element as you can instead highlight a larger element around it for greater visibility. Please note that table rows and cells cannot be highlighted. However, you can highlight an entire table or the elements inside of a table cell.

The Landmark URL field is used to redirect a user to the URL you specify when the current landmark is reached in the tour. Alternatively, if the current landmark is the first landmark on the tour this field will instead be used to determine which URL the tour is restricted to starting on. You can also use relative paths in this field. For example, if your forum's index page is on https://your-forum.proboards.com/forum you can redirect to it by using /forum instead of the full URL.

The Tooltip Position dropdown determines which side of the landmark the tour info will show on by default. If the browser runs out of room to display the tour info it will move it to the next available side of the landmark instead.

The Content section is where you'll specify the text accompanying the landmark. HTML can be used in this section.



Installation: Adding Tours

In the Tours tab of the plugin, specify a unique ID for your tour in the Tour ID field. This ID must be different from the rest of your tours. This is what you'll use in your forum's URL to start a tour.

The Landmark IDs field will contain a comma-separated list of each landmark you want to include in this tour. Simply list any of the landmark IDs you specified in the Tour Landmarks tab, separating each with a comma. The tour will show them in the order you've listed them.

The Clickable option determines whether or not the page can be clicked during the tour. If the page is clickable and the user clicks on a link on the page that redirects them the tour will end. Having a non-clickable page means that the user cannot accidentally wander off from the tour unless they specifically choose to stop the tour.

The Autoplay option lets you add an autoplay button to the tour. When the user clicks the autoplay button it will make the tour navigate to the next landmark automatically after the amount of seconds you specify in the Settings tab.



How to Use

Once you've finished creating your tour you can use the tour ID you specified in the Tours tab and place it in your forum URL to start the tour. In the example below I'll be using home as my tour ID.

If you want to start a tour on a specific page you'll add ?tour=home to the end of the URL like so:

http://support.proboards.com/?tour=home

If the page you want to start the tour on already has a question mark (?) in the URL you'll need to use an ampersand (&) instead of a question mark:

http://support.proboards.com/board/44/support-board?page=2&tour=home

You can add this to the end of pretty much any link's URL, but remember that the tour will attempt to start on the URL you added it to.

[Teg]

Brian, that is an amazing idea and an awesome plugin. I'm likely going to be using it on my HP forum so that users know where to go and what to do! Seriously, AMAZING! Thanks for this.

[Brian]

Well someone else had the idea. This is just the execution.

[crystalfrost]

What if we want to target a specific element with the same CSS selector as others? Say, you're on the home page and you want to indicate a specific category, but if you use .container.boards it will just select the first one.

[Brian]

May 10, 2015 7:38:09 GMT -8 crystalfrost said:

What if we want to target a specific element with the same CSS selector as others? Say, you're on the home page and you want to indicate a specific category, but if you use .container.boards it will just select the first one.

You'll need to either refine your CSS selector to target that element specifically or edit your forum's templates to give it a unique class or ID to select it with.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

I haven't used someone else's plugin since Wormo's chess plugin. This is a work of art and I'm glad you took the time to tune and share it! I also appreciate the ability to change the source code. I find that useful when making things a little more customized. 

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

May 2, 2015 20:40:54 GMT -8 Brian said:

Download

Shouldn't .container.info target .container.stats instead?
This is a reference to the default value of home4
My default theme uses .container.stats

Also would you consider adding .shoutbox.container.full as a default slide? Or a tutorial under an faq since not every site uses a shoutbox. I do realize that target selectors are going to confuse most people.

Another thought would be the Pb.data('user').id variable as an option in landmark urls.
I have added this feature myself by adding .replace('pbuserid',pb.data('user').id) to the four times the land_url appears.
Now using user/pbuserid switches to site.freeforums.net/user/1

I also think it would be cool if you could run custom javascript commands (via input box, optional) for each landmark. 
( I will probably add this myself as well, it's just an idea)

Bug: After the tour has been closed, it will be re-initiated by using the left and right arrow keys. (Also views improperly)

Bug: Anchors seem to break the tour IF the next landmark is on a new landmark url.
Example: site.freeforums.net/user/1#top
trying to navigate to site.freeforums.net/user/2 in the next slide will do nothing

[Boy_Wonder]

I'm struggling to get this to work to show off certain boards/categories, any help?

[Brian]

May 11, 2015 16:30:52 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Shouldn't .container.info target .container.stats instead?
This is a reference to the default value of home4
My default theme uses .container.stats

Did I really type .info? My bad.

May 11, 2015 16:30:52 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Also would you consider adding .shoutbox.container.full as a default slide? Or a tutorial under an faq since not every site uses a shoutbox. I do realize that target selectors are going to confuse most people.

Not everyone has the shoutbox enabled, so it definitely not going to be a default value since its presence can't be guaranteed even on a default theme.

I realize some have the info center disabled as well but from what I've seen it's not common enough to present much of a problem.

May 11, 2015 16:30:52 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Another thought would be the Pb.data('user').id variable as an option in landmark urls.
I have added this feature myself by adding .replace('pbuserid',pb.data('user').id) to the four times the land_url appears.
Now using user/pbuserid switches to site.freeforums.net/user/1

Maybe in the next update. I was actually thinking about doing something like that but never got around to it. That seems like the easiest solution, though, so I'll definitely consider implementing it.

May 11, 2015 16:30:52 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

I also think it would be cool if you could run custom javascript commands (via input box, optional) for each landmark. 
( I will probably add this myself as well, it's just an idea)

I think most people won't get use out of that versus the few who know how to do it who will also be likely to know how to edit the source code like you did. For the sake of minimizing clutter I could offer a source code modification for the few who do want it.

May 11, 2015 16:30:52 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Bug: After the tour has been closed, it will be re-initiated by using the left and right arrow keys. (Also views improperly)

I can't seem to duplicate this. Is it in a specific browser? Or do you have an example?

May 11, 2015 16:30:52 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Bug: Anchors seem to break the tour IF the next landmark is on a new landmark url.
Example: site.freeforums.net/user/1#top
trying to navigate to site.freeforums.net/user/2 in the next slide will do nothing

Anchors shouldn't be necessary in URLs as you can target their elements using the selectors. The plugin already makes the page scroll down to them.

[Brian]

May 12, 2015 7:24:47 GMT -8 Boy_Wonder said:

I'm struggling to get this to work to show off certain boards/categories, any help?

If you attempt to highlight a tr or td element it won't work as not all browsers support relative positioning them. The best you can do is highlight the entire table containing the boards or the category itself.

Do you have an example of what you're trying to highlight and a link to the forum you're trying to do so on?

[Boy_Wonder]

On this forum: shelter2015.boards.net/

I was looking to highlight the first board in each category but... naddah. What I was wondering is if on the category thingy I give them an id of category-id (the templatey variable oojymaflop) would that work?

Basically I want someway of highlighting each category) other then adverts to tour through

[Brian]

If you want to highlight a category you'll need to give it its own class or ID since it doesn't currently have any other uniquely identifiable information. In your Home template I'd recommend changing this:

class="container boards"

To this:

class="container boards category-$[category.id]"

Then you can find them using .category-123 with the appropriate numerical ID (which can be found in the navigation tree links when hovering over a category name). In this example I used a class because the ID sharing the same name is already in use by the anchors addressed by the navigation tree.

[Boy_Wonder]

Thankies!

It's working now!

Quick question Brian - is there anyway to style the tooltip popuppy oojymaflop?

[Brian]

May 12, 2015 10:37:10 GMT -8 Boy_Wonder said:

Thankies!

It's working now!

Quick question Brian - is there anyway to style the tooltip popuppy oojymaflop?

You'd need to address each of the classes and IDs associated with it via CSS.

Here's the default CSS for it: github.com/drewwilson/TipTip/blob/master/tipTip.css

[Boy_Wonder]

Ty! Time to Shelter-ise the tooltips! Quick Q are these the same as Tooltip thingy plugin