Announcement

Collapse
No announcement yet.

Adding side Graphics...

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

  • Adding side Graphics...

    I'm working on a theme and wanted to know how I can add graphics down either side of the table that makes up the main display. I've done the footer and header graphics already but am not sure what I would modify for the table that is displayed in between these.

    Thanks for any help in advance!

  • #2
    Well assuming you are already using tables you need an outer container table too.
    Dean Clatworthy - Web Developer/Designer

    Comment


    • #3
      Originally posted by Dean C
      Well assuming you are already using tables you need an outer container table too.
      I found one post on here that explained how to do it by starting a table at the top of the header - leaving the table open and finishing it off in the bottom of the footer. This seemed strange but seems to work okay. Is this the best way of doing it?

      Comment


      • #4
        I wrote a tutorial for this

        In your header template at the top add:
        HTML Code:
        <table width="800" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td id="leftc" width="38"> <img src="http://www.quacked.co.uk/chat/bluox/spacer.gif" width="38" alt="quacked" /> </td> <td width="1000">
        Obviously change the path to your spacer image, the spacer is attached to this post and also change the 800 to the width you want your board.

        Now go to edit the footer and add this at the bottom:

        HTML Code:
        </td> <td id="rightc" width="38"> <img src="http://www.quacked.co.uk/chat/bluox/spacer.gif" width="38" alt="quacked" /> </td> </tr> </table>
        Obviously change the img scr path for the spacer again above.

        Now for the actual border images you need to click edit style this time instead of editing the templates, once you have done that in the css box at the bottom add the following at the top:

        Code:
        #leftc {
        background-image: url(http://www.quacked.co.uk/chat/bluox/left.jpg); 
        }
        
        #rightc {
        background-image: url(http://www.quacked.co.uk/chat/bluox/right.jpg); 
        }

        Now you need to change them accordingly, rightc is the image for the right border, leftc is the image for the left border. You need to change the image paths to your border images now.

        There now you should successfully have image borders in your vbulletin.
        Attached Files

        Comment


        • #5
          Excellent Patriotcow, I'll give this a try tonight! Thanks for the help!

          Comment


          • #6
            Works perfectly!!!! Okay, just to push my luck now, how would I add an image to the top and bottom of each "column" - esentially the four corners of the page. This would allow me to use rounded corners and other ideas...

            This is by far the cleanest idea I've seen so far AND it's XHTML 1.0 compliant!

            Just trying to follw the standards and learn as I go...

            Comment


            • #7
              Nevermind, I figured it out. Actually, it was pretty obvious when I stood back and took a break; simply move the main header table above your code and the main footer table below it. This way, the regular header and footer tables site above and below the frame and can have whatever style corners you want. Pretty flexible really.

              For those that wanna say "well duh!" - go ahead, like I said, it was obvious after taking a second away from it! LOL

              Thanks for the help!

              Comment


              • #8
                Glad I could help

                Comment

                Loading...
                Working...
                X