PDA

View Full Version : Massive Help Requested


Neurrorist
Jan-25-2009, 03:10 PM
I'm designing a page (it will have darker colors) for someone like the one below
I have the banner figured out no problem and using the bio box as a slideshow,

but how do I
a) remove all boxes
b) place the footer
c) place the links below the footer
and
d)make the entire bg of the page white?
ooohhh and e) make the header flow down onto the flash show?

I know this is a lot a lot of questions but it would help me out incredibly

thank you

jfriend
Jan-25-2009, 05:04 PM
Here's a start before we worry about positioning things:

Put the header graphic into the custom header with a div around it with an id="myHeader"
Put the footer graphic into the custom footer with a div around with an id="myFooter".
Pick the theme "colors/white" as your default theme for the whole site (in the control panel).
Create a navbar per this tutorial (http://dgrin.smugmug.com/gallery/1932803)and put it below your graphic in the footer.
One you have all that in the page (without trying to position it all yet), then respond in this thread with a link to the site and I can help you position/format it all and remove the boxes and the shadowed bordered from the white theme.

Neurrorist
Jan-25-2009, 08:00 PM
Here's a start before we worry about positioning things:

Put the header graphic into the custom header with a div around it with an id="myHeader"
Put the footer graphic into the custom footer with an id="myFooter".
Pick the theme "colors/white" as your default theme for the whole site (in the control panel).
Create a navbar per this tutorial (http://dgrin.smugmug.com/gallery/1932803)and put it below your graphic in the footer.
One you have all that in the page (without trying to position it all yet), then respond in this thread with a link to the site and I can help you position/format it all and remove the boxes and the shadowed bordered from the white theme.


thank you thank you
I'm going to do all those things now

Neurrorist
Jan-25-2009, 10:18 PM
Here's a start before we worry about positioning things:

Put the header graphic into the custom header with a div around it with an id="myHeader"
Put the footer graphic into the custom footer with a div around with an id="myFooter".
Pick the theme "colors/white" as your default theme for the whole site (in the control panel).
Create a navbar per this tutorial (http://dgrin.smugmug.com/gallery/1932803)and put it below your graphic in the footer.
One you have all that in the page (without trying to position it all yet), then respond in this thread with a link to the site and I can help you position/format it all and remove the boxes and the shadowed bordered from the white theme.



so it may have taken hours but,
http://conniestephensphotography.smugmug.com

thanks!

jfriend
Jan-26-2009, 07:21 AM
so it may have taken hours but,
http://conniestephensphotography.smugmug.com

thanks!

OK, here's a series of changes that will result in this:
http://content.screencast.com/users/jfriend/folders/Jing/media/7b7fb4e4-bcaf-4106-aaa0-0b95603c48de/2009-01-26_0814.png

Step #1: Put your navcontainer inside the my_footer div instead of right after it so we can more accurately position it relative to the image in the footer. Just move the closing </div> for my_footer to be after the navcontainer closing </div>

Step #2: Replace all your CSS with this:

#my_banner {
width: 750px;
height: 200px;
margin: 0 auto;
background: url(http://conniestephensphotography.smugmug.com/photos/461607143_rPe8g-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://www.smugmug.com/photos/XXXXXXX_YYYYY-O.png');
}

body {
background-color: #F7F7F7;
}


#my_footer {
width: 750px;
height: 200px;
margin: 0 auto;
background: url(http://conniestephensphotography.smugmug.com/photos/461607162_29nPx-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://www.smugmug.com/photos/XXXXXXX_YYYYY-O.png');
position:relative;
}







#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
padding: 5px;
}

#navcontainer ul li a {
font-family: Mona Lisa Solid ITC TT;
background-color: none;
color: #D4B994;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.0em;
font-size: 1.4em;
background-color: none;
}

#navcontainer ul li a:hover {
color: none;
background-color: none;
}


#bioBox .photo {display: none;}


#userBio {text-align: center !important;}



.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}



.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}



.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {
display: block;
}


/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
/* removed the 's */
.possess {
display: none;
}


.imgBorderOn {
border-color: #AABCF2;
}


#bioBox .boxBottom
{background: none !important;
border: none !important;}

.box, .boxTop, .boxBottom {background:none !important; border:none !important;}

#homepage, #category, #smugmug, #smugmug_small, #journal,
#filmstrip, #slideshow, #critique, #allthumbs,
#traditional, #singleImage, #content, #bodyWrapper, #footer {
background: none !important;
}

.homepage #breadcrumb {display:none;}
#navcontainer ul {position:absolute; bottom: 60px; right: 45px;}
#footer, #footer a.nav, #feeds, #feeds .nav, #feeds a.nav {color: #D4B994;}
#my_footer {margin-bottom:50px;}
#userBio, #bioBox, #bioBox .boxBottom {padding:0; margin:0;}


Step #3: Change your slideshow height from 400 to 333 to match the aspect ratio of your photos in the insertSlideshow function in your bio.

Neurrorist
Jan-26-2009, 12:33 PM
thank you thank you, my deepest gratitude
I wok only in flash, so css and html are a little out of me

so, if you ever need some flash work or animation done
I'll be more than happy to provide you with it