Help - Search - Members - Calendar
Full Version: Is there a css code to make a pattern?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
NovaArgon
I am trying to make the brown forum border have the same pattern border as the page.

Is there a way to do this using css?

Here is the current code

CODE
.forabg {
    background-color: #60522f;
    background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}


This image will explain what I mean more

IPB Image
Darin McGrew
It's going to take some work. Right now, the side borders come from a single background image that covers the full width of the page: http://www.tarantuladatabase.com/assets/fo.../content_bg.jpg

(This also forces a fixed-width design, which has its own problems.)

You'll need to create a new background image with just the border pattern you want, and use it as the background image for the part of the page you want. (I think you can use the new background image for div.forabg and change the background back for ul.topiclist.forums

FWIW, that markup would be a lot cleaner as a table, rather than the mess of CSS-dependent div soup that it is now.
NovaArgon
Would it be very hard to change it from a fixed width design?
Darin McGrew
You'd need to do the borders differently. Here are some pages that demonstrate the technique:
Creating Custom Corners & Borders
Creating Custom Corners & Borders Part II
NovaArgon
Wow that sounds like a huge job i am amazing at how much you know lol. Every time I have a question no matter how off the wall it is you know the answer. I don't think I've managed to stump you yet lol

I don't see how I would be able to keep the top part of the page like it is. I'll look into it some more but I might just leave it like it is that sounds like starting over to me.
Darin McGrew
I think the cleanest way to adapt your current design would be to separate the scrollwork on top from the border. Use the ALA techniques to create the main border. The background images for this could be reused to create the same border around other things if you wanted. And then use a centered background image above the top border for the scrollwork.

Keep in mind that it isn't the fluid design that takes extra work. It's redesigning the site that takes extra work. This is true regardless of the reason for redesigning the site.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.