FreeGameDev

They are definitly on top. You can see that 6 pixel of the parchment are darker because the border is on top of it.

On the bottom border, the fading effect is still there on the left and on the right of the corners (it should stop at the corners).

edit: Oh, you are right... The borders are under the patchment... Sorry. I looked at it the wrong way... Let's see how to fix that.

The borders do currently not overlap with the parchment, see the attached screenshot. They need to overlap for the effect to work.

OK, I moved the shadows were the boxes in you pictures are (they are now 12px on the parchment, [1] was 6px and [2] is 12px). You can clearly see that they are on top on the parchment. But it still looks strange, I think, but maybe I only looked at it for to long now.

Yeah, it doesn't look right still.

Yes it still looks wrong. Your right it was 6 pixels inside already, but the corners was not placed correctly, that confused me. Though the corners are still not placed correctly.

The left.png, right.png and bottom.png should be 6 pixel inside the parchment. But the corners should also be 6 pixels inside the parchment from both sides, take a look at this illustration again:
download/file.php?id=1953&mode=view

But even if you place the things like this I am not sure it will look good, since I have no way of really testing these small images to tile correctly :S

Wouldn't it be easier if the images were made to be placed at the sides, and not inside them?

The problem with that is that then the shadows will not fit with the parchment texture. If we place the shadows above the parchment then we do not need to align the parchment texture correctly with the shadows, and hence we can make a rectangle of any size that uses the parchment texture tiled.

Ok to make sure that the borders are aligned correctly I have made a new test border set, when they are aligned correctly there should be two red boxes showing around the parchment textures. One of the boxes is precisely 6 pixels inside the parchment texture from the left, right and bottom sides. The other redbox is exactly on the 1 pixel border of the parchment texture.

Then when they are aligned correctly we can try with the other borders and see if it looks correct. If now I can tweak the borders to look correct without having to deal anymore with the CSS for the borders.

Ok, have a look. there's now a red border.

Nice progress Now we can see what is wrong. So the bottom.png extends beyond the corner as you can see to the bottom right and left. The bottom.png should stop tilling as soon as it hits the the corner. It is the same with the left.png and right.png but there we cannot see it, probably because of the layering. But I can make a new set of borders to detect that.

Also could you move the borders and the corners out so that they are 6 pixels away from the parchment texture again?

Also the left corner is no pixel to much to the right, you can see that the pixel in the corner of the inner box is missing as it is to the right.

OK, I moved eveything from 12px to 6px again.

I'm not sure how to fix the extension of the bottom border to the left and right with pure html/css. It's not possible to let the tiling stop (this is not even planned with CSS3, as it seems). The only way would be to change the corner image. I now made it so that the left corner shows how to fix the bottom shadow extension and the right corner to fit the red line.

If your sure it is not possible with CSS, then I think we should just use tables to fix it.

It doesn't look that wrong in the bottom right corner now, if you changed the image to align with the two others as the setup is now it might work.
I don't see how tables will make it easier, you might as well use multiple divs then.

Another option would be to make some fancy graphic in the corners instead.

The easiest solution is the one from oln: Place the borders and corners directly at the edge, and not overlapping. Maybe you can make a border that is independent from the parchment texture.

Stefan: can you put the corners on layer 1, then the left,right and bottom borders on layer 2 and then finally the parchment texture on layer3. So layer 1 is on top, then comes layer 2 then comes layer 3? If so then I might have a solution for the border problem.

I'll see if I can so something about this tomorow. But this should be possible.

Ok try it now with these borders. The Left.png, Bottom.png and Right.png should be 10 pixels inside of the parchment. The BottomLeft.png and the BottomRight.png should be 11 pixel inside of the parchment.

Yeah, nice work. Now it looks good.

Now, the navigation.

Nice work. You can barely see the transition now.
I think we should have some background for the menu as well.

Yes, but the menu background should be less compelx. Best would be a single tile that is repeated from 0 to screen width. And the Buttons are plain CSS style buttons sitting on top of the background.

After the menu and the font colors are done, we only need some more text and some screenshots. Then we can publish the new website.

edit: I also did some further writing on the website (download and development).

Yes indeed it looks much better now But there is still something left to remove for me. The positions should not need to change though. So you can concentrate on the other parts.

Can you specify a place where I can upload the borders to so that I can see them on the website? I would like to also remove the last white lines in the corners and make the transition to the background completely unnoticeable. I just need to make some pixel adjustments in the images and upload them, and iterate this until it works completely.

On the webserver in "wolfcms/public/themes/opendungeons/images" (I hope I have this correct now, I didn't look it up).

Ok did you by the way look at this? It seems to do exactly what we want with CSS and the borders.

Border images are CSS3, this is not an official standard yet (only the most modern browsers support it, some don't have it, other only in their trunk versions).

Hmmm crap But is it not possible to use tables? Is it only possible to change the CSS style-sheet of WolfCMS or why is it that we cannot just use a table for the parchment texture and the borders?