write a reply

Sticky Help / Tabbed Table Help

aliasRinse, Oakey, rickrollme
pronounsShe/Her
76written posts
pancakehouseearned bits
offlinecurrently
pancakehouse
Junior Member
pancakehouse Avatar
SIGMAR BLESS THIS RAVAGED BODY!
Hello! I've been working on a skin revamp but I'm a coding noob. ;v; I'm hoping the coding gurus here may be able to help me, nudge me in the right direction, or really dumb down how the heckie these complicated (? i could just be a silly goose) sticky kits work. I've been poring over tutorials and just can't get it all to come together.

I'm working with Leap's skin, Holy Wars. And what I'm trying to achieve... is two things —
A) sticky-ing the pagination, so that when you're scrolling down the Recently Updated Posts list or scrolling through a thread, you can still navigate to the next page or the previous page without having to scroll back to the top

and B) sticky-ing the avatar/image in the left-panel of the mini-profile to the same effect, so when you're scrolling down a longer post, the avatar/image sticks (if I'm not explaining this well enough, an example of what I mean can be seen here)

Obviously, A is more important than B, but I just can't get either of them to work no matter what I try. Any help whatsoever is greatly, greatly appreciated. ;v;

Test Site Link: swallowing-embers.proboards.com/


last edit on Mar 24, 2023 20:51:06 GMT by pancakehouse

an original powers rp
pronounsshe/her
90written posts
FINITEearned bits
offlinecurrently
FINITE
Junior Member
FINITE Avatar
You can fix A with this CSS (just slap it at the bottom unless you can find it already in the stylesheet):
.container > .control-bar {
  top: 70px !important;
}


Proboards defaults it to 0px, so any sticky headers will usually cover it up on scroll.

For B, you'll need to update the mini-profile template as well as the CSS, unless you'd rather update it inline with just the template. I'll provide the two-step version.

In your mini-profile template, search for punishment-minn- and update the div it takes you to with class="mini-sticky" (or any class name of choice).

In your CSS, add the following:

.mini-sticky {
position: sticky;
top: 120px;
}


I was only using the inspector for this, but it should work for you!
aliasRinse, Oakey, rickrollme
pronounsShe/Her
76written posts
pancakehouseearned bits
offlinecurrently
pancakehouse
Junior Member
pancakehouse Avatar
SIGMAR BLESS THIS RAVAGED BODY!
Hi....... me again [sounds of muffled sobbing] ;v;

Another hang-up that I'm having with this skin/site remodel is that the Tabbed Table plug-in is no longer working. I imagine it has something to do with the class names, ids, and what-not on the post list? Or maybe divs vs tds? The plug-in can't find what it needs to find? That's as much as I've gleaned from going through threads on Proboards Support and such. But I've tried changing them to what I think the plug-in is looking for.... hell, I even restored the thread/post list template to default and that didn't work. I'm wondering if it's possible to work around this? Maybe there is some larger, parent class name or something that needs to be reverted/changed as well? I just can't pin-point where? I'm willing to put in the legwork when it comes to changing classes, ids, blah blah, I just don't know... what needs changed, where, or if it is even possible? Then again, maybe I'm overlooking something smaller, idek. I'm winging this 100% and learning as I go lol.

Any help/insight/nudges are appreciated! Just in advance, y'all the bombest. A couple of us on-site have used Tabbed Tables extensively in our character development threads, so I'd hate to give them up. Though I love the Holy Wars skin sm I just fkin MIGHT lmaooo~

Site: swallowing-embers.proboards.com/posts/recent

last edit on Mar 24, 2023 21:08:58 GMT by pancakehouse

an original powers rp
aliasRinse, Oakey, rickrollme
pronounsShe/Her
76written posts
pancakehouseearned bits
offlinecurrently
pancakehouse
Junior Member
pancakehouse Avatar
SIGMAR BLESS THIS RAVAGED BODY!
Hey, thanks for the reply and suggestion! <3 I just tried turning them all off except for Style Tag & Tabbed Sections, and even tried rearranging them, but no change! I tried uninstalling/reinstalling the Tabbed Sections earlier in my (very smooth-brained) attempt at troubleshooting lmao. In case it still helps —

