News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

TinyPortal

Started by lurkalot, February 12, 2005, 04:43:00 AM

Previous topic - Next topic

Antechinus

Makes sense about the one sidebar. Didn't think to check that.

The paragraphs would have been to clear the floats when the sidebars were using floats. Not necessary with flex, and will only get in the way. :)

@rjen

#3141
Quote from: cookdandbombd on May 04, 2022, 07:09:23 PMJust installed the latest version on the most up-to-date SMF, and it's just not displaying correctly for me when I'm logged in as an admin?

When I go into the forum listings, the page stretches out to the right.

If I read a thread it's fine, but when I go to quick edit I then again have the screen stretching way off the side of my phone. Any ideas?

Ok, thanks to Antechinus I managed to create a permanent fix for this.

You did not mention what TinyPortal version you are using, so I assume it is the latest (TinyPortal version 2.2.1)
The fix will be in the next TP release, but if you want to fix it now you can upload attached css files to you /Themes/default/css folder and replace the files there.

After that remember to clear your browser cache to load the new css files...
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

@rjen

Quote from: cookdandbombd on May 04, 2022, 07:09:23 PMThe portal posts don't display properly either, with the text all overwriting the avatars.



Edit: I think the stretching forum pages in the first pic are caused by the moderation check boxes. Is there a way to turn them off or fix that?

That does not happen to me, but it may be caused by changes made (by a MOD?) to the avatar settings.
Can you share a link to the forum where this is happening?
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

@rjen

Quote from: Cookieswithcoffee on May 04, 2022, 04:20:19 PMI apologize if this is covered in the 156 pages but I think my brain is getting melty. How do I change the background color of the shoutbox to a dark theme? I saw it 2 days ago -praying that wasn't a dream or hallucination- and now I'm circling the drain.

I'm using the current version of TP (which I'm loving as I learn it). I'm new to all of this.

Thanks muchly!

That's dependent on what Shoutbox layout you have selected.

For layout 1 (the bubbles) you change the bubble color in the css file: tp-shout.css

For layouts 3 and 4 there are settings under TinyPortal > Manage TPshout > Settings
These Shoutbox Color settings allow you to choose the background colors for odd and even lines

An image says more than a 1000 words: can you shae a picture of the shoutbox you want to change?
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

Cookieswithcoffee

Thanks for the response! I played with settings 3 and 4 and have achieved visual bliss!! Thank you!!

@rjen

@Antechinus , would you have a minute to check the board index page here: https://test.fjr-club.nl/index.php?action=forum ?

With all changes all pages behave as they should, except this one. For some reason the sidebars and main content section extend past the screen @ screen widths from 900px till about 1400px.

I must be missing something, but not seeing the why...
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

Antechinus

Ok, try this:
#centerContainer {max-width: calc(100% - 460px);}
That should be bulletproof, but you'd need a way of setting it as a inline style, so it can take account of the sidebar width settings. So in practice it'd be like:
<div id="centerContainer" style="max-width: calc(100% - $1px - $2px)"> etc...

@rjen

But why does it need this ONLY on the board index and not on any other page?
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

Antechinus

No idea at the moment. That would require actual analysis.

@rjen

I'll keep digging...
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

cookdandbombd

Quote from: @rjen on May 05, 2022, 07:49:06 AM
Quote from: cookdandbombd on May 04, 2022, 07:09:23 PMThe portal posts don't display properly either, with the text all overwriting the avatars.



Edit: I think the stretching forum pages in the first pic are caused by the moderation check boxes. Is there a way to turn them off or fix that?

That does not happen to me, but it may be caused by changes made (by a MOD?) to the avatar settings.
Can you share a link to the forum where this is happening?

Sure, https://www.cookdandbombd.co.uk/forums/index.php [nofollow]

I took off the avatar mod as it was causing other issues, so it was uninstalled before TP was installed.

I may have made some edits to the original CSS though, I can't remember for sure. Might try uploading the originals now.

@Antechinus thanks for your help with the other issue!

@rjen

Quote from: Antechinus on May 05, 2022, 11:11:29 AMNo idea at the moment. That would require actual analysis.

Ok, finished the analysis and found the cause. It is actually a css change I made from your suggestions to change the display for child boards  ;)

I had included this css to show the child boards in 4 columns.

