Using additional.css to add another background image?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • neparker
    Member
    • Feb 2010
    • 46
    • 4.0.0

    Using additional.css to add another background image?

    I have my forum setup pretty much the way I want, I added an image in stylevars -> doc_background and now I am wondering how to add another image so this new image overlaps the previous one.

    The first image covers the entire background, I want this 2nd image to only expand a little off from each side of the forum to give it a border look.

    I have been searching all over on how to do this and can't figure it out, so I am hoping someone here can help me out. I am thinking I could possibly use additional.css to add this 2nd image, but I'm not sure, and honestly, I'm not sure what code to even use to make it possible.

    I do know it is possible because I've seen it before, and yes, I've tried figuring it out using firebug, but I just can't seem to figure it out.

    my site is www.stufftoscrap.com/forum, I'm trying to tie it together with my www.stufftoscrap.com/store (you'll see the border I'm talking about there).
    My main background image size is 96x90 px and repeats, the border background size is 935x305 px - in the store it is repeating as well.

    Also, if I add additonal.css code and it doesn't work, where do I delete it from?

    Thanks.
  • Lynne
    Former vBulletin Support
    • Oct 2004
    • 26255

    #2
    Add a left and right border to the body.

    body {
    border-left: 20px solid pink;
    border-right: 20px solid pink;
    }

    Please don't PM or VM me for support - I only help out in the threads.
    vBulletin Manual & vBulletin 4.0 Code Documentation (API)
    Want help modifying your vbulletin forum? Head on over to vbulletin.org
    If I post CSS and you don't know where it goes, throw it into the additional.css template.

    W3Schools <- awesome site for html/css help

    Comment

    • neparker
      Member
      • Feb 2010
      • 46
      • 4.0.0

      #3
      I have an actual image I want to use, pink wouldn't be the correct color.

      Comment

      • Wayne Luke
        vBulletin Technical Support Lead
        • Aug 2000
        • 73981

        #4
        Look at this page: http://www.css3.info/preview/multiple-backgrounds/

        Not really supported by older browsers.
        Translations provided by Google.

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

        Comment

        • neparker
          Member
          • Feb 2010
          • 46
          • 4.0.0

          #5
          That doesn't help me either, and I know it is possible.
          If I use stylevars to add my main background, I Was thinking I could add additional code for content?

          Comment

          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73981

            #6
            Since your store is simply using a body background and content background, you can do the same thing in vBulletin.

            Assign the pink polka dots to doc_background.

            Assign the pink border and white background to body_background. Set the color part to Transparent.

            Set doc_width to the same width as the body_background image.

            Set the left and right values of the doc_margin stylevar to auto.

            Set the left and right values of body_padding to the same width as the pink in the body_background image.


            However you can't assign two images as backgrounds with the same element without using the technique linked above.
            Translations provided by Google.

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

            Comment

            • neparker
              Member
              • Feb 2010
              • 46
              • 4.0.0

              #7
              Wayne, you are so awesome!
              I changed my dog_width to the size of my 2nd background, and added my 2nd background to body background and it worked.
              But here's another question for you now...

              The two navtabs? the ones on top (Whats New) and the ones below that (New Posts), how do I get the 2nd background on the sides of them? And also, above that and below them I have space, how do I get rid of that space?

              Comment

              • neparker
                Member
                • Feb 2010
                • 46
                • 4.0.0

                #8
                I found the padding in stylevars and removed that for the spaces above and below, but if there a way to get the border on the outside of those navbars?

                Comment

                • Wayne Luke
                  vBulletin Technical Support Lead
                  • Aug 2000
                  • 73981

                  #9
                  Edit the navbar_margin stylevar. Set the left and right values to the same value as body_padding value above.

                  Then you'll probably need one more change to get the background on the top part. In the additional.css template add a definition like this:

                  .above_body { background: url("/forums/images/misc/body.jpg") repeat-y scroll 0 0 #FFFFFF; }
                  Translations provided by Google.

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

                  Comment

                  • neparker
                    Member
                    • Feb 2010
                    • 46
                    • 4.0.0

                    #10
                    I don't see anything in stylevars called navbar_margin?

                    Comment

                    • Wayne Luke
                      vBulletin Technical Support Lead
                      • Aug 2000
                      • 73981

                      #11
                      Originally posted by neparker
                      I don't see anything in stylevars called navbar_margin?
                      Should be there. It is a standard stylevar. In the Search box at the top of the stylevar editor enter in margin. It should be one of the ones listed.
                      Translations provided by Google.

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

                      Comment

                      • neparker
                        Member
                        • Feb 2010
                        • 46
                        • 4.0.0

                        #12
                        ya, I don't have any margins under navbar, really I don't. lol.

                        When I search by just margin, I get the following:
                        albumtop_margin, picturelink_margin, calendar_addnewcontrols_, calendar_events_, ad_margin, doc_margin, pollbar_margin_, but no navbar_margin

                        Comment

                        • neparker
                          Member
                          • Feb 2010
                          • 46
                          • 4.0.0

                          #13
                          Ok, so I'm not too worried about that now because it looks alright, although, if it could get fixed even better.
                          My last question is though, some forum members says the forum is not centered and to the left more, however, for another handful of the members, it's centered fine, as well for me. I am assuming that they have better monitors with higher pixels or it's really not centered. If I ctrl - to make it smaller, it does go to the left though instead of staying centered. How can I get it to stay center regardless of size?

                          Comment

                          widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                          Working...