[PAID/FREE] Tidy-Child-Boards on 2.1.4

[Alex98]

Hello everyone. long months of searching in vain for a mod that worked great on 2.0.x, on 2.1.x it doesn't work, it doesn't work either. we have it from github as a version for 2.1, but it doesn't work as it should. I would ask someone to do it, it doesn't matter if it's free or premium, it's not a problem at all. the mod in question is, "Tidy Child Boards on 2.1.4" (https://www.simplemachines.org/community/index.php?topic=588162.0) , (https://github.com/realdigger/SMF-Tidy-Child-Boards-2)


Also, I would like a mod to be made like it could be made on 2.0.x, which is that when a user is suspended on the forum, it says "BANDED" as their primary rank, like this mod https://custom.simplemachines.org/index.php?mod=3384


By the way, if anyone wants a job editing smf, please PM me

[Steve]

Just an FYI, the word you want is 'Banned', not 'Banded'.

[Alex98]

bump

[Antechinus]

Child boards in columns is just a minor CSS edit in 2.1. It doesn't really require a mod as such,

[Alex98]

Child boards in columns is just a minor CSS edit in 2.1. It doesn't really require a mod as such,

How

[Antechinus]

This is what I run to get 5 columns, specifically for the masses of child boards under the "Language Specific Support" parent  board. You can adjust it to any number of columns you like, and set it for all boards or for individual boards.

Code Select Expand

/* ------------------ */
/* SMF site-specific. */
#board_12_children > p {
    position: relative;
    padding-top: 2em;
    column-count: 5;
}
#board_12_children > p > strong {
    position: absolute;
    top: 0;
}
#board_12_children > p > span {
    display: block;
    overflow: hidden;
    padding: 2px 8px 2px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#board_12_children > p > span:nth-child(4) {
    display: none;
}
#board_12_children span::after {
    content: '';
}
/* Board and topic media queries. */
@media screen and (max-width: 1024px) {
    #board_12_children > p {
        column-count: 3;
    }
}
@media screen and (max-width: 720px) {
    #board_12_children > p {
        column-count: 2;
    }
}
@media screen and (max-width: 300px) {
    #board_12_children > p {
        column-count: 1;
    }
}
 
Although really, for production use, the break points should be in rem. Using break points in px for text content is kinda stupid, because you do not know what font-size the user will have selected in their browser. That means your clever "automatic" system of media queries will break down for non-default font sizes (not a problem for me on this site). OTOH, for things like image sizing and positioning, which do not depend on font-size, break points in px can work very well.

But, since the child board spans are text, the break points for the media queries should be in rem. So instead of 1024px, 720px and 300px they would be 64rem, 45rem and 19rem (because, when it comes to media query break points, 1rem is always 16px by default regardless of what is set in your CSS).

[live627]

You could forego the media queries with some grid trickery

Code Select Expand

display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
I use this code in several projects of mine to help neatly organise big lists of data

[dodos26]

If I understand correctly what you want to do, this will be it



Make change in theme template css:

Code Select Expand

.child_boards {
    display: grid;
    grid-template-columns: repeat(3, 17vh);
    gap: 10px;
    align-items: baseline;
    justify-items: center;
}And result:



How change to ur template change 17vh ( repeat(3, 17vh); ) to the unit that suits you or read here:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

3 Indicates how many columns are to be created
Vh takes into account the size of screens. Gives the most responsive effect and fit.

[Diego Andrés]

17vh? For a column width?
That doesn't seem right.

[Alex98]

the methods don't work for me 

[Diego Andrés]

the methods don't work for me 

Why not?

[Antechinus]

3 Indicates how many columns are to be created
Vh takes into account the size of screens. Gives the most responsive effect and fit.

Yes, vh is measured off the height of the screen, but for deciding how many columns you want the width of the screen is what matters.

Furthermore, what really matters is the current width of the parent element (which may not be full screen width) relative to the text content. Which is why setting break points for text content in anything other than rem is self-defeating. This is not rocket science.

If you set you break points in rem, your layout will always work even if someone on a phone has turned up font-size to the maximum of 200%, and regardless of the phone's dimensions. I know it works, because I have tested it. It will not work if you set your break points in vh.

[Antechinus]

the methods don't work for me 

You probably forgot to clear your browser cache. CSS is cached.

[Illori]

and in 2.1 minified. that has to be turned off or cleared to show the change.

[dodos26]

the methods don't work for me 

You can tell us what style you use. And you can quickly edit the css in developer options in google chrome. Then you can quickly and continuously check how the changes are behaving


Or click right ur link subboard and use examine. Then find some parent element with the class "child_boards" or something that holds all the sub boards and then on click it and at the bottom you will find in styles element[dot]style by clicking that you can add the content given by one of us that is in child_boards. This will make you see the changes on one element and compare it to the others. This will not be saved you will have to add your matching changes in the css file and clear the page cache file, you will do this in developer options when you click right and choose explore. Then the network section and click disable cache next refresh web. Don't forget to uncheck disable cache for yourself.

[dodos26]

17vh? For a column width?
That doesn't seem right.

When use rem..


When use vh:



Now i test and best result for all resolution gives:

Code Select Expand

grid-template-columns: repeat(3, 1fr);

[Diego Andrés]

Vh is viewport height as described throughly above, that's why you're using the wrong unit. You want to use the width.

[Alex98]

I tried everything written via (F12 Inspect element) but it doesn't work, here is the url so you can test it, if anyone can let me know if it works, thanks

https://los-balkan.com/index.php

[Antechinus]

17vh? For a column width?
That doesn't seem right.

When use rem..

If it doesn't work, you have done something else wrong.

Do note that I was not suggesting setting fixed column widths in rem. I was saying that break points for media queries should be set in rem. I usually do columns just by changing column-count.

[Antechinus]

I tried everything written via (F12 Inspect element) but it doesn't work, here is the url so you can test it, if anyone can let me know if it works, thanks

https://los-balkan.com/index.php

You are using a custom theme that does not have default markup. You should have mentioned this initially.

This should work:

Code (Find) Select Expand

.children {
padding: 5px;
border-top: 1px solid #000;
width: 100%;
}

Code (Replace) Select Expand

.children {
column-count: 2;
width: fit-content;
padding: 5px 5px 5px 2em;
border-top: 1px solid #000;
}
.children > strong {
display: block;
column-span: all;
margin: 2px 3px;
padding: 2px 4px;
}
.children-bg {
display: block;
}