/* -------------------- */
/* Changes to display child boards in columns */
.children {
order: 5;
width: 100%;
margin: 0;
padding: 5px 5px 5px 80px;
border: 0;
border-top: 1px solid #ddd;
}
.up_contain:first-child .children {
padding-top: 8px;
}
[id^="board_"][id$="_children"] > p {
column-count: 4;
}
[id^="board_"][id$="_children"] > p > span {
display: block;
overflow: hidden;
padding: 0 5px 0 0;
white-space: nowrap;
text-overflow: ellipsis;
}
[id^="board_"][id$="_children"] span::after {
content: '';
}

@media screen and (max-width: 900px) {
[id^="board_"][id$="_children"] > p {
column-count: 2;
}
}
@media screen and (max-width: 720px) {
.children {
padding: 5px;
}
[id^="board_"][id$="_children"] > p {
column-count: 1;
}
[id^="board_"][id$="_children"] > p > span {
padding: 2px 5px 2px 0;
}
}
/* Changes to display child boards in columns */

This was working fine when TP was using the table display, but now with flex it pushes the main container wide because as it seems the text wrapping is no longer happening...

    white-space: nowrap;
    text-overflow: ellipsis;

Any idea why the 'wrap-in-flex' does not work?
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

@rjen

Quote from: cookdandbombd on May 05, 2022, 12:18:52 PM
Quote from: @rjen on May 05, 2022, 07:49:06 AMThat does not happen to me, but it may be caused by changes made (by a MOD?) to the avatar settings.
Can you share a link to the forum where this is happening?

Sure, https://www.cookdandbombd.co.uk/forums/index.php

I took off the avatar mod as it was causing other issues, so it was uninstalled before TP was installed.

I may have made some edits to the original CSS though, I can't remember for sure. Might try uploading the originals now.


You have an inline style in your template that overrules the tinyportal css.
Not sure why it is in there but I am sure it is not from TinyPortal. 
Remove that style to fix the issue...

You cannot view this attachment.
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

cookdandbombd

Quote from: @rjen on May 05, 2022, 02:40:35 PMYou have an inline style in your template that overrules the tinyportal css.
Not sure why it is in there but I am sure it is not from TinyPortal. 
Remove that style to fix the issue...

You cannot view this attachment.

Thank you! Must be from my useless attempts at getting avatars on mobile.

The other main problem I have now is the breadcrumbs, people are having issues getting back to the forum instead of the portal page.

At the top where it has "site name > forums > subforum name" clicking forum takes you to the portal rather than back to the forum index.

@rjen

Somehow the forum link in the breadcrumb is broken..

You cannot view this attachment.

The link displayed is incorrect.
where is states: https://www.cookdandbombd.co.uk/forums/index.php#c2

the link is supposed to state: https://www.cookdandbombd.co.uk/forums/index.php?action=forum

I have no clue what causes that, but my first suggestion would be to uninstall TinyPortal and install it again..
Have you tried any more manual changes?
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

cookdandbombd

Quote from: @rjen on May 05, 2022, 02:51:14 PMSomehow the forum link in the breadcrumb is broken..

You cannot view this attachment.

The link displayed is incorrect.
where is states: https://www.cookdandbombd.co.uk/forums/index.php [nofollow]#c2

the link is supposed to state: https://www.cookdandbombd.co.uk/forums/index.php [nofollow]?action=forum

I have no clue what causes that, but my first suggestion would be to uninstall TinyPortal and install it again..
Have you tried any more manual changes?

Thanks again! No mate, not done any more changes that I can think of.

I'm just having quite a few issues these days with the software. I think the caching may be causing some of these issues.

Now it seems to be working, but has seemingly changed so that the breadcrumb trail (from within a subforum) has become:

Site name > forum > forums > subforum name

"Forum" links to index.php?action=forum and "forums" links to the same but with the #c2 at the end lol. It really doesn't seem both links should be there. I just added in "change forum width" mod so it could be that? Tiny Portal looks too squashed on curve with the default width.

Thank you for your continued help with this.

@rjen

I am using the forum width mod myself, highly unlikely that it causes that
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

Antechinus

#3157
Quote from: @rjen on May 05, 2022, 01:36:36 PMOk, finished the analysis and found the cause. It is actually a css change I made from your suggestions to change the display for child boards  ;)

I had included this css to show the child boards in 4 columns.

/* -------------------- */
/* Changes to display child boards in columns */
.children {
     order: 5;
     width: 100%;
     margin: 0;
     padding: 5px 5px 5px 80px;
     border: 0;
     border-top: 1px solid #ddd;
}
.up_contain:first-child .children {
     padding-top: 8px;
}
[id^="board_"][id$="_children"] > p {
     column-count: 4;
}
[id^="board_"][id$="_children"] > p > span {
     display: block;
     overflow: hidden;
     padding: 0 5px 0 0;
     white-space: nowrap;
     text-overflow: ellipsis;
}
[id^="board_"][id$="_children"] span::after {
     content: '';
}

