Skin Help

[September]

Okay, I need help with a skin I'm making. What I want to do is make a background where the area my boards are is one color and the outside part is anothr color. I would also like to make a little picture next to the welcome table, and have a border in between the two colors.

I have no idea how to do this. I don't know how many pixals the background in total should be, the little picture, the border. I'm planning on resizing my board to about 600 if that makes it easier.

Here's a screenshot of what I wanna do. example

[Tumbleweed]

What they did for that little image you see above the side tables was actually incorporate it with their banner image. So that is all one big graphic.

If you plan on using side table like they did then you'd need to make the side image around 200 pixels wide like your side tables.

For the background: Again, using sidetable you'd need to make the center portion the total width of your forum plus the width of your side tables and then a few pixels for the gap between your side tables and forum.

Here is a example of one I made for someone. That one was 1024 pixels wide and as you can see the inner part was wide enough so the forum/side tables would fit.

You also have make sure any decorations on the sides are seamless and repeat nicely. You also have to make sure the decorative image is exactly the same amount of pixels on each side or your forum may center over the decorative part. Hope I explained that o.k.

[September]

Hmm, okay....I think I get what you're saying. Thanks for the help. I'll probably post again with a test to see if I'm doing it right.

I think I got it centered okay, but I'm not sure if it looks right overall. Don't pay attention to the colors. I know they suck.
test

[VanillaOrchids]

Mar 9, 2010 12:19:31 GMT -8 September said:

I think I got it centered okay, but I'm not sure if it looks right overall. Don't pay attention to the colors. I know they suck.
test

The background image itself is centered properly but the border isn't because, most likely, your right and left hand sides (outside of the borders) doesn't measure the same amounts. When they don't match, it makes the background appear off center.

I wrote up a tutorial once on how I go about the basics of a bordered background ... if your interested.
support.proboards.com/index.cgi?board=graphicsdiscussion&action=display&thread=297116&page=1#1902119

[September]

They look the same to me.....

[VanillaOrchids]

Mar 10, 2010 13:11:06 GMT -8 September said:

They look the same to me.....

OK! I checked the background and only found it one pixel off so that wouldn't make a noticeable offset but the image below shows what I see and based on what I see, the background doesn't appear centered.
img704.imageshack.us/img704/2439/prntscrn101.gif

^ Where I have the yellow arrows shows how the banner doesn't appear centered between your bordered background. The banner overlaps the right border just slightly where as the left side, the border is several pixels away from the banner edge.


I think it might be because you are not using a code to center tile the background. So to anyone with a smaller or larger screen resolution, the bordered background would be even more off center in appearance than it is to you or I.


If you use the following code in your Global Headers that would fix the problem ... though if you don't see anything wrong you aren't likely to see a change but it will fix the problem to people with a different screen resolution than you.


<!--BACKGROUND CENTER-->
<style type="text/css">
<!--
body
{background-position: center top;
background-attachment: fixed;background-repeat: repeat}
-->
</style>
<!--END BACKGROUND CENTER-->