Announcement

Collapse
No announcement yet.

Background image

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

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

  • #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: #123456 url(images/background.gif) 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 -->
    
    <div align="center">
    	<div class="page_content" style="width:$stylevar[outerdivwidth]">
    
    <!-- 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 -->
    
    	</div>
    </div>
    
    <form action="$vboptions[forumhome].php" method="get">
    That should do it.

    Comment


    • #3
      thanks

      Comment


      • #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: #123456 url(images/background.gif) repeat top left}
        What does the 123456 refer to?

        Comment


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


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

            Comment


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

              Comment


              • #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; border: 1px solid #123456;}
                Where #123456 is the color code of the border color. That should work.

                Comment


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


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


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


                      • #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 1st Aug '05, 2:48am.

                        Comment


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


                          • #14
                            thank you that work

                            Comment


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