Announcement

Collapse
No announcement yet.

Vbulletin Header Looks Cool

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

  • Vbulletin Header Looks Cool

    The new header on this site looks cool. THe header image (pumpkins and bats) goes all the way across the top of the page and it even hides behind the search bar.

    How do you do that?

  • #2
    Hi there, thanks.

    Originally posted by pacinofurioso View Post
    How do you do that?
    You can add image as the background image for the header_background stylevar.
    ~~~~~

    Comment


    • #3
      You want your image to be 1200 pixels wide to fix the default header width. You can make it taller and adjust the height of the header with the header_height style variable.

      All style variables can be accessed via the Style Manager under Style & Themes in the AdminCP. If you are using one of the supplied themes, you will need to add a Child Style from the control dropdown in order to edit its style variables. You can set the child style as your new default under Settings -> Options -> Style & Language Options. However the Child Style won't show up in Site Builder's Theme selector at this time.
      Translations provided by Google.

      Wayne Luke
      The Rabid Badger - a vBulletin Cloud demonstration site.
      vBulletin 5 API

      Comment


      • #4
        Im a newbie and everything you said just went right over my head...

        Comment


        • #5
          Upload your custom image to your site. Put it in your vBulletin's images directory. Then enter the Style Variable Editor following these steps:
          1. Log into your vBulletin Site.
          2. Turn on Site Builder if it is not turned on.
          3. Click the gray "AdminCP" button.
          4. In the AdminCP scroll down to Styles & Themes
          5. Open that box.
          6. Click on Style Manager.
          7. Find your default style in the list.
          8. Look at the drop down.
            • If it says "Style Variable Editor" click the Go button.
            • If it says "Edit Settings" click the down arrow and choose "Create Child Style". You'll make your changes here. Once you've created a child style, enter the Style Variable Editor.
          Now that we're in the Style Variable Editor, scroll down to the header_background style variable. Put the path to your image in between the quotes replacing the existing value there. It should look like: url("/images/myheader.png"). Click the Save button for that Style Variable.

          Refresh your front page. If you use multiple styles and want to do multiple headers or reuse the same one, you need to edit the header_background style variable for each Style you want to update.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment


          • #6
            Thanks! I will try the steps and report back.

            Comment


            • #7
              I did all the steps you said, but I don't see anything with quotation marks. I am attaching an image of what I see. And also, my header image was uploaded from my hard drive and when I try to find the url path this is what I get: http.www.mywebsite.com//filedata/fetch?filedataid=33

              Comment


              • #8
                I am using the RED Them on my site. So I created a "child of red" style and I tried to do all the steps you said and this is what I got...(Attached image)

                Comment


                • #9
                  In your image where it says Background Image, you would put in url("/images/myheader.png"). You would replace /images/myheader.png with the actual path and file name of the image you want to use for the background.
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud demonstration site.
                  vBulletin 5 API

                  Comment


                  • #10
                    Thank you Wayne. So, in the image I attached to the last post, you can see that when I pull up the child style I created there is no background image. It is blank. I looked everywhere for the actual path and name of the logo image that I use, but I cant find it. Where can I find the path and logo image name? I used Mozilla firefox inspector to try to find the filepath name, but all I get is

                    filedata/fetch?filedataid=33

                    Comment


                    • #11
                      You would upload the image to your server and the path would be unique to your site. I don't know what it is. If you put the file in your images folder, then it would be your domain/image/filename.ext.
                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud demonstration site.
                      vBulletin 5 API

                      Comment


                      • #12
                        So, basically should I check my site folders (FTP) and see where the image is?

                        Comment


                        • #13
                          Yes. Then you would use that path.
                          Translations provided by Google.

                          Wayne Luke
                          The Rabid Badger - a vBulletin Cloud demonstration site.
                          vBulletin 5 API

                          Comment


                          • #14


                            I have uploaded 123.jpg file. When I click on the save button, it brings another screen where I see nothing (see the below image). How do I know if the image is uploaded successfully or not ? And how do I get the path ?

                            Comment


                            • #15
                              I had the same issue before with one of my clients. The image file size is too big. Try compressing the image using an image compression tool (e.g. https://compressor.io/)

                              This is not only good for uploading successfully but for your page performance.
                              Last edited by Glenn Vergara; Thu 22 Oct '15, 4:06pm.

                              GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                              Comment

                              Related Topics

                              Collapse

                              Working...
                              X