customize header to add contact details.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • sowmya002
    Member
    • Feb 2014
    • 80
    • 5.0.X

    customize header to add contact details.

    Hi,

    I would like to make customisation to the vbulletin header. I was able to change the logo from vbulletin logo to our site logo. I would like to add an extra box with the contact details between the logo and the search box. Please let me know how do I go about it.

    Thanks for your support!
    Sowmya
  • TLMD
    Senior Member
    • Sep 2012
    • 1766
    • 5.6.X

    #2
    Do you want to implement this as "real" content (selectable and clickable text), or just a header picture that shows the information in between those two elements?

    Comment

    • sowmya002
      Member
      • Feb 2014
      • 80
      • 5.0.X

      #3
      Hi,

      Thanks for your reply!

      For now we do not need a clickable text. If we can have the contact details displayed in the header that is fine.

      Thanks!
      Sowmya

      Comment

      • TLMD
        Senior Member
        • Sep 2012
        • 1766
        • 5.6.X

        #4
        Well, then this should be quite easy. You can simply design a header image that contains the neccessary information and insert it in the header (for example as a background image).

        Comment

        • sowmya002
          Member
          • Feb 2014
          • 80
          • 5.0.X

          #5
          Insert in the header? Do I need any code changes for that or is that doable from the admin dashboard itself? I am new to vbulletin. So can you please elaborate

          Thanks again for your support!
          Sowmya

          Comment

          • TLMD
            Senior Member
            • Sep 2012
            • 1766
            • 5.6.X

            #6
            Create an image you want to use as a background in the header. Place the contact information wherever you want on that image, but remember to leave some space to the left where the logo will be displayed.

            You can then add that image as a background image in the header via CSS. To do so, you should start by creating a duplicate of the current "Default Style" ("AdminCP > Styles & Templates > Style Manager"), unlress, of course, you have already created your own style. If so, use that one.

            Upload the background image to your server/webspace/whatever. You will link to that image later.

            Then go to "AdminCP > Styles & Templates > Style Manager > Edit Templates > CSS Templates > css_additional.css" and add some custom code there:

            Code:
            #header {
            background-image: url('path/to/your/image.jpg');
            background: no repeat;
            }
            Save it. Then your image shows up as the new background image.

            Comment

            • sowmya002
              Member
              • Feb 2014
              • 80
              • 5.0.X

              #7
              Hi,

              I will try it out and get back.

              Thanks!
              Sowmya

              Comment

              • sowmya002
                Member
                • Feb 2014
                • 80
                • 5.0.X

                #8
                I am sorry but I have a few doubts here. When I logged into admincp and went to styles and template--> style manager, I could see the default style and also an option to create a new style. But there was no option for duplicating the default style. Please let me know how do I go for that.

                Also if I duplicate the default style, then how do I know which style is being used by the forum. I am totally new to vb forums and getting confused.

                Thanks for your support!
                Sowmya

                Comment

                • TLMD
                  Senior Member
                  • Sep 2012
                  • 1766
                  • 5.6.X

                  #9
                  Yes, I was wrong here. Just click on "Add New Style" and you are fine. I just wanted to make sure that you do not overwrite an existing style (e.g. if you have already created an own style) when you are eperimenting with the header.

                  You can decide which style should be used as the default style under "AdminCP > Settings > Options > Style & Language Settings > Default Style". There you can also allow/disallow your users to change the style of your site (under "Allow Users To Change Style").

                  Comment

                  • sowmya002
                    Member
                    • Feb 2014
                    • 80
                    • 5.0.X

                    #10
                    Hi,

                    Thanks again for your patience and replies.

                    I have tried the following steps,

                    1) went to styles and templates --> style manager

                    2) clicked on add new style. While adding the new style selected default as parent style. Named it new and saved.

                    3) Now I can see New as a child of default style.

                    4) Then went to edit css_additional.css for this new style. This file was empty. Added the following code which you had mentioned in your comment.

                    #header {
                    background-image: url('/images/misc/vg-logo-gplus.png');
                    background: no repeat;
                    }

                    Now css_additional.css for the new style has just 4 lines of code in it and saved it.

                    5) Uploaded vg-logo-gplus.png a trial image under images/misc folder

                    6) Then under options-->style and language settings selected new as the default style.


                    Now when I open the forum I still cannot see the background image. Please correct in case I am doing anything wrong here. Is it anything to do with the style display orders?

                    One more observation is that my css_additional.css is now red in colour. Does that mean there is a syntax error in the code?

                    Thanks!
                    Sowmya

                    Comment

                    • sowmya002
                      Member
                      • Feb 2014
                      • 80
                      • 5.0.X

                      #11
                      Hi,

                      I tried modifying the header_background variable. I could see that the issue was with the image type. When I used a gif image it worked fine. Thanks a lot for your help. I really appreciate that.

                      Thanks!
                      Sowmya

                      Comment

                      • TLMD
                        Senior Member
                        • Sep 2012
                        • 1766
                        • 5.6.X

                        #12
                        Originally posted by sowmya002
                        One more observation is that my css_additional.css is now red in colour. Does that mean there is a syntax error in the code?
                        The red color just indicates that you have made some modifications on that file. Unmodified files remain uncolored.

                        Originally posted by sowmya002
                        I could see that the issue was with the image type. When I used a gif image it worked fine.
                        Inserting a background-image via CSS works with any kind of image file, such as PNGs, JPGs, GIFs etc. I am not sure why it didn't work at your end in the first place, but I am sure it is only a minor thing. It is hard to assess this from the sidelines. However, I am glad you found a way to display the information you need!

                        Comment

                        Related Topics

                        Collapse

                        Working...