Current plug-ins (listed in order):
- Yootil (1.1.2)
- Monetary System (0.9.7)
- Tabbed Sections in Post (1.3.6)
- Style Tag (2.3.2)
- Thread Descriptions (1.2.4)

an original powers rp
pronounsshe/her
90written posts
FINITEearned bits
offlinecurrently
FINITE
Junior Member
FINITE Avatar
This is the test site for your actual site, correct?

Double-check the version number of the Style Tag plugin on the main site to what you have on the test site.

I'm using version 1.6.4 on my test site because the newer versions of Style Tags (likely due to optimizations done for load time) conflicts with PTabs (which has not been maintained in years).

It has something to do with having styling in the PTab element and how Style Tags grabs everything.

If you don't want to downgrade Style Tags (because it's slower), then remove all styling from PTab elements and override the tab classes within newclass.

I would do something like this (quote because lololol ptab forces its way through the code block):

(removed bc spotify embeds are slow)
last edit on Mar 25, 2023 17:07:22 GMT by FINITE
aliasRinse, Oakey, rickrollme
pronounsShe/Her
76written posts
pancakehouseearned bits
offlinecurrently
pancakehouse
Junior Member
pancakehouse Avatar
SIGMAR BLESS THIS RAVAGED BODY!
Bless you a million times for the reply and suggestions, my brain is such a tomato rn ;v;

Yes, the linked site is just a test site. I double-checked what versions the plug-ins were on our actual site and they are the same. And the same exact post looks just fine there (linky). So very weird.

On the test site, I just tried deactivating the Style Tag (2.3.2) I was using and installed the (1.6.4) version, but that didn't make a difference either. I posted what you included in your reply as a post on the test site and the PTabs didn't work on either version as well. 'v'

an original powers rp
pronounsshe/her
90written posts
FINITEearned bits
offlinecurrently
FINITE
Junior Member
FINITE Avatar
🤔 Huh. Then there's definitely something theme-specific interfering, which is a little strange since the post makes it look like the entirety of the plugin isn't even loading.

I'm already off for the night, but if there's no resolution by tomorrow, I'll try debugging again in the morning!
pronounsshe/her
90written posts
FINITEearned bits
offlinecurrently
FINITE
Junior Member
FINITE Avatar
I found the issue! Rather, I found the support request about it lol. support.proboards.com/thread/660969/tabbed-section-post-plugin-working

The plugin is looking for the default HTML elements/classes for posts using td. Leap replaced those with divs.

To fix, go to the Layout Templates and replace the entire code blocks in the following:

(Also I'm assuming you're using V2, so anyone looking for this with V1, you can compare the code blocks for what needs to change.)

Threads > Thread Tab
<div class="container posts" style="border:none!important;">
<div class="punishment-titlee">
{if $[reply_button]}
       <a href="$[reply_button.href]"><div>write reply</div></a>
{/if}
<h1>$[thread.subject]</h1>
       <h2></h2>
</div>
<div class="control-bar ui-helper-clearfix $[scroll_class]">
$[search]
<div class="controls">
$[action_menu]
</div>
<div class="float-left">$[thread.icons]</div>
$[pagination]
</div>
<div class="content cap-bottom">
$[thread.labels]
$[poll]
<table class="list" role="presentation">
<tbody class="$[list_class]">
$[post_list]
</tbody>
</table>
{if !$[quick_reply]}{if $[bottom_reply_button]}
<div class="reply_button pad-all-double">$[bottom_reply_button]<br class="clear" /></div>
{/if}{/if}
</div>
</div>
$[quick_reply]


