Post by Nyxira on Jul 18, 2022 11:51:17 GMT -8
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.
