Giving categories unique ID's

[darkboy245]

in vBulletin 4 categories are separated unlike vBulletin 5 which makes it harder to design the layout of the categories with CSS, looking for help to modify the display_Forums_list template in order to give each category a unique ID.
Example:

Thanks in advance

[glennrocksvb]

It already has forum id.



The challenge in customizing the style is the entire list uses a single <table> tag. It would have been easier if each category and its forum channels is in its own <table>. Or better yet, to not use <table> tag.

I have a pure CSS mod to separate the forum category list in its "own table". It's not perfect due to the challenge mentioned above but here it is:

https://vbmods.rocks/forum/vbulletin...oud-compatible

[darkboy245]

It already has forum id.



The challenge in customizing the style is the entire list uses a single <table> tag. It would have been easier if each category and its forum channels is in its own <table>. Or better yet, to not use <table> tag.

I have a pure CSS mod to separate the forum category list in its "own table". It's not perfect due to the challenge mentioned above but here it is:

https://vbmods.rocks/forum/vbulletin...oud-compatible

Thanks, I'm currently using your modification which works very well but not quite what I'm looking to implement here, as you can see in the screenshot the red mark is what you reffered to in your screenshot but I want the category to be selected as a whole just like the green mark, which includes the whole category under ID 163. I guess it does have to do with the table tags which make it very difficult to change the layout, I guess what I'm looking for is basically changing the whole structure of the template which sucks.. vBulletin 4 already had it implemented by default but they changed it in vB 5

[glennrocksvb]

This will require substantial changes to the display_Forums_list template. Changing the HTML structure will depend on how your intended style would look like.

[darkboy245]

This will require substantial changes to the display_Forums_list template. Changing the HTML structure will depend on how your intended style would look like.

I wanted to update this thread with a solution, I was able to give each category a custom DIV with JS. After that I could edit each category with the nth:child pseudo-class.
Here is the code:

$('.category-header').each(function() {
      $(this).nextUntil('.category-header').addBack().wrapAll('<li id="cats"></li>');
  });

​

[glennrocksvb]

Nice one darkboy245. But you need to use <tbody id="catsXXX"></tbody> to prevent generating invalid HTML markup. Table tags cannot have <li> tag as parent of <tr> tags.

[glennrocksvb]

With your changes, I think it can be easily done in the display_Forums_list template instead of doing it in JS.

1. Paste this code right after the <vb:each from="channels" value="channel"> line. (line 5 in vB 5.7.0)
   

   <tbody id="category{vb:raw channel.nodeid}">

2. Paste this code right before the last </vb:each> line. (line 97 and the last line in the template in vB 5.7.0)
   

   </tbody>

This is untested but I think it would work.

[darkboy245]

With your changes, I think it can be easily done in the display_Forums_list template instead of doing it in JS.

1. Paste this code right after the <vb:each from="channels" value="channel"> line. (line 5 in vB 5.7.0)
   

   <tbody id="category{vb:raw channel.nodeid}">

2. Paste this code right before the last </vb:each> line. (line 97 and the last line in the template in vB 5.7.0)
   

   </tbody>

This is untested but I think it would work.

Thank you very much Glenn, your fix was originally what I was looking for. I'm really surprised it was that easy to implement, of course I couldn't do this without your help.
The template change does work and your JS code works as well.
Cheers.

[glennrocksvb]

Glad to help and thanks for confirming that the code works.