I need help with Code Box display problem

[Shades.]

SMF 2.1.1
Custom Theme

I think my themes are broken lol!

When I post this code on my forum:

Code Select Expand

echo '
', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.svg" alt="Simple Machines Forum" title="Simple Machines Forum">' : '<div id="siteslogan">' . $settings['site_slogan'] . '</div>', '';

echo '
</div>
It displays like this:

You cannot view this attachment.

and it should look like this:

You cannot view this attachment.

I don't know what I did and could use some expertise please!

[Shades.]

Also just realized the "Code:[Select] link doesn't work!

[Antechinus]

Oh that one. It's something to do with flexbox, or possibly grid, depending on how you have set the CSS for your posts. Can't remember the fix offhand but it's a really simple one. It'll come back to me once I've had some coffee.

[Shades.]

Looks like this code I added from @Diego Andrés here.

Code Select Expand

/***** Begin .poster box grid *****/

#forumposts .windowbg {
    padding: 0;
}
#forumposts .post_wrapper {
    display: grid;
    grid-template-columns: 175px 1fr;
}
#forumposts .poster {
    grid-row-start: 1;
    grid-row-end: 5;
    padding: 10px 7px;
    width: 175px;
}
#forumposts .postarea {
    padding: 10px 10px;
}
#forumposts .postarea,
#forumposts .moderatorbar {
    margin-left: 0;
    padding-left: 15px;
}

/***** End .poster box grid *****/
When I take it out the post area goes back to normal like it should and adjusting that code is way above my skill level!  

Edit: Not sure if I even need the code above cause it looks good without it but I'm afraid if I leave it out might mess up something else.

And I added to this:

Code Select Expand

/* poster details and list of items */
.poster {
    float: left;
    /* Don't set this in em.It will eat too much space if people need to set large text sizes. */
    width: 160px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word; /* IE fallback */
    overflow-wrap: break-word;
    background-color: #f6f7ed;
    border-radius: 5px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

[Antechinus]

Lol. I took a look at what I'm using here:

Code Select Expand

.post_wrapper {
  display: grid;
  grid-template-columns: 175px minmax(0,calc(100% - 32px));
  grid-auto-rows: 1fr min-content;
}Memory is still a bit hazy, but I'm pretty sure it's the second chunk in the columns declaration that is the critical part (minmax etc). The 32px there is just because I am running a 16px padding each side, so it has to account for that in calculating the maximum width.

This is the complete code I am using, for the entire post area and all its contents:

Code Select Expand

/* ---------------------------------------------------- */
/* Adjust parent .windowbg for better looks of content. */
#forumposts .windowbg,
#forumposts .approvebg,
#personal_messages .windowbg {
    padding: 0;
}
/* -------------------- */
/* Grid parent element. */
/* -------------------- */
.post_wrapper {
    display: grid;
    grid-template-columns: 175px minmax(0,calc(100% - 32px));
    grid-auto-rows: 1fr min-content;
}
/* ---------------------- */
/* You need to kill this! */
.post_wrapper::after {
    display: none;
}
/* ----------------- */
/* First grid child. */
.poster {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 175px;
    padding: 10px 0 15px 15px;
}
/* ------------------ */
/* Second grid child. */
.postarea {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    /* Set to flex parent. */
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 10px 15px 0 10px;
}
/* ----------------- */
/* Third grid child. */
.moderatorbar {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;
    padding: 0 15px 10px 10px;
}
/* --------------------- */
/* End of grid children. */
/* --------------------- */
/* Start flex children. */
/* -------------------- */
/* General reset. */
.postarea > div {
    flex: none;
}
/* ------------------ */
/* Second flex child. */
.postarea > .post {
    flex: 1 0 auto;
}
/* ----------------- */
/* Third flex child. */
.postarea > .attachments {
    /* Changed position to #4. */
    /* Attachments are now beneath buttons. */
    order: 4;
    margin: 0;
}
/* ------------------ */
/* Fourth flex child. */
.postarea > .under_message {
    /* Changed position to #3. */
    /* Buttons are now above attachments. */
    order: 3;
}
/* ------------------ */
/* End flex children. */
/* ------------------ */
.counter {
    color: #6f6f6f;
}
/* ------------------- */
/* Poster information. */
.poster h4 {
    position: relative;
    padding-bottom: 4px;
    font-size: 1.0625rem;
    font-weight: 400;
}
.poster h4 a, .poster h4 a:hover, .poster h4 a:focus {
    color: #9d8262;
}
.poster h4 span {
    float: right;
    margin: 6px;
}
.on {
    background: #29a329;
    border-color: #259325;
}
/* Scrunch this. */
.user_info {
    font-size: .75rem;
    line-height: 1.25em;
}
.user_info .icons {
    padding: 4px 0;
}
.user_info .blurb {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* @todo - Hidden by preference. */
.user_info .membergroup,
.user_info .title,
.user_info .poster_ip {
    display: none;
}
/* -------------------- */
/* Posts & pm headings. */
.keyinfo .postinfo a, .keyinfo .postinfo a strong {
    color: #9d8262;
}
.keyinfo .modified, .keyinfo .page_number {
    color: #666;
    opacity: 1;
}
/* -------------------------------- */
/* Fix line-height in posts & pm's. */
.post {
    line-height: inherit;
}
/* ------------------------------------ */
/* Remove min-height from post content. */
/* @todo - Use grid for .post_wrapper ? */
.inner, .list_posts {
    min-height: 0;
    border-top: 2px solid #07090a;
    box-shadow: inset 0 1px 0 #20272c;
}
/* ------------------------- */
/* sigs, custom fields, etc. */
.attachments, .under_message, .custom_fields_above_signature, .signature, .custom_fields_below_signature {
    padding: 12px 0 2px;
    line-height: 1.25rem;
    font-size: 0.75rem;
    border-top: 2px solid #07090a;
    box-shadow: inset 0 1px 0 #20272c;
}
.attachments {
    margin-top: 6px;
}
.under_message {
    border-top: 0;
    box-shadow: none;
}
.signature img {
    max-width: 90%;
    max-height: 48px;
    opacity: .7
}
/* ----------------------------------- */
/* @todo - Responsive code for mobile. */
/* Post & PM templates, media queries. */
@media screen and (max-width: 720px) {
    .pagesection.top {
        display: block !important;
    }
    #forumposts #new::after {
        margin-left: calc(50% - 16px);
    }
    .post_wrapper {
        display: block;
    }
    .poster {
        width: auto;
        min-height: 65px;
        padding: 10px 10px 5px;
    }
    .poster::after {
        display: block;
        clear: both;
        content: '';
    }
    .poster h4, .poster .user_info {
        margin-left: 60px;
    }
    .user_info {
      display: block;
    }
    .poster li.avatar {
        display: block !important;
        float: left;
        width: 50px;
        margin: -2.5em 0 0 -60px;
        text-align: center;
    }
    li.avatar::before {
        display: none;
    }
    li.avatar>a {
        display: block;
    }
    .poster img.avatar {
        max-height: 50px !important;
        max-width: 50px !important;
    }
    .poster li {
        padding-right: 4px;
        vertical-align: bottom;
    }
    .poster .icons {
        padding: 0 4px 0 0;
    }
    .poster .blurb {
        display: none;
    }
}


