Announcement

Collapse
No announcement yet.

Changing thickness of navigation area and module heading area

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

  • Changing thickness of navigation area and module heading area

    Hi,

    I am new to vbulletins software and was wondering if there is a way to reduce the thickness of the navigation bar area and module header area, both highlighted in red. Any help here would be greatly appreciated. Thanks


    Attached Files

  • #2
    By thickness, did you mean "height"?

    Add these in css_additinal.css template:

    Code:
    #channel-tabbar, #channel-tabbar ul li {
        height: 30px;
        line-height: 30px; 
    }
    .canvas-layout-container .widget-header {
        margin-top: 4px;
        margin-bottom: 4px;
    }
    Adjust the dimensions accordingly.

    GIPHY for vB5 AutoLinker Social Icons in Postbit Audio Player Clear Cache Cron DragDrop Upload Topic AutoUpdate Force Read Stop Links in Posts ...and more!

    Comment


    • #3
      Hi Glenn,

      Thanks for your reply, yes I meant to say the height. How do I access the css_additional.css template area, Is it in the template options section in style manager

      Thanks

      Comment


      • #4
        Ok managed to find it, but the code doesn't adjust the height of the highlight when I hover my mouse over it, and the module header has an extra space added to the top part, what I am trying to do is reduce the height of the grey header underneath the red highlighted section. Any ideas if this is possible? Thanks in advance
        Attached Files

        Comment


        • #5
          Try adding the one in blue.

          Code:
          #channel-tabbar, #channel-tabbar ul li, #channel-tabbar ul li a {
              height: 30px;
              line-height: 30px;
          }
          For the module header, I have to see your site.

          GIPHY for vB5 AutoLinker Social Icons in Postbit Audio Player Clear Cache Cron DragDrop Upload Topic AutoUpdate Force Read Stop Links in Posts ...and more!

          Comment


          • #6
            Hi Glenn,

            my site is traderzlounge.com , I am trying to reduce some of the padding and spacing around the site, I would like to reduce the module headers and font size to same size as the circled green header on the screen shot. I think it might be called padding, sorry still learning.
            Attached Files

            Comment


            • #7
              Managed to sort it out, I can't remember the exact location of the header/widget modification code but it came under Style manager > Edit template > CSS Templates > css.global.css > Look for the section of code that shows the widget css code.

              Cheers Glenn

              Comment


              • #8
                Glad you sorted it out. But the problem with modifying the global.css template is if you upgrade, you will lose your changes. That's what css_additional.css template is for. Of course, your first option is changing the stylevar, if available. If not (which seems to be the case here), then add the CSS customizations in css_additional.css.

                GIPHY for vB5 AutoLinker Social Icons in Postbit Audio Player Clear Cache Cron DragDrop Upload Topic AutoUpdate Force Read Stop Links in Posts ...and more!

                Comment


                • #9
                  Thanks Glenn, Did not know that. I am trying to add the code below to css_additional.css template to change the module title font size but it won't implement the changes,

                  }
                  .module-title h1 {
                  font-size:11px;
                  }

                  Comment


                  • #10
                    Seems to be working now

                    module-title h1 {
                    font-size:11px;
                    }

                    Comment


                    • #11
                      Originally posted by burskonline View Post
                      Seems to be working now

                      module-title h1 {
                      font-size:11px;
                      }
                      You have a typo. It should be:

                      Code:
                      .module-title h1 {
                          font-size:11px;
                      }
                      Note the dot.

                      GIPHY for vB5 AutoLinker Social Icons in Postbit Audio Player Clear Cache Cron DragDrop Upload Topic AutoUpdate Force Read Stop Links in Posts ...and more!

                      Comment

                      Related Topics

                      Collapse

                      Working...
                      X