Category structuring problems

System

This discussion was created from comments split from: Vanilla 3.1 is now available.

stub

OK. I will admit that I am very new with Vanilla Forums (as a user) and running a forum in general. So pretty much a noob. I'm trying to install Vanilla 3.1 into my website. Install went fine. And I started tinkering/adding with the categories. The first thing I noticed was I cannot get past compressing the categories to only show the main categories on the home page. The home page shows all categories and subcategories equally. The subcategories are not even indented. I would prefer to only have the main categories on the front page, and users drill down from there. I don't mind if the home page expands to show the subcategories of the main category the user clicked, or if the home page is updated to only show the subcategories of the main category clicked.

I would have thought, this would have been an easy problem to solve. But I cannot find any answer for this in the documentation. I wondered if the CSS Class was controlling this message. All my categories/subcategories have the same class, Category-general. Which I got from the sample install. Are there any other CSS Classes defining these categories? I couldn't even find CSS Class in my search of the documentation. Can the documentation be downloaded? Would it help?

I also want to make the main categories non-postable. They are only there to provide a menu of the subcategories.

Any help with this (simple) problem would be appreciated.

R_J

When you create a category, you can choose "Display as" as "Heading" and that prevent users from posting to that category. When you have structured your categories as being child categories, the html will look (simplified) like that:

<ul class="DataList CategoryList">
   <li id="Category_9" class="CategoryHeading Item Category-main-category Item-Category-main-category Depth1 Depth-1 Unread">
       Main Category
   </li>
   <li id="Category_10" class="Item Alt Category-sub-category-level-1 Item-Category-sub-category-level-1 Depth2 Depth-2 Unread">
        Sub Category Level 1
   </li>
   <li id="Category_11" class="Item Category-another-category-level-1 Item-Category-another-category-level-1 Depth2 Depth-2 Unread">
       Another Category Level 1
   </li>

There are two CSS classes generated by Vanilla that you would be able to use to style them any way you want: "Depth2 Depth-2". But you will find that a category marked as "Heading" already is styled differently and you might not need to make any extra changes.

stub

Thank you for your reply. I got the setting the Category as a Heading. The only thing I really didn't like very much was how huge the font was. But probably if the category/sub-category was collapsible. It might be acceptable. Which brings me back to my main point. How to configure the categories/sub-categories as collapsible items (by clicking on the menu exposes the sub-menus). Is this what you are trying to explain in your quoted text? Let me try to tell you what I'm not clear about....

I understand "Category_9" to a point. I'm using the same CSS Class for this as is used in the default install, "Category-general". But if I understand you correctly, this field is not hard coded to 2 classes, by the 2 CSS Class names, "Category-general + another name for subcategories". It is instead hard coded by the fact it is either a Main Category or a Sub-Category. The CSS Class field is for giving it a name, like, for example, the main category name or the sub-category name. Is this correct thinking?

It's "Category10 & 11", I'm having some problems with. Assuming my assumption is correct that the CSS Class box is only giving it a name, and the structure is defined as in your quoted example. After I fixed the main categories as Headings, My category menu is still fully exposed sub-categories (not collapsed). Is this controlled by using 1 of the 4 Display As settings? Obviously it's not Heading, so it must be either Discussions/Nested/Flat. Which should I choose? Actually how does each choice differ from the others? Is this explained in the documentation? Can the documentation be downloaded?

R_J

Those are a lot of questions...