Threads > Post List Tab
{foreach $[post]}
<tr id="$[post.content_id]" class="$[post.content_class]{if $[viewing_recent_posts]} recent{/if}">
<td class="$[post.unblocked_class] content">
<div class="punishment-mini-block">
               $[post.created_by.miniprofile]
           </div>
           <article>
               <div class="punishment-mini-bottom" id="punishment-minn-$[post.created_by.id]">
                   <a href="$[post.thread.link.href]"><div class="punishment-mini-thred">$[post.thread.subject]</div></a>
                   <div class="punishment-mini-thred-1">
                       <div>POSTED ON $[post.created_on]</div>
                       {if $[post.likes.total] >= 1}<div>$[post.likes]</div>{/if}
                   </div>
                   <div class="controls">
                       $[post.quote_button]
                       $[post.edit_button]
                       $[post.likes.button]
                       $[post.select_options]
                   </div>
               </div>
               <h3 class="title aria-hidden">Post by $[post.created_by.name] on $[post.created_on]</h3>
               <div class="punishment-post"><div class="message">$[post.message]</div></div>
           </article>
           {if $[post.edited]}
               <div class="punishment-edit"><div>LAST EDIT: $[post.edited.date] by $[post.edited.by_user]</div></div>
           {/if}
           {if $[post.created_by.signature]}
               <div class="punishment-signature">$[post.created_by.signature]</div>
           {/if}
       </td>
   </tr>
<style>
   #punishment-minn-$[post.created_by.id] .punishment-mini-thred:hover, #punishment-minn-$[post.created_by.id] .button:hover, #punishment-minn-$[post.created_by.id] .liked.likes-button, #punishment-minn-$[post.created_by.id] .punishment-mini-thred-1 a { color:#$[post.created_by.group.color]!important; }
</style>
{/foreach}
{if !$[post]}
No posts were found.
{/if}
last edit on Mar 25, 2023 17:06:24 GMT by FINITE
aliasRinse, Oakey, rickrollme
pronounsShe/Her
76written posts
pancakehouseearned bits
offlinecurrently
pancakehouse
Junior Member
pancakehouse Avatar
SIGMAR BLESS THIS RAVAGED BODY!


Bruuuuuuh, my gratitude is immense. Unfathomable. Bottomless. It worked! It made things a little janky, but I think I got everything almost back to how it was. The thing is, I tried doing just that? I looked at the same Support thread and everything and tried replacing divs with tds, eventually resetting to default, and that whole shebang. But here's the thing.... I only did it under the Post List tab. And not the Thread tab. ;v; I imagine that had to make THE difference. And is also the perfect example of me tossing things around with no real understanding of how things work lololol. Otherwise I just missed one somewhere (not very unlikely tbh).

Really, seriously, thank you soooo much!  Everything is almost perfect now, that was my biggest and most dreaded hang-up.

Except, now the sticky on the left-panel isn't working? (Super ironic, considering that's what started this thread in the first place lmaooo.) I tried putting it back in there per the instructions on your first post... even tried doing it a different couple of ways... but nothing seems to be working. The navigation bar is still fine. But when I try to add a sticky to the image in the left panel once more, not only does it not sticky, but it creates this weird space on ONLY the FIRST post in a thread/the recent post list? (Image for reference) The rest of the posts, that space isn't there, so..... weird?

But really, that's not such a big deal. I can't seem to figure it out but if it's not an easy fix, it's okay, it's not too important. You've already done like.... the eighth wonder of the world for me lmao. ;v; I thank you again and again and again and ag-

EDIT TO TRY AND (MAYBE?) BE MORE HELPFUL IDK:


snippet of Post List template where I put the sticky: <td class="left-panel" style="vertical-align:top;">

<div class="mini-sticky" id="#punishment-minn-$[post.created_by.id]">

<div class="rinse-left-panel-ext" style="background-color:#$[post.created_by.group.color]!important;">
<a href="$[post.created_by.href]" title="VISIT PROFILE">

<div class="rinse-left-panel-image" style="background-image: url('https://i.imgur.com/7E7Kcc3.png');{foreach $[post.created_by.mini_custom_field]}{if $[post.created_by.mini_custom_field.name] == "225x350 Image"}background-image:url('$[post.created_by.mini_custom_field.value]');{/if}{/foreach}background-size:cover;"></div></a>                          
</div>  

