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

    #31
    Hate to be a pain, but my OCD cannot let me overlook a very small misalignment to the left that occurs with the last forum under each category, see here:

    Click image for larger version

Name:	offset.JPG
Views:	57
Size:	19.1 KB
ID:	14654

    Your CSS solution here is quite long so I'm not really sure where to start
    Attached Files

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      I cant see it. Can you mark it in the screenshot?

    #32
    Click image for larger version  Name:	offsetmark.jpg Views:	1 Size:	19.8 KB ID:	14666

    Here you go, I realize that this is nitpicking the **** out of it

    Comment


    • watershed
      watershed commented
      Editing a comment
      Fine example of unnecessary censorship, makes it look much worse than what I wrote

    #33
    Change this block:

    Code:
    #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;
    {vb:stylevar right}: -1px;
        background: #C9CED2;    
    }
    with:

    Code:
    #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;
    {vb:stylevar right}: 0;
        background: #C9CED2;    
    }

    Comment


      #34
      Thanks! That solved the left part of this issue, and I was able to find how to solve the right part:

      Replace

      Code:
      #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;
      {vb:stylevar left}: 0px;
          background: #C9CED2;    
      }
      With

      Code:
      #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;
      {vb:stylevar left}: -1px;
      background: #C9CED2;
      }

      Comment


        #35
        It’s not working for me, the homepage still as it was! I did everything with no problem on my test site. I have (vB 5.4.5) not vBcloud version.

        Comment


          #36
          Need to post or PM a link to your site. You may have other custom CSS that's overriding the CSS used in this mod. That's why I have a note there that says:

          Originally posted by glennrocksvb View Post
          You may need to tweak some values if you have customized style/theme.
          Or you might have added the custom CSS in a different style/theme other than what you are using on the front-end.

          Comment


            #37
            It’s on my localhost
            I don’t have any css codes in my css_additional just your code

            Comment


              #38
              When you view the source of css_additional in the browser, do you see the custom code?

              Comment


                #39
                Yes, I can see your code.

                Can we do it by editing template or something else which can be working on my site

                Comment


                  #40
                  Adding custom CSS code should go in css_additional code. Can you post screenshots of how the page looks like and the code in css_additional as seen by the browser?

                  Comment


                    #41
                    if I change the language to English Language the code works fine but with other languages not
                    Click image for larger version

Name:	Untitled.png
Views:	59
Size:	3.3 KB
ID:	15963
                    Attached Files

                    Comment


                    • glennrocksvb
                      glennrocksvb commented
                      Editing a comment
                      You have to add the same script in the phrase for the other language. The script is important as you may have noticed.

                    #42
                    Can we do it without <script>
                    I remember we just add/edit some code to do that in vBulletin 3. Can we do something just like that?

                    Comment


                    • glennrocksvb
                      glennrocksvb commented
                      Editing a comment
                      No, you can't.

                    #43
                    Many site already did that without <script>
                    take a look
                    https://preview.themeforest.net/item...556.1547616064

                    Comment


                      #44
                      They were able to do that because they edited the existing vBulletin templates. That is not recommended for maintenance reasons because it may result in template merge conflicts whenever you perform a vB upgrade and you would need to resolve those conflicts every time. I try to avoid editing templates as much as possible unless absolutely necessary and there's no other way. In this case, there's a way. But you could do the same they are doing if you want.

                      Comment


                        #45
                        I want to do the same they are doing but I don't now how, I need your help here thank you

                        Comment

                        Working...
                        X