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.

    Comment


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

      Click image for larger version

Name:	border.png
Views:	21
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;
        }

        Comment


          #5
          That did it. Thanks again, Glenn!

          Comment


            #6
            Glad to help

            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:	17
Size:	466.7 KB
ID:	10275

              Comment


                #8
                Code:
                #widget_189 .widget-tabs {
                    background: transparent;
                }

                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.

                    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

                      Working...
                      X