Sequential Popup Windows

[Kami]

Jul 11, 2022 13:05:57 GMT -8 Nyxira said:

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.

I'm happy to help point you in the right direction, but as I'm not PB staff I can't see the URL provided. If you want to PM that URL to me so I can take a look, please feel free & I'll respond with information here.

If you're not comfortable with that -- and it's totally fine if you'd prefer not to share -- an admin will be able to help further.

[Kami]

Hello again! So, let me know if you need more help CSS-wise, but here's the easiest way to get started.

If you load the forum tour URL and then right click > inspect element on the tour popup, you'll see the HTML of the forum. You might have to look up a little bit depending on where in the popup you clicked, but there's a div with the class tiptip_holder. This is the parent container for the entire set of popups.

Nested into it, you'll also see divs with the following classes (indented bullet points indicate another nested div's class):

• tiptip_arrow
  • tiptip_arrow_inner
• tiptip_content
  • tour_container
  • tour_list
  • tour_timer
  • tour_border
  • tour_nav

tiptip_arrow is the div that has the "arrow" that points to a particular element; this is probably not relevant for your usage since it's a static element rather than hopping around to showcase different things, so you can target the div with CSS using .tiptip_arrow { display: none; } to remove it entirely; this will also remove the "tiptip_arrow_inner" class, which is just an empty div for the purposes of styling.

tiptip_content is the main div where the content of the popup resides. in order to get your desired "frame" appearance (from "Salutations, Starblazers" to the navigational arrows) everything you want will be in this section.

tour_container contains the text of your popup

tour_.list holds the little "dots" at the bottom of the text that shows how many pages are in the tour

tour_timer is irrelevant for styling

tour_border is the line between the text and the navigational keys

tour_nav is, as suggested, the navigation between the different tour pages.

Does this give you an idea of where you need to go, or do you need help with the CSS specifically?

[Nyxira]

Thanks very much~! I really appreciate the help!

[Kami]

Jul 12, 2022 11:36:57 GMT -8 Nyxira said:

Thanks very much~! I really appreciate the help!

Any time! Feel free to @ tag me if you have any CSS issues :)

[Nyxira]

Jul 12, 2022 12:22:28 GMT -8 Kami said:

Any time! Feel free to @ tag me if you have any CSS issues

Will do, thank you. ^^

[Nyxira]

Kami

Actually a problem I'm having (although I was able to remove the arrow tip and but the auto button between the arrow buttons in the javascript), is that very little of the coding for the plugin is in CSS, and most of it is in javascript. So it's proving tricky to figure out how to rearrange things.

I don't know if CSS lines could be added to make it work? (wasn't able to add the one you suggested to remove the arrow tip, unfortunately, but that could well be my lack of knowledge)

[Kami]

Jul 12, 2022 17:10:05 GMT -8 Nyxira said:

Kami

Actually a problem I'm having (although I was able to remove the arrow tip and but the auto button between the arrow buttons in the javascript), is that very little of the coding for the plugin is in CSS, and most of it is in javascript. So it's proving tricky to figure out how to rearrange things.

I don't know if CSS lines could be added to make it work? (wasn't able to add the one you suggested to remove the arrow tip, unfortunately, but that could well be my lack of knowledge)

Where are you trying to make these adjustments? As in, directly into the plugin, or...?

[Nyxira]

Jul 12, 2022 17:10:39 GMT -8 Kami said:

Where are you trying to make these adjustments? As in, directly into the plugin, or...?

The plugin settings, yeah. Should I not be?

[Kami]

Jul 12, 2022 18:27:39 GMT -8 Nyxira said:

Jul 12, 2022 17:10:39 GMT -8 Kami said:

Where are you trying to make these adjustments? As in, directly into the plugin, or...?

The plugin settings, yeah. Should I not be?

You could, if there was a CSS component in the build; there is also a way to write in CSS with javascript but I don't recommend using that method unless you're comfortable with it.

For a vast majority of users, I would recommend putting it in the theme's stylesheet instead. CSS will be pulled from the stylesheet regardless of what page the user is viewing as long as the targeted content appears on a particular page, so it doesn't need to go "with" the plugin.

From the stylesheet, you can do literally any CSS you can think of, as long as you target the classes I showed you above; you can even use the method I showed you earlier, to right click on an element in the forum tour container to find out a specific component's class name. Some components may require you to use pseudo-elements as well.

Does this help at all, or would you like me to go through some more specific examples?

[Nyxira]

Jul 12, 2022 18:59:25 GMT -8 Kami said:

You could, if there was a CSS component in the build; there is also a way to write in CSS with javascript but I don't recommend using that method unless you're comfortable with it.

For a vast majority of users, I would recommend putting it in the theme's stylesheet instead. CSS will be pulled from the stylesheet regardless of what page the user is viewing as long as the targeted content appears on a particular page, so it doesn't need to go "with" the plugin.

From the stylesheet, you can do literally any CSS you can think of, as long as you target the classes I showed you above; you can even use the method I showed you earlier, to right click on an element in the forum tour container to find out a specific component's class name. Some components may require you to use pseudo-elements as well.