@media screen and (max-width: 900px) {
[id^="board_"][id$="_children"] > p {
     column-count: 2;
    }
}
@media screen and (max-width: 720px) {
.children {
     padding: 5px;
}
[id^="board_"][id$="_children"] > p {
     column-count: 1;
    }
[id^="board_"][id$="_children"] > p > span {
     padding: 2px 5px 2px 0;
}
}
/* Changes to display child boards in columns */

This was working fine when TP was using the table display, but now with flex it pushes the main container wide because as it seems the text wrapping is no longer happening...

    white-space: nowrap;
    text-overflow: ellipsis;

Any idea why the 'wrap-in-flex' does not work?
Yup. That requires the width: 100%; on .children to work (flex and grid can be weird with overflow). But I notice your test site is back to standard board index CSS and the problem is still there, although to a lesser extent.

If I add this to the CSS in dev tools, everything works:
#centerContainer {
  flex: 1 1 auto;
  order: 2;
  max-width: calc(100% - 460px);
}

So, the best way to nail this issue at the source is to find this in TPBlockLayout.template.php:
echo '
<div id="centerContainer">

Now, side issue: there is no apparent need for clear: both; on a lot of divs in this template. I have no idea why it's there. They are all just bog standard divs, sitting in a parent container that has nothing odd applied to it. They will automatically stack down the page. The clear: both; does no harm, but does no good either.

ETA: Just thought, it may have been due to your <div class="tp_upshrink20"> having floated icons inside it. In that case, just add overflow: hidden; to <div class="tp_upshrink20"> (either as an inline style, or in the CSS).

So you can do this, to prevent an empty style attribute being echoed in some places:

echo '
<div class="'. $sideclass .' '. $respClass .'">';
if(!empty($context['TPortal']['upshrinkpanel']) && (!TP_SMF21))
echo '
<div class="tp_upshrink20">', $context['TPortal']['upshrinkpanel'] , '</div>';

if($context['TPortal']['toppanel']==1)
echo '
<div id="tptopbarHeader"' , in_array('tptopbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
' , TPortal_panel('top') , '
</div>';

echo '
<div id="mainContainer">';

// TinyPortal integrated bars
if($context['TPortal']['leftpanel']==1) {
echo '
<div id="tpleftbarContainer" style="width:' , ($context['TPortal']['leftbar_width']) , 'px; ' , in_array('tpleftbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? 'display: none;' : '' , '" >
<div id="tpleftbarHeader"' , in_array('tpleftbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
' , $context['TPortal']['useroundframepanels']==1 ?
'<span class="upperframe"><span></span></span>
<div class="roundframe" style="overflow: auto;">' : ''
, TPortal_panel('left') ,
$context['TPortal']['useroundframepanels']==1 ?
'</div>
<span class="lowerframe"><span></span></span>' : '' , '
</div>
</div>';
}
// TinyPortal integrated bars
if($context['TPortal']['rightpanel']==1)
{
echo '
<div id="tprightbarContainer" style="width:' ,$context['TPortal']['rightbar_width'], 'px;' , in_array('tprightbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? 'display: none;' : '' , '" >
<div id="tprightbarHeader"' , in_array('tprightbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
' , $context['TPortal']['useroundframepanels']==1 ?
'<span class="upperframe"><span></span></span>
<div class="roundframe">' : ''
, TPortal_panel('right') ,
$context['TPortal']['useroundframepanels']==1 ?
'</div>
<span class="lowerframe"><span></span></span>' : '' , '
</div>
</div>';
}
echo '
<div id="centerContainer" style="max-width: calc(100%', $context['TPortal']['leftpanel']==1 ? ' - ' . $context['TPortal']['leftbar_width'] . 'px' : '','', $context['TPortal']['rightpanel']==1 ? ' - ' .  $context['TPortal']['rightbar_width'] . 'px' : '' ,')">
<div id="tpcontentHeader">';

if($context['TPortal']['centerpanel']==1) {
echo '
<div id="tpcenterbarHeader"' , in_array('tpcenterbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
' , TPortal_panel('center') , '
</div>';
    }
echo '
                </div><!--tpcontentHeader-->';
}

