Announcement

Collapse
No announcement yet.

Giving categories unique ID's

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Giving categories unique ID's

    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
    Last edited by glennrocksvb; 05-20-2022, 08:21 AM.

    #2
    It already has forum id.

    Click image for larger version  Name:	forumid.png Views:	0 Size:	48.6 KB ID:	24880

    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
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      Originally posted by glennrocksvb View Post
      It already has forum id.

      Click image for larger version Name:	forumid.png Views:	0 Size:	48.6 KB ID:	24880

      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
      Click image for larger version  Name:	2022_05_20_17_16_01_Window1.png Views:	0 Size:	116.4 KB ID:	24882

      Comment


        #4
        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.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          Originally posted by glennrocksvb View Post
          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:
          Code:
          $('.category-header').each(function() {
                $(this).nextUntil('.category-header').addBack().wrapAll('<li id="cats"></li>');
            });
          
          ​

          Comment


            #6
            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.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #7
              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)
                HTML Code:
                <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)
                HTML Code:
                </tbody>
              This is untested but I think it would work.
              Last edited by glennrocksvb; 11-29-2022, 11:08 AM.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #8
                Originally posted by glennrocksvb View Post
                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)
                  HTML Code:
                  <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)
                  HTML Code:
                  </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.

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  Glad to help and thanks for confirming that the code works.

              Users Viewing This Page

              Collapse

              There is 1 user viewing this forum topic.

              • Guest Guest

              Latest Posts

              Collapse

              Working...
              X
              Searching...Please wait.
              An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

              Please push the back button and reload the previous window.'
              An unexpected error was returned: 'Your submission could not be processed because the token has expired.

              Please push the back button and reload the previous window.'
              An internal error has occurred and the module cannot be displayed.
              There are no results that meet this criteria.
              Search Result for "|||"