Announcement

Collapse
No announcement yet.

Using additional.css to add another background image?

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

  • 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.

  • #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


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

      Comment


      • #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 customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        I am not currently available for vB Messenger Chats.

        Comment


        • #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


          • #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 customization and demonstration site.
            vBulletin 5 Documentation - Updated every Friday. Report issues here.
            vBulletin 5 API - Full / Mobile
            I am not currently available for vB Messenger Chats.

            Comment


            • #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


              • #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


                • #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 customization and demonstration site.
                  vBulletin 5 Documentation - Updated every Friday. Report issues here.
                  vBulletin 5 API - Full / Mobile
                  I am not currently available for vB Messenger Chats.

                  Comment


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

                    Comment


                    • #11
                      Originally posted by neparker View Post
                      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 customization and demonstration site.
                      vBulletin 5 Documentation - Updated every Friday. Report issues here.
                      vBulletin 5 API - Full / Mobile
                      I am not currently available for vB Messenger Chats.

                      Comment


                      • #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


                        • #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...
                          X