Sequential Popup Windows

[Nyxira]

Forum URL: (private)

   Okay, so this might be a bit ambitious...

   But...

   Originally I tried to do this with the First Time 2 plugin, since I wanted this to occur when a user first enters the forum, but that only gave me one window and then done. 

   What I would LIKE to do is make it so that there are a sequence of those same type of windows that you can click through as an introduction or semi-tutorial to the forum. Is there any way that I can do that? 

(also ignore the disarray of the forum and its banner alignment and size, I'm also trying to figure that stuff out right now to make that scale with the rest of the forum)

[Kami]

Jul 1, 2022 12:21:19 GMT -8 Nyxira said:

Forum URL: (private)

   Okay, so this might be a bit ambitious...

   But...

   Originally I tried to do this with the First Time 2 plugin, since I wanted this to occur when a user first enters the forum, but that only gave me one window and then done. 

   What I would LIKE to do is make it so that there are a sequence of those same type of windows that you can click through as an introduction or semi-tutorial to the forum. Is there any way that I can do that? 

(also ignore the disarray of the forum and its banner alignment and size, I'm also trying to figure that stuff out right now to make that scale with the rest of the forum)

Forum tour plugin!

www.proboards.com/library/plugins/item/990

[Nyxira]

Jul 1, 2022 13:00:56 GMT -8 Kami said:

Forum tour plugin!

www.proboards.com/library/plugins/item/990

I have messed around with that one a bit, too, but it seems to want to direct to different parts of the page in order to do "next" or "previous", when I just want those buttons to go to the next segment of world building monologue without pointing out specific parts of the page. Is that a thing that it can do?

(I also haven't yet tested image formatting and embed stuff with it, but I'll be trying that if I can get it to not actually give a tour)

[Scott]

Nyxira , you could do something like a slideshow (link) and set it up on a forum custom page.

[Nyxira]

I might, if I can't get anything else to work

[Brian]

Jul 1, 2022 13:08:57 GMT -8 Nyxira said:

Jul 1, 2022 13:00:56 GMT -8 Kami said:

Forum tour plugin!

www.proboards.com/library/plugins/item/990

I have messed around with that one a bit, too, but it seems to want to direct to different parts of the page in order to do "next" or "previous", when I just want those buttons to go to the next segment of world building monologue without pointing out specific parts of the page. Is that a thing that it can do?

(I also haven't yet tested image formatting and embed stuff with it, but I'll be trying that if I can get it to not actually give a tour)

Hi! I'm the author of that plugin.

You can make the tour landmarks display independently by specifying body as the value of the CSS Selector field. I'll revise the plugin's support thread to reflect this.

[Nyxira]

Jul 2, 2022 14:36:52 GMT -8 Brian said:

Hi! I'm the author of that plugin.

You can make the tour landmarks display independently by specifying body as the value of the CSS Selector field. I'll revise the plugin's support thread to reflect this.

View Attachment

View Attachment

Oh, rad!

I actually figured this out (eventually, through experimentation) a few hours after I made this thread, but, uh... trying to mess with the coding to get it to look like my previously customized default container style the same way that the First Time 2 plugin does caused me to actually kinda break the shadow overlay so I have to reinstall it and keep trying;

[Nyxira]

...Granted, I am not a coder and know very little about this sort of thing, so I'm not sure I can do it at all.

[Craig]

Let us know how the reinstall went. If there is still a styling issue, it should be modifiable, and we can hopefully help you change that.

[Nyxira]

Jul 4, 2022 2:09:54 GMT -8 Craig said:

Let us know how the reinstall went. If there is still a styling issue, it should be modifiable, and we can hopefully help you change that.

Thanks, the reinstall fixed the problem I was having with the shadow overlay having disappeared.

As for styling modifications, I'm still having an issue being able to do that.

[Nyxira]

This is a rough mockup (made in photoshop) of what I'm trying to do with it:

[Brian]

If you want it to look exactly like that it's going to take a bit more doing, but as far as the contents of each step are concerned it should readily accept HTML without issue. I'm probably not going to revisit any of my plugins to add more customization to them until it's time to update them for v6 since I'd like to rewrite them completely to be up to par with how I prefer to code JS now. But I can at least point you in the right direction.

In Plugins > Build > Virtual Forum Tour this is the line in the JS component that produces the inner HTML of the landmark:

content: '<div class="tour_container">' + x.content + '</div>' + pbp['v_forum_tour'].addNav(),

The HTML for the content is plainly output there by x.content, while after the div element the navigation is output by the value returned by the addNav function which is declared on this line:

addNav: function(){

You can pretty much customize that line and the contents of that function however you please and the plugin should still work as long as any interactive elements retain their classes. Feel free to customize the CSS rules for those classes to your heart's content.

[Nyxira]

Many thanks, mate! I've been trying to figure it out through trial and error with no success;

[Nyxira]

Jul 6, 2022 17:37:00 GMT -8 Brian said:

If you want it to look exactly like that it's going to take a bit more doing, but as far as the contents of each step are concerned it should readily accept HTML without issue. I'm probably not going to revisit any of my plugins to add more customization to them until it's time to update them for v6 since I'd like to rewrite them completely to be up to par with how I prefer to code JS now. But I can at least point you in the right direction.

In Plugins > Build > Virtual Forum Tour this is the line in the JS component that produces the inner HTML of the landmark:

content: '<div class="tour_container">' + x.content + '</div>' + pbp['v_forum_tour'].addNav(),

The HTML for the content is plainly output there by x.content, while after the div element the navigation is output by the value returned by the addNav function which is declared on this line:

addNav: function(){

You can pretty much customize that line and the contents of that function however you please and the plugin should still work as long as any interactive elements retain their classes. Feel free to customize the CSS rules for those classes to your heart's content.

Okay, so correct me if I'm wrong (again: I'm not a coder), but this appears to be the line for adding additional navigation points. Right?

Presently what I'm looking for is how to edit things visually and rearrange the placement of them a bit (My design doesn't actually have any new navigation buttons, just a change in appearance and layout).

[Nyxira]

Jul 4, 2022 2:09:54 GMT -8 Craig said:

Let us know how the reinstall went. If there is still a styling issue, it should be modifiable, and we can hopefully help you change that.

Turns out I cannot figure out how to change the styling of this particular plugin.