Announcement

Collapse
No announcement yet.

Create Homepage Forum Category Bar

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Create Homepage Forum Category Bar

    I must be missing something obvious somewhere, but I can't see how to create the category bars and text in the forum list on the homepage (like the Vbulletin homepage attachment)

    I have minimised all my original forrum category bars to zero height, (tokyoposts.com) so I guess there is a way to just select one of them to edit and enter text, or can AdminCP insert one?

    Cheers

  • #2
    Create a forum in the channel manager in the admincp, but set 'Act as channel' to 'No. This makes it a category.

    Then you need to edit the forums you want to show under that category, and set them to have the category as their parent.
    MARK.B | vBULLETIN SUPPORT

    TalkNewsUK - My vBulletin 5.6.3 Demo
    AdminAmmo - My Cloud Demo

    Comment


    • #3
      Great!, thanks Mark, ... which template adjusts the bar height?
      Last edited by andyleighton; Sun 17 Nov '19, 3:11am.

      Comment


      • #4
        You would normally do this with additional css, not a template, but I have no idea how you made them zero height in the first place. The easiest method is just to reverse what you did.
        MARK.B | vBULLETIN SUPPORT

        TalkNewsUK - My vBulletin 5.6.3 Demo
        AdminAmmo - My Cloud Demo

        Comment


        • #5
          This is what I put in the additional template, .... but it effects every category header in the forum list.
          ---------------------------------------------------------------
          .forum-list-container .category-header {
          background: {vb:stylevar primary_module_subheader_background};
          height: 0px;
          }
          -------------------------------------------------------------------


          To edit one bar, how would I write the code for a specific category header in this case forum1222?

          <tr class="category-header" id="forum1222">
          <td colspan="4"><a class="category" data-nodeid="1222"

          thanks

          Comment


          • #6
            You can try this though I haven't tested it:
            Code:
            #forum1222 .forum-list-container .category-header {
            height: (whatever)
            }
            MARK.B | vBULLETIN SUPPORT

            TalkNewsUK - My vBulletin 5.6.3 Demo
            AdminAmmo - My Cloud Demo

            Comment


            • #7
              cheers, I tried that code but it didnt effect the height ...

              Strange thing is, I removed the #forum1222 , and changed the height to 23px and it increased the height of the now new category bars only, ... but the similar code with 0px originally changed all existing channels
              ---------------------------
              .forum-list-container .category-header {
              height: 23px;
              }
              -----------------------------
              Anyway all good, thanks!

              Comment


              • #8
                If there is a CSS ID (i.e. #forum1222), it is often best to use it by itself. Basic CSS specificity is !important > inline CSS > ID > Class > HTML Tag. The first two should be avoided as much as possible.

                In the CSS above (post #6), there is no child element of .forum-list-container. .forum-list-container is actually a parent of #forum1222. A parent cannot inherit from its child. With .category-header, it is on the same tag as the ID. A CSS ID will always be more specific than a CSS class. So the class identifier is unnecessary.

                Then if you have text (i.e. a Category name), most browsers won't collapse it to hide the container. Even if you say 'height:0;'. If you really want to hide a CSS ID, always use 'display:none;'.

                #forum1222 {display:none;}

                You can use CSS on the classes to apply to all other category displays and the ID will still override them in the rendering.

                For more information you can read about CSS Inheritance and CSS Specificity.

                I hope this helps.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API - Full / Mobile
                Vote for your favorite feature requests and the bugs you want to see fixed.

                Comment


                • #9
                  thats great, thanks for the explanation! cheers

                  Comment

                  widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                  Working...
                  X