What's the best way to add a shadow effect to sides of page as seen right here?

[RedHotChili]

I read this post and was wondering if this is the best way to achieve this:

This is the basic way of getting to what you want.

Try going by 770pixel width and add image to StyleVars => Page Background => Standard CSS Attributes => Background


#000 url(images/misc/pagebg.gif) repeat-y top left


|<---pagebg.gif---><------Fourm Content------><---pagebg.gif--->|
|<---overhang image---><------770px------><---overhang image--->|
|<-------------------Approx. 830px pagebg.gif---------------------->|

pagebg.gif are usally ???px width by 1px thick[height]

You can use CSS to get better results.



He mentions using CSS to get better results. Is this true? If so, does anyone know how this would be done? Is this how it was done here?

TIA

[eJM]

Dontcha just hate it when no one replies - and all these coders hangin' out around here too. Sorry, I'm a bit off tonight and will be spending another Tuesday at the VA clinic attached to a machine. I'll try to help with this after I get home.

One quick thought though: think about making a fixed width at 960px - fills a screen nicely for those using a 1024x768 screen resolution and still doesn't look bad at larger. You leave out those still stuck in the 800x600 world though. I don't design for that segment and haven't had anyone complain, but that's not to say no one uses that old setting anymore. Up to you. I just think the great majority use larger resolutions and smaller fixed width designs look lost in a sea of empty pixels. I did opt to circumvent that emptiness by giving wider screens some graphical content to look at on this site: http://www.linomaster.com/ It looks centered in a 1024x768 screen, but it's actually left aligned. You can see the hidden design appear in wider resolutions.

Later,

Jim

[Princeton]