[Shades.]

Now I remember why I added the code from Diego was because I wanted the User box to fill that column to the left of the post.

You cannot view this attachment.

[Antechinus]

Yes, and my code does that too.
Just try adding a minmax(lotsa crud) instead of the basic 1fr for the second grid column.

Oh and you will need to get rid of the default ::after pseudo here:

Code Select Expand

/* ---------------------- */
/* You need to kill this! */
.post_wrapper::after {
    display: none;
}That was only ever added as a way of clearing floats, but with grid it just screws things up (and nothing is floated anymore anyway).

I set it to display: none; because this is an override for running live on this site. For a custom theme, just find where that pseudo is declared and ditch that chunk of code.

[Antechinus]

Oh hang on, you have default crud too.

And I added to this:

Code Select Expand

/* poster details and list of items */
.poster {
    float: left;
    /* Don't set this in em.It will eat too much space if people need to set large text sizes. */
    width: 160px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word; /* IE fallback */
    overflow-wrap: break-word;
    background-color: #f6f7ed;
    border-radius: 5px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

This is where you are getting into tying yourself in knots by constantly adding code you don't understand. It's a trap. If you keep doing that you'll find your themes full of code they don't need, and which is just more confusing if you want to change anything.

For a start: if you are using grid to display all the post elements then there is no point trying to float the poster div, and the width is set by the grid declarations. Personally I would also not give a flying you know what about IE fallbacks or ancient webkit fallbacks at this stage.

I'd trim all of that down to this:

Code Select Expand

/* poster details and list of items */
.poster {
    hyphens: auto;
    overflow-wrap: break-word;
    background-color: #f6f7ed;
    border-radius: 5px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
Although personally I think it looks a bit funny if the .poster div has a border-radius all round. I think it looks cleaner if it only has the radius at top left and bottom left. But that's personal preference.

[Shades.]

Got my dunce hat on going back to the drawing board!  

[Shades.]

Dummy question here but where does the post area begin and end cause I think (ok I'm sure) I did it wrong!?

Now I've got too much space below!

You cannot view this attachment.

Edit: Oh wait I put this back in...

Code Select Expand

/* ---------------------- */
/* You need to kill this! */
.post_wrapper::after {
    display: none;
}and it fixed it!

You cannot view this attachment.

[Antechinus]

Use your browser dev tools to take a look at it (right click > inspect). I have no idea what you have done. I'm on the other side of the world, staring at a png.

ETA: Don't bother telling the ::after to display: none. Just find where it is declared originally and get rid of that. Told you this already.

[Shades.]

Told you this already.

Sorry I'm just trying to make since of it all and I need a better browser tool (one for dummies)!

[Shades.]

Oh and you will need to get rid of the default ::after pseudo here:

Oh went back and looked and realized I misread what you said my bad!