Background image

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Wattie
    Senior Member
    • Jul 2004
    • 186
    • 3.0.3

    Background image

    Around the forum boxes (just inside the grey colouring on the outside) is a white background. Is it possible to replace that background with an image?
  • Jake Bunce
    Senior Member
    • Dec 2000
    • 46598
    • 3.6.x

    #2
    Yes.

    That inner area is started and stopped several times on a page. You will want to change things around a bit so the background image doesn't start and stop too.

    Go to your:

    Admin CP -> Styles & Templates -> Style Manager -> Main CSS (in the menu)

    Scroll to the Page Background class. Delete the contents of its Background attribute so it's transparent. Then scroll to the very bottom of that page to where it says Additional CSS Definitions. Add this code to the bottom box:

    Code:
    /* ***** used for content area - so the "page" class can be transparent ***** */
    .page_content
    { background: #[color=red]123456[/color] url([color=red]images/background.gif[/color]) repeat top left}
    Change the red text appropriately. Save the page.

    Then go to your:

    Admin CP -> Styles & Templates -> Style Manager -> Common Templates (in the menu)

    Add the red code to the bottom of your header:

    Code:
    	</td>
    </tr>
    </table>
    <!-- /logo -->
    
    [color=red]<div align="center">
    	<div class="page_content" style="width:$stylevar[outerdivwidth]">[/color]
    
    <!-- content table -->
    $spacer_open
    
    $_phpinclude_output
    And add the red code to the top of your footer:

    Code:
    <br />
    <div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
    <br />
    
    $spacer_close
    <!-- /content area table -->
    
    	[color=red]</div>
    </div>[/color]
    
    <form action="$vboptions[forumhome].php" method="get">
    That should do it.

    Comment

    • Wattie
      Senior Member
      • Jul 2004
      • 186
      • 3.0.3

      #3
      thanks

      Comment

      • Wattie
        Senior Member
        • Jul 2004
        • 186
        • 3.0.3

        #4
        Ive done what you said, but it has just got rid of the white background but not put in the image. I think it could be something to do with the:

        Code:
        { background: #[color=red]123456[/color] url([color=red]images/background.gif[/color]) repeat top left}
        What does the 123456 refer to?

        Comment

        • Steve Machol
          Former Customer Support Manager
          • Jul 2000
          • 154488

          #5
          That refers to the hex code of the color you want.
          Steve Machol, former vBulletin Customer Support Manager (and NOT retired!)
          Change CKEditor Colors to Match Style (for 4.1.4 and above)

          Steve Machol Photography


          Mankind is the only creature smart enough to know its own history, and dumb enough to ignore it.


          Comment

          • Jake Bunce
            Senior Member
            • Dec 2000
            • 46598
            • 3.6.x

            #6
            Did you upload your background image and change the image path in the code?

            Comment

            • Wattie
              Senior Member
              • Jul 2004
              • 186
              • 3.0.3

              #7
              Fantastic! Works now. Thanks. One last thing. Is there a way of putting a border around it?

              Comment

              • Jake Bunce
                Senior Member
                • Dec 2000
                • 46598
                • 3.6.x

                #8
                Add the red code to the previous code I posted:

                Code:
                /* ***** used for content area - so the "page" class can be transparent ***** */
                .page_content
                { background: #123456 url(images/background.gif) repeat top left[color=red]; border: 1px solid #123456;[/color]}
                Where #123456 is the color code of the border color. That should work.

                Comment

                • Wattie
                  Senior Member
                  • Jul 2004
                  • 186
                  • 3.0.3

                  #9
                  thanks again - much appreciated. Is it possible to also put the border round the footer bar with the 'contact us' etc links so it all lines up properly?

                  Comment

                  • sbryan
                    Member
                    • Oct 2002
                    • 94
                    • 3.0.1

                    #10
                    can you guys please post a link to the forum where you set this up? im interested in doing the same thing and want to know how good it can end up looking.

                    Comment

                    • sphinx
                      Senior Member
                      • Dec 2001
                      • 211

                      #11
                      Originally posted by Wattie
                      thanks again - much appreciated. Is it possible to also put the border round the footer bar with the 'contact us' etc links so it all lines up properly?
                      <table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="1" width="710" class="page" align="center">
                      <tr>
                      <if condition="$show['quickchooser']">


                      this is the bit you need to change it is in your footer,in mine it is just above the quickchooser as you can see,simply change this border=0 value to border=1.hope this has helped

                      Comment

                      • redspider
                        Member
                        • Jul 2005
                        • 75

                        #12
                        I follow the instruction on this thread and so far I got the image to work

                        but almost at the end of forum on the side and in the end of page still white and I want the backgroung picture to cover those spot .
                        how can I do that ?


                        there is a image on attachment so you guys can see it I edit image color so fit the limit here.

                        thanks
                        Attached Files
                        Last edited by redspider; Mon 1 Aug '05, 1:48am.

                        Comment

                        • Jake Bunce
                          Senior Member
                          • Dec 2000
                          • 46598
                          • 3.6.x

                          #13
                          Originally posted by redspider
                          I follow the instruction on this thread and so far I got the image to work

                          but almost at the end of forum on the side and in the end of page still white and I want the backgroung picture to cover those spot .
                          how can I do that ?


                          there is a image on attachment so you guys can see it I edit image color so fit the limit here.

                          thanks
                          You don't need this modification for what you want to do. I recommend removing this modification and just setting your Body class to use the background image. Then make the Page class have a transparent background.

                          Comment

                          • redspider
                            Member
                            • Jul 2005
                            • 75

                            #14
                            thank you that work

                            Comment

                            • VirginiaCustoms
                              Senior Member
                              • Feb 2004
                              • 100
                              • 3.0.2

                              #15
                              Originally posted by Jake Bunce
                              You don't need this modification for what you want to do. I recommend removing this modification and just setting your Body class to use the background image. Then make the Page class have a transparent background.
                              Could you explain that just a little further PLEASE!

                              Comment

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