Announcement

Collapse
No announcement yet.

Basic responsiveness questions

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

  • Basic responsiveness questions

    Running vB 5.5.3 patch lvl 2, soon upgrading to 5.5.5.

    The forum looks quite good on a PC, but I'd like some general tips on how to make it look better on a mobile.

    Firstly, I might have gone blind, but I cannot find the option to reduce the number of subforums (forum depth) anywhere. In vB4 it was in AdminCP, but it seems to be gone. Reducing the level of subforums shown would help. Preferably only for small and medium screens, but if that's not possible, everywhere.

    Secondly, the fontsize for the normal text is a wee bit too small for some users, whereas the text on the buttons (like "New Topic" and "SUBSCRIBE") is huge. Where should I look to change those?

    And thirdly, any general hints for improving mobile useability, helping to get rid of Tapatalk, would be greatly appreciated.

  • #2
    And also, is it possible to remove the avatar completely from each post? We don't use avatars, and that would save some space.

    Comment


    • #3
      Originally posted by 720 View Post
      Firstly, I might have gone blind, but I cannot find the option to reduce the number of subforums (forum depth) anywhere. In vB4 it was in AdminCP, but it seems to be gone. Reducing the level of subforums shown would help. Preferably only for small and medium screens, but if that's not possible, everywhere.
      The depth option isn't available in vBulletin 5. There is an improvement request to bring it back. If a lot of people visit your site on Mobile Devices, I suggest making these changes in vBulletin 5.5.5:
      1. Change to the new "Community" Landing Page. This will default to the Latest Activity while showing Forums in the left navigation on Desktop. In Responsive, the latest activity will show at the top and they can scroll down to the forum list. You can see the "Community" Landing page on this site here: https://forum.vbulletin.com/homepage-community. To change after upgrading, simply click on Quick Setup in Site Builder and choose your new Homepage.
      2. If you desire, you can set the modules on the left to disappear on Responsive.
      3. You can also create a link in the Forum sub-navigation that links to "All Forums" and have it link to /forums/ on your site.

      Secondly, the fontsize for the normal text is a wee bit too small for some users, whereas the text on the buttons (like "New Topic" and "SUBSCRIBE") is huge. Where should I look to change those?
      You can adjust the body font size in the style variables. This will affect both desktop and responsive. However, I agree with you that it is too small. I usually zoom in with my browser. I think a size of 1.6 rem will work better as the default. You would want to change the global_text_font style variable in the AdminCP under Styles -> Style Manager -> choose Edit Style Variables from the Choose Action drop down for your style.

      Originally posted by 720 View Post
      And also, is it possible to remove the avatar completely from each post? We don't use avatars, and that would save some space.
      There isn't a setting for this. If you are not migrating to vBCloud, you can replace the default avatar images in /core/images/default/ to use 1X1 pixel transparent images and they will go away.
      Last edited by Wayne Luke; Mon 11th Nov '19, 1:19pm.
      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


      • #4
        Thank you very much for your answers, Wayne Luke !

        Comment


        • #5
          Although, just one thing, I replaced the 3 default avatars with a 1x1 png, and they went away. However, the 64x64 border remains. Can I remove this completely in any way to save Space?

          Comment


          • #6
            This one, to be precise. Click image for larger version

Name:	1x1.png
Views:	38
Size:	116 Bytes
ID:	4426771

            Comment


            • #7
              Uh… Well, there's a small png there somewhere.

              Comment


              • #8
                Originally posted by 720 View Post
                Although, just one thing, I replaced the 3 default avatars with a 1x1 png, and they went away. However, the 64x64 border remains. Can I remove this completely in any way to save Space?
                Probably the easiest way would be to hide the element using CSS:

                Try adding the following to your css_additional.css template.

                .b-avatar > img {
                display: none;
                }

                .b-avatar--m > img {
                display: none;
                }

                Comment


                • #9
                  Originally posted by In Omnibus View Post

                  Probably the easiest way would be to hide the element using CSS:

                  Try adding the following to your css_additional.css template.

                  .b-avatar > img {
                  display: none;
                  }

                  .b-avatar--m > img {
                  display: none;
                  }
                  Hmmm, I tried, but nothing seems to happen. I make the change in one of the predefined styles (Denim) and use that for testing, but the empty 64x64 avatar remains. There's another template called css_b_avatar.css there as well. Should I do anything with that?

                  Comment


                  • #10
                    Or possibly I did something wrong. This is what my
                    css_additional.css template
                    looks like now:


                    .widget-tabs.ui-tabs .ui-widget-content .list-footer a {
                    color: {vb:stylevar module_tab_text_color};
                    .b-avatar > img {
                    display: none;
                    }

                    .b-avatar--m > img {
                    display: none;
                    }
                    }

                    Comment


                    • #11
                      Originally posted by 720 View Post

                      Hmmm, I tried, but nothing seems to happen. I make the change in one of the predefined styles (Denim) and use that for testing, but the empty 64x64 avatar remains. There's another template called css_b_avatar.css there as well. Should I do anything with that?
                      I would recommend not editing the default templates. Let me get to a desktop and see what I've missed. I recalled those two from memory but they may not be everything.

                      Comment


                      • #12
                        Your CSS is badly formatted.

                        It should be:

                        Code:
                        .widget-tabs.ui-tabs .ui-widget-content .list-footer a {
                            color: {vb:stylevar module_tab_text_color};
                        }
                        
                        .b-avatar > img {
                            display: none;
                        }
                        
                        .b-avatar--m > img {
                            display: none;
                        }
                        Don't worry about saving space. Make your CSS easy to read with indents and proper formatting. It will be squished when it is sent to the browser both by vBulletin and the webserver.
                        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


                        • #13
                          Done and done, but nothing seems to happen. Sure I shouldn't edit any other file than
                          css_additional.css template ?
                          The most important is to get rid of the avatars in the postbit, since they take too much space.

                          Comment


                          • #14
                            Or possibly it IS working, of sorts. I reinstated the old default avatars, both large, medium and thumbnail, and they show up correctly in the forum display and in the user info. But in the postbit I still have an empty 64x64.

                            Comment


                            • #15
                              You should never edit any vBulletin files unless you know how to program in PHP. You shouldn't have to edit any templates other than the css_additional.css template. What is the EXACT link where you're having the problem?
                              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

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