• Font too big? Create your own theme or add some lines of CSS either with the CSS Edit plugin or the Pockets plugin
• Want to have collapsible categories? You mean all categories with Depth-x with x>1 are hidden and clicking on a Depth-x category will unhide all child Depth-x+1 categories? You need a custom theme or some additional js added to your categories page
• Forget about "Category-general". Those are category-name specific classes. If you have a category called "foo", it will show a class "Category-foo". If you ever change the class name, everything you have scripted before will fail. If you want to apply effects to all categories, you need to duplicate your code. Orient yourself on the classes that are common to all categories
• You can find the documentation in the link above, it is not really downloadable (it is a based on a GitHub repo, so in theory you can download it, but it wouldn't look like what you might expect)

stub

Thanks R_I. I wasn't trying to be critical here. I was just trying to understand what I'm dealing with.

Font too big. OK. I'll take a look at the CSS Edit plugin. Thanks.

So collapsible menus of Categories are not possible, out of the box. Just as long as I know, I don't need to spend time trying to get them to work.

After your explanation about CSS Class, I blanked out a CSS Class box and saved. When I checked the category again, the CSS Class box showed exactly what you explained above. Another problem/misconception resolved.

The online documentation could not find a search for "CSS Class". Which wasn't very inspiring. Which is why I wanted to get hold of a copy of the documentation, so I could see for myself. I understand your online documentation is incredibly beautified, compared to a download. But what did you mean by "it wouldn't look like what I might expect"? OK. I'll download and take a look for myself. Thanks.

R_J

I don't want to sound impolite, that's just a result of English not being my mother tongue

The documentation is written in Markdown. Therefore if you download the repo, you will get only *.md files and no hypertext documents. But if you want to download them for doing full text searches, that would be even better

If you do not find a paragraph explaining what you would expect, please consider writing it ;-)

stub

Thank you for the info. I think it's going to be a while before I'm going to be proficient enough to write missing documentation :) But I do intend to help when I think I have something to say.

Could you point me to a post which explains how to set up a category as a one-on-one post between a member and a moderator/admin? Initiated by either the member or the moderator/admin. ie: a Private Message to/from member or mod/admin.

R_J

There are no private discussions with only selected participants or even private categories. You will have to start a conversation with a moderator.

A conversation can have a subject, which makes them much more useful. To enable that, you need to add $Configuration['Conversations']['Subjects']['Visible'] = true; to your /conf/config.php. I never understood why this isn't default!

If you feel that this is something that would be needed very often, you can think about adding a link like https://open.vanillaforums.com/messages/add/r_j/Help%20Request to your forum. The subject isn't enabled on this site, so there is no effect visible; you need to try that on your own forum.

stub

OK. I got it. Thank you. I agree it should really have a title by default. It seems rather flexible. But I think I'll have to wait and see how it pans out. I wanted this principally for support messages. So I simply posted a message into the introduction saying if you need support, you need to compose a message to user: Support :)

stub

I'm assuming I replace open.vanillaforums.com with my domain/path and r_j with Support, in order to get this to work. I'm not sure where I post this link, and where it would appear on my forum.

Kaspar

Use "Pockets" to place it

R_J

I think I would also use the pockets plugin to be as flexible as possible, but you can also use the inbuilt messages (you find the in the dashboard in the moderation section). Based on your requirements you can choose a message that will only appear in one category only. If you create a public "Support" category, it can show a message on top "For private inquiries, write a <a href="yourforum/messages/add/support/Help%20Request">PM to the team</a>."

In Vanilla there are "messages" which are some kind of an alert or an info on top of the page and conversation messages which are, well, private messages between two or more users. It might look confusing when reading about it here, but you will it more understandable when you look at your forum.

stub

OK. It's all getting a bit beyond my ken. But I will definitely investigate pockets. And everything you have suggested.

OK. Back to my Category collapsing. I've come up with an idea which I think is better than collapsing. Let me explain. I have 4 categories of for sale forums for 4 different types of for sale, Auctions/Fixed Price/Make Offer/Bargain Bin which are reported in 4 different groups underneath each other. I would have been happy enough if the categories are collapsible. But failing that, I could replace everything in specific category with a table, shown instead of 20 or so categories. It would look something like this....

Clicking on the O would take you directly to the respective category. This and even the collapsible categories, is way beyond my knowledge. But I could be interested in getting a quote for these changes. Do you have a thriving developer market which might be interested in modding my theme with these changes. As I've said. I'm new to Vanilla Forums and forums generally, except as a user. I haven't yet discovered any developer market place which could program these changes. Is there such a marketplace?

