This drop shadow is very cool, the way it pops the photo out and makes it look like its floating in the center of the page. I like how the shadow is just on the bottom and not exactly a fixed width all around. I was if anyone knows how to exactly do this effect? I would love to know

http://www.thomascamponephotography.com/

I could be wrong on this, but I believe that is a separate image all together and just placed where it is and the pictures he has in the slideshow are specifically sized to fit those dimensions so it looks cool.
http://dl.dropbox.com/u/6653861/index.html is a link to a page I created just toying around with some cool stuff from Codrops that they offer free. The shadow underneath the pictures is a separate image. If you're in chrome, the outer images should move a little bit when hovered over. I am guessing he used something similar to this method, but I am a complete novice in coding so it may be done completely differently.

Zack, I think that is exactly what I am looking for. Great site btw, I'm a big soccer fan as well. I'm a complete novice as well and just kinda code hack and try to manipulate it as much as I can to get what I need. I'd be very interested on how you set placement of that dropshadow picture. I'm guessing you can setup your slideshow placement then put that under and below it somehow?

Originally Posted by ZBlack I could be wrong on this, but I believe that is a separate image all together and just placed where it is and the pictures he has in the slideshow are specifically sized to fit those dimensions so it looks cool. http://dl.dropbox.com/u/6653861/index.html is a link to a page I created just toying around with some cool stuff from Codrops that they offer free. The shadow underneath the pictures is a separate image. If you're in chrome, the outer images should move a little bit when hovered over. I am guessing he used something similar to this method, but I am a complete novice in coding so it may be done completely differently.

Originally Posted by ZBlack I could be wrong on this, but I believe that is a separate image all together and just placed where it is and the pictures he has in the slideshow are specifically sized to fit those dimensions so it looks cool. http://dl.dropbox.com/u/6653861/index.html is a link to a page I created just toying around with some cool stuff from Codrops that they offer free. The shadow underneath the pictures is a separate image. If you're in chrome, the outer images should move a little bit when hovered over. I am guessing he used something similar to this method, but I am a complete novice in coding so it may be done completely differently.

http://www.fastlinemedia.com/smugmug-templates/

http://fastline.smugmug.com/?theme=ModernLight

Didn't know it was a template, but that's the website has the exact one I was looking for. Hopefully I can manage same effect without buying the template, for now at least.

Oooh, I like that a lot. I'm sure it is do-able. That would make my slide show really pop!

Originally Posted by Andy http://www.fastlinemedia.com/smugmug-templates/ http://fastline.smugmug.com/?theme=ModernLight

Not to thread jack, but I also like how the "site credits" are collapsed into one expandable link. Is that something doable without having to do the template?

Originally Posted by eric-holmes Not to thread jack, but I also like how the "site credits" are collapsed into one expandable link. Is that something doable without having to do the template?

custom footer box:

<div id="eric-footer-wrap">
<div id="eric-footer">
<div id="eric-copyright">
<span>©</span>

<script type="text/javascript">
var date = new Date();
document.write(date.getFullYear());
</script>

<span>eric holmes photography</span>

<span class="eric-footer-sep"> | </span>

<span class="eric-login-link">
<a href="https://secure.smugmug.com/login.mg">Login</a></span>
<span class="eric-logout-link">
<a href="http://www.smugmug.com/logout.mg">Logout</a></span>
<span class="eric-footer-sep"> | </span>

<span id="eric-site-credits-toggle">
<a href="javascript:void(0);" onclick="this.style.display = 'none'; document.getElementById('eric-site-credits').style.display = 'inline';">Site Credits</a></span>
<span style="display:none;" id="eric-site-credits">Photo hosting by <a title="Photo hosting" href="http://www.smugmug.com/pro">SmugMug Pro</a>

<script type="text/javascript">
document.getElementById('eric-site-credits').style.display = 'none';
</script>
            
</div>
            
<div style="clear:both"></div>
</div>
</div>

css:

/* custom footer*/
#eric-footer {width:280px;margin:auto;
padding:20px;color:#505050;font-size:11px}

#eric-footer a {color:#505050 !important;
text-decoration:none}
#eric-footer .eric-footer-sep {padding: 0 1px}
#eric-footer #eric-copyright {float:left}

.notLoggedIn .eric-logout-link {display:none}
.loggedIn .eric-login-link {display:none}

#footer_wrapper, #cobrand_footer 
{display: none !important}

Joe, coming through again! Now we have to see about helping Suli out. Although I am not sure it would be doable with out adding some kind of HTML box that the slide show fits in.

