Announcement

Collapse
No announcement yet.

How to add a full-width logo in the header

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

    #31
    Coffee sent.

    coffee shop GIF
    If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

    Comment


      #32
      tired coffee GIF by Garfield

      Comment


        #33
        Hello Glenn
        I have problem with the breadcrumb menu after the 5.5.0 update, the menu goes to the right side, check this post please https://www.vbulletin.com/forum/foru...013-menu-moved
        Can you maybe see if this script need to be up datet for 5.5.0?

        Thanks in advance
        ChileCaliente

        Comment


          #34
          Does the issue also happen in the default style?

          Anyway, try this:

          Code:
          #breadcrumbs { clear: both; }

          Comment


            #35
            Originally posted by glennrocksvb View Post
            Does the issue also happen in the default style?

            Anyway, try this:

            Code:
            #breadcrumbs { clear: both; }
            Hello Glenn
            I tried the default style and all perfect there...
            I put your code in the css_additional and voila, all perfect again...

            Thanks for help Glenn...
            ChileCaliente

            Comment


              #36
              Hi Glenn, looking at the site displayed on my monitor (100% in display settings) the forum (vB5.5.3) is 2400 pixels wide. I have tried your CSS with both 1200 and 2400 pixel wide graphics uploaded as the logo and they still only occupy half the width of the header.

              What am I doing wrong?

              IB

              PS - please have a look at fourthirds-user dot com/forum/

              Comment


                #37
                In your additional css try changing;
                Code:
                #header .site-logo img {
                    max-height: 32px;
                    width: auto;
                }
                To this;
                Code:
                #header .site-logo img {
                    max-height: 32px;
                    width: 100%;
                }
                I think you will find it makes the logo grainy though.
                If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                Comment


                  #38
                  NumNum Thanks for that - actually that code isn't in Glenn's original (or am I missing something) I did realise the maximum logo height (it's 2400x250) was too small and I fiddled around and finally got the logo to go full-width, but as you predicted, it's obviously aliased - basically not acceptable. I've left it like that for now if you'd like to have a look?

                  This is the code currently as it is (I'm really not a CSS coder so I'm sure there could be some mistakes there!

                  Code:
                  @media only screen and (max-height: 480px) {
                      #header .site-logo img {
                          max-height:none;
                      }
                  }
                  
                  @media only screen and (max-height: 360px) {
                      #header .site-logo img {
                          max-height:none;
                      }
                  }
                  
                  @media only screen and (max-width: 360px) {
                      #header .site-logo img {
                          max-width:344px;
                      }
                  
                      #header .site-logo.header-edit-box {
                          text-align: center;
                      }
                  }
                  
                  @media only screen and (max-height: 320px) {
                      #header .site-logo img {
                          max-height:none;
                      }
                  }
                  
                  @media only screen and (max-width: 320px) {
                      #header .site-logo.header-edit-box {
                          text-align: center;
                      }
                  
                      #header .site-logo img {
                          max-width: 304px;
                      }
                  }
                  
                  #header {
                      position: relative;
                      height: auto;
                  }
                  
                  #header .site-logo img {
                      max-height: auto;
                      width: 100%;
                  }
                  
                  #header .header-cell {
                      width: 100%;
                  }
                  
                  #header .site-logo,#header .site-logo img {
                      max-width: 100%;
                  }
                  
                  #header .site-logo {
                      padding: 0;
                  }
                  
                  #header .site-logo img {
                      display: block;
                  }
                  
                  #header .toolbar {
                      position: absolute;
                      right: 0;
                      bottom: -30px;
                      padding: 0;
                      width: auto;
                  }
                  
                  @media only screen and (max-width: 440px) {
                      #header .site-logo.header-edit-box {
                          padding: 0;
                      }
                  }

                  Comment


                    #39
                    Your site logo is 620px × 65px raw. If you can make it 1203px x 126 raw it would look better.
                    If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                    Comment


                      #40
                      NumNum is right.

                      Comment


                        #41
                        I uploaded 2400 by 250 though, so maybe it has been resized? But not by me - very puzzled!

                        Comment


                          #42
                          I'm still stuck - I resized the original 2400 wide logo graphic to 1203 wide and also 1200 wide - none of them looked sharp.

                          Does vBulletin resize when a logo graphic is uploaded?

                          Comment


                            #43
                            OK, I have just discovered the link between the graphic file type allowable parameters set in the CP Image Attachments settings - and the requirements for logo graphics! Now it all makes sense and the 1200 pixel version of my logo (PNG) now looks a lot better.

                            Comment


                              #44
                              Outstanding!

                              awesome jeff spicoli GIF

                              Looks great!
                              If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                              Comment

                              Working...
                              X