Help ::: Homepage ::: Quick Adjustment Needed.

[photowinz]

Go to my site here: http://winzeler.smugmug.com

I need help with a couple of items:

1- I installed a new banner (same pixel dimensions as the old), but now there are gaps in the shadow box border on both sides. I've messed around with the CSS banner dimensions for about an hour but no luck in eliminating the gaps?? ..."#my_banner" area...

1A- On a related note, If I pull my site up in FF and IE7 side by side, there is quite a bit more space in IE between the navbar and the slide show. I prefer the distance in FF. Any workarounds to get IE to correspond?

2- What's the easiest way to make the entire shadow box (borders) wider for the homepage (to accomodate a larger slideshow)?

Thanks!

[richW]

Go to my site here: http://winzeler.smugmug.com

I need help with a couple of items:

1- I installed a new banner (same pixel dimensions as the old), but now there are gaps in the shadow box border on both sides. I've messed around with the CSS banner dimensions for about an hour but no luck in eliminating the gaps?? ..."#my_banner" area...

1A- On a related note, If I pull my site up in FF and IE7 side by side, there is quite a bit more space in IE between the navbar and the slide show. I prefer the distance in FF. Any workarounds to get IE to correspond?

2- What's the easiest way to make the entire shadow box (borders) wider for the homepage (to accomodate a larger slideshow)?

Thanks!Unable to see your site: http://kevinwinzeler.com/ Problems with the 'redirect' code maybe....

[photowinz]

Unable to see your site: http://kevinwinzeler.com/ Problems with the 'redirect' code maybe....


Try again. Use 'www' first then.

[photowinz]

What did you find out? How can this be fixed?

[richW]

For the slide show spacing, try the following:
#ssSlide {~margin-top: -30px;}
Adjust as needed.

To add the shadow back on the header, try this:

.homepage #my_header,
.category #my_header {
width: 750px;
margin: 0 auto;
padding-left: 35px;
padding-right: 35px;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
text-align: center;}

.smugmug #my_header {
width: 1030px;
background: transparent url(/img/themes/White/large_center.jpg) repeat-y;}

You might need to add additional for other viewing styles.

I know I don't need to mention this, styling the 'White' theme can be a bit hard.


I use the other method. Set the site theme to default w/light background and use the following in the css sectoin:

/* white theme */

.homepage #bodyWrapper {
background: url(/img/themes/White/small_center.jpg) center repeat-y;
width: auto;
}


body {
background: url(/img/themes/White/small_center.jpg) center repeat-y;
width: auto;
}

body.critique,
body.smugmug {background: url(/img/themes/White/large_center.jpg)
center repeat-y;
background-color: #fff;
width: auto;
}

body.Large, body.Original
{background: url(/img/themes/White/large_center.jpg)
center repeat-y;
background-color: #fff;
width: auto;
}

As for stretching the hompage, sorry I haven't done it with the White theme. Maybe one of the other dgrinners has :dunno

[photowinz]

For the slide show spacing, try the following:
#ssSlide {~margin-top: -30px;}
Adjust as needed.

To add the shadow back on the header, try this:

.homepage #my_header,
.category #my_header {
width: 750px;
margin: 0 auto;
padding-left: 35px;
padding-right: 35px;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
text-align: center;}

.smugmug #my_header {
width: 1030px;
background: transparent url(/img/themes/White/large_center.jpg) repeat-y;}

You might need to add additional for other viewing styles.

I know I don't need to mention this, styling the 'White' theme can be a bit hard.


I use the other method. Set the site theme to default w/light background and use the following in the css sectoin:

/* white theme */

.homepage #bodyWrapper {
background: url(/img/themes/White/small_center.jpg) center repeat-y;
width: auto;
}


body {
background: url(/img/themes/White/small_center.jpg) center repeat-y;
width: auto;
}

body.critique,
body.smugmug {background: url(/img/themes/White/large_center.jpg)
center repeat-y;
background-color: #fff;
width: auto;
}

body.Large, body.Original
{background: url(/img/themes/White/large_center.jpg)
center repeat-y;
background-color: #fff;
width: auto;
}

As for stretching the hompage, sorry I haven't done it with the White theme. Maybe one of the other dgrinners has :dunno

Ok. Added your first code suggestion and the homepage now looks correct, but gallery pages still show the gap. Go here and make sure your browser is small enough to only display 9 images at a time and you'll see it: http://www.kevinwinzeler.com/gallery/3476157#P-1-15

Will your 'other method' suggestion help this? What are the advantages site wide for switching to the other method?

Any other dgrin guys out there for stretching my homepage?

Thanks.

[Allen]

Ok. Added your first code suggestion and the homepage now looks correct, but gallery pages still show the gap. Go here and make sure your browser is small enough to only display 9 images at a time and you'll see it: http://www.kevinwinzeler.com/gallery/3476157#P-1-15

Will your 'other method' suggestion help this? What are the advantages site wide for switching to the other method?

Any other dgrin guys out there for stretching my homepage?

Thanks.
Add the bold.

.smugmug_small #my_header,
.homepage #my_header,
.category #my_header {
width: 750px;
margin: 0 auto;
padding-left: 35px;
padding-right: 35px;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
text-align: center;}

[photowinz]

Add the bold.

.smugmug_small #my_header,
.homepage #my_header,
.category #my_header {
width: 750px;
margin: 0 auto;
padding-left: 35px;
padding-right: 35px;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
text-align: center;}

Awesome Allen! Only other one I found was under this "journal gallery" - http://www.kevinwinzeler.com/gallery/3116933

[Allen]

Awesome Allen! Only other one I found was under this "journal gallery" - http://www.kevinwinzeler.com/gallery/3116933
.journal #my_header,
.smugmug_small #my_header,
.homepage #my_header,
.category #my_header {
width: 750px;
margin: 0 auto;
padding-left: 35px;
padding-right: 35px;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
text-align: center;}


It would have been easier to define the general one first that would apply to all
pages then add the specific one for the other sizes.

#my_header {....

.smugmug #my_header {...

The smugmug one would have to handled differently if you had stretchy on also.

[leichenb]

.journal #my_header,
.smugmug_small #my_header,
.homepage #my_header,
.category #my_header {
width: 750px;
margin: 0 auto;
padding-left: 35px;
padding-right: 35px;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
text-align: center;}


It would have been easier to define the general one first that would apply to all
pages then add the specific one for the other sizes.

#my_header {....

.smugmug #my_header {...

The smugmug one would have to handled differently if you had stretchy on also.

Al:

I'd been chatting some with Kevin as he had many of the same issues I've had. I've now resolved most, but have one 'hole' left in the side border just to the left/right of my menu container.

I'm at work and no access to developer tools; any idea on what to add to the CSS? The hole is common to all my pages (homepage, galleries, journal, etc.).