Changing thickness of navigation area and module heading area

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • burskonline
    New Member
    • Apr 2014
    • 13
    • 5.0.X

    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
  • glennrocksvb
    Former vBulletin Developer
    • Mar 2011
    • 4011
    • 5.7.X

    #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.

    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

    Comment

    • burskonline
      New Member
      • Apr 2014
      • 13
      • 5.0.X

      #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

      • burskonline
        New Member
        • Apr 2014
        • 13
        • 5.0.X

        #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

        • glennrocksvb
          Former vBulletin Developer
          • Mar 2011
          • 4011
          • 5.7.X

          #5
          Try adding the one in blue.

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

          Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

          Comment

          • burskonline
            New Member
            • Apr 2014
            • 13
            • 5.0.X

            #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

            • burskonline
              New Member
              • Apr 2014
              • 13
              • 5.0.X

              #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

              • glennrocksvb
                Former vBulletin Developer
                • Mar 2011
                • 4011
                • 5.7.X

                #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.

                Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                Comment

                • burskonline
                  New Member
                  • Apr 2014
                  • 13
                  • 5.0.X

                  #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

                  • burskonline
                    New Member
                    • Apr 2014
                    • 13
                    • 5.0.X

                    #10
                    Seems to be working now

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

                    Comment

                    • glennrocksvb
                      Former vBulletin Developer
                      • Mar 2011
                      • 4011
                      • 5.7.X

                      #11
                      Originally posted by burskonline
                      Seems to be working now

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

                      Code:
                      [SIZE=20px][COLOR=#FF0000][B].[/B][/COLOR][/SIZE]module-title h1 {
                          font-size:11px;
                      }
                      Note the dot.

                      Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                      Comment

                      Related Topics

                      Collapse

                      Working...