Announcement

Collapse
No announcement yet.

Styling the Tabbed Module Container

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

    Styling the Tabbed Module Container

    vBulletin added a tabbed container to add modules to, but I can't seem to find the stylevarsor CSS to style it. I've got a rather ugly border on my tabbed container at https://scififur.net and I'm trying to get rid of that.

    anyone had any success with this tabbed container?

    #2
    Can you post a screenshot marking the border? You have a dark theme and it's hard to find the one you were referring to.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      Sure, it's the left border of the tabbed container.

      Click image for larger version

Name:	border.png
Views:	256
Size:	1.14 MB
ID:	10232

      Comment


        #4
        It's controlled by module_content_border stylevar but it applies to all modules. The reason it's more prominent in the tabbed module is that the stylevar is applied in both outer and inner container divs inside the tabbed module.

        Try adding this custom CSS to fix in all tabbed container modules.

        Code:
        .js-tabbedcontainer-widget-tab-wrapper.widget-tabs .widget-tabs-panel--border {
            border: 0;
        }
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          That did it. Thanks again, Glenn!

          Comment


            #6
            Glad to help
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #7
              Oh, one more small issue. There are these white slivers on the corners of the tabbed module. They're on all the corners, but the bottom ones are the easiest to see.

              Click image for larger version

Name:	wierd-corners.png
Views:	120
Size:	466.7 KB
ID:	10275

              Comment


                #8
                Code:
                #widget_189 .widget-tabs {
                    background: transparent;
                }
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #9
                  That did it. Thanks again!

                  When I inspect elements, I don't see most of the ones you're coming up with. Are you using something other than the built in developer tools in the browser? I don't want to keep bugging you for small stuff like this if I can find them myself somehow.

                  Comment


                    #10
                    I'm also just using the browser dev tools to inspect the elements. You just need to drill down or up the HTML tree to find which element has the CSS property that is causing the issue. It was the white background color in this case. I fixed it by overriding it with transparent background.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #11
                      Good to know. I'll try going further back next time and seeing what I can find. I'm not used to having to drill backwards so much. vBulletin 5 has a lot of interlocking elements, not to mention stuff that gets added dynamically. Still trying to get my head around it. I wish it were more like WordPress which is a lot more freeform.

                      anyway, enough bitching from me. Thanks again, Glenn!

                      Comment

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