<div class="rinse-custom-block" style="border-color:#$[post.created_by.group.color]!important;">
{if $[post.created_by.group]}<div class="rinse-custom-name" style="color:#$[post.created_by.group.color]!important;">$[post.created_by.group.name]{else}<div class="rinse-custom-name">GUEST</div>{/if}</div>

{foreach $[post.created_by.mini_custom_field]}{if $[post.created_by.mini_custom_field.name] == "OOC Name"}<div class="rinse-custom-group">PLAYED BY: $[post.created_by.mini_custom_field.value]</div>{/if}{/foreach}</div>
</div>
</td>


what is in the CSS sheet:

.rinse-left-panel-ext {width:225px;height:350px;border:1px solid @dark_background_color;margin-top:15px;margin-left:5px;background-color:@accent_color;padding:9px;}
.rinse-left-panel-image {width:225px; height:350px;}

.rinse-custom-block { width:219px;background-color:@dark_background_color;padding:10px;margin-left:6px;text-align:center;margin-top:5px;text-transform:uppercase;border:2px solid @accent_color;outline:1px solid @dark_background_color; }
.rinse-custom-block b { font:bold 10px Open Sans;line-height:10px;color:@text_color_faint; }

.rinse-custom-name { font:800 24px Poppins;color:@accent_color;letter-spacing:.35px; }
.rinse-custom-group { font:700 10px Open Sans;color:@text_color_faint;letter-spacing:1px;line-height:10px;margin-top:0px;padding-bottom:8px; }

.rinse-custom-links { margin-top:-10px;margin-left:16px;float:left;display:flex;flex-direction:column;gap:5px;justify-content:center; }
.rinse-custom-links div { height:30px;width:30px;background-color:@accent_color;border-radius:0px;font-size:12px;outline:1px solid @dark_background_color; }
.rinse-custom-links div i::before { display:block;line-height:30px;width:30px;text-align:center;color:@dark_background_color; }
.rinse-custom-links-right { margin-top:-10px;background-color:@dark_background_color;width:201px;margin-left:52px;border:3px solid @accent_color;outline:1px solid @dark_background_color; }
.rinse-custom-links-right div { color:@text_color_faint;font:bold 10px Open Sans;line-height:10px;text-transform:uppercase;letter-spacing:.35px;padding:10px; }
.rinse-custom-links-right div b { color:@accent_color;}

.mini-sticky {
   position: sticky;
   top:120px; }



last edit on Mar 25, 2023 20:42:09 GMT by pancakehouse

an original powers rp
pronounsshe/her
90written posts
FINITEearned bits
offlinecurrently
FINITE
Junior Member
FINITE Avatar
Debugging HTML/CSS is super fun for me. Debugging javascript is a nightmare.

I managed to find the cause of this issue after some digging and researching! Sticky might not work if a parent element is set to overflow: hidden/auto/scroll.

The offender? The content class that the Ptabs plugin is looking for.

If you go into your stylesheet, CTRL/CMD + F for the following line of code:

.container > .content { overflow: hidden; }

Remove it if you want the sticky functionality. Just be warned that users who make the choice of extra wide images or tables will now stretch out past the theme wrapper. This can easily be avoided with rules against it and making sure the img element has an overall max-width (I suggest setting this in the stylesheet instead of relying on a plugin or javascript since those can break links).
aliasRinse, Oakey, rickrollme
pronounsShe/Her
76written posts
pancakehouseearned bits
offlinecurrently
pancakehouse
Junior Member
pancakehouse Avatar
SIGMAR BLESS THIS RAVAGED BODY!


Wowie, you're incredible! It worked and all is good now! I would have never been able to figure that out, no matter the amount of researching and studying! It would have just been me trying and failing a million different things for 2+ months whilst banging my head into my desk repeatedly. Thank you so much! You've been so helpful and a lifesaver honestly, I couldn't say how much I appreciate it. Let me just regress into a young Victorian boy for just a moment — thanks miss, you do blessed work, you do!


an original powers rp