it really depends on your style but the background image here is done via CSS
html {background:#131D2F url(your-image-here.jpg) center repeat-y}

the height of image is 1px

[RedHotChili]

Dontcha just hate it when no one replies - and all these coders hangin' out around here too. Sorry, I'm a bit off tonight and will be spending another Tuesday at the VA clinic attached to a machine. I'll try to help with this after I get home.
Thanks a lot Jim. I was thinking this might have been the wrong forum to post my question, hearing nothing but crickets thus far. I appreciate your taking the time from your busy schedule to post a reply.

One quick thought though: think about making a fixed width at 960px - fills a screen nicely for those using a 1024x768 screen resolution and still doesn't look bad at larger. You leave out those still stuck in the 800x600 world though. I don't design for that segment and haven't had anyone complain, but that's not to say no one uses that old setting anymore. Up to you.
I agree with you about ignoring the 800x600 segment of the population - all three of them. And they won't be in my target audience anyway. :)

Initially I had set my fixed width at 1000px, because I wanted my header/logo image to be that width. (That was about 3 wks ago when I was a total noob. I'm still a noob, but not a total one.) I then wanted to give the sides a professional looking shadow so I set the width to 970. But that's subject to change as I haven't finalized my logo design yet.

I just think the great majority use larger resolutions and smaller fixed width designs look lost in a sea of empty pixels. I did opt to circumvent that emptiness by giving wider screens some graphical content to look at on this site: http://www.linomaster.com/ It looks centered in a 1024x768 screen, but it's actually left aligned. You can see the hidden design appear in wider resolutions.
I didn't notice that at first until I expanded my browser window to full screen. Pretty clever. Looks really nice.

Thanks again for your input. Hope all goes well for you today. :)

--------------- Added 1239127000 at 1239127000 ---------------

it really depends on your style but the background image here is done via CSS


the height of image is 1pxThanks for the reply, Princeton.

So then essentially the idea is to create an image file as wide as the table width + 2x(width of gradient) and center it and have it repeated in the vertical direction via:

html {background:#131D2F url(your-image-here.jpg) center repeat-y},

where the color code #xxxxxx above corresponds to the lighter color of the gradient?

I think I can figure that out. Thanks for the input. :)

[RedHotChili]

it really depends on your style but the background image here is done via CSS

html {background:#131D2F url(your-image-here.jpg) center repeat-y}

the height of image is 1pxBut what I really need to know is where exactly does this code get inserted? Does it get inserted in the HEADER part of the COMMON TEMPLATES? And if so, how does one exactly embed this particular code in there?

--------------- Added 1239230866 at 1239230866 ---------------

Okay, through trial and error, by placing this code in the Extra CSS Attributes in the Body section I am able to get my 1px high image to load properly. I think.

The image loads completely all the way from top to bottom, though I wish there was some way of making it stop at the bottom edge of the footer.

[eJM]

But what I really need to know is where exactly does this code get inserted? Does it get inserted in the HEADER part of the COMMON TEMPLATES? And if so, how does one exactly embed this particular code in there?
All CSS code should appear in AdminCP > Styles & Templates > Style Manager > All Style Options > the appropriate section for the code. Since Princeton said the background they use here is located in the HTML portion of the document, you would have to add that to one of the boxes in Additional CSS Definitions near the bottom of the page. There is no separate section for the HTML part of the document.

Since you are wanting the background to go only as far as the bottom of the footer, I'm guessing you want the shadow effect to wrap under the footer, with the background color filling the rest of the space below the footer when it doesn't fill a whole browser window. In that case, your background may have to be in 2 parts, the sides and the bottom. You would have to add a "wrapper" DIV to contain the header and footer, applying the shadow sides background to that. Then apply the footer background to the Page Background.

The side shadow background image can be only 1px high, but the width will be as wide as it needs to be for the effect you want. If your page will have a fixed width of 960px (my recommendation to allow the 1024px wide resolutions to comfortably contain the page and the borders of the browser, including the scroll bar on the right side - and a small margin on each side) that means subtracting the amount of shadow fade to the background color on each side to determine how wide the Main Table Width property will be set at.

The footer background can be tackled a few different ways. I think I would try to set it into the DIV that contains your copyright data and shove it to the bottom. That background image will have to be the same width as your side shadow background (just slice it from the same graphic) and only as high as the shadow from start to end of fade to background color. You can set up a new class or ID in one of the Additional CSS boxes and apply it to the DIV surrounding the copyright. You can use more than one class in a container and you can also have an ID and a class declaration - I would make it an ID, since it's only used once anywhere.

To learn how to use CSS to position your backgrounds, visit this page: http://www.w3schools.com/css/css_background.asp

Best R'gards,

Jim

[RedHotChili]

All CSS code should appear in AdminCP > Styles & Templates > Style Manager > All Style Options > the appropriate section for the code. Since Princeton said the background they use here is located in the HTML portion of the document, you would have to add that to one of the boxes in Additional CSS Definitions near the bottom of the page. There is no separate section for the HTML part of the document.Thanks for the reply Jim.

I tried entering the following code in the Additional CSS Definitions near the bottom of the page as you suggested, but it's not working for me:
html {background: #xxyyzz url(images/misc/image.gif) top center repeat-y;}

What happens is that the shadow image begins to display right below the copyright information, and not at the top of the page where I want it to begin. Now please bear in mind that I'm a novice here when it comes to html and css, though I am crawling up to speed, and so I may just be making a silly mistake.

Now when I enter the following code in the Body Extra CSS Attributes box:

background: #xxyyzz url(images/misc/image.gif) top center repeat-y

it displays just fine, except that it's going all the way down past the last footer and past the copyright - all the way down to the bottom of the page as far as it can go. Wanting the side shadow to stop at the bottom of the last footer (without it necessarily going underneath it) was what I was looking to achieve. But for now if I can get the shadow to load properly by placing the code in the Additional CSS Definitions I'll be happy. :)

[eJM]

What about the wrapper I mentioned? If you want to contain the background to only the area covered by the header and down to the footer, then the HTML and BODY areas are out of the equation. But first let me explain something about the boxes you put your CSS into in the Style Manager.

The BODY area of the Style Manager already has a place to put the background CSS - don't duplicate it by adding:
background: #xxyyzz url(images/misc/image.gif) top center repeat-y
to the Extra CSS attributes. They aren't extra attributes. But anyway, don't put your background image there at all. To do this the way you want, you have to add a wrapper DIV around the area you want the shadow sides to appear. Then assign that DIV an ID labeled wrapper (or whatever you wanna call it). Then the CSS for that ID will be applied to that whole DIV. You'll need something else for the bottom shadow too. Put the CSS for wrapper and the container for the shadow bottom image in the Additional CSS box at the bottom of the Style Manager.

The CSS MIGHT look like this:

#wrapper {background: #xxyyzz url(images/misc/image.gif) top center repeat-y;}
#shadow-bot {width: nnnpx; height: nnpx; padding: 0; margin: 0 auto;}

Replace the n's with the proper sizes. Then the HTML you will have to add to your templates. If you look at the source of the page, it will look something like this:

<div id="wrapper">
the area of your forum that is "wrapped" in the shadow sides goes here
</div>
<div id="shadow-bot"><img src="path-to-forum/images/misc/image.gif" alt="" /></div>

The wrapper DIV would probably start before the first TABLE in the header template and end either before or after $ad_location[ad_footer_end] in the footer. Your shadow bottom container would be directly after that.

Caveat: I don't have a link to your forum to check what's what. Besides, this is a lot of work I have spent a number of years trying to learn how to do. Beyond this kind of help here in the forum, you may want to hire someone to do this for you, or continue to do a lot of research and trial and error to get it the way you want.

R'gards,

Jim

[RedHotChili]

Thanks for pointing out a mistake I was making.

I entered this: #xxyyzz url(images/misc/image.gif) top center repeat-y

in the Background box of the Standard CSS Attributes of the Body section, and it works the way it was working the hard way. I was making it more complicated than it needed to be. :rolleyes:

I'll see if I can figure out this wrapper stuff later. But for now, thanks for helping me see the mistake I was making. :)