Missing header image

[jcdill]

I'm trying to customize my header, following the instructions here:

http://www.smugmug.com/help/customize-faq

I uploaded the image, made the entries for CSS and Javascript.

My header image isn't showing up. I've tested in 2 browsers (firefox, safari). The image URL is here:

http://portfolio.jcdill.com/Hidden/Website-Images/9685648_y7RSU/1/654295198_dD3Cz/Large

I tried inserting it in the code as:

http://www.smugmug.com/photos/654295198_dD3Cz-O.jpg

and as

http://portfolio.jcdill.com/photos/654295198_dD3Cz-O.jpg

but neither work.

Is there an error in the instructions, or have I done something wrong in following the instructions?

[jfriend]

You don't have a banner in your custom header. Either use the Easy Customizer to add a banner or see the tutorial here (http://dgrin.smugmug.com/gallery/1932865) for manually inserting a banner into your custom header.

[jcdill]

You don't have a banner in your custom header. Either use the Easy Customizer to add a banner or see the tutorial here (http://dgrin.smugmug.com/gallery/1932865) for manually inserting a banner into your custom header.

D'oh! Thanks.

Now, how do I get the banner and nav links all on one line (banner on the left, nav on the right)? This is the majik placement-fu of CSS that I don't quite know how to do. :-) Ultimately I want images in between the banner and the nav links - e.g.:

Banner image1 image2 image3 nav-links

[jfriend]

D'oh! Thanks.

Now, how do I get the banner and nav links all on one line (banner on the left, nav on the right)? This is the majik placement-fu of CSS that I don't quite know how to do. :-) Ultimately I want images in between the banner and the nav links - e.g.:

Banner image1 image2 image3 nav-links You can start here with this tutorial (http://andydemo.smugmug.com/gallery/5568786_7mHz6). You already have a different banner so ignore step 2, but follow the rest. Post back if you have more questions.

[jcdill]

You can start here with this tutorial (http://andydemo.smugmug.com/gallery/5568786_7mHz6). You already have a different banner so ignore step 2, but follow the rest. Post back if you have more questions.

I'm still confused about alignment. The banner is in the center while the links are on the right. I put a lot of CSS in before getting to Andy's CSS so I don't know if the CSS is correct.

Here's what I have in the CSS right now:

/*To suppress gallery photo code on Guarantee, Products, Services, About, and Contact pages*/

.gallery_9683132 .nophotos {display: none;}
.gallery_9685850 .nophotos {display: none;}
.gallery_9685857 .nophotos {display: none;}
.gallery_9685567 .nophotos {display: none;}
.gallery_9685492 .nophotos {display: none;}



/*replace smugmug logo with my logo*/

.smuglogo {
width: 400px !important;
height: 75px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/654295198_dD3Cz-O.jpg') !important;
}

.smuglogo[class] {
background-image: url(http://www.smugmug.com/photos/654295198_dD3Cz-O.jpg) !important;
}

/*insert my logo as banner */
#my_banner {
width: 400px;
height: 75px;
margin: 0 auto;
background: url(http://www.smugmug.com/photos/654295198_dD3Cz-O.jpg) no-repeat;

/*hack for ie*/

_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.smugmug.com/photos/654295198_dD3Cz-O.jpg');
}


/* Andy's CSS */
#userBio {text-align: center;}
#bioBox .photo {display: none;}
#bioBox .boxBottom {background: none !important;
border: none !important;
}

.nophotos {display: none;}
.loggedIn .nophotos {display: block;}
.homepage #breadcrumb {display: none;}

#toolbar a.nav {display: none;}
#toolbar {color: #000 !important;}

#header_wrapper, #footer_wrapper, #cobrand_footer, #header,
#smugmug, .smugmug #header, .smugmug #footer {margin-left: 15px; margin-right: 15px; width: auto;

}


h3.title,
#breadcrumb .title,
#lightBoxNav .title,
.homepage .boxTop .title,
.cartbuttons .title,
#comment_header .title {font-weight: normal !important; color: #000000 !important;}

#pageNavigation_top, .pageOn, #photoNavTop .title, .miniBox a.nav {font-weight: normal !important;}

#photoBy, .smugmug #caption_bottom {text-align: center; border: none;}

#toolbar {display: none;}


#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
_font-size: 14px;
font-variant: small-caps;
float: right;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: 0px 3px;
color: #fff;
}

