MyBB Community Forums

MyBB Community Forums > 1.8 Support > General Support > Last Post Texts are overflowing after applying the 'Last Poster Avatar' Plugin
Full Version: Last Post Texts are overflowing after applying the 'Last Poster Avatar' Plugin
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

vk_knight

2021-02-08, 02:10 PM
The last post text are all over flowing from their boxes. After installing the Last Poster Avatar Plugin. It is in the homepage..

[Image: 1.png]

And it is in the inner sub-forum.

[Image: 2.png]

I have contacted the plugin owner @Whiteneo. But he couldn't help me because he is not familiar with my theme which is Cerulean by VintageDaddyo.

Now if I could just narrow the width of the text. That should do the trick, right? But I couldn't find the code.

Ben

2021-02-08, 03:19 PM
Can you link us to your site so we can have a look at the theme code please.

vk_knight

2021-02-08, 04:24 PM
That's a problem @Ben. It's in localhost. I cannot install it on live site until these problems are fixed.

censor_deeznutz

2021-02-08, 07:35 PM
(2021-02-08, 04:24 PM)vk_knight Wrote: [ -> ]That's a problem @Ben. It's in localhost. I cannot install it on live site until these problems are fixed.




hmmm, not so familiar with this plugin and how it implements, but will try to set aside some free time soon to look at this if I can manage finding such for this:


just a thought as I don't currently have the time to look at this but what happens when you change inline styling nowrap to normal

NOTE: this can also be recreated in default theme by removing min-width for wrapper and container so it is not theme specific as you noted/thought it was....

Anyhoo have you tried simply...

ie:

before:
[Image: Forums-1.png]

and after:

[Image: Forums-2.png]



Edit Template: forumbit_depth2_forum

find:
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>


change to:
<td class="{$bgcolor}" align="right" style="white-space: normal">{$lastpost}</td>


Edit Template: forumdisplay_thread

find:
<td class="{$bgcolor}{$thread_type_class}" style="white-space: nowrap; text-align: right;">

change to:
<td class="{$bgcolor}{$thread_type_class}" style="white-space: normal; text-align: right;">


in avatarep.css

line # 27

