Announcement

Collapse
No announcement yet.

Forum Category Spacing on Homepage (no template editing required and vBCloud compatible)

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

    Official - Free Forum Category Spacing on Homepage (no template editing required and vBCloud compatible)

    Want to separate or group forum categories in its own "table" without editing display_Forums_list template? The entire category and forum directory are displayed using a single <table> tag. This makes it impossible to separate the forums by category in its own table that has border without editing display_Forums_list template and adding multiple <table> tags as others had done. But not until now.

    I thought that mod was great (and it is!) but it requires editing an existing template and most of you know that editing existing vBulletin templates is not recommended and ideal. So I got challenged to create my own version that doesn't require editing using pure CSS. But technically not really using pure CSS as I had no choice but to add a little bit of JavaScript in order to programmatically identify which is the last forum channel in a category. Knowing the last forum in a category enables the CSS to know where to break the table into multiple "tables". The end result is not using multiple actual <table> tags but with a little bit of creativity and imagination, I was able to replicate an illusion or impression of using multiple tables.

    Without much further ado, here's how to accomplish this.

    1. Add in css_additional template or via Sitebuilder (Edit Site ON) > Style > CSS Editor.

    Code:
    /* Forum Category Spacing START */
    .l-xsmall .forum-list-container .forum-list-header {
        border: 0;
    }
    .l-xsmall .canvas-layout-container .canvas-widget .widget-header,
    .l-xsmall #forum-tab .forum-list-container .forum-list-header th {
        border-top: 0;
    }
    .l-xsmall #forum-tab .forum-list-container .forum-list-header .header-forum {
        border-right: 1px solid #C9CED2;
    }
    #forum-tab.forum-category-spacing .category-header td {
        border-left: 1px solid #C9CED2;
        border-right: 1px solid #C9CED2;
    }
    #forum-tab.forum-category-spacing .forum-list-container {
        border-collapse: collapse;
    }
    #forum-tab.forum-category-spacing .forum-item .cell-forum,
    #forum-tab.forum-category-spacing .subforum-list > td {
        border-left: 1px solid #C9CED2;
    }
    #forum-tab.forum-category-spacing .forum-item .lastpost,
    #forum-tab.forum-category-spacing .subforum-list > td {
        border-right: 1px solid #C9CED2;
    }
    #forum-tab.forum-category-spacing .forum-item-last > td,
    #forum-tab.forum-category-spacing .subforum-list table {
        position: relative;
        padding-bottom: 30px;
    }
    #forum-tab.forum-category-spacing .forum-item.forum-item-last .cell-forum,
    #forum-tab.forum-category-spacing .subforum-list.forum-item-last > td {
        border-left: 0;
    }
    #forum-tab.forum-category-spacing .forum-item.forum-item-last .lastpost,
    #forum-tab.forum-category-spacing .subforum-list.forum-item-last > td {
        border-right: 0;
    }
    #forum-tab.forum-category-spacing .forum-item-last .cell-forum:before {
        content: '';
        display: block;
        height: -webkit-calc(100% - 16px);
        height: calc(100% - 16px);
        width: 1px;
        position: absolute;
        top: 0;
        left: 0;
        background: #C9CED2;    
    }
    #forum-tab.forum-category-spacing .forum-item-last > td:after {
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        position: absolute;
        bottom: 16px;
        background: #C9CED2;
    }
    #forum-tab.forum-category-spacing .forum-item-last .cell-forum:after {
        margin-left: -5px;
    }
    .l-small #forum-tab.forum-category-spacing .forum-item-last .cell-forum:after {
        margin-left: -25px;
    }
    .l-xsmall #forum-tab.forum-category-spacing .forum-item-last .cell-forum:after {
        margin-left: -10px;
    }
    #forum-tab.forum-category-spacing .forum-item-last .topics-count:after {
        margin-left: -15px;
    }
    #forum-tab.forum-category-spacing .forum-item-last .posts-count:after {
        margin-left: -7px;
    }
    #forum-tab.forum-category-spacing .forum-item-last .lastpost:after {
        margin-left: 0;
    }
    #forum-tab.forum-category-spacing .subforum-list.forum-item-last > td:after {
        margin-left: -29px;
    }
    #forum-tab.forum-category-spacing .forum-item-last .lastpost:before,
    #forum-tab.forum-category-spacing .subforum-list.forum-item-last > td:before {
        content: '';
        display: block;
        height: -webkit-calc(100% - 16px);
        height: calc(100% - 16px);
        width: 1px;
        position: absolute;
        top: 0;
        right: -1px;
        background: #C9CED2;    
    }
    #forum-tab.forum-category-spacing .subforum-list.forum-item-last table {
        border-left: 1px solid #C9CED2;
        margin: -18px 0 -14px -29px;
    }
    #forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:first-child td {
        padding-top: 18px;
    }
    #forum-tab.forum-category-spacing .subforum-list.forum-item-last table td:first-child,
    .l-small #forum-tab.forum-category-spacing .subforum-list.forum-item-last table td {
        padding-left: 29px;
    }
    .l-small #forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:first-child td + td {
        padding-top: 0;
    }
    #forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:last-child td,
    .l-small #forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:last-child td:last-child {
        padding-bottom: 16px;
    }
    .l-small #forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:last-child td {
        padding-bottom: 0;
    }
    .l-xsmall #forum-tab.forum-category-spacing .forum-item:not(.forum-item-last) .cell-forum,
    .l-xsmall #forum-tab.forum-category-spacing .forum-item-last .forum-wrapper, .forum-item-last .rx-forum-stats,
    .l-xsmall #forum-tab.forum-category-spacing .forum-item-last .rx-lastpost-info {
        border-right: 1px solid #C9CED2;
    }
    .l-xsmall #forum-tab.forum-category-spacing .forum-item-last .forum-wrapper {
        margin-top: -8px;
        padding-top: 8px;
        display: block;
        padding-right: 10px;
    }
    .l-xsmall #forum-tab.forum-category-spacing .forum-item-last .rx-lastpost-info {
        margin-bottom: -14px;
        padding-bottom: 14px;
    }
    .l-xsmall #forum-tab.forum-category-spacing .forum-item-last .rx-forum-stats,
    .l-xsmall #forum-tab.forum-category-spacing .forum-item-last .rx-lastpost-info {
        margin-right: -1px;
        padding-right: 10px;
        width: 100%;
    }
    #forum-tab.forum-category-spacing .list-footer {
        background: transparent;
        border-bottom: 0;
        margin-top: -10px;
    }
    /* Forum Category Spacing END */
    NOTE: The border colors and spacing used above were based off the default vB5 style. You may need to tweak some values if you have customized style/theme.


    2. Add a script to dynamically determine the last forum in a category. Ideally, we should use a template hook to insert the script but unfortunately, there is no hook location that is close to the forum directory list. We need to run the script as soon as the forum directory is rendered to avoid flickering or flashing. I chose to add the script in the Mark Channels Read phrase which is right below the forum directory.
    • Go to AdminCP > Languages & Phrases > Search in Phrases.
    • Search for Mark Channels Read phrase
      • Search for text: mark_channels_read
      • Search in: Phrase Variable Name Only
    • In the English (US) Translation box, enter the following:
    Code:
    Mark Channels Read
    <script>
    (function() {
        var forumTab = document.getElementById('forum-tab'),
            categoryHeaders = forumTab && forumTab.querySelectorAll('.category-header'),
            forumItem,
            lastItem;
    
        if (categoryHeaders && categoryHeaders.length > 0) {
            for (var i = 0; i < categoryHeaders.length; i++) {
                forumItem = categoryHeaders[i].previousElementSibling;
                if (forumItem && (/\bforum-item|subforum\-list\b/i).test(forumItem.className)) {
                    forumItem.className += ' forum-item-last';
                }
            }
            lastItem = document.querySelector('#forum-tab > .forum-list-container > tbody > tr:last-child');
            lastItem && (lastItem.className += ' forum-item-last');
            forumTab.className += ' forum-category-spacing';
        }
    
    })();
    </script>
    NOTE: You can change Mark Channels Read with whatever phrase you want.
    • Save.


    Compatibility:
    • Tested in vB 5.2.5 but this should work in older versions too.
    • Compatible with vBCloud.

    Demo:
    See screenshot. For actual demo, see homepage.

    This mod is also posted in vb org at http://www.vbulletin.org/forum/showthread.php?t=324053

    Enjoy!

    #2
    Found a bug in the script. Updated the script in Step 2 in the first post. If you've already installed this mod, you have to update it.

    Comment


      #3
      I can not manage to make it work on 5.2.6, is it compatible? Or I am missing something?

      Comment


        #4
        It works here. Can you post a link?

        Comment


          #5
          Sure: http://forum.skyscraperlife.com/

          Comment


            #6
            I can see it working on your site.

            Comment


              #7
              Works great, I use this on a close to default style I call "Bare Bones".

              Click image for larger version

