Combining "canned" theme with custom images

[jplscanlon]

Hello, I'm a newbie to the Smugmug community and I'm in the process of creating my new customized site (http://recruitingproductions.smugmug.com). The tutorials that are on offer have been able to address almost all of me needs but I find myself having a unique issue that I've not been able to find reference for.

I am trying to make 2 separate vertical images (text over a transparent background) appear on both sides of the page. I also want to use the canned "Grey" colors theme as my background. Is there any code that will a) allow me to have 2 different images on both sides of the page; b) superimpose the images over the canned grey background theme?

Thanks in advance

[jfriend]

For me to help, I'd need to understand more about what you want the end result to look like. Perhaps a screen shot or a diagram. And, I'd need to know what kind of page you are trying to put this on - homepage, category, sub-category, gallery, etc... Also, is this a background for lots of pages or just something you're using on one page?

[jplscanlon]

For me to help, I'd need to understand more about what you want the end result to look like. Perhaps a screen shot or a diagram. And, I'd need to know what kind of page you are trying to put this on - homepage, category, sub-category, gallery, etc... Also, is this a background for lots of pages or just something you're using on one page?

Thanks for your reply. Here's a very rough image of what I want I'm going for. The text images that would be on either side of the page are represented by the lines that say "Text" over and over (note that I want 2 different images on either side).

http://recruitingproductions.smugmug.com/photos/461627424_n8yhn-M.jpg

I'm undecided as to whether I want these images every page or just the homepage so if it's not too much trouble I'd like instructions for how to do both.

Again, thanks in advance - James

[jfriend]

Thanks for your reply. Here's a very rough image of what I want I'm going for. The text images that would be on either side of the page are represented by the lines that say "Text" over and over (note that I want 2 different images on either side).



I'm undecided as to whether I want these images every page or just the homepage so if it's not too much trouble I'd like instructions for how to do both.

Again, thanks in advance - James

That layout is likely to be wider than some screens/browser windows and certainly not compatible with the gallery views. Have you thought through what window width you think it will work for? It seems like it would be possible if you made the slideshow smaller and the category/sub-category pages narrower, but not practical on gallery pages.

Can you provide me with links to two sample images so I can see how large they are and what would work? We can start by putting it on your homepage.

[jplscanlon]

That layout is likely to be wider than some screens/browser windows and certainly not compatible with the gallery views. Have you thought through what window width you think it will work for? It seems like it would be possible if you made the slideshow smaller and the category/sub-category pages narrower, but not practical on gallery pages.

Can you provide me with links to two sample images so I can see how large they are and what would work? We can start by putting it on your homepage.

I haven't created the images yet but when I create them in PS I could set them up to be any size necessary to facilitate this operation. I guess since it seems impractical to put this on gallery pages I will just try this on the homepage.

[jfriend]

I haven't created the images yet but when I create them in PS I could set them up to be any size necessary to facilitate this operation. I guess since it seems impractical to put this on gallery pages I will just try this on the homepage.

Add this CSS and you can see what it would look like:

.homepage #extraDiv1 {
background: url(http://jfriend.smugmug.com/photos/39936252_EYbh4-M-1.jpg) no-repeat;
width: 300px;
height: 450px;
position:absolute;
left: 5px;
top:50px;
z-index: -5;
}

.homepage #extraDiv2 {
background: url(http://jfriend.smugmug.com/photos/39936220_W7ydY-M-1.jpg) no-repeat !important;
width: 300px;
height: 450px;
position:absolute;
top:50px;
right: 5px;
z-index: -5;
visibility: visible !important;
}

This is a couple of placeholder images from my site. You would obviously put links to your own images in here. When you decide what size your images are going to be, you adjust the width and height numbers to match what your images actually are.

You can then tweak the top, left and right values to position the images relative to the border of the window. FYI, these side images are 300px wide. To show them without overlapping your slideshow, you need a 1400+ pixel wide window. That's very wide and not available on many computers.

Here's what it looks like:

http://jfriend.smugmug.com/photos/461683742_9i4zL-M.jpg

[jplscanlon]

Thank you very much - this code does exactly what I need it to. I appreciate your time.

James