in:
.avatarep_img, .avatarep_bg{

find:
float: left;

change to:
float: left; margin-right: 4px;

Find:
@media screen and (max-width: 450px){
...
}


after add:

@media screen and (max-width: 868px){
.avatarep_img, .avatarep_bg{width: 19px !important;height: 19px !important;}
}

vk_knight

2021-02-09, 05:22 AM
That .avatarep_img & .avatarep_bg was present twice on that file. And I edited them both..

And the @media screen after editing became this.. I hope I have done it right. Because one brace is not closing..

@media screen and (max-width: 450px){.avatarep_img, .avatarep_bg{width: 19px !important;height: 19px !important;}
.avatarep_memprofile a{
display: block;padding: 2px
}

So far, overall looks good. Just let me know whether the above code is right or not.

censor_deeznutz

2021-02-09, 09:42 AM
(2021-02-09, 05:22 AM)vk_knight Wrote: [ -> ]That .avatarep_img & .avatarep_bg was present twice on that file. And I edited them both..

And the @media screen after editing became this.. I hope I have done it right. Because one brace is not closing..

@media screen and (max-width: 450px){.avatarep_img, .avatarep_bg{width: 19px !important;height: 19px !important;}
.avatarep_memprofile a{
display: block;padding: 2px
}

So far, overall looks good. Just let me know whether the above code is right or not.

no it was meant like so:

Find:
@media screen and (max-width: 450px){
...
}


means finding:

@media screen and (max-width: 450px){
.avatarep_memprofile a{display: block;padding: 2px}
.avatarep_online, .avatarep_offline{height: 35px;width: 35px}
.avatarep_online, .avatarep_offline{height: 35px;width: 35px}
.avatarep_online_ext1,.avatarep_online_ext,.avatarep_offline_ext1,.avatarep_offline_ext{height: 32px;width: 32px}
.avatarep_online_ext2,.avatarep_offline_ext2{height: 16px;width: 16px}
.avatarep_tavatar img {height: 30px;width: 30px;padding: 2px}	
.avatarep_divisor{margin-top: -28px}
.avatarep_uname{font-size:12px}
.avatarep_uprofile{margin-top: 0px;padding: 5px}
.avatarep_usern{float: right;right: 3px;position: absolute;margin-top: -30px;font-size: 12px;background: #f5fdff;padding: 5px;opacity: 0.5;color: #424242;border-radius:2px}
.avatarep_img_contributor{padding: 2px;border: 1px solid #D8DFEA;width: 19px;height: 19px;border-radius: 50%;opacity: 0.9;	margin: 2px 5px 0px 2px;float: left}
.avatarep_img, .avatarep_bg{padding: 2px;border: 1px solid #D8DFEA;width: 19px;height: 19px;border-radius: 50%;opacity: 0.9;margin: auto;float: left}
.avatarep_fd{float:left;margin: auto;padding: 0px 10px 0px 0px;width:20px;height:20px}
.avatarep_fda,.avatarep_fdl,.avatarep_fdan,.avatarep_fda_mine,.avatarep_fdl_mine{float:left}
.avatarep_fda,.avatarep_fda_mine{margin-right:15px}
.avatarep_fdl_img{width: 20px;height: 20px;border-radius: 50px;position: absolute;margin-left: -35px;margin-top: 25px;border: 1px solid #424242;padding: 2px}
}

after add:

@media screen and (max-width: 868px){
.avatarep_img, .avatarep_bg{width: 19px !important;height: 19px !important;}
}


Like so:
@media screen and (max-width: 450px){
.avatarep_memprofile a{display: block;padding: 2px}
.avatarep_online, .avatarep_offline{height: 35px;width: 35px}
.avatarep_online, .avatarep_offline{height: 35px;width: 35px}
.avatarep_online_ext1,.avatarep_online_ext,.avatarep_offline_ext1,.avatarep_offline_ext{height: 32px;width: 32px}
.avatarep_online_ext2,.avatarep_offline_ext2{height: 16px;width: 16px}
.avatarep_tavatar img {height: 30px;width: 30px;padding: 2px}	
.avatarep_divisor{margin-top: -28px}
.avatarep_uname{font-size:12px}
.avatarep_uprofile{margin-top: 0px;padding: 5px}
.avatarep_usern{float: right;right: 3px;position: absolute;margin-top: -30px;font-size: 12px;background: #f5fdff;padding: 5px;opacity: 0.5;color: #424242;border-radius:2px}
.avatarep_img_contributor{padding: 2px;border: 1px solid #D8DFEA;width: 19px;height: 19px;border-radius: 50%;opacity: 0.9;	margin: 2px 5px 0px 2px;float: left}
.avatarep_img, .avatarep_bg{padding: 2px;border: 1px solid #D8DFEA;width: 19px;height: 19px;border-radius: 50%;opacity: 0.9;margin: auto;float: left}
.avatarep_fd{float:left;margin: auto;padding: 0px 10px 0px 0px;width:20px;height:20px}
.avatarep_fda,.avatarep_fdl,.avatarep_fdan,.avatarep_fda_mine,.avatarep_fdl_mine{float:left}
.avatarep_fda,.avatarep_fda_mine{margin-right:15px}
.avatarep_fdl_img{width: 20px;height: 20px;border-radius: 50px;position: absolute;margin-left: -35px;margin-top: 25px;border: 1px solid #424242;padding: 2px}
}
@media screen and (max-width: 868px){
.avatarep_img, .avatarep_bg{width: 19px !important;height: 19px !important;}
}

vk_knight

2021-02-09, 01:52 PM
It fixed the problem alright. But the forum is not looking too good. Any general mybb theme has four sections(columns). The main forum section, threads, posts and last post.

What if the thread and post column is shifted a pixels to the left? Then also it may accommodate the entire last post section within borders.

censor_deeznutz

2021-02-09, 07:45 PM
(2021-02-09, 01:52 PM)vk_knight Wrote: [ -> ]It fixed the problem alright. But the forum is not looking too good. Any general mybb theme has four sections(columns). The main forum section, threads, posts and last post.

What if the thread and post column is shifted a pixels to the left? Then also it may accommodate the entire last post section within borders.


not sure exactly what you are saying by it doesn't look good? It has the 4 columns as you stated it doesn't? it merely allows the last post area to be be wrapped rather that not? You do realize right that this the nowrap is present in default theme?!!



Also yes as you mention you could say edit forumbit_depth1_cat and find:

<td class="tcat" width="200"

To adjust that width without focusing on say threads and posts columns but again that is not solving your text not wrapping thus jumping outside the line as because even the default theme has nowrap hardcoded in:

forumbit_depth2_forum

<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>

ie:
<td class="{$bgcolor}" align="right" style="white-space: normal">{$lastpost}</td>

usercp_latest_threads_threads

<td class="{$bgcolor}" style="white-space: nowrap">

ie:
<td class="{$bgcolor}" style="white-space: normal">

forumdisplay_thread

<td class="{$bgcolor}{$thread_type_class}" style="white-space: nowrap; text-align: right;">

ie:
<td class="{$bgcolor}{$thread_type_class}" style="white-space: normal; text-align: right;">


avatarep.css line #27

find:
.avatarep_img, .avatarep_bg{padding: 3px;border: 1px solid #D8DFEA;width: 40px;height: 40px;border-radius: 50%;opacity: 0.9;margin: auto;float: left}

add:
 margin-right: 6px;

ie:
.avatarep_img, .avatarep_bg{padding: 3px;border: 1px solid #D8DFEA;width: 40px;height: 40px;border-radius: 50%;opacity: 0.9;margin: auto;float: left; margin-right: 6px;}

etc, etc....


hence why removing nowrap and changing to normal to allow wrap is one option.....  (also note that in the next version of cerulean/cerise if I can find the free time to finish them up an up them to github, none of these edits are required because the cerulean layout is changed a bit to compensate for mobile usages)

Anyhoo, perhaps this is more of what you were meaning:

forumbit_depth2_forum

find:
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>

change to:
<td class="{$bgcolor}" align="right" style="white-space: nowrap; display: flex; padding: 10px;">{$lastpost}</td>

usercp_latest_threads_threads

find:
<td class="{$bgcolor}" style="white-space: nowrap">

change to:
<td class="{$bgcolor}" style="white-space: normal">

forumdisplay_thread

find:
<td class="{$bgcolor}{$thread_type_class}" style="white-space: nowrap; text-align: right;">

change to:
<td class="{$bgcolor}{$thread_type_class}" style="white-space: normal; text-align: right;">


avatarep.css

line # 28

Find:
.avatarep_fd{width: 40px;height: 40px;display: inline;position: relative}

Change to:
/*.avatarep_fd{width: 40px;height: 40px;display: inline;position: relative}*/
.avatarep_fd{width: 50px;height: 50px;display: inline;position: relative}

you could then say note: expand* on this for a media query to say on certain size device the tcat heading for threads and posts as well as the trow  displays for such get hidden thus only showing forums & last post for example:

@media screen and (max-width: 868px){
tbody[id^=cat_] .trow1:nth-child(3), tbody[id^=cat_] .trow1:nth-child(4), tbody[id^=cat_] .trow2:nth-child(3), tbody[id^=cat_] .trow2:nth-child(4)  {
 display: none !important;	
}

tbody[id^=cat_] .tcat:nth-child(3), tbody[id^=cat_] .tcat:nth-child(5), tbody[id^=cat_] .tcat:nth-child(2) {
 display: none !important;	
}
}

ie:

[Image: Forums-2.png]

[Image: Forums.png]

* ok, now expanding slightly further upon that last suggested expand upon previously noted: "note: expand*"


in avatarep.css

find:
@media screen and (max-width: 868px){


previously above we used this but for this we can comment out:
@media screen and (max-width: 868px){
/*
tbody[id^=cat_] .trow1:nth-child(3), tbody[id^=cat_] .trow1:nth-child(4), tbody[id^=cat_] .trow2:nth-child(3), tbody[id^=cat_] .trow2:nth-child(4)  {
 display: none !important;	
}

tbody[id^=cat_] .tcat:nth-child(3), tbody[id^=cat_] .tcat:nth-child(5), tbody[id^=cat_] .tcat:nth-child(2) {
 display: none !important;	
}
*/

}


and find its closing:

}


ok, inside of that media query add

.hide {
	display: none !important;
}


so that it is inside the media query like for example:

@media screen and (max-width: 868px){
/*
tbody[id^=cat_] .trow1:nth-child(3), tbody[id^=cat_] .trow1:nth-child(4), tbody[id^=cat_] .trow2:nth-child(3), tbody[id^=cat_] .trow2:nth-child(4)  {
 display: none !important;	
}

tbody[id^=cat_] .tcat:nth-child(3), tbody[id^=cat_] .tcat:nth-child(5), tbody[id^=cat_] .tcat:nth-child(2) {
 display: none !important;	
}
*/
.hide {
	display: none !important;
}

}


ok we can now delete the commented out part:

/*
tbody[id^=cat_] .trow1:nth-child(3), tbody[id^=cat_] .trow1:nth-child(4), tbody[id^=cat_] .trow2:nth-child(3), tbody[id^=cat_] .trow2:nth-child(4)  {
 display: none !important;	
}

tbody[id^=cat_] .tcat:nth-child(3), tbody[id^=cat_] .tcat:nth-child(5), tbody[id^=cat_] .tcat:nth-child(2) {
 display: none !important;	
}
*/

ok, now let us add this hide to a few places

forumbit_depth1_cat

find:
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>

change to:
<td class="tcat hide" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat hide" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>


forumbit_depth2_cat

find:
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>

change to:
<td class="{$bgcolor} hide" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor} hide" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>


forumbit_depth2_forum

find:
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>

change to:
<td class="{$bgcolor} hide" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor} hide" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>

forumdisplay_subforums

find:
<td class="tcat" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>

change to:
<td class="tcat hide" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat hide" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>

forumdisplay_thread

find:
	<td align="center" class="{$bgcolor}{$thread_type_class}"><a href="{$mybb->settings['bburl']}/misc.php?action=whoposted&tid={$thread['tid']}" onclick="MyBB.whoPosted({$thread['tid']}); return false;">{$thread['replies']}</a>{$unapproved_posts}</td>
	<td align="center" class="{$bgcolor}{$thread_type_class}">{$thread['views']}</td>

change to:
	<td align="center" class="{$bgcolor}{$thread_type_class} hide"><a href="{$mybb->settings['bburl']}/misc.php?action=whoposted&tid={$thread['tid']}" onclick="MyBB.whoPosted({$thread['tid']}); return false;">{$thread['replies']}</a>{$unapproved_posts}</td>
	<td align="center" class="{$bgcolor}{$thread_type_class} hide">{$thread['views']}</td>


forumdisplay_threadlist

find:
		<td class="tcat" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=replies&amp;order=desc">{$lang->replies}</a> {$orderarrow['replies']}</strong></span></td>
		<td class="tcat" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=views&amp;order=desc">{$lang->views}</a> {$orderarrow['views']}</strong></span></td>

change to:
		<td class="tcat  hide" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=replies&amp;order=desc">{$lang->replies}</a> {$orderarrow['replies']}</strong></span></td>
		<td class="tcat hide" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=views&amp;order=desc">{$lang->views}</a> {$orderarrow['views']}</strong></span></td>

** optional you can continue this

forumdisplay_threadlist_rating
find:
	<td class="tcat" align="center" width="80">
change to:
	<td class="tcat hide" align="center" width="80">


forumdisplay_thread_rating
find:
<td align="center" class="{$bgcolor}{$thread_type_class}" id="rating_table_{$thread['tid']}">
change to:
<td align="center" class="{$bgcolor}{$thread_type_class} hide" id="rating_table_{$thread['tid']}">

etc, etc...

vk_knight

2021-02-10, 05:41 AM
@censor_deeznutz I just forgot to reply here yesterday . I just saw your reply now .Wow..  You really work hard man !!!

Actually I fixed it yesterday. I just edited two things.

First in "forumbit_depth1_cat" changed the last post's width to 230 which was previously 200.

And then in ''forumdisplay_subforum'' changed the last post's width from 10% to 30%.


But I will surely look into your code and editings too. As I am not a coder myself. I might have missed something that can come forward later.

censor_deeznutz

2021-02-10, 07:24 AM
(2021-02-10, 05:41 AM)vk_knight Wrote: [ -> ]@censor_deeznutz I just forgot to reply here yesterday . I just saw your reply now .Wow..  You really work hard man !!!

Actually I fixed it yesterday. I just edited two things.

First in "forumbit_depth1_cat" changed the last post's width to 230 which was previously 200.

And then in ''forumdisplay_subforum'' changed the last post's width from 10% to 30%.


But I will surely look into your code and editings too. As I am not a coder myself. I might have missed something that can come forward later.


cool beans, yeah good to hear you got it sorted out, yep, feel free.  Anyhoo, while not completely related I did mention that Cerulean was going to be changed and while I haven't had much free time as of late to focus on this, here is current progress of: [attachment=43744]  cerulean v1.3 * it is usable though there may be more I touch on when my free time allows... (also note: that the previous other suggested edits in this thread are not really related to this either)

note while it is currently not on https://github.com/vintagedaddyo/MyBB_Theme_Cerulean due to me not having the free time yet to upload the changes..., and currently still has v1.2 on the github repo, when my free time allows I will added the existing changes and or any future changes to v1.3 on the github repo for the theme when my free time allows, not to be mistaken with the cerulean acp style repo found at: https://github.com/vintagedaddyo/MyBB_AC...e_Cerulean
Pages: 1 2
MyBB Community Forums > 1.8 Support > General Support > Last Post Texts are overflowing after applying the 'Last Poster Avatar' Plugin