Topic: Ant's Mutant Curve

[Steve]

My boss is right of course, but I've checked the dates and no responses will get mixed up. So, at the risk of getting yelled at (and she did say 'usually'), I'm going to go ahead and merge the two.

[Antechinus]

Lol. I think it's safe in this case.

[temuco]

Hello and thank you for the great work!

I have two questions:

1) The specifications for the size of the IMG tag have no effect. How can this be fixed?

2) The Info Centre shows the new posts in two columns on the PC. How can I change this view to only one column?

Thanks again!

[Antechinus]

1) Not sure what you mean here. Are you referring to the maximum image size for images inside BBC tags? I added a restriction so that images would not be larger than post width, so that the entire image would always be visible. If you want a large image to display at its full size (ie: overflowing post width) that's not hard to do, but I'm about to go to sleep for the night so I'll sort it tomorrow.

2) It should be showing in four columns on a large enough screen. Anyway, same deal as 1). Easy to change, but manana.

[temuco]

For 1) I mean the specifications "width" and "height" such as e.g.

Code: [Select]

[img width=640 height=480]https://myhomespace.examlple/myimage.jpg[/img]
No matter what I enter, it has no effect.

Regarding 2) I would like to have only one column, no matter how wide the monitor is.

Thank you very much and good night!

¡Hasta mañana!

[Antechinus]

1) For the images in posts, find this in index.css:

Code: [Select]

/* Auto resizing of images in posts, pm's, etc. */
/* Change max-heights to suit your preference. */
.bbc_img {
height: auto;
width: auto;
max-width: 100%;
max-height: 640px;
}
.signature .bbc_img {
max-height: 150px;
}

What is probably screwing you up is the max-width and max-height. The former won't allow an image wider than the post content area. The latter obviously restricts height to less than 641px.

If you remove the max-width and max-height you should be able to set any size on the image's BBC tag. You'll then need to allow large images to overflow the post content area, so find this:

Code: [Select]

.inner, .ignored_prompt {
    overflow: hidden;
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid #99a;
}

And change the overflow from hidden to auto. That should fix it.

2) For the recent posts columns, find this:

Code: [Select]

.recent_posts {
display: flex;
flex-wrap: wrap;
margin: -5px 2px 0;
}
.recent_posts p {
flex: 1 1 auto;
box-sizing: border-box;
width: 49%;
margin: 0 .5%;
padding: 6px 0;
overflow: hidden;
font-size: 1.2rem;
text-overflow: ellipsis;
border-bottom: 1px solid #ddd;
}
Change it to this:

Code: [Select]

.recent_posts {
margin: -5px 2px 0;
}
.recent_posts p {
box-sizing: border-box;
margin: 0 .5%;
padding: 6px 0;
overflow: hidden;
font-size: 1.2rem;
text-overflow: ellipsis;
border-bottom: 1px solid #ddd;
}

[temuco]

Thank you very much! After work I will try it out immediately and report the result here. Have a nice day!

[temuco]

In order for the size information of images to work again, I only had to remove the following two lines from ".bbc_img" in index.css:

height: auto;
width: auto;

Accordingly, the instruction looks like this:

/* Auto resizing of images in posts, pm's, etc. */
/* Change max-heights to suit your preference. */
.bbc_img {
   max-width: 100%;
   max-height: 640px;
}
.signature .bbc_img {
   max-height: 150px;
}

This means that the images must not be wider than the display width or higher than 640px, which is a good idea.

Now the latest posts are single-column due to your tip (2). That is almost perfect. The only remaining wish is the right alignment of the text from the position of the date. Maybe you could put the board name in before the date.

[Antechinus]

Ok. That's odd. The height and width in a BBC image tag are inline in the markup, and that usually overrides anything that's in a CSS file. So I would have expected the auto to be overridden if you specified your own height and width in the BBC tag. Offhand I'm not sure why it wouldn't override the file's code. I'm curious now, so might do some testing.

With the recent posts: you could change the markup (not a big deal) or you could change the CSS to put the date last. There are a few ways you could do it. I'm not sure what you mean by "the right alignment of the text from the position of the date". Do you want the date to be sitting at the right side of each paragraph?

If you can chop and paste a screenshot of exactly what result you want I can tell you how to get it.

[temuco]

I have already changed the order and the appearance so far that this corresponds to my preferences. I only want the dates and times to be right-aligned, as the picture shows.

[Antechinus]

Ok. Simplest way of doing it is to leave the markup alone, and just add this to the CSS:

Code: [Select]

.recent_posts p span:nth-child(3) {
float: right;
}
If you have already changed the markup to put the date last, you will actually need more complex CSS.
This should do it:

Code: [Select]

.recent_posts p {
display: flex;
flex-wrap: wrap;
}
.recent_posts p span:last-child {
margin-left: auto;
}
Haven't tested that, so if it doesn't work I'll fire up local and try a few things. But really, once you are into using flex anyway you might as well leave the markup standard, since any required positioning trickery can be done on the standard markup with flex.

[temuco]

We have overlapped...

From line no. 320 of "BoardIndex.template.php" I have made the following changes:

Code: [Select]

/* Each post in latest_posts has:
            board (with an id, name, and link.), topic (the topic's id.), poster (with id, name, and link.),
            subject, short_subject (shortened with...), time, link, and href. */
foreach ($context['latest_posts'] as $post)
echo '
    <p>
        <strong>', $post['link'], '</strong>
        <span>', $txt['by'], ' ', $post['poster']['link'], '</span>
        <span>', ' (', $post['board']['link'], ')</span>
        <span style="float: right; display: block; width: auto;">', $post['time'], '</span>
    </p>';

Admittedly, ugly in the middle of PHP, but it works exactly as I wanted it to on both desktop and mobile devices.

You can see the result here:

https://gez-boykott.de/Forum/index.php

Thank you very much for the great work and best regards!

René

[Antechinus]

Ok. You can do that in index.css if you like:

Code: [Select]

.recent_posts p span:last-child {
float: right;
}
That way you don't need the inline code.
Just be aware that with some browsers, using float: right; on the last child element will cause it to break to a new line.

[temuco]

That's great. Although I still had to change the order and appearance inline, the formatting (right-aligned in this case) via CSS is a nice thing. I learned something again thanks to your support.

Thanks again!

René

[Antechinus]

That's the thing: you don't have to change the order in the markup. That last code snippet was for the way you have the template now (ie: order changed so the date is last). But if you had left the markup the way it was originally, this would have given the same result:

Code: [Select]

.recent_posts p span:nth-child(3) {
float: right;
}
Also note that any floated element is automatically set to display: block; so there's no need to declare it. This is something a lot of people don't seem to know, but it's been part of CSS forever. You'll see code all over the web that says "float: whatever; display: block;" but it's not necessary. Just having the float does the same thing.

width: auto; is the same. It's the default on any floated or block element.

[Antechinus]

This theme has just been updated to version 1.0.7, to implement changes required to support SMF 2.0.18.

It is strongly recommended that you update the theme if you are running an earlier version.

If anyone cannot upgrade for some reason (customisations, etc) and would like me to write a 1.0.6 to 1.0.7 patch for them, that can be done.

The edits required for supporting 2.0.18 are not difficult, and only affect script.js and Search.template.php. They are highly unlikely to affect any customisations that anyone might have done.

If you have not modified either of these files, you could implement the changes by simply copying the 1.0.7 versions to your earlier version of the theme.