Originally Posted by eric-holmes Joe, coming through again! Now we have to see about helping Suli out. Although I am not sure it would be doable with out adding some kind of HTML box that the slide show fits in.

You or suli come up with an image like this one ......and I'll help you place it using css

Originally Posted by eric-holmes Joe, coming through again! Now we have to see about helping Suli out. Although I am not sure it would be doable with out adding some kind of HTML box that the slide show fits in.

also...I just edited my post...I had an error in there that I spotted after seeing it on your site

Are we needing png or jpeg? Png I presume.

Here is a jpeg of it...
Shadow

Oh man, I want to do this. Is there a certain width or length that we need to do this in order to get it to look proper?

Originally Posted by eric-holmes Here is a jpeg of it... Shadow

I tried and just couldn't get this to work properly with the type of slideshow your using, your slideshow adjust to whatever the user's screen size is at, so I couldn't get the image to stay put....but you can try these thing's and see what you think.....

To give the image a try, add this to your CSS:

#bioBox
{background: url('http://www.smugmug.com/photos/1850694136_R8VhW98-O.jpg') center bottom no-repeat !important;
padding: 0 0 90px 0}


.homepage #eric-footer
{position:absolute;bottom:20px;
left:0px;right:0px}

If you don't like that, remove it and give this a try

.slideOuter {box-shadow:6px 6px 6px rgba(50, 50, 50, 0.6)}

You can play and adjust this code above here, it is css only, no image.


Maybe someone else could provide a better for this..

Originally Posted by J Allen I tried and just couldn't get this to work properly with the type of slideshow your using, your slideshow adjust to whatever the user's screen size is at, so I couldn't get the image to stay put....but you can try these thing's and see what you think..... To give the image a try, add this to your CSS: #bioBox {background: url('http://www.smugmug.com/photos/1850694136_R8VhW98-O.jpg') center bottom no-repeat !important; padding: 0 0 90px 0} .homepage #eric-footer {position:absolute;bottom:20px; left:0px;right:0px} If you don't like that, remove it and give this a try .slideOuter {box-shadow:6px 6px 6px rgba(50, 50, 50, 0.6)} You can play and adjust this code above here, it is css only, no image. Maybe someone else could provide a better for this..

Is that code good for anyone to try it?

Yeah that box-shadow code should work for any bit of CSS

this thread really blew up, thanks for all the help guys! I just got my full screan and navigation working properly lol, I may have to give this a go now, it looks really clean! Eric, looks like you have your slideshow centered well for this to work perfectly, msg me when its done, I'd love to see it.

What portions of the code would need to change, to get this nice piece of code to work on my site?
www.ksartistry.com

Originally Posted by J Allen custom footer box: <div id="eric-footer-wrap"> <div id="eric-footer"> <div id="eric-copyright"> <span>©</span> <script type="text/javascript"> var date = new Date(); document.write(date.getFullYear()); </script> <span>eric holmes photography</span> <span class="eric-footer-sep"> | </span> <span class="eric-login-link"> <a href="https://secure.smugmug.com/login.mg">Login</a></span> <span class="eric-logout-link"> <a href="http://www.smugmug.com/logout.mg">Logout</a></span> <span class="eric-footer-sep"> | </span> <span id="eric-site-credits-toggle"> <a href="javascript:void(0);" onclick="this.style.display = 'none'; document.getElementById('eric-site-credits').style.display = 'inline';">Site Credits</a></span> <span style="display:none;" id="eric-site-credits">Photo hosting by <a title="Photo hosting" href="http://www.smugmug.com/pro">SmugMug Pro</a> <script type="text/javascript"> document.getElementById('eric-site-credits').style.display = 'none'; </script> </div> <div style="clear:both"></div> </div> </div> css: /* custom footer*/ #eric-footer {width:280px;margin:auto; padding:20px;color:#505050;font-size:11px} #eric-footer a {color:#505050 !important; text-decoration:none} #eric-footer .eric-footer-sep {padding: 0 1px} #eric-footer #eric-copyright {float:left} .notLoggedIn .eric-logout-link {display:none} .loggedIn .eric-login-link {display:none} #footer_wrapper, #cobrand_footer {display: none !important}

Originally Posted by Suli What portions of the code would need to change, to get this nice piece of code to work on my site? www.ksartistry.com

it will all work fine on your site, but you'll prolly want to change the name of the copywrite in this line of html:

<span>eric holmes photography</span>