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

    Comment


      #32
      tired coffee GIF by Garfield
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      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; }
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          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.

                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.

                    Comment


                      #40
                      NumNum is right.
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      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!

                              Comment


                                #45
                                Question.

                                Running VB 5.6.4 Dark style.
                                Put in the code you provided.

                                I get this
                                Click image for larger version

Name:	4er8vhobp.jpg
Views:	197
Size:	28.2 KB
ID:	22577



                                Where the red is, the picture is to small (original 1500px)

                                It leaves a piece transparant, because i can click on the red part, so it works but just only the picture will not expand enough?

                                Hope to hear

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