R_J

You can ask here for some help or at sites like freelancer.com If you come up with a simple conception, we here on the forum might already give you nice looking solutions

Just don't take the cheapest offer or you will get crap. Look for somebody who at least knows sass and building tools like grunt.

Personally I'm not convinced of your conception above. My opinion is, that reinventing UI leads in 99% of all cases to super bad UX. Not all of us can be Steve Jobs. Stick to what users are used to and they will be happy.

I understand that you don't want to repeat all those categories. But what about showing subcategories side by side?

Dot Com

[Auction] [Fixed Price] [Make Offer] [Bargain Bin]

Legacy GTLD

[Auction] [Fixed Price] [Make Offer] [Bargain Bin]

Country ccTLD

[Auction] [Fixed Price] [Make Offer] [Bargain Bin]

NewGTLD

[Auction] [Fixed Price] [Make Offer] [Bargain Bin]

rbrahmson

Whatever your combintion in your table, it is possible to contsruct the table you drew in HTML and instead of the small circles have links to the specific categories you create. Once you create the ctegories you will see their distinctive URLs and that would give you the info you need for the links.

You can possibly display the table via Pockets or if you want a full page you may look at the Basic Pages plugin.

I admit I fast read this thread so there is the possibility that what I wrote is totally irrelevant.

stub

https://open.vanillaforums.com/discussion/comment/257808#Comment_257808

OK. I could certainly list them side-by-side as something in-between having all these categories listed separately, and before I get some kind of table. I kinda liked the table idea though. But of course I understand this might come at a cost which I cannot afford. So perhaps you could show me how to do this for one of these 2nd tier categories, ie Dot Com? Any help for me to achieve that would be appreciated.

stub

https://open.vanillaforums.com/discussion/comment/257808#Comment_257808

Could you show me how to do this for Dot Com?

stub

https://open.vanillaforums.com/discussion/comment/257809#Comment_257809

I presume I could use an icon.jpg instead of displaying the full forum name/path? I think showing the forum path would be quite ugly. How do I embed the HTML code into the right place in the Category list? And how to stop the original categories being listed as well?

R_J

https://open.vanillaforums.com/discussion/comment/257815#Comment_257815

Sorry, I do not understand that. Could you rephrase that?

R_J

And another thing I wanted to try. Create a new pocket that will be shown on the /categories page and enter this:

<style>
/* **************** */
/* Layout          */
/* **************** */

/* Layout of LI tags */
.DataList.CategoryList > .Item.Depth-2 {
   /* No borders please */
   border: none;
   display: inline-block;
}

/* Layout inside LI tags */
.DataList.CategoryList > .Item.Depth-2 .ItemContent.Category {
   /* Use flex box for easy layout */
   display: flex;
}
.DataList.CategoryList > .Item.Depth-2 .CategoryDescription,
.DataList.CategoryList > .Item.Depth-2 .Meta {
   /* Hide details of subcategories */
   display:none;
}
.DataList.CategoryList > .Item.Depth-2 .Options {
   /* Show options right beside the title */
   order: 2;
}


/* **************** */
/* "UI Elements"   */
/* **************** */
.DataList.CategoryList > .Item.Depth-2 a.Title {
   /* Basically a hardcopy of Button styling */
   color: white;
   background: #0291db;
   border: 1px solid #0291db;
   border-radius: 6px;
   color: #fff;
   display: inline-block;
   font-family: Open Sans,Segoe UI,Helvetica Neue,Helvetica,Raleway,Arial,sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 36px;
   min-height: 36px;
   padding: 0 12px;
   text-decoration: none;
   justify-content: center;
}
</style>

Again, there are far more elegant ways to approach this, but I wanted to do a quick test how easy it might be to style subcategories the way I suggested. I like it... 😉