Mini Profile is centering in the left panel??

[Sammiie]

Hello ~

I've been out of the coding game for about a year and a half, and it 100% shows. I'm trying to install some custom templates on a free skin, including a mini profile. I took a part out of the code (and didn't have an issue with this when I did it with the last skin), and now the mini-profile hangs in the center (like down-center) of the left panel when the post is really long... and I'm totally stumped on how to fix this.

Link to an example of where this is happening

[Lynx]

Dec 4, 2021 14:13:29 GMT -8 Sammiie said:

Hello ~

I've been out of the coding game for about a year and a half, and it 100% shows. I'm trying to install some custom templates on a free skin, including a mini profile. I took a part out of the code (and didn't have an issue with this when I did it with the last skin), and now the mini-profile hangs in the center (like down-center) of the left panel when the post is really long... and I'm totally stumped on how to fix this.

Link to an example of where this is happening

Your forum is set to Guests Must Login, so non-PB Staff will not be able to take a look at it unless you are comfortable with turning that option off, at least, temporarily. Otherwise, you'll need to have a PB Staff member take a look.

[Sammiie]

Lynx That should be fixed now! I apologize; I didn't remember I put that on

[Sammiie]

bump - still need assistance with this!

[Chris]

There is currently no CSS rule governing vertical-align in the td.left-panel so it uses the default value of middle. If you want the mini-profile to stick to the top of the td.left-panel like it does on most of PB default themes then you'll need to add a rule that overrides the default behavior

example:

.posts .post .left-panel {
   vertical-align: top;
}

SPOILER: Click to show

[Sammiie]

Chris I've done that and it's still centering ? IDK how you managed to the do magic in your screenshot, but I've added the vertical-align element to the listed class, and it did absolutely nothing for me. Even after a hard refresh. Even after adding a "!important" to it. Nothing at all.

It's still doing what it was doing before... not top aligning. See Rules for specific example.

[Chris]

Dec 17, 2021 17:23:41 GMT -8 Sammiie said:

Chris I've done that and it's still centering ? IDK how you managed to the do magic in your screenshot, but I've added the vertical-align element to the listed class, and it did absolutely nothing for me. Even after a hard refresh. Even after adding a "!important" to it. Nothing at all.

It's still doing what it was doing before... not top aligning. See Rules for specific example.

I'm sorry but I am not seeing any rule governing vertical-align except the one from the user-agent stylesheet (the browser itself) when inspecting that example given, are you sure you are applying this rule to the correct theme?



If you switch to the computed tab to see all the rules vying for supremacy on that particular .left-panel it once again confirms that only the user-agent has a dog in the fight.

Note:

The default vertical-align for TBODY is middle so any TR, TD or TH not explicitly given an appropriate alternative will "inherit" that TBODY alignment

Edit:

I did locate your CSS rule

.posts .post .left-panel {
    width: 300px!important;
    border-right: solid 1px #d8d8d8;
    border-top: solid 1px #d8d8d8;
    background-color: #e3e3e3;
    vertical-align: top!important;
}

..and the reason it is not being applied is because the theme is missing the .post class (theme is missing the $[post.content_class] variable) as well as the ID (theme is missing the  $[post.content_id] variable) that uniquely identifies each post on the page. You will undoubtedly run into issues with both those variables missing since some of the platform scripting references them in order to perform actions such as delete, like, etc. on a particular post