Does this help at all, or would you like me to go through some more specific examples?

Quite helpful, actually (I didn't realize the plugin info and such gets added to the stylesheet).

So how would you go about coding the top of the window to look like how I designed? (with the "salutations starblazers" bit above the text area and the x (close button) on the side of it?

[Kami]

Jul 12, 2022 19:08:42 GMT -8 Nyxira said:

Jul 12, 2022 18:59:25 GMT -8 Kami said:

You could, if there was a CSS component in the build; there is also a way to write in CSS with javascript but I don't recommend using that method unless you're comfortable with it.

For a vast majority of users, I would recommend putting it in the theme's stylesheet instead. CSS will be pulled from the stylesheet regardless of what page the user is viewing as long as the targeted content appears on a particular page, so it doesn't need to go "with" the plugin.

From the stylesheet, you can do literally any CSS you can think of, as long as you target the classes I showed you above; you can even use the method I showed you earlier, to right click on an element in the forum tour container to find out a specific component's class name. Some components may require you to use pseudo-elements as well.

Does this help at all, or would you like me to go through some more specific examples?

Quite helpful, actually (I didn't realize the plugin info and such gets added to the stylesheet).

So how would you go about coding the top of the window to look like how I designed? (with the "salutations starblazers" bit above the text area and the x (close button) on the side of it?

It's been a while since I've played with the plugin, and I'm about to go to bed -- mind if I take some time tomorrow to play around and figure out the best way to do it?

[Nyxira]

Jul 12, 2022 19:14:51 GMT -8 Kami said:

It's been a while since I've played with the plugin, and I'm about to go to bed -- mind if I take some time tomorrow to play around and figure out the best way to do it?

Not at all, you've already been really quick to help me so far. ^^ Take all the time you need.

[Kami]

Nyxira Sorry for the delay!

So I was looking through the plugin, and the way the plugin is structured you can use HTML in each of the boxes in the plugin settings. So, the best way to accomplish what you're looking for is to use a <div> with a heading tag for the "Salutations Starblazers" bit, then a div with paragraph tags for the text. Give each of these divs their own class, then target that class via the stylesheet. so, for example:

HTML in box 1:
<div class="tour_title">
   <h1>Salutations Starblazer!</h1>
</div>

<div class="tour_description">
   <p>This is placeholder text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum enim quis cursus vulputate. Etiam elementum et nisi vitae varius. Donec auctor commodo neque. Suspendisse molestie, neque sed tincidunt elementum, tellus purus luctus purus, vitae aliquam mi urna sed ante. Ut id lorem nec eros bibendum commodo non vel augue. Cras eleifend condimentum consectetur.</p>
   <p>Aenean ut est vel mi scelerisque lobortis quis vel enim. Vestibulum nec mattis ligula. Sed in neque auctor, tristique massa eget, vestibulum mi. Donec sit amet turpis nunc. In hac habitasse platea dictumst. Praesent sagittis pulvinar nisl, id gravida tellus pellentesque eu. Pellentesque vulputate egestas dictum. Donec eros elit, feugiat in rutrum in, volutpat blandit erat. Ut ultrices eget erat sit amet vestibulum. Mauris ac metus eleifend, viverra ante euismod, ullamcorper mi.</p>
</div>

CSS in stylesheet:
#tiptip_holder {
   width: 50%!important;
   max-width: 50%!important;
   margin-left: auto!important;
   margin-right: auto!important;
   padding: 5px;
   border-radius: 20px;
}

#tiptip_content {
   background-color: rgba(0, 128, 128, 0.8)!important;
   background-image: none;
   padding: 20px;
}

.tour_title {
   padding-bottom: 10px;
}

.tour_title h1 {
   font-size: 18px;
   font-weight: bold;
}

.tour_description {
   background-color: rgba(0, 0, 0, 0.5);
   border: 1px solid #008080;
   padding: 10px;
}

In action: kamitest3.proboards.com/?tour=home

You can mess with this CSS basically as much as possible, and use the right click > inspiect method to figure out specific classes or IDs to target with CSS to move or style as you please. As long as you use HTML to "split up" the content in each part of the tour, you'll be able to style to your heart's content.

[Brian]

I should probably note at this point that the #tiptip_holder and #tiptip_content elements are the same ones used to produce tooltips when hovering over the ? icons on the forum. Modifying the styling of either of these elements will affect those as well.

However, I'm not able to find or recall if any are used outside of the admin area so with any luck this should only affect plugins that use them on the forum side, if any.

[Kami]

Jul 18, 2022 11:25:27 GMT -8 Brian said:

I should probably note at this point that the #tiptip_holder and #tiptip_content elements are the same ones used to produce tooltips when hovering over the ? icons on the forum. Modifying the styling of either of these elements will affect those as well.

However, I'm not able to find or recall if any are used outside of the admin area so with any luck this should only affect plugins that use them on the forum side, if any.

the build is open in the plugin so if need be a class can always be added to differenciate it from other elements that use tiptip_holder and tiptip_content if needed.