#navcontainer ul li a:hover {
color: #000000;
}

#navcontainer {position: absolute;
top: 16px;
_top: 10px;
right: 15px;
width: 580px;
}

/* FIND PAGE */

.find #bioBox,
.find #categoriesBox,
.find #galleriesBox {
display: none !important;
}

.find #keywordsBox {
display: block !important;
}

.find #datesBox {
display: block !important;
}

.find #mapBox {
display: block !important;
}

#map {height: 500px !important;}

.find #popularPhotos {
display: block !important;
}

.find #findText {display: block !important;}

.homepage #popularPhotos,
.homepage #mapBox,
.homepage #datesBox,
.homepage #findText,
.homepage #keywordsBox {display: none;}

#findText {display: none;
text-align: center;
font-size: 16px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}

[jcdill]

*bump*

I still need help figuring out why the header image is centered, what I need to change to get it to display on the left side. Thanks!

[jfriend]

*bump*

I still need help figuring out why the header image is centered, what I need to change to get it to display on the left side. Thanks! First, please add a link to your site to your dgrin signature so I don't have to go hunting for it in the thread everytime you ask a question.

Then, remove the lines of your CSS here in red:



/*replace smugmug logo with my logo*/

.smuglogo {
width: 400px !important;
height: 75px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/654295198_dD3Cz-O.jpg') !important;
}

.smuglogo[class] {
background-image: url(http://www.smugmug.com/photos/654295198_dD3Cz-O.jpg) !important;
}

/*insert my logo as banner */
#my_banner {
width: 400px;
height: 75px;
margin: 0 auto;
background: url(http://www.smugmug.com/photos/654295198_dD3Cz-O.jpg) no-repeat;

/*hack for ie*/

_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.smugmug.com/photos/654295198_dD3Cz-O.jpg');
}



Then, you need to change the color of your navbar because it's next to impossible to see black text on dark brown background. You might also want to change the color of your banner and make it a transparent png image.

[jcdill]

First, please add a link to your site to your dgrin signature so I don't have to go hunting for it in the thread everytime you ask a question.

Sorry about that. I changed my profile to link to my website but didn't realize that it's not directly linked from my avatar section. I'll fix that after I send this post. For now, my website is at:

http://portfolio.jcdill.com

Then, remove the lines of your CSS here in red:

Thanks! That did the trick for the header graphic. Can you give me a hint on how to place/center images between the header and the nav links?

Then, you need to change the color of your navbar because it's next to impossible to see black text on dark brown background. You might also want to change the color of your banner and make it a transparent png image.

The background is supposed to be WHITE but I was having no luck getting the "default Theme" to change the theme on the homepage (was Dark Sand, is being changed to White). I've been emailing with support about that one - I think it's working now, finally! :-)

Thanks for all your help!

[jfriend]

Thanks! That did the trick for the header graphic. Can you give me a hint on how to place/center images between the header and the nav links? The easiest thing would be to just make them be part of your banner graphic. If you want them separate, then you need to insert HTML into your custom header after your banner with the right <img> tags to point to the properly sized images you want. As I look at your page, I don't see room for images between your banner and your navbar on any moderately sized screen.

[jcdill]

The easiest thing would be to just make them be part of your banner graphic. If you want them separate, then you need to insert HTML into your custom header after your banner with the right <img> tags to point to the properly sized images you want. As I look at your page, I don't see room for images between your banner and your navbar on any moderately sized screen.

I was planning on keeping the photos separate from the logo for several reasons. One is because I want to fill the top of the page with banner, images, links, no matter how wide the browser window. The links layout section isn't finished and will be narrower (possibly in two lines) when I'm done. After I get the images "placed" then I'm going to work on how to make it stretchy and pull in the right number of images to fill the space depending on the browser width. I'm pretty sure this part will be a bit trickier! Another reason is that ultimately I'd like the photos to be different on different galleries.

Thanks!