Squished Avatars, Missing Blocks, & Emojis

[Senkusha]

Link to my forum: http://www.animerpgs.com/forum/
SMF version: 2.1.4
TP version: 3.0.1
Default Forum Language: English
Theme name and version: Reseller (2.0.10)
Browser Name and Version: FireFox (136.0.1 (64-bit)), Chrome (134.0.6998.90 (Official Build) (64-bit))
Mods installed: Activity Bar (2.0.1), Alternate User Posting (2.1.2), Awesome Post Ratings (2.0.4b), Badge Awards (2.6.2b), Battle (1.17.9.4), Battle Image Expansion 1 (1.2), Battle Image Expansion 2 (1.1), Battle Image Expansion 3 (1.1), Battle Image Expansion 4 (1.1), Board Sorting Method (1.0.1), Country Flags (3.0), Curve2 Color Changer (1.4.2), Custom Board Icons (2.0.0), Dice Roller BBCode (2.0), Downloads Pro Addon - Display Credits (1.0), Downloads System Pro (6.2.2), Emoji Pro (2.1a), Message Bookmarks (0.9.5), More Spiders (1.3.1), Optimus (3.0 RC3), SMF Arcade (2.7.0.6), SMF Classifieds (5.1.10), SMF Gallery Pro (10.2.2a), SMF Post Prefix 4.3.4), SMF Store (5.0.1), ST Shop (4.1.13), Similar Topics (1.3.1), Simple Referrals (1.4.7), SimpleDesk - Integrated Helpdesk for Simple Machines Forum (2.1.3), Spolier (0.3.2), Stop Forum Spam (1.5.6), TinyPortal (3.0.1), Topic Solved (1.1.3)
Related Error messages: No error messages.

I've noticed three issues.  The first one is my Avatars on my Members Online seem to be squished, and they appear to be smaller than I remember, however, I could just be misremembering, because I'm old  .  I've attempted to override the height setting (up to 400) in both Top and Center panels (I've tried both placements sequentially.  The block did not increase in size.
You cannot view this attachment.

Another issue I have is that I have a block of text that I only want to appear on the Board Index.  The option is checked for only the Board Index, yet the block does not appear, unless Front Page is also checked.
You cannot view this attachment.

One final issue I've noticed is that Emojis don't seem to work when using them in HTML blocks:
You cannot view this attachment.

[[chrisB]]

@Senkusha:

To fix the avatar sizing issue, you should change your CSS.

index.css

Code Select Expand

img.avatar {
    max-width: 150px !important;
    max-height: 150px !important;
}
Remove the "max" and just stick with width and height as standard.

Code Select Expand

img.avatar {
    width: 150px !important;
    height: 150px !important;
Reduce the 150px to whatever size you want.

-Edit-

Just use this actually:

Code Select Expand

img.avatar {
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
}
I'm sorry I can't help with the block.

-Edit-

Allowing the location of the CSS would help with figuring out what's going on with the CSS, but the above change would fix your size issue. If you wanted it to be bigger, then it could cause issues to your forum index within the post area.

-Edit-
It seems that there may be some conflicting styles in your CSS.

Can you please disable the setting to minimize CSS and Javascript? This would help the TinyPortal team too.

If you don't know where the setting is, search CSS and then click on this. Disabling it will allow the file location to be found much easier, instead of it being minified.


See, I noticed you also have this within your CSS.

Code Select Expand

img.avatar {
    border-radius: var(--avatar-border-radius);
    height: var(--avatar-size);
    width: var(--avatar-size);
}
If you change and use 150px, the avatars will be huge, and any px size will cause issues with the forum index. Use the recommended CSS.

[Senkusha]

Okay, I disabled the Minimize CSS and JavaScript files setting.  Thank you for pointing that out. 

[[chrisB]]

@Senkusha: Sorry, it shows the code is in your index.php file - this is where you should look to edit.



Changing to the above doesn't cause any issues elsewhere from what I could see.



If you want the avatars to be bigger than in the screenshot, it would mean making the classes in the code custom and adding those custom classes to your file. If the size is fine, simply use.

Code Select Expand

img.avatar {
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
}
I wished I could be of more help with the block error, but this would be something the TinyPortal team would be best handling. If you have any CSS problems, I can suss out a lot of them. I hope this helps.

PS. Prior to turning off the Minimize CSS and JavaScript, it would just say "index" so I assumed it would be index.css - once all your problems are resolved with CSS you turn it back on. 👍🏻

[Senkusha]

I added the following to my /css/custom_edits.css file:

Code Select Expand

img.avatar {
   width: var(--avatar-size) !important;
   height: var(--avatar-size) !important;
}

And it seems to be working good!

You cannot view this attachment.

[@rjen]

Another issue I have is that I have a block of text that I only want to appear on the Board Index.  The option is checked for only the Board Index, yet the block does not appear, unless Front Page is also checked.

Just checked on a test forum and it is working fine for me: I created a block in the Center Panel and set it to show on the Board Index only, and it work as it should.

Perhaps you have a different setup. Please specify how you defined the block exactly:
- what type of block
- what panel is it in
- all the block settings...

[@rjen]

One final issue I've noticed is that Emojis don't seem to work when using them in HTML blocks:

Can you please insert such an emoji here?

[Senkusha]

Okay, here's some screen shots of my setup:  (Note it's the Notices block that isn't appearing)

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

[Senkusha]

One final issue I've noticed is that Emojis don't seem to work when using them in HTML blocks:

Can you please insert such an emoji here?

When writing an HTML article, I attempted to put this in:

Code Select Expand

🔑

Which should give this:  🔑  (And upon previewing it, the BBC system won't process it.)

[@rjen]

Works fine for me with those settings in the top panel.

Do you have any special settings for the top panel itself?