Announcement

Collapse
No announcement yet.

How to alter mobile/responsive behavior

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

    How to alter mobile/responsive behavior

    So what is the technique within vBulletin to show/hide things based on the screen size or whatever. So for example, if I want to hide user information in the post bit on small screens, but display it on larger screens, what's the technique? I mean I know it's CSS, but are their hooks and latches for that type of behavior?

    I'd love to dive into the Product Hooks and Templates but I don't have a clue where to look to start learning about that system.

    One example of where I'd like to dive in a little is that the main navigation collapses into a hamburger menu on mobile devices. That's okay, but the most commonly used "button" on my site by far is "New Topics". On vb4 we had a static button right at the top that people could click on "What's New", but now they have to go through a hamburger menu. Would be nice to just have a static button at the top when the screen is small enough, but hide that button when it's large enough. Just little things like that.

    #2
    To hide/show elements on a page on mobile, you can simply prefix your CSS rules with .l-small or .l-xsmall CSS classes (.l-desktop for bigger screens). and leverage those classes that vB5 dynamically attaches to the <body> tag. You can also use CSS media queries to account for different breakpoints. The existing l-xsmall, l-small and l-desktop classes also use CSS media queries but they have the the following pre-defined breakpoints:

    l-xsmall: 320px to 479px
    l-small: 320px to 767px
    l-desktop: 768px and above

    l-xsmall and l-small can be applied at the same time.
    iPad has 768px device width. So it's considered a desktop.

    To add new elements on a page, you can use template hook system inserting the custom template at the appropriate hook location. But sometimes there's no hook location at a spot where you want to add an element. In that case, you would insert your template at an existing hook location and then use Javascript to dynamically insert the element at the desired location.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      Okay, I am going to have to noodle how to use those CSS selectors. Are you saying that if I see that a component has been given a CSS class name like "xyz" by vBulletin, that I can do something like:

      xyz.l-small {
      display:none;
      }

      or something like that?

      Comment


        #4
        No. Should be:
        Code:
        .l-small .xyz {
           ..
        ​​}
        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
          No. Should be:
          Code:
          .l-small .xyz {
          ..
          ​​}
          Oh, "prepend", duh! Ok, thanks.

          BTW, even though I am logged in, for some reason it tells me I cannot see your code previews without being logged in. Logging out and logging back in doesn't fix it. I just have to leave the page or leave the site completely and come back a few times.

          This is happening from multiple locations, but always on Firefox. I haven't tried any other browser.

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            That's a known intermittent issue on my site. When that happens, I need to clear the system cache in AdminCP.

        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 "|||"