function template_tp_below()
{
global $context;

if($context['TPortal']['lowerpanel']==1)
echo '
<div id="tplowerbarHeader"' , in_array('tplowerbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
' , TPortal_panel('lower') , '
</div>';
// end centerContainer
echo '
</div>';
// end mainContainer
echo '
</div>';

if($context['TPortal']['bottompanel']==1)
echo '
<div id="tpbottombarHeader"', in_array('tpbottombarHeader', $context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
', TPortal_panel('bottom') , '
</div>';

echo '
</div>';
}

That should work, as long as $context['TPortal']['leftpanel']==1 and $context['TPortal']['rightpanel']==1 are applied individually for each page, that may or may not have the sidebar displayed (which I assume is the case).

I'm pretty sure I have the logic correct there, but double check anyway. This should be a bulletproof solution. I've attached an edited copy of the template.

Antechinus

Oh hang on, wrong logic (just made the mistake of thinking I should actually check it on local :P ).

This seems to work:

    echo '
    <div class="'. $sideclass .' '. $respClass .'">';
    if(!empty($context['TPortal']['upshrinkpanel']) && (!TP_SMF21))
        echo '
        <div class="tp_upshrink20">', $context['TPortal']['upshrinkpanel'] , '</div>';

    if($context['TPortal']['toppanel']==1)
        echo '
        <div id="tptopbarHeader"' , in_array('tptopbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
            '    , TPortal_panel('top') , '
        </div>';

    echo '
        <div id="mainContainer">';

    // TinyPortal integrated bars
    if($context['TPortal']['leftpanel']==1) {
        echo '
            <div id="tpleftbarContainer" style="width:' , ($context['TPortal']['leftbar_width']) , 'px; ' , in_array('tpleftbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? 'display: none;' : '' , '" >
                <div id="tpleftbarHeader"' , in_array('tpleftbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
                    ' , $context['TPortal']['useroundframepanels']==1 ?
                    '<span class="upperframe"><span></span></span>
                    <div class="roundframe" style="overflow: auto;">' : ''
                    , TPortal_panel('left') ,
                    $context['TPortal']['useroundframepanels']==1 ?
                    '</div>
                    <span class="lowerframe"><span></span></span>' : '' , '
                </div>
            </div>';
    }
    // TinyPortal integrated bars
    if($context['TPortal']['rightpanel']==1)
    {
        echo '
            <div id="tprightbarContainer" style="width:' ,$context['TPortal']['rightbar_width'], 'px;' , in_array('tprightbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? 'display: none;' : '' , '" >
                <div id="tprightbarHeader"' , in_array('tprightbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
                    ' , $context['TPortal']['useroundframepanels']==1 ?
                    '<span class="upperframe"><span></span></span>
                    <div class="roundframe">' : ''
                        , TPortal_panel('right') ,
                        $context['TPortal']['useroundframepanels']==1 ?
                    '</div>
                    <span class="lowerframe"><span></span></span>' : '' , '
                </div>
            </div>';
    }

    echo'
            <div id="centerContainer" style="max-width: calc(100%', in_array('tpleftbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==0 ? ' - ' . $context['TPortal']['leftbar_width'] . 'px' : '','', in_array('tpleftbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==0 ? ' - ' .  $context['TPortal']['rightbar_width'] . 'px' : '' ,')">
                <div id="tpcontentHeader">';

    if($context['TPortal']['centerpanel']==1) {
        echo '
                    <div id="tpcenterbarHeader"' , in_array('tpcenterbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
                        ' , TPortal_panel('center') , '
                    </div>';
    }
    echo '
                </div><!--tpcontentHeader-->';
}

function template_tp_below()
{
    global $context;

    if($context['TPortal']['lowerpanel']==1)
        echo '
                <div id="tplowerbarHeader"' , in_array('tplowerbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
                    ' , TPortal_panel('lower') , '
                </div>';
// end centerContainer
    echo '
            </div>';
// end mainContainer
    echo '
        </div>';

    if($context['TPortal']['bottompanel']==1)
        echo '
        <div id="tpbottombarHeader"', in_array('tpbottombarHeader', $context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? ' style="display: none"' : '', '>
            ', TPortal_panel('bottom') , '
        </div>';

    echo '
    </div>';
}

New edited template attached. :)

Antechinus

I tested the second version on local and it seemed to be fine. Width was correct with sidebars collapsed or expanded, and with sidebar enabled in the forum or disabled in the forum.

But if the logic sill needs tweaking that should be easy. Just a matter of bunging in the correct variable (and there must be one...).

IMO it is worth getting a solid fix for this, because then TP will be able to handle custom themes without breaking. If it can only handle default markup and CSS then it's far more restrictive.

Advertisement: