Categories placement on the home

[3malG]

Where is the code which calculates the positions and placements of categories on the home.tpl? How can I customize the number of categories in a row?

[frissdiegurke]

@3malG said:

How can I customize the number of categories in a row?

in ACP within categories you can set custom class names (default col-md-3 col-xs-6).
These are twitter bootstrap classes to manage the sizes.
col-X-Y where X is the display-width (xs extra small, smsmall, md medium, lg large) and Y the amount of the 12 available columns to use.

For example col-md-3 col-xs-6 means on extra small and small devices use 6 columns (1/2 of display-width) and on medium + large devices use 3 columns (1/4 of display-width) for each category-box.

[3malG]

Thank you! I have seen that, but not figured out what have which influence on what

[a_5mith]

As long as you have a number divisible by 12, it will work. So, 2,3,4,6,12 would give you 6,4,3,2,1 rows respectively. The lg, md, sm etc are the break points. Start with large, then make your screen smaller until you find a breakpoint, that will be the next one. Adjust as necessary.

Edit: you can also mix and match the numbers, but the row has to =12. You could 3, 4, 2 and 3. And it would work, look odd, but work.

[3malG]

col-lg-1 seams dont work for me, how large is large?

[a_5mith]

@3malG said:

col-lg-1 seams dont work for me, how large is large?

Large is full width. So, 1024? I think, 1 is also very small. If you want it full width, you'd use 12.

This is 12.

This is 6.

[3malG]

No, on very big screens I wanted to have a lot of columns, so you see a lot of topics at once, so -1 is ok, my definition is as follows: col-lg-1 col-md-3 col-sm-6 col-xs-12 but i have maximum 4 columns, not more, on 4000 pixel window.

[a_5mith]

@3malG

I see, so you can't get more than 4 in a row? Erm, well, lg-1 is 8.3333% width. So you should be able to fit 12 on a row...

col-lg-1 gives you

[3malG]

This is exactly what I want, but with my definition col-lg-1 col-md-3 col-sm-6 col-xs-12 I get not more then 4 columns:

[a_5mith]

@3malG said:

This is exactly what I want, but with my definition col-lg-1 col-md-3 col-sm-6 col-xs-12 I get not more then 4 columns:

That seems like 3. Can you try setting md-3 to md-1 and saving.

[3malG]

Yes, on big windows it looks like I wanted:

But on small windows it looks now ugly:

That is why I wanted to define col-lg-1 which do not work

[a_5mith]

@3malG said:

Yes, on big windows it looks like I wanted:

But on small windows it looks now ugly:

That is why I wanted to define col-lg-1 which do not work

In that case then, I would recommend adding a new class called col-xl before col-lg, then in your css doing something like

@media all and (min-width: 2048px) {
 .col-xl { width:8.33333% }
}

I haven't tested the code above, so you may have to add a few other pieces of CSS to that, you may have large gaps between them. I'm not 100%.

Also, your screen is bloody enormous. I'm assuming it's one of those new fangled 4K things?

[3malG]

Don't work for some reson, I have put this code in and changed col-lg-1 to col-xl, but no change. Why do the col-lg-1 not work?

( Yes, it is a bigger screen )

[frissdiegurke]

They don't work because the lavender theme seems to have some overwrites to fix 100% not fitting in some browsers:
https://github.com/NodeBB/nodebb-theme-lavender/blob/master/less/style.less#L80-L90

Because of the .home ... it's more specific and overwrites the default bootstrap classes.
To make your own ones working you have to use sth. like this for now:

@media all and (min-width: 2048px) {
  .home .col-xl { width:8.33333% }
}

ping @psychobunny maybe he'll fix that for standard bootstrap classes (would need to include all col-md and col-lg classes definitions into theme thought).

PS: you can see/change the bootstrap settings in lavender here, so it's lg: 1200px+, md: 992px+, sm: 768px+, xs: 480px+
But beware that this affects all columns on each page not only on home... If you intend to only change home you should rather overwrite them with .home .col-... as in above code-block