Name:	Bare Bones.jpg
Views:	1
Size:	140.5 KB
ID:	3001
              Christian Forums

              Comment


                #8
                Wait..I see something that's not right. But it's not obvious. The marked lines below should be using dotted lines not solid lines. I tried the css in vb com and it's working. There must be something in your site that overrides the css.

                Comment


                  #9
                  Here's how it looks when I tried it in vbulletin.com forums.

                  Comment


                    #10
                    I am unable to make this work on my forum. I am using 5.3.4 and I am pasting the code in Styles > CSS Editor
                    I am getting the following error: We were unable to save the css. Please try again and if the error persists, contact vBulletin support.
                    It is saving file until this code
                    #forum-tab.forum-category-spacing .forum-item-last .cell-forum:before {

                    Last edited by keyuramin; 01-04-2018, 02:50 AM.

                    Comment


                      #11
                      Are you in vBCloud? If not, can you try doing it in css_additional template in AdminCP.

                      Comment


                        #12
                        Yes, it worked when I posted in the css_additional template.

                        Comment


                          #13
                          For self-hosted version, I prefer adding custom CSS directly via css_additional template rather than via Sitebuilder CSS Editor.

                          This is a different issue but there's a limitation in Sitebuilder CSS Editor where the saved CSS does not evaluate stylevars and template conditionals.

                          For example, you should be able to add this CSS and the stylevars should be evaluated with the appropriate values.

                          Code:
                          .test {
                              margin-{vb:stylevar left}: 10px;
                              color: {vb:stylevar body_link_color};
                              font: {vb:stylevar body_font};
                          }
                          If you save that directly via css_additional template in AdminCP, it may look something like this when css is generated:

                          Code:
                          .test {
                              margin-left: 10px;
                              color: #001F68;
                              font: 16px Helvetica,Arial,Verdana,sans-serif;
                          }
                          But if you are in vBCloud and save that via Sitebuilder CSS Editor, the CSS will be treated as plain text and stylevars will not be evaluated. This happens because in vBCloud, the "Text Only" option is checked by default when you save the CSS in the Sitebuilder CSS Editor. You cannot uncheck it because there is no UI provided for it in the CSS Editor.

                          When you are in AdminCP, the "Text Only" option is unchecked by default and there is a UI provided for it. If you check it, it will behave like what CSS Editor in vBCloud does.

                          Click image for larger version  Name:	image.png Views:	1 Size:	15.6 KB ID:	8611

                          vBulletin did this for the sake of vBCloud apparently for security reasons(?) but unfortunately it affects not just vBCloud but also self-hosted version.

                          I have created a JIRA for this more than a year ago. Please vote for it.

                          http://tracker.vbulletin.com/browse/VBV-16683




                          Comment


                            #14

                            My css_additional.css is having a text box checked or ticked on.

                            Should I have to untick that text only option?

                            Please advise.

                            Comment


                            • glennrocksvb
                              glennrocksvb commented
                              Editing a comment
                              Untick or uncheck it and save.

                            #15
                            Thank you very much, it works perfect for me
                            A cordial greeting

                            Comment

                            Working...
                            X