Lavender category size

[agarcia17]

Hi everyone,

I was wondering if it was possible to change the size of the categories in the homepage (Lavender theme). I'm trying to get the categories to line up something like this:

But I don't know what file or where I should be make the appropriate changes. Does anybody have an idea? Thanks

[a_5mith]

I don't think it would work like that, but you'd go to the ACP and mess about with the classes in Manage Categories, to me, that looks like col-md-9 for announcements, and col-md-3 for the rest.

Bootstrap works in 12s. So This forum has 3 columns, so each is set to 4. 4x3=12. My site has two coumns per row, so I use 6. 6x2=12.

Then if you want to show the latest topics, to the right of the column class in Manage Categories, is a "# of recent replies" field, just enter a number in there.

The issue you may have is that bugs may not appear until AFTER the announcement window (you'll have a large gap after comments and bugs may appear under announcements)

Screenshot for reference:

Site is in my signature if you wish to compare.

[agarcia17]

@a_5mith thanks for the fast reply! I actually tried messing with the custom class and set the 'announcements' to 'col-md-10 col-xs-6' and the rest to 'col-md-2 col-xs-6' and I got the correct sizes that i would like but all the other categories start stacking under 'announcenemnts" even though there seems to be room to fit to the right. I set the "# of recent replies" of 'announcements' to 5 so that category is pretty big height wise so idk why the other categories still stack under? any idea?

[a_5mith]

@agarcia17 said:

@a_5mith thanks for the fast reply! I actually tried messing with the custom class and set the 'announcements' to 'col-md-10 col-xs-6' and the rest to 'col-md-2 col-xs-6' and I got the correct sizes that i would like but all the other categories start stacking under 'announcenemnts" even though there seems to be room to fit to the right. I set the "# of recent replies" of 'announcements' to 5 so that category is pretty big height wise so idk why the other categories still stack under? any idea?

It's a limitation with bootstrap, each row must = 12. You've already used the 10 in the previous row with the 2, so the next available row must also = 12, so it goes under the 10 as 6 lots of 2 to get the 12. I'm not sure if you could alter this with some changes to bootstrap, because the columns are set using absolute positioning via the bootstrap js file.

Image to show:

[agarcia17]

@a_5mith said:

It's a limitation with bootstrap, each row must = 12. You've already used the 10 in the previous row with the 2, so the next available row must also = 12, so it goes under the 10 as 6 lots of 2 to get the 12. I'm not sure if you could alter this with some changes to bootstrap, because the columns are set using absolute positioning via the bootstrap js file.

Image to show:

I don't really understand because my first category is 10 and the next one is 2 so both should take on the first row since they equal 12 right? or am i missing something?

[a_5mith]

@agarcia17 Your column-10 and your column-2 are considered one row in bootstrap, the others that you wanted under the 2(comments), are considered a new row, a new row occurs underneath the previous row. Hence why your other groups of 2 (in this case bugs and blog) are appearing underneath announcements.

Give me 30 minutes or so to look into a possible solution, just need to throw another development droplet together and install NodeBB onto it.

[a_5mith]

Right, erm, @Developers, would you per chance know where in Lavender the code is that applies the styling to each category?

[agarcia17]

@a_5mith said:

@agarcia17 Your column-10 and your column-2 are considered one row in bootstrap, the others that you wanted under the 2(comments), are considered a new row, a new row occurs underneath the previous row. Hence why your other groups of 2 (in this case bugs and blog) are appearing underneath announcements.

Give me 30 minutes or so to look into a possible solution, just need to throw another development droplet together and install NodeBB onto it.

Thanks!! Just for testing I deactived all the categories and just left two, 'Announcements" (col-md-10) and "Comments" (col-md-2), but they still don't align correctly. From my understanding, they should both be in one row but "Comments" aligns underneath "Announcements"?

[a_5mith]

@agarcia17 YEah I noticed the same behaviour, if you open up Firebug or some form of F12 developer menu, and remove the style from those categories, they line up ok.

Not sure why it's not doing it though.

[agarcia17]

@a_5mith ohh ok I see.. let me play around with it for a bit see if I can come up with something because it appears that the vanilla theme does align "col-md-10" and "col-md-2" correctly but lacks the replies previews

[agarcia17]

can't figure it out anybody have any ideas..?

[esiao]

@agarcia17 Yes totally.
Lavender is using Masonry layout with these parameters (in lavender.js)

masonry = new Masonry('.row.home > div', {
	itemSelector: '.category-item',
	columnWidth: '.category-item',
	transitionDuration: 0,
	isInitLayout: false
});

The one that interest you is itemSelector, what it does is taking the witdth of the first category. So if you say it's col-md-10 the grid base used by masonry will be col-md-10.
One way to fix it is creating an empty div that will guide masonry with the class col-md-2 which is your smallest width item.

[agarcia17]

@esiao thanks a bunch! I didn't get a chance to mess with it yesterday but I'll give it a shot today!

[esiao]

@agarcia17 I've omitted something the empty guide div should be added before the others with class category-item.