The No-Banner Header Customization

[Andy]

OK so not everyone needs or wants a big banner on their site. But they'd still like a bit of customization. How about this? Take a look at http://andydemo.smugmug.com

How-to? First, make a small logo that will replace the SmugMug logo, upper left of the page. Size? Oh about 200x25, but it could be more or less in height, and width. It can be a graphic, or just text. If you want some help with a text logo, simply follow the instructions we use for making a watermark, which are here (http://dgrin.smugmug.com/gallery/1690196).

OK, once you have your small "logo," you need some CSS trickery to replace the SmugMug logo with yours. Put THIS CODE Into your CSS BOX.

(DO NOT INCLUDE THE YELLOW ASTERISK - it's only used so that the code shows up properly here)


.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:*DXImageTransform.Microsoft.AlphaImageLoade r(enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/94264798-O.png') !important;
}

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

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}


OK. Now, let's make that new logo "clickable," back to your homepage always. Add this in your Javascript:

NOTE: Change the "nickname" to your SmugMug nickname. Change the YOURtitlehere to be the text you want to appear when mouse hovers over your new logo. Put THIS CODE into your Javascript Box.


// change the link on the SmugMug Logo

YE.onAvailable('homelink', function(e) {
this.href = "http://nickname.smugmug.com/";
this.firstChild.alt = "YOURtitlehere";
this.firstChild.title = "YOURtitlehere";
});

// removes the pipes characters in the toolbar header

YE.onAvailable('toolbar', function(e) {
this.innerHTML = this.innerHTML.replace(new RegExp(/\|/g),"");
});



Be sure that you check "display SmugMug header above my custom header" to YES.

You can see this at http://andydemo.smugmug.com

Many thanks to JT for the new Yahoo Javascript goodness, and for doing the javascript on this little hack :)

[Barb]

OK so not everyone needs or wants a big banner on their site. But they'd still like a bit of customization. How about this? Take a look at http://andydemo.smugmug.com
Many thanks to JT for the new Yahoo Javascript goodness, and for doing the javascript on this little hack :)
:clap:clap

[ivar]

SUWEET :D *ivar seal of approval here*

[Finish Line]

OK so not everyone needs or wants a big banner on their site. But they'd still like a bit of customization. How about this? Take a look at http://andydemo.smugmug.com

How-to? First, make a small logo that will replace the SmugMug logo, upper left of the page. Size? Oh about 200x25, but it could be more or less in height, and width. It can be a graphic, or just text. If you want some help with a text logo, simply follow the instructions we use for making a watermark, which are here (http://dgrin.smugmug.com/gallery/1690196).

OK, once you have your small "logo," you need some CSS trickery to replace the SmugMug logo with yours:

(DO NOT INCLUDE THE YELLOW ASTERISK - it's only used so that the code shows up properly here)


.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:*DXImageTransform.Microsoft.AlphaImageLoade r(enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/94264798-O.png') !important;
}

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

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}


OK. Now, let's make that new logo "clickable," back to your homepage always. Add this in your javascript:

NOTE: Change the "nickname" to your SmugMug nickname. Change the YOURtitlehere to be the text you want to appear when mouse hovers over your new logo.


// change the link on the SmugMug Logo

YE.onAvailable('homelink', function(e) {
this.href = "http://nickname.smugmug.com/";
this.firstChild.alt = "YOURtitlehere";
this.firstChild.title = "YOURtitlehere";
});

// removes the pipes characters in the toolbar header

YE.onAvailable('toolbar', function(e) {
this.innerHTML = this.innerHTML.replace(new RegExp(/\|/g),"");
});


You can see this at http://andydemo.smugmug.com

Many thanks to JT for the new Yahoo Javascript goodness, and for doing the javascript on this little hack :)


Hello: I have just one question: Which BOX do you cut & paste into? CSS or Header?

[Andy]

Hello: I have just one question: Which BOX do you cut & paste into? CSS or Header?
:wave Hi :D

Edited my first post in this thread for clarity. Thanks. First bits of code go on the CSS box, 2nd bits of code go in the Javascript Box :wink

[b-grinner]

:wave Hi :D

Edited my first post in this thread for clarity. Thanks. First bits of code go on the CSS box, 2nd bits of code go in the Javascript Box :wink
Andy,

Is it possible to have the SmugMug logo replaced with own (as you describe here) and have a banner below it. I have a small logo that I could put up in the leftg corner and then a bigger jpg to use as a banner. I would like to see how this looks. I treid inserting the above code along with some HTML code to display the banner and it only displayed the banner. The CSS code I inserted did not work in showing small logo to replace SmugMug logo.Can you tell me how to do this?

Thanks and I look forward to your reply.

...B-Grinner :D cyberphotogs.smugmug.com

[Andy]

Andy,

Is it possible to have the SmugMug logo replaced with own (as you describe here) and have a banner below it. I have a small logo that I could put up in the leftg corner and then a bigger jpg to use as a banner. I would like to see how this looks. I treid inserting the above code along with some HTML code to display the banner and it only displayed the banner. The CSS code I inserted did not work in showing small logo to replace SmugMug logo.Can you tell me how to do this?

Thanks and I look forward to your reply.

...B-Grinner :D cyberphotogs.smugmug.comSure. Use the same instructions. In your customization, be sure to check "yes" to "display smugmug header" :)

[b-grinner]

Sure. Use the same instructions. In your customization, be sure to check "yes" to "display smugmug header" :)

Works great. Thanks Andy.

Two more questions pertaining to this.

1. How do I remove the option to select the theme when on a Gallery page(ie. Smugmug, Classic, etc) Do not want to offer this option.

2. How do I change the coloring of the Search box. Right now it is showing a shade of gray which I do not like and would like to change to black.

BTW, still not sure where you want me to put my site name. I just put it under my name for now (on left).

[SloYerRoll]

Followed Andy's tut here (http://www.dgrin.com/showthread.php?p=381311).

Still playing around w/ it, but can't seem to get this to work.

Can someone take a peek please?

-Jon

[Andy]

You forgot the part about clicking "display the smugmug header above my custom header" to yes.

You have my demo graphic there now, you'll want to change that :thumb

[Andy]

Followed Andy's tut here (http://www.dgrin.com/showthread.php?p=381311).

Still playing around w/ it, but can't seem to get this to work.

Can someone take a peek please?

-Jon
Merged thread, too - it's always best to reply in the same thread, versus starting a new one :thumb

[SloYerRoll]

Thanks Andy.
It's tough to find threads when your not sure what to search for.

Cheers,
-Jon

[SloYerRoll]

One last request for the day.
Can you please completely remove the smugmug logo at the top left of my homepage?
I want to start from scratch and really get to understand this later.

Thanks.
-Jon

[Andy]

Thanks Andy.
It's tough to find threads when your not sure what to search for.

Cheers,
-Jon
:) but you found the thread :thumb

[Andy]

One last request for the day.
Can you please completely remove the smugmug logo at the top left of my homepage?
I want to start from scratch and really get to understand this later.

Thanks.
-JonYou can do it. Go to your customize panel, and choose "no" for display SmugMug header.... holler if you need help.

[SloYerRoll]

Thanks Andy. I was looking for code that placed it there.

All the best.
-Jon

[frambach]

I do have a question though.

On my homepage I want a banner withouth the SmugMug header. That's easy. I can do that.

But, on my gallery pages I do want the SmugMug header without the big banner.

So, can you turn off the header on some pages (in this case only the home page) and back on on other pages (in this case all of my other pages)?

See, what I'm after is; I don't want the SmugMug header on the homepage and I don't want the banner on the gallery pages.

Now that that is clear as mud, can anyone help?:huh

[Andy]

I do have a question though.

On my homepage I want a banner withouth the SmugMug header. That's easy. I can do that.

But, on my gallery pages I do want the SmugMug header without the big banner.

So, can you turn off the header on some pages (in this case only the home page) and back on on other pages (in this case all of my other pages)?

See, what I'm after is; I don't want the SmugMug header on the homepage and I don't want the banner on the gallery pages.

Now that that is clear as mud, can anyone help?:huh
Sure no worries. It's the same way, but use a different banner for the homepage.

See my site: www.moonriverphotography.com

#MRPTitle {display: none;}
.homepage #MRPTitle {display: block;}

#MRPTitle {
height: 84px;
width: 605px;
margin: 0px auto;
margin-top: -25px;
background:transparent url(http://www.smugmug.com/photos/139952543-O.png) top center no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/139952543-O.png') !important;
}

#MRPTitle a {outline: none;}

.smuglogo {
width: 400px !important;
height: 51px !important;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/139953987-O.png') !important;
}

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

#toolbar a,
#toolbar a.nav {display: none;}

.homepage .smuglogo,
.homepage #toolbar {display: none;}
.shoppingcart {display: none;}
#toolbar {padding-top: 15px;
}

[frambach]

You have your site set-up exactly like what I'm talking about (I guess you already figured that out though)!

Do I stuff all that code into
frambach > control panel > customization settings
in the CSS section?

I've noticed a lot of your code has "MRP" references. Can you tell me what all I need to replace to get this to work?

I really like the way you have your site set up with the slide show on the homepage, the banner at the top and the navbar.

I don't think I'm ready to tackle the navbar and the slide show at this point but I would like to get the banner deal all worked out.

[frambach]

I just noticed the big grin smiley is appearing in your code.

That means it is a colon immediately followed by a capital D right?

[Andy]

I just noticed the big grin smiley is appearing in your code.

That means it is a colon immediately followed by a capital D right?
yes

[Andy]

You have your site set-up exactly like what I'm talking about (I guess you already figure that out though)!

Do I stuff all that code into
frambach > control panel > customization settings
in the CSS section?

I've noticed a lot of your code has "MRP" references. Can you tell me what all I need to replace to get this to work?

I really like the way you have your site set up with the slide show on the homepage, the banner at the top and the navbar.

I don't think I'm ready to tackle the navbar and the slide show at this point but I would like to get the banner deal all worked out.mrp is my identifier
you can just make it
#mytitle

#myheader

etc
it's a div in my header html:

<div id="MRPTitle"><a href="http://www.moonriverphotography.com"><img src="/img/spacer.gif" width="605" height="70" border="0" /></a></div>

[frambach]

Finally got this working. WOW, I should've stretched before a workout like that. But, one more thing (give 'em an inch, they'll take a mile right?)...

I would like for my header (that is on all of my pages except the homepage) to have the little shopping cart icon by the search box. To get this to happen, I tried deleting the line:
.shoppingcart {display: none;}
But that didn't seem to be the right thing to do so I put it back.

Any input would be appreciated.

[Allen]

Finally got this working. WOW, I should've stretched before a workout like that. But, one more thing (give 'em an inch, they'll take a mile right?)...

I would like for my header (that is on all of my pages except the homepage) to have the little shopping cart icon by the search box. To get this to happen, I tried deleting the line:
.shoppingcart {display: none;}
But that didn't seem to be the right thing to do so I put it back.

Any input would be appreciated.
This, bold below, in combination with the .shoppingcart {display: none;} is removing it.

#toolbar a,
#toolbar a.nav {display: none;}

[frambach]

Good deal, that got my cart back.

The mouse overs don't work up there in that header though. You know when you mouse over the shopping cart a little smuggy appears and when you mouse over the magnifying glass a little bit of the glass gets color.

[Allen]

Good deal, that got my cart back.

The mouse overs don't work up there in that header though. You know when you mouse over the shopping cart a little smuggy appears and when you mouse over the magnifying glass a little bit of the glass gets color. This might have something to do with it. I get a cursor change in Firefox but
not IE6.

#toolbar {padding-top: 15px;}

[frambach]

Thanks for the help Allen. I removed that line and still don't have the mouse overs. So, I put it back.

I got my code from Andy (as you can see in this thread) and his mouse over (he only has the search - no cart) works.

I don't know what's going on.:scratch I'll continue to try to sift through and track it down.

In the meantime if anyone sees the details of my plight, feel free to let me know what you think could be causing this. Thanks.

[mrweisfeld]

I have my logo set on all pages but when I select a gallery from my "Weddings" section, i am reverted back to the Smugmug Logo. I would be open to carrying over the logo from the www.photostarmedia.com/weddings page ... or follow the instructions on this post. However, how do I apply this to only the wedding gallery pages?

Thanks,
Michael


OK so not everyone needs or wants a big banner on their site. But they'd still like a bit of customization. How about this? Take a look at http://andydemo.smugmug.com

How-to? First, make a small logo that will replace the SmugMug logo, upper left of the page. Size? Oh about 200x25, but it could be more or less in height, and width. It can be a graphic, or just text. If you want some help with a text logo, simply follow the instructions we use for making a watermark, which are here (http://dgrin.smugmug.com/gallery/1690196).

OK, once you have your small "logo," you need some CSS trickery to replace the SmugMug logo with yours. Put THIS CODE Into your CSS BOX.

(DO NOT INCLUDE THE YELLOW ASTERISK - it's only used so that the code shows up properly here)


.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:*DXImageTransform.Microsoft.AlphaImageLoade r(enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/94264798-O.png') !important;
}

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

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}

OK. Now, let's make that new logo "clickable," back to your homepage always. Add this in your javascript:

NOTE: Change the "nickname" to your SmugMug nickname. Change the YOURtitlehere to be the text you want to appear when mouse hovers over your new logo. Put THIS CODE into your Javascript Box.


// change the link on the SmugMug Logo

YE.onAvailable('homelink', function(e) {
this.href = "http://nickname.smugmug.com/";
this.firstChild.alt = "YOURtitlehere";
this.firstChild.title = "YOURtitlehere";
});

// removes the pipes characters in the toolbar header

YE.onAvailable('toolbar', function(e) {
this.innerHTML = this.innerHTML.replace(new RegExp(/\|/g),"");
});


Be sure that you check "display SmugMug header above my custom header" to YES.

You can see this at http://andydemo.smugmug.com

Many thanks to JT for the new Yahoo Javascript goodness, and for doing the javascript on this little hack :)

[emeraldeye]

Yeah, I set up the logo, but I actually don't want it on any of the pages except the galleries where it is showing up with the smugmug one.
This coding works, but I turned off having the header come up as I do not want my logo coming up twice (small above large) but when I go into my galleries and look at the photos, smugmug comes up and the search bar. How do I change it for these particular pages to show up with my own header image and link back to my home page.

My css:
.smuglogo {
width: 200px !important;
height: 49px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://emeraldeye.smugmug.com/photos/204440207-M.png') !important;
}

.smuglogo[class] {
background-image: url(http://emeraldeye.smugmug.com/photos/204440207-M.png) !important;
}

my site: http://www.emeraldeye.smugmug.com

I have my logo set on all pages but when I select a gallery from my "Weddings" section, i am reverted back to the Smugmug Logo. I would be open to carrying over the logo from the www.photostarmedia.com/weddings (http://www.photostarmedia.com/weddings) page ... or follow the instructions on this post. However, how do I apply this to only the wedding gallery pages?

Thanks,
Michael

[darryl]

OK so not everyone needs or wants a big banner on their site. But they'd still like a bit of customization. How about this? Take a look at http://andydemo.smugmug.com

<snip>

OK. Now, let's make that new logo "clickable," back to your homepage always. Add this in your Javascript:

NOTE: Change the "nickname" to your SmugMug nickname. Change the YOURtitlehere to be the text you want to appear when mouse hovers over your new logo. Put THIS CODE into your Javascript Box.


// change the link on the SmugMug Logo

YE.onAvailable('homelink', function(e) {
this.href = "http://nickname.smugmug.com/";
this.firstChild.alt = "YOURtitlehere";
this.firstChild.title = "YOURtitlehere";
});

// removes the pipes characters in the toolbar header

YE.onAvailable('toolbar', function(e) {
this.innerHTML = this.innerHTML.replace(new RegExp(/\|/g),"");
});



Hey Andy -- are these changes still in place? Your custom logo appears to be linked to www.smugmug.com instead of andydemo.smugmug.com

BTW, after going away and messing with various other hacks, I finally found the solution to my problem. I wanted to keep the default SmugMug header intact (logo, home | login | help toolbar, etc.), but I wanted both the logo, *and* the home link to point to my site. After re-reading your code just now, I found the fix for the home link:

YE.onAvailable('toolbar', function() {
this.innerHTML = this.innerHTML.replace(new RegExp(/www/g), 'YOURNICKNAME')
});

So whereas 'home' by default annoyingly takes visitors to http://www.smugmug.com, it will now take them to http://yournickname.smugmug.com

It also replaces www w/ your nickname in the login, help and cart links, but that's fine, because they all work equally well.

Here's an example of my changes: http://gladlee.smugmug.com/

Doesn't look like much, but it's the little things that count. :-}

[NorthernExpanse]

I am still trying to set up my homepage, etc. and after nearly pulling my hair out I finally deleted it all, and am starting again. :dunno

I am trying to put a simple header on and have followed the instructions here: http://www.dgrin.com/showthread.php?p=381311#post381311

Unfortunately I can't see the header (mine of smugmug's).:scratch I have tried and tried again, and know that it's something I am doing wrong, but just don't know what. Can anybody have a look?

I guess I have to tell you where it's hiding: www.northernexpanse.com (http://www.northernexpanse.com)

Oh - and although I can't see either my header or smugmug's, the smugmug logo appears when I hover in the header area.

[denisegoldberg]

I am trying to put a simple header on and have followed the instructions here: http://www.dgrin.com/showthread.php?p=381311#post381311

Unfortunately I can't see the header (mine of smugmug's).:scratch I have tried and tried again, and know that it's something I am doing wrong, but just don't know what. Can anybody have a look?

I guess I have to tell you where it's hiding: www.northernexpanse.com (http://www.northernexpanse.com)

I see a header on your site, checked in IE7 and Firefox and it shows in both. I took a look at your CSS with Firefox and verfied that the photo you referenced in your smuglogo code is the photo that shows for the banner. Am I missing the problem?

If you still can't see it in the browser you normally use, can you try a different browser and see if it shows up there? Or if I am missing the point entirely, please let me know!

--- Denise

[rainforest1155]

I am still trying to set up my homepage, etc. and after nearly pulling my hair out I finally deleted it all, and am starting again. :dunno

I am trying to put a simple header on and have followed the instructions here: http://www.dgrin.com/showthread.php?p=381311#post381311

You almost had it. Instead of using the gallery link to the photo, you need use the direct photo link:
http://northernexpanse.smugmug.com/photos/252104471_BxW3z-M.jpg

You can get this link easily by going to the photo in the gallery and then click on the 'share photo' link above the photo. After selecting 'for blogs/forums/etc.' you should be a list of links.

Since your logo is more of a banner and doesn't really fit the original SmugMug header, I would recommend using the code from #2 of our customization faq instead:
http://www.smugmug.com/help/customize-faq.mg

Sebastian

[NorthernExpanse]

I have short hair, but soon there will be none. :scratch

I tried it all over again and now have a large blank area, I guess where my header/banner is supposed to be. I just can't see it.

When I made the header/banner, I followed the online instructions for making a watermark (as mentioned in the initial instructions), but for some reason it doesn't want to know.

I really appreciate you guys and girls helping me.

[Allen]

I have short hair, but soon there will be none. :scratch

I tried it all over again and now have a large blank area, I guess where my header/banner is supposed to be. I just can't see it.

When I made the header/banner, I followed the online instructions for making a watermark (as mentioned in the initial instructions), but for some reason it doesn't want to know.

I really appreciate you guys and girls helping me.
You need to fix the photo link, remove the red.

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://http://NorthernExpanse.smugmug.com/photos/252103545_55odt-X3.jpg) no-repeat;
}

The large seems to fix much better also.

252103545_55odt-L.jpg

[NorthernExpanse]

You need to fix the photo link, remove the red.

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://http://NorthernExpanse.smugmug.com/photos/252103545_55odt-X3.jpg) no-repeat;
}

The large seems to fix much better also.

252103545_55odt-L.jpg

Thanks Allen.

Just one more thing, though. I have my header now, but it's on a white background, although I followed the instructions about making it with a transparent background.

Also, is there any way (once the white is gone) to put the header on the left hand side, and the navbar to the right (on right side of page), instead of having it below?

[Allen]

Thanks Allen.

Just one more thing, though. I have my header now, but it's on a white background, although I followed the instructions about making it with a transparent background.

Also, is there any way (once the white is gone) to put the header on the left hand side, and the navbar to the right (on right side of page), instead of having it below? Here's the format for a transparent png. Your large is 800x100 and original is
1600x200, I would crop most the blank space off, resize to about 625x100 and
replace the photo. Then use the -O in the link below.

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(/photos/252103545_55odt-L.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader
(enabled=true, sizingmethod=image, src='/photos/252103545_55odt-L.png');
}

[NorthernExpanse]

Hi Allen - yes, it's me again. :D

Got the header up. Woohoo!!!

However - :rolleyes -

The header doesn't seem as central as the navbar. Can I change that, so they are equally central? Can I also reduce the distance between the header and the navbar, because the way it is now it makes the pages too long?
Also, just wondering again, is there a way to put the header on the left hand side, and the navbar to the right (on right side of page), instead of having it below, and maybe putting a thin line between header and slideshow? Also, is there a way of moving the header slightly down, as it seems a little 'squashed' up at the top of the page?!

I really hope you aren't very busy today. :D

[DavidTO]

I just noticed the big grin smiley is appearing in your code.

That means it is a colon immediately followed by a capital D right?


I fixed that for you. The code now reads as it should in Andy's post. :thumb

[Allen]

Hi Allen - yes, it's me again. :D

Got the header up. Woohoo!!!

However - :rolleyes -

The header doesn't seem as central as the navbar. Can I change that, so they are equally central? Can I also reduce the distance between the header and the navbar, because the way it is now it makes the pages too long?
Also, just wondering again, is there a way to put the header on the left hand side, and the navbar to the right (on right side of page), instead of having it below, and maybe putting a thin line between header and slideshow? Also, is there a way of moving the header slightly down, as it seems a little 'squashed' up at the top of the page?!

I really hope you aren't very busy today. :D
First, put the actual photo size in your CSS. Then we'll attack to other
questions if they still apply.

#my_banner {
width: 625px;
height: 100px;
margin: 0 auto;
background: url(/photos/252154067_yKZ56-L.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader
(enabled=true, sizingmethod=image, src='/photos/252154067_yKZ56-L.png');
}

[NorthernExpanse]

[quote=Allen]First, put the actual photo size in your CSS. Then we'll attack to other
questions if they still apply.


Cool - it fits nicely in the window now. :clap

It still looks a little high to the top, but could that have something to do with the gray box the slidehow is happening in?

So -

is there either a way to move the header and navbar onto one level (next to each other at opposite ends of the screen), move the header down slightly, and put a thin line between those and the sideshow?

and how could I get rid off the box the slidshow is sitting on?

You are slowly but surely becoming one of my heroes. :bow

[Allen]

[quote=Allen]First, put the actual photo size in your CSS. Then we'll attack to other
questions if they still apply.


Cool - it fits nicely in the window now. :clap

It still looks a little high to the top, but could that have something to do with the gray box the slidehow is happening in?

So -

is there either a way to move the header and navbar onto one level (next to each other at opposite ends of the screen), move the header down slightly, and put a thin line between those and the sideshow?

and how could I get rid off the box the slidshow is sitting on?

You are slowly but surely becoming one of my heroes. :bow Try this and see if you like it.

Add red
#my_banner {
position: relative;
left: -90px;
width: 625px;
height: 100px;
margin: 0 auto;
background: url(/photos/252154067_yKZ56-L.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader
(enabled=true, sizingmethod=image, src='/photos/252154067_yKZ56-L.png');
}

Add to your CSS

#navcontainer {
position: relative;
margin: 0 auot;
left: 190px;
}

#bioBox {background: none !important;}


In your header html add the red.

<li><a href="http://NorthernExpanse.smugmug.com">Links</a>
</li></ul>
</div>
<hr width="750">


Change the red in your CSS

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ccc;
background-color: #0F0F0F;
}

[NorthernExpanse]

[quote=Allen][quote=NorthernExpanse] Try this and see if you like it.



WOW - this is so nearly where I want it to be! :clap

The header is still a little high. Could I get it down a bit?

The navbar is still slightly below. I'd really like it at the same level, just on the right hand side of the page. I think that way the whole thing would make the page a little shorter again, without having to scroll down slightly (not that anybody would, but...)
The line underneath it all is cool, but once the navbar has moved over, could it be just a little longer?

One more thing - My header only shows on my homepage and the galleries page, but when I go to the individual galleries it shows the smugmug symbol, and then there is no link back to the homepage or galleries.

This is so nice of you to help me with all of this. It's getting very exciting. :barb Although it's still mega confusing for me. I've been at this all day.

[Allen]

[quote=Allen][quote=NorthernExpanse] Try this and see if you like it.
WOW - this is so nearly where I want it to be! :clap

The header is still a little high. Could I get it down a bit?

The navbar is still slightly below. I'd really like it at the same level, just on the right hand side of the page. I think that way the whole thing would make the page a little shorter again, without having to scroll down slightly (not that anybody would, but...)
The line underneath it all is cool, but once the navbar has moved over, could it be just a little longer?

One more thing - My header only shows on my homepage and the galleries page, but when I go to the individual galleries it shows the smugmug symbol, and then there is no link back to the homepage or galleries.

This is so nice of you to help me with all of this. It's getting very exciting. :barb Although it's still mega confusing for me. I've been at this all day. Check and make sure in your galleries under "customize gallery" that
"custom" is checked for appearance and hide owner is not checked. You're
CSS will not be active without it.

Stretch your browser window right and left and watch your menu move.
Too narrow and it overrides your banner. Too get your menu even with
your banner the page would have to be at least 990px wide.

[NorthernExpanse]

[quote=NorthernExpanse][quote=Allen] Check and make sure in your galleries under "customize gallery" that
"custom" is checked for appearance and hide owner is not checked. You're
CSS will not be active without it.

Stretch your browser window right and left and watch your menu move.
Too narrow and it overrides your banner. Too get your menu even with
your banner the page would have to be at least 990px wide.

So, does that mean that no matter what I do to my banner + navbar, it will never stay the same, if viewed on different size screens? That seems weird. What's the point in designing a page the way you want it then. :scratch

Also, what part of the code was for the length of the line?

Thank you so much.

[Allen]

[quote=Allen][quote=NorthernExpanse]

So, does that mean that no matter what I do to my banner + navbar, it will never stay the same, if viewed on different size screens? That seems weird. What's the point in designing a page the way you want it then. :scratch

Also, what part of the code was for the length of the line?

Thank you so much.
In your header html is the length .... err width.

<hr width="750">


The nav is locked relative to center with margin:0 auto; and adding the position relative allows the left: 190px; to position it on the right side.
With this the nav stays in relative page position when stretching.


Oops, might ah misspelled auto and the left needs slight adjustment then.

#navcontainer {
position: relative;
margin: 0 auto;
left: 190px;
}

[NorthernExpanse]

Thanks for all your help, Allen. I really appreciate it.

I won't, however, promise that I won't ask again. :D

[jnjphotography]

:lust Can anyone help me out? I followed the instructions closely and still having a hard time to display my header. Here is the current code on my site.

.smuglogo {
width: 300px !important;
height: 60px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://jnjphotography.smugmug.com/photos/254347167_FvZsx-O.png) !important;
}
.smuglogo[class] {
background-image: url(http://jnjphotography.smugmug.com/photos/254347167_FvZsx-O.png) !important;
}
/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}

When I log into my account on smugmug. I can see my header fine but when I log off and view it on other computers the header is blank. I also checked to display header above but for some reason each time I log back in it resets to nothing. Let me know thanks. Also, how can I position the header to the left of the page? Thanks and Happy V-day.

[Andy]

:lust Can anyone help me out? I followed the instructions closely and still having a hard time to display my header. Here is the current code on my site.

.smuglogo {
width: 300px !important;
height: 60px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://jnjphotography.smugmug.com/photos/254347167_FvZsx-O.png) !important;
}
.smuglogo[class] {
background-image: url(http://jnjphotography.smugmug.com/photos/254347167_FvZsx-O.png) !important;
}
/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}

When I log into my account on smugmug. I can see my header fine but when I log off and view it on other computers the header is blank. I also checked to display header above but for some reason each time I log back in it resets to nothing. Let me know thanks. Also, how can I position the header to the left of the page? Thanks and Happy V-day.
Hi, you have external links off in the gallery that is holding your graphic. Set them to "yes" and you'll be all set. (Gallery tools>customize gallery)

[jnjphotography]

Hi, you have external links off in the gallery that is holding your graphic. Set them to "yes" and you'll be all set. (Gallery tools>customize gallery)

Possibleto align the graphic to the left of every page instead of mid center?

[Andy]

Possibleto align the graphic to the left of every page instead of mid center?
http://jnjphotography.smugmug.com/gallery/4318167_EnmhX/1/253187381_VUW98#253187381

?

[NWMtnGuy]

I followed the instructions in Andy's original post verbatim and my custom logo shows up perfectly. However, the links from the standard SmugMug header (home | login | help) are no longer present.

I am trying to do two things: First, I would like to get those links back in the header. Second, I would like to change the text of the links and where they link to. Is this possible?

http://www.dalebaskin.com

Thanks!
Dale

[rainforestphoto]

This is not working for me at all.

I have followed everything I can, and my best educated guess as to why it isnt is that I simply do not know what img name to put into the code.

In Andy's example, "http://www.smugmug.com/photos/imagename.png" is all well and good, but since everyone else's are some horrid SQL pointer, I cannot figure out what to put in there.

This is the image I would like to use:


http://rainforestphoto.smugmug.com/gallery/4222672_S4zS5#312067532_i2rVi-A-LB

My current CSS:


.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://rainforestphoto.smugmug.com/gallery/4222672_S4zS5#312067532_i2rVi-A-LB') !important;
}

.smuglogo[class] {
background-image: url(http://rainforestphoto.smugmug.com/gallery/4222672_S4zS5#312067532_i2rVi-A-LB) !important;
}


Any ideas?

TIA.

- Lance

PS: I have it working with the image located on an outside server, but that is kind of a kludge, imo.

[collegephotoguy]

This is not working for me at all.

I have followed everything I can, and my best educated guess as to why it isnt is that I simply do not know what img name to put into the code.

In Andy's example, "http://www.smugmug.com/photos/imagename.png" is all well and good, but since everyone else's are some horrid SQL pointer, I cannot figure out what to put in there.

This is the image I would like to use:


http://rainforestphoto.smugmug.com/gallery/4222672_S4zS5#312067532_i2rVi-A-LB

My current CSS:


.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://rainforestphoto.smugmug.com/gallery/4222672_S4zS5#312067532_i2rVi-A-LB') !important;
}

.smuglogo[class] {
background-image: url(http://rainforestphoto.smugmug.com/gallery/4222672_S4zS5#312067532_i2rVi-A-LB) !important;
}


Any ideas?

TIA.

- Lance

PS: I have it working with the image located on an outside server, but that is kind of a kludge, imo.


I am having this same issue. Does anyone have an answer? Any help is appreciated. Thanks.

[dpollitt]

I am having this same issue. Does anyone have an answer? Any help is appreciated. Thanks.

Try this url instead: http://www.smugmug.com/photos/312067532_i2rVi-O.jpg

You were linking to the gallery view not the image source.

DPollitt

[photoshoot]

OK so not everyone needs or wants a big banner on their site. But they'd still like a bit of customization. How about this? Take a look at http://andydemo.smugmug.com

How-to? First, make a small logo that will replace the SmugMug logo, upper left of the page. Size? Oh about 200x25, but it could be more or less in height, and width. It can be a graphic, or just text. If you want some help with a text logo, simply follow the instructions we use for making a watermark, which are here (http://dgrin.smugmug.com/gallery/1690196).

OK, once you have your small "logo," you need some CSS trickery to replace the SmugMug logo with yours. Put THIS CODE Into your CSS BOX.

(DO NOT INCLUDE THE YELLOW ASTERISK - it's only used so that the code shows up properly here)


.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:*DXImageTransform.Microsoft.AlphaImageLoade r(enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/94264798-O.png') !important;
}

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

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}

OK. Now, let's make that new logo "clickable," back to your homepage always. Add this in your javascript:

NOTE: Change the "nickname" to your SmugMug nickname. Change the YOURtitlehere to be the text you want to appear when mouse hovers over your new logo. Put THIS CODE into your Javascript Box.


// change the link on the SmugMug Logo

YE.onAvailable('homelink', function(e) {
this.href = "http://nickname.smugmug.com/";
this.firstChild.alt = "YOURtitlehere";
this.firstChild.title = "YOURtitlehere";
});

// removes the pipes characters in the toolbar header

YE.onAvailable('toolbar', function(e) {
this.innerHTML = this.innerHTML.replace(new RegExp(/\|/g),"");
});


Be sure that you check "display SmugMug header above my custom header" to YES.

You can see this at http://andydemo.smugmug.com

Many thanks to JT for the new Yahoo Javascript goodness, and for doing the javascript on this little hack :)

Thanks, Andy for the idea to put a blog in a gallery on your site....I did that and it worked (although if you look at it....it's a bit off centered on my site....Now I just need to know how to link that gallery to my navbar.....I tried using the share button to get the link code....but that didn't work. Before I ran across your article, I was trying to just link my BLOG section in my navbar to the blogsite....but that wasn't working either.

This is what I was doing for that.....and it wasn't working

This is what I have in the navbar code currently for that:
<li><a href="/gallery/http://www.beyondathousandwords.blogspot.com/">Blog</a></li>
</ul>
</div>

my site with smugmug is www.beyondathousandwords.com

[Allen]

Thanks, Andy for the idea to put a blog in a gallery on your site....I did that and it worked (although if you look at it....it's a bit off centered on my site....Now I just need to know how to link that gallery to my navbar.....I tried using the share button to get the link code....but that didn't work. Before I ran across your article, I was trying to just link my BLOG section in my navbar to the blogsite....but that wasn't working either.

This is what I was doing for that.....and it wasn't working

This is what I have in the navbar code currently for that:
<li><a href="/gallery/http://www.beyondathousandwords.blogspot.com/">Blog</a></li>
</ul>
</div>

my site with smugmug is www.beyondathousandwords.com (http://www.beyondathousandwords.com)
Change the blog link to this.

<li><a href="/gallery/5782519_BQEmN">Blog</a></li>


Add this to CSS to remove nophotos message.

.gallery_5782519 .nophotos h3 {display:none;}

... and turn off sharing under customize gallery to hide "share photo" button.

[photoshoot]

Change the blog link to this.

<li><a href="/gallery/5782519_BQEmN">Blog</a></li>


Add this to CSS to remove nophotos message.

.gallery_5782519 .nophotos h3 {display:none;}

... and turn off sharing under customize gallery to hide "share photo" button.

Thanks! And i was able to figure out how to center it by myself....I'm learning slowly :)

[photoshoot]

Change the blog link to this.

<li><a href="/gallery/5782519_BQEmN">Blog</a></li>


Add this to CSS to remove nophotos message.

.gallery_5782519 .nophotos h3 {display:none;}

... and turn off sharing under customize gallery to hide "share photo" button.

Allen,

I've messed something up on this while updating something else. I'm trying to link my blog back to my Web site through the use of my navbar. I tried re-following these directions, but something's messed up with the code. What happened is I accidently deleted the blog gallery, had to add a completely new one and now the linking is not working.

Can you help or someone help?

www.beyondathousandwords.com

[Allen]

Allen,

I've messed something up on this while updating something else. I'm trying to link my blog back to my Web site through the use of my navbar. I tried re-following these directions, but something's messed up with the code. What happened is I accidently deleted the blog gallery, had to add a completely new one and now the linking is not working.

Can you help or someone help?

www.beyondathousandwords.com (http://www.beyondathousandwords.com) Your navbar link to your blog is working, get that solved?

Remove the red part of these, only the gallery number is used in CSS.

.gallery_5849627_M2U5S .nophotos h3 {display:none;}

.gallery_5757597_UWs3q/1/355941544_kFBiN #albumDescription a {text-decoration: none;}

[photoshoot]

Your navbar link to your blog is working, get that solved?

Remove the red part of these, only the gallery number is used in CSS.

.gallery_5849627_M2U5S .nophotos h3 {display:none;}

.gallery_5757597_UWs3q/1/355941544_kFBiN #albumDescription a {text-decoration: none;}

Yeah, I eventually figured most out by myself last night after trial and error. Thanks very much for responding with the above information, to finish what I couldn't figure out!

[TrishPix]

so, i tried creating a logo and when I click submit I see it, but after updating and going into visitor view i don't see the logo i created. what am i doing wrong?

www.trishpix.smugmug.com

[Allen]

:lustso, i tried creating a logo and when I click submit I see it, but after updating and going into visitor view i don't see the logo i created. what am i doing wrong?

www.trishpix.smugmug.com (http://www.trishpix.smugmug.com)
Make sure the gallery it's in has external links on and the photo is not checked
hide. Also gallery can be unlisted but no password.

[402photography.com]

If I copy and paste the two snippets of code, I would have to change the two links pointing towards where I uploaded the banner that I created, correct? Do I click on the banner in my gallery and then click "share", "get link"? I tried this and entered the full url into the code, but it does not seem to work. What am I doing wrong?

Thanks in advance.

402photography.com

[402photography.com]

If I copy and paste the two snippets of code, I would have to change the two links pointing towards where I uploaded the banner that I created, correct? Do I click on the banner in my gallery and then click "share", "get link"? I tried this and entered the full url into the code, but it does not seem to work. What am I doing wrong?

Thanks in advance.

402photography.com

Can someone tell me how to get rid of the green 402photography on the home page? I found a code that removes the "'s" and "home".

[402photography.com]

Can someone tell me how to get rid of the green 402photography on the home page? I found a code that removes the "'s" and "home".

I guess you all figured I would read it somewhere. I did. Thanks anyway.

[MilanoKookie]

Can someone please help me? I've read all 7 pages of the thread to try to get what I want done..but no luck. I think I put too many codes and then deleted the important ones..not sure. I tried to make it look decent right now in case people look at it.

What I would like to do is get my page to look like Andy's, I love it! I'm trying to insert a small logo on the left hand side (it's there, but it's all black and I can't see it) and put my nav bar on the right side (it's on the bottom right now) and then a line below it. I'd also like to remove the Search bar on the top.

Thanks in advance!!! :D
www.milanaphotography.com

[Allen]

Can someone please help me? I've read all 7 pages of the thread to try to get what I want done..but no luck. I think I put too many codes and then deleted the important ones..not sure. I tried to make it look decent right now in case people look at it.

What I would like to do is get my page to look like Andy's, I love it! I'm trying to insert a small logo on the left hand side (it's there, but it's all black and I can't see it) and put my nav bar on the right side (it's on the bottom right now) and then a line below it. I'd also like to remove the Search bar on the top.

Thanks in advance!!! :D
www.milanaphotography.com (http://www.milanaphotography.com)
Let's use a different method then the smlogo and default header.

On your customize page in your control panel check no for Smugmug header.

Replace the whole header with this.

<div id="my_header">

<div id="navcontainer">
<ul>
<li><a href="/galleries">GALLERY</a></li>
<li><a href="/gallery/4721022_vaYFo">RATES</a></li>
<li><a href="/Client%20Proofing">PROOFING</a></li>
<li><a href="/gallery/4081174">ABOUT ME</a></li>
<li><a href="/gallery/3856768">GUESTBOOK</a></li>
<li><a href="/gallery/4722107_wYZGc">CONTACT</a></li>
<li><a href="/gallery/7325290_Z6gKq">LINKS</a></li>
</ul>
</div> <!-- closes navcontainer -->

<div id="my_banner"> </div>

</div> <!-- closes my_header -->

Twizzled a bunch of stuff in your CSS so replace the whole thing with this.
New changes in bold. Removed the old header stuff.

/* right/left padding indents banner and nav in from ends of line */
#my_header {
margin: 10px 40px 15px; /* top right/left bottom*/
padding: 0 20px 5px; /* top right/left bottom*/
border-bottom: 1px solid #ccc;
}

#my_banner {
width: 400px;
height: 60px;
margin-left: -40px;
background: url(/photos/477483379_t8rSd-S.jpg) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/477483379_t8rSd-S.jpg');
}

#navcontainer {
float: right;
margin-top: 40px;
}

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

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em .5em;
color: #fff;
background: none;
font-weight: bold;
font-size: 11pt;
font-family: Comic Sans MS, verdana;
font-style: italic;
}

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




.shoppingcart {display: none;}


#bioBox .boxBottom {border: none; border-bottom: none !important;}
#bioBox .boxTop {border-left: none !important;}
#bioBox {border-top: none !important;}


#bioBox .photo {display: none;}


#feeds {
display:none;
}
/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}
/* turn off the login link on the minifooter */
.loginLink {
display: none;
}

/* hides your name (including any 's) */
#userName {
display: none;
}

/* hides the word home */
#userHome {
display: none;
}

/* remove the 's */
.possess {
display: none;
}

/* html only page for gallery 4721022 */
.gallery_4721022 .nophotos {
display: none;
}
.gallery_4721022 .pageNav {
display: none;
}

/* html only page for gallery 4081174 */
.gallery_4081174 .nophotos {
display: none;
}
.gallery_4081174 .pageNav {
display: none;
}

/* html only page for gallery 4722013 */
.gallery_4722013 .nophotos {
display: none;
}
.gallery_4722013 .pageNav {
display: none;
}

/* html only page for gallery 4722107 */
.gallery_4722107 .nophotos {
display: none;
}
.gallery_4722107 .pageNav {
display: none;
}

/* html only page for gallery 7325290 */
.gallery_7325290 .nophotos {
display: none;
}
.gallery_7325290 .pageNav {
display: none;
}


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

.galleries #bioBox {
display: none;
}

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


.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[MilanoKookie]

THANK YOU SO MUCH ALLEN, THAT DEFINITELY DID THE TRICK!!
HAVE A GREAT WEEKEND,
MILANA :clap

[Rocketman766]

I followed the instructions here and have had about 90% success. When customers view my site while using Vista, the SmugMug header (link) is visible over my customer header. When using XP, Windows 2000, Firefox browser or Safari on my mac, it looks perfect... Did I miss something or is this just a Vista issue? Sorry if this has been answered before, I honestly searched for this prior to this post... Thanks.

[Allen]

I followed the instructions here and have had about 90% success. When customers view my site while using Vista, the SmugMug header (link) is visible over my customer header. When using XP, Windows 2000, Firefox browser or Safari on my mac, it looks perfect... Did I miss something or is this just a Vista issue? Sorry if this has been answered before, I honestly searched for this prior to this post... Thanks.
Did you remove your new header stuff? Don't see any html or CSS for it.
If you add it back in we can troubleshoot it.

[Rocketman766]

Did you remove your new header stuff? Don't see any html or CSS for it.
If you add it back in we can troubleshoot it.

I hope I didn't post in the wrong area or call it the wrong name.... I still have everything in there so that my site name appears in the upper left corner of the page instead of "smugmug"...

here is a copy of what is in my CSS box:

.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://gymstarphotos.smugmug.com/photos/478501352_kG4zo-S.png) !important;
}
.smuglogo[class] {
background-image: url(http://gymstarphotos.smugmug.com/photos/478501352_kG4zo-S.png (http://gymstarphotos.smugmug.com/photos/478501352_kG4zo-S.png)) !important;
}
/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}


and now here is what I have in my top java script box:

// change the link on the SmugMug Logo
YE.onAvailable('homelink', function(e) {
this.href = "http://gymstarphotos.smugmug.com/ (http://gymstarphotos.smugmug.com/)";
this.firstChild.alt = "Mygymstarphotos home page";
this.firstChild.title = "Mygymstarphotos home page";
});
// removes the pipes characters in the toolbar header
YE.onAvailable('toolbar', function(e) {
this.innerHTML = this.innerHTML.replace(new RegExp(/\|/g),"");
});

I hope this helps...

[Allen]

I hope I didn't post in the wrong area or call it the wrong name.... I still have everything in there so that my site name appears in the upper left corner of the page instead of "smugmug"...

here is a copy of what is in my CSS box:

.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://gymstarphotos.smugmug.com/photos/478501352_kG4zo-S.png) !important;
}
.smuglogo[class] {
background-image: url(http://gymstarphotos.smugmug.com/photos/478501352_kG4zo-S.png (http://gymstarphotos.smugmug.com/photos/478501352_kG4zo-S.png)) !important;
}
/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}

...

I hope this helps...
Missing one little ' , see red.

.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image
src='http://gymstarphotos.smugmug.com/photos/478501352_kG4zo-S.png') !important;
}

[Rocketman766]

wow, you guys are great...thanks. I made the change, can't look at it since I don't have a vista machine, but I MORE than trust you guys...thanks for your help.

[theabbot]

I've added a transparent banner, but for some reason, the background of the banner shows as white. Any ideas how to correct this?
http://thetolbertgallery.smugmug.com

[Allen]

I've added a transparent banner, but for some reason, the background of the banner shows as white. Any ideas how to correct this?
http://thetolbertgallery.smugmug.com
Are you sure you saved it as a transparent png before upload?

Change your whole CSS to this, you have duplicates, plain text without
comment tags around it and things not needed if not using default Smugmug header.

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(/photos/486592111_dGKpw-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader
(enabled=true, sizingmethod=image, src='/photos/486592111_dGKpw-O.png');
}

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

#bioBox .photo {
display: none;
}

[cElements]

[quote=rainforest1155]You almost had it. Instead of using the gallery link to the photo, you need use the direct photo link:
http://northernexpanse.smugmug.com/photos/252104471_BxW3z-M.jpg

You can get this link easily by going to the photo in the gallery and then click on the 'share photo' link above the photo. After selecting 'for blogs/forums/etc.' you should be a list of links.




I had my custom header working fine but then I added more code from Andy's demo site and I can't see my custom header or the smugmug logo now. I have deleted everything and retried to get it to show up to no avail. Cannot figure out what I'm doing wrong. Got the direct link and pasted that in the url but I still can't see any header or logo from my home page. Please help!

www.candidelements.com

here is the code I have now...

.smuglogo {
width: 600px !important;
height: 100px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://www.candidelements.com/photos/486389943_SrcEU-S.png') !important;
}

.smuglogo[class] {
background-image: url(http://www.candidelements.com/photos/486389943_SrcEU-S.png) !important;
}

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}

Thank you!!!

[Allen]

[quote=rainforest1155]You almost had it. Instead of using the gallery link to the photo, you need use the direct photo link:
http://northernexpanse.smugmug.com/photos/252104471_BxW3z-M.jpg

You can get this link easily by going to the photo in the gallery and then click on the 'share photo' link above the photo. After selecting 'for blogs/forums/etc.' you should be a list of links.




I had my custom header working fine but then I added more code from Andy's demo site and I can't see my custom header or the smugmug logo now. I have deleted everything and retried to get it to show up to no avail. Cannot figure out what I'm doing wrong. Got the direct link and pasted that in the url but I still can't see any header or logo from my home page. Please help!

www.candidelements.com (http://www.candidelements.com)

here is the code I have now...

...

Thank you!!!
Looks like you just turned off the default Smugmug header on the customize
page in your control panel.

[cElements]

Thanks Allen! That's what it was, I can now see my logo...

another question though... how do I get my customer header and my nav bar to sit on top of the line that runs horizontally across my site, currently the header and nav bar are sitting high above the line and I'd like them to sit right on top of that line.

2nd question, how do I get my home page to be black & white like my information page is? When I change my theme to Elegant > Black & White it completely alters the centering of my slide show and the line that runs under my header.

Thank you!

[MilanoKookie]

Allen,

I need your help again please. My page looks great viewing with Safari, no problems at all, but I just realized in IE, my drop down Nav Bar doesn't work at all. The last 2 options "Contact" and "Praises" don't even hover red and are not links. Can you help tweak the coding for IE browsers pretty please? :D

Thanks so much in advance.
www.milanaphotography.smugmug.com

[hunter349]

hello, I am trying to do a header like the one on andy's demo site. so far i think i have turned myself around somewhere. The logo dosent show up but it has replaced the smugmug one.
Here is my site: www.chphotographic.smugmug.com

I have my Logo that I created in the css code, but im not sure if I did it right.
I have the photo uploaded to a unlisted gallery on my site and have placed the url to it in the code...was this the right way to go?

here is a copy of the css:
.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://chphotographic.smugmug.com/gallery/7575711_vdagj#489676347_2j7Fo-A-LB') !important;
}

.smuglogo[class] {
background-image: url(http://chphotographic.smugmug.com/gallery/7575711_vdagj#489676347_2j7Fo-A-LB) !important;
}

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}

also is there a way to remove the gray lines in the header and the search, color and view cart options from up there as well?

Thanks

[Allen]

Allen,

I need your help again please. My page looks great viewing with Safari, no problems at all, but I just realized in IE, my drop down Nav Bar doesn't work at all. The last 2 options "Contact" and "Praises" don't even hover red and are not links. Can you help tweak the coding for IE browsers pretty please? :D

Thanks so much in advance.
www.milanaphotography.smugmug.com (http://www.milanaphotography.smugmug.com)
IE requires a link on every line, add the bold. It's a filler that won't click on.

<li><a class="drop" href="#nopick">PRAISES

[Allen]

Thanks Allen! That's what it was, I can now see my logo...

another question though... how do I get my customer header and my nav bar to sit on top of the line that runs horizontally across my site, currently the header and nav bar are sitting high above the line and I'd like them to sit right on top of that line.

2nd question, how do I get my home page to be black & white like my information page is? When I change my theme to Elegant > Black & White it completely alters the centering of my slide show and the line that runs under my header.

Thank you!
You are using the standard Smugmug header and it has a line under it for
different themes. Homepage has none and you're seeing the biobox top
borders. See if removing them looks better.

Add to CSS

#bioBox .boxTop,
#bioBox {border: none !important;}

[Allen]

hello, I am trying to do a header like the one on andy's demo site. so far i think i have turned myself around somewhere. The logo dosent show up but it has replaced the smugmug one.
Here is my site: www.chphotographic.smugmug.com (http://www.chphotographic.smugmug.com)

I have my Logo that I created in the css code, but im not sure if I did it right.
I have the photo uploaded to a unlisted gallery on my site and have placed the url to it in the code...was this the right way to go?

here is a copy of the css:
.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://chphotographic.smugmug.com/gallery/7575711_vdagj#489676347_2j7Fo-A-LB') !important;
}

.smuglogo[class] {
background-image: url(http://chphotographic.smugmug.com/gallery/7575711_vdagj#489676347_2j7Fo-A-LB) !important;
}

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}

also is there a way to remove the gray lines in the header and the search, color and view cart options from up there as well?

Thanks
You have a gallery page link in there and need a photo link. Try changing this

http://chphotographic.smugmug.com/gallery/7575711_vdagj#489676347_2j7Fo-A-LB

like this

http://chphotographic.smugmug.com/photos/489676347_2j7Fo-L.jpg

Click the share button and you'll see all the photo size links.

[kefkafloyd]

First, this was great, it really helped me get it to where I want to be by replacing the Smug logo. However, I don't know how to align the search, cart, etc nav parts to the bottom along with the image's bottom.

http://dvincent.smugmug.com/

Is this possible using this method or will I have to roll my own navbar to do a div align=bottom? Thanks.

[hunter349]

You have a gallery page link in there and need a photo link. Try changing this

http://chphotographic.smugmug.com/gallery/7575711_vdagj#489676347_2j7Fo-A-LB

like this

http://chphotographic.smugmug.com/photos/489676347_2j7Fo-L.jpg

Click the share button and you'll see all the photo size links.

Thanks Allen. That seems to have fixed the problem. The Logo is being cut off however. Could you offer any advice for that? How do I go about removing the gray dividing lines in the header?

www.chphotographic.smugmug.com

I appreciate all the help everyone has given me so far.

[Allen]

First, this was great, it really helped me get it to where I want to be by replacing the Smug logo. However, I don't know how to align the search, cart, etc nav parts to the bottom along with the image's bottom.

http://dvincent.smugmug.com/

Is this possible using this method or will I have to roll my own navbar to do a div align=bottom? Thanks.
See if adding this to CSS aligns it.

#toolbar {margin-top: 50px;}

[Allen]

Thanks Allen. That seems to have fixed the problem. The Logo is being cut off however. Could you offer any advice for that? How do I go about removing the gray dividing lines in the header?

www.chphotographic.smugmug.com (http://www.chphotographic.smugmug.com)

I appreciate all the help everyone has given me so far.
Need to increase height. Also you have a * in progid:*DXImageTransform. Change to the red.

.smuglogo {
width: 200px !important;
height: 35px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://chphotographic.smugmug.com/photos/489676347_2j7Fo-L.png') !important;
}

[hunter349]

Once again Thanks Allen. I also noticed That my with was off as well when i was changing the css.

[kefkafloyd]

See if adding this to CSS aligns it.

#toolbar {margin-top: 50px;}

Allen, you are the man. I knew it was something like that. :bow

[doingcool]

i can't get it. The logo looks so small
http://fai-11.smugmug.com/

[Petris]

noobie need help :rolleyes

-How i can adjust my Sm replacement text location like Andy's demo site? (top left corner)



-how i can find my galleries address?
( http://dgrin.smugmug.com/gallery/1932803)

petris.smugmug.com

[dianamarie]

...How do I go about removing the gray dividing lines in the header?


I've looked around, and I can't find where this question was answered. I've removed the "Help", "Login", etc. links using the code in the very first post, but now the dividing lines are still showing. I really just want to have the cart link displayed with none of the other items. Any help?

Thanks,
Diana

[thisbejonas]

Ok something didnt go right for me. The smuglogo is mixed in with my banner. My banner is still somewhat centered, suddenly I have a search box which was not there before and I dont want, my navbar is now on the left side going down instead of across. I basically want it set like the example sight is but with the stretchy slideshow. Any help with what Im doing wrong. Thanks http://justashotinthedark.com

[Allen]

Ok something didnt go right for me. The smuglogo is mixed in with my banner. My banner is still somewhat centered, suddenly I have a search box which was not there before and I dont want, my navbar is now on the left side going down instead of across. I basically want it set like the example sight is but with the stretchy slideshow. Any help with what Im doing wrong. Thanks http://justashotinthedark.com
Remove the ' behind you image.

.smuglogo {
width: 500px !important;
height: 100px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src=http://justashotinthedark.com/photos/640313579_SHMyo-O.png') !important;
}

[thisbejonas]

Ok got the * removed and that got rid of the smuglogo but its still centered and now the navbar is back to horizontal but it is below the header.

[Allen]

Ok got the * removed and that got rid of the smuglogo but its still centered and now the navbar is back to horizontal but it is below the header.
"set like the example sight" :scratch ... and where would that be? :D

[thisbejonas]

"set like the example sight" :scratch ... and where would that be? :D


the example site at the beginning of this thread ......
http://andydemo.smugmug.com/

[MilanoKookie]

Hi,

I have just significantly updated my Nav Bar, but of course it got messed up :(

My "BLOG" menu is going below to the 2nd line and I need it to stay on the top. I keep messing with the px numbers in CSS, but I'm just not getting anywhere everytime I change the numbers around.

I want to create equal spacing in between my menu items on the top and make sure it all fits on one line.

Please help...thanks in advance!!!

www.milanaphotography.smugmug.com

[Allen]

Hi,

I have just significantly updated my Nav Bar, but of course it got messed up :(

My "BLOG" menu is going below to the 2nd line and I need it to stay on the top. I keep messing with the px numbers in CSS, but I'm just not getting anywhere everytime I change the numbers around.

I want to create equal spacing in between my menu items on the top and make sure it all fits on one line.

Please help...thanks in advance!!!

www.milanaphotography.smugmug.com (http://www.milanaphotography.smugmug.com)
The width in this controls the size of the nav container with the buttons, if too small what doesn't fit wraps to the next line. 580px works in Firefox.

.menu {
position: relative;
float: right;
margin-top: 20px;
display: block;
z-index: 99;
height: 20px; /* menu container (div .menu) */
width: 580px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
}

[MilanoKookie]

Allen, you're the greatest!!!!!! Thank you, thank you..thank you!

Happy Halloween!!!

Milana

The width in this controls the size of the nav container with the buttons, if too small what doesn't fit wraps to the next line. 580px works in Firefox.

.menu {
position: relative;
float: right;
margin-top: 20px;
display: block;
z-index: 99;
height: 20px; /* menu container (div .menu) */
width: 580px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
}

[JenSkoog]

Logo help and Client Galleries link
Hi, This forum is great. I've been able to do all of my customization so far from this forum. A few things are tripping me up: :dunno

1.) Logo. I replaced the Smugmug logo with my own with a png file so the brown color would show through . . . I made sure it was resized to 350x 106 px (at 300 px/in resolution, not that that really matters ?) . . . my jpg logo worked fine but only problem was it has the white background that I do not want.
I made sure I changed the link to "-O.png" at the end in my CSS . . . what gives??



2.) I have my galleries page separate from my homepage, but I would like to have a separate galleries page for my client galleries only (under the Proofs link) How do I do that?

3.) I have blue color text when I open up a gallery (to show the page number, etc) How do I change this specific text to white? (#FFFFFF)

Thanks so much!
Jennifer

(website is jenskoog.smugmug.com)
__________________

This is a copy of my original post: this should be the "correct" thread it goes under.

Thanks for any insight . . .

[moose135]

This is a copy of my original post: this should be the "correct" thread it goes under.
Not sure if you saw my reply to your original post, so I'll copy it here...

2.) I have my galleries page separate from my homepage, but I would like to have a separate galleries page for my client galleries only (under the Proofs link) How do I do that?
How about creating a "Proofs" category, then assigning the client galleries into that category. Then your menu link would be something like:

jenskoog.smugmug.com/proofs

3.) I have blue color text when I open up a gallery (to show the page number, etc) How do I change this specific text to white? (#FFFFFF)
Use this CSS Code:
#categoryTitle,
#galleryTitle {
color: #FFFFFF !important;
}

ETA: For your logo, I think you may need to save it as a gif with a transparent background. I've done that a couple of times, I don't know if changing the extension on the jpg will remove the background.

[JenSkoog]

Thank You! I got the separate clients link taken care of! Knew it had to be something simple like that . . .:D

The "Page _ / _" Navigations at the top of my smugmug view style is still showing up in green color, however.

And when I save the logo in transparent GIF it still automatically goes to a white background. This is such a puzzling issue becuase my jpg logo (with a brown print/white background) in the same exact dimensions (350px x 106px) lined up pefectly! What to do?:dunno

I really appreciate your help!




Not sure if you saw my reply to your original post, so I'll copy it here...


How about creating a "Proofs" category, then assigning the client galleries into that category. Then your menu link would be something like:

jenskoog.smugmug.com/proofs


Use this CSS Code:
#categoryTitle,
#galleryTitle {
color: #FFFFFF !important;
}
ETA: For your logo, I think you may need to save it as a gif with a transparent background. I've done that a couple of times, I don't know if changing the extension on the jpg will remove the background.

[Allen]

...
1.) Logo. I replaced the Smugmug logo with my own with a png file so the brown color would show through . . . I made sure it was resized to 350x 106 px (at 300 px/in resolution, not that that really matters ?) . . . my jpg logo worked fine but only problem was it has the white background that I do not want.
I made sure I changed the link to "-O.png" at the end in my CSS . . . what gives??

...
Use this template for your banner. The filter is needed for IE to
display a png correctly. Make sure to enter the correct photo dimensions.

#my_banner {
width: 750px;
height: 100px;
margin: 0 auto; /* or margin: 0; if floating with navbar */
background: url(/photos/xxxxxxxx_xxxxx-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/xxxxxxxx_xxxxx-O.png');
}

[JenSkoog]

Thanks, Allen. I tried that but, unfortunately, no change . . .( I'm using firefox because IE does not work on my computer . . .)

hmmmm. Any other insights?

FYI: Currently here is my CSS for header/ banner:

#my_banner {
width: 350px !important;
height: 106px !important;
margin-left: -40px; /* or margin: 0; if floating with navbar */
background: url('http://www.jenniferskoog.com/photos/699198170_FrMec-O.png') no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://www.jenniferskoog.com/photos/699198170_FrMec-O.png');
}

/* right/left padding indents banner and nav in from ends of line */
#my_header {
margin: 10px 40px 15px; /* top right/left bottom*/
padding: 0px 40px 5px; /* top right/left bottom*/
border-bottom: 2px solid #FFFFFF;
}
/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;


And modified my custom header html: to include the a href and img src . . .


<div id="my_banner"><a href="http://www.jenniferskoog.com"><img src="http://www.jenniferskoog.com/photos/699198170_FrMec-O.png" width="350" height="106" border="0" /></a> </div>

But now my logo is even more messed up looking !!!!!????

I see others simply replace the smugmug logo with their own, but somehow my current format was working for the jpeg, but now not the png when I changed by background. Maybe it's something to do with my margins? Why does a png file behave so differently? :(

Thanks!!


Use this template for your banner. The filter is needed for IE to
display a png correctly. Make sure to enter the correct photo dimensions.

#my_banner {
width: 750px;
height: 100px;
margin: 0 auto; /* or margin: 0; if floating with navbar */
background: url(/photos/xxxxxxxx_xxxxx-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/xxxxxxxx_xxxxx-O.png');
}

[Allen]

Thanks, Allen. I tried that but, unfortunately, no change . . .( I'm using firefox because IE does not work on my computer . . .)

hmmmm. Any other insights?

FYI: Currently here is my CSS for header/ banner:

#my_banner {
width: 350px !important;
height: 106px !important;
margin-left: -40px; /* or margin: 0; if floating with navbar */
background: url('http://www.jenniferskoog.com/photos/699198170_FrMec-O.png') no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://www.jenniferskoog.com/photos/699198170_FrMec-O.png');
}

/* right/left padding indents banner and nav in from ends of line */
#my_header {
margin: 10px 40px 15px; /* top right/left bottom*/
padding: 0px 40px 5px; /* top right/left bottom*/
border-bottom: 2px solid #FFFFFF;
}
/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;


And modified my custom header html: to include the a href and img src . . .


<div id="my_banner"><a href="http://www.jenniferskoog.com"><img src="http://www.jenniferskoog.com/photos/699198170_FrMec-O.png" width="350" height="106" border="0" /></a> </div>

But now my logo is even more messed up looking !!!!!????

I see others simply replace the smugmug logo with their own, but somehow my current format was working for the jpeg, but now not the png when I changed by background. Maybe it's something to do with my margins? Why does a png file behave so differently? :(

Thanks!!
Change these three CSS rules like this and see if it's all good.

#my_banner {
width: 400px;
height: 122px;
margin:0;
background: url(/photos/656051669_FMzPg-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/656051669_FMzPg-O.png');
}

/* right/left padding indents banner and nav in from ends of line */
#my_header {
margin: 10px 20px 15px; /* top right/left bottom*/
padding: 0px 20px 10px; /* top right/left bottom*/
border-bottom: 2px solid #FFFFFF;
}

#navcontainer {
float: right;
margin-top: 105px;
}

[JenSkoog]

Thanks, Allen! You are a genius! :clapSaved me days of frustration!



Change these three CSS rules like this and see if it's all good.

#my_banner {
width: 400px;
height: 122px;
margin:0;
background: url(/photos/656051669_FMzPg-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/656051669_FMzPg-O.png');
}

/* right/left padding indents banner and nav in from ends of line */
#my_header {
margin: 10px 20px 15px; /* top right/left bottom*/
padding: 0px 20px 10px; /* top right/left bottom*/
border-bottom: 2px solid #FFFFFF;
}

#navcontainer {
float: right;
margin-top: 105px;
}

[JenSkoog]

Hi Allen (or other SmugMug hero)-

I recently had my logo revised and would like to replace it with my old logo header.
Problem is, after you so nicely helped me fix the old one, I tried to add the new one with the same sort of problem. It will not view appropriately. :cry

The png file is 300px by 86px. I am trying to keep the entire height of the header less than or equal to 86px.

Any insights to make my new logo appear correctly? Thanks SO much!
~~~
Current CSS for my banner/nav container includes:



#my_banner {
width: 300px;
height: 86px;
margin:0;
background: url(http://www.jenniferskoog.com/photos/720169734_J7PB3-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/656051669_FMzPg-O.png');
}

/* right/left padding indents banner and nav in from ends of line */
#my_header {
margin: 10px 20px 15px; /* top right/left bottom*/
padding: 0px 20px 10px; /* top right/left bottom*/
border-bottom: 2px solid #FFFFFF;
}

#homepage {width:806px;}
#userBio {
text-align: center !important;
margin-left: -10px;
}

#navcontainer {
float: right;
margin-top: 75px;}

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

~~~

[surfnshane]

You forgot the part about clicking "display the smugmug header above my custom header" to yes.

You have my demo graphic there now, you'll want to change that :thumb




----I can't seem to get it to grab my logo, right now it's blank. I uploaded the logo image to my watermark gallery and pointed to it in the code you provided. How should I be uploading the original graphic?


Sorry, here's the code I have:



.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enable d=true,
sizingMethod=image src='http://amateur2prophoto.smugmug.com/Other/Watermarks/Watermarks/10398751_4rndT#723904740_VDt6v') !important;
}

.smuglogo[class] {
background-image: url(http://amateur2prophoto.smugmug.com/Other/Watermarks/Watermarks/10398751_4rndT#723904740_VDt6v) !important;
}

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}

[Allen]

----I can't seem to get it to grab my logo, right now it's blank. I uploaded the logo image to my watermark gallery and pointed to it in the code you provided. How should I be uploading the original graphic?


Sorry, here's the code I have:



.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enable d=true,
sizingMethod=image src='http://amateur2prophoto.smugmug.com/Other/Watermarks/Watermarks/10398751_4rndT#723904740_VDt6v') !important;
}

.smuglogo[class] {
background-image: url(http://amateur2prophoto.smugmug.com/Other/Watermarks/Watermarks/10398751_4rndT#723904740_VDt6v) !important;
}

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;} You have a gallery link in these, change to the photo link as show below.

.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enable d=true,
sizingMethod=image src='http://amateur2prophoto.smugmug.com/photos/723904740_VDt6v-O.png') !important;
}

.smuglogo[class] {
background-image: url(http://amateur2prophoto.smugmug.com/photos/723904740_VDt6v-O.png) !important;
}

[JenSkoog]

Hi there,

me again.

I am wanting to condense my header a bit . . . I want it "resting" on top of the main sideshow in my new homepage: http://www.jenniferskoog.com/Other/New-Homepage/10852552_rpoKZ/

I want to eliminate the extra space.

My main sideshow currently is 800 px wide, but the other info/about galleries are 890 px wide (html only galleries), so I need the header to be approx 890 px wide, too . . .

is this possible?

Thanks a bunch!!

Jennifer

[TPshooter]

Hi Andy I love what you did with the nav bar on your demo web site and where it is . Do you by any chance have the code.
Yhanks a lot
JM

[alvidziune]

hey guys ... How do I remove the smugmug logo on the home page ( slide show )

www.alvidagroom.com

I have changed the smugmug logo to false and the logo is still there...

<html>
<script>
var ssConfig = {
AlbumID: '13800715',
AlbumKey: 'f3ta9',
newWindow: 'false',
transparent: 'true',
splash: 'http://www.smugmug.com/img/ria/ShizamSlides/smugmug_black.png',
showLogo: 'false',

showThumbs: 'false',
showButtons: 'true',
crossFadeSpeed: '350'
};

InsertStretchySlideshow(ssConfig);(900, 900, ssConfig, "transparent");
</script>


</script>
</html>


thank you for all the help

[denisegoldberg]

hey guys ... How do I remove the smugmug logo on the home page ( slide show )
You specified that you want to display the smug log with this slideshow parameter:
splash: 'http://www.smugmug.com/img/ria/ShizamSlides/smugmug_black.png',
Replace the splash with one of your own images or remove it entirely.

--- Denise

[alvidziune]

....YEPPPEEEEE .....it worked...:) !!!

THANK YOU...... I'm so not computer geek .... but you make it so easy !!!!


www.alvidagroom.com

[Freddie]

Hi,

I followed the instructions on the first page but can't seem to get this to work. Can someone check it out please? It would be much appreciated as I am trying to develop my site into one which looks more professional.

My site is www.freddieridge.com

Thanks

[Freddie]

Can anyone help with the problem posted above, if you need more info please let me know!

[toobpix]

CLEAR! Reviving an old thread here, but I was trying this out and managed to get the logo to go away, but my logo is not there. I have tried using a .png and .jpg to no avail. Has Smugmug ceased this operation or am I doing something wrong? Thanks advanced for you help.

[J Allen]

CLEAR! Reviving an old thread here, but I was trying this out and managed to get the logo to go away, but my logo is not there. I have tried using a .png and .jpg to no avail. Has Smugmug ceased this operation or am I doing something wrong? Thanks advanced for you help.


Got a direct link to the image your trying to use.

[jfriend]

CLEAR! Reviving an old thread here, but I was trying this out and managed to get the logo to go away, but my logo is not there. I have tried using a .png and .jpg to no avail. Has Smugmug ceased this operation or am I doing something wrong? Thanks advanced for you help.This is a very outdated way to do a custom header and I would not recommend using it. It's trivial to do a custom header using Easy Customizer now. Just turn off the Smugmug header (also in Easy Customizer) and specify your banner image in Easy Customizer.

[toobpix]

http://www.smugmug.com/gallery/17275723_NZ8QQK#1316312971_73s4nn7-A-LB <---jpg

http://www.smugmug.com/gallery/17275723_NZ8QQK#1316308850_h2gbjct <---.png

[toobpix]

Ya I kinda thought since this is an old thread that it might not work anymore :/ but it was worth a try :) thanks again

[J Allen]

http://www.smugmug.com/gallery/17275723_NZ8QQK#1316312971_73s4nn7-A-LB <---jpg

http://www.smugmug.com/gallery/17275723_NZ8QQK#1316308850_h2gbjct <---.png

If you decide to try this out, you would need to turn sharing on for that gallery...then use the share button to get the actual image link.

[jfriend]

Ya I kinda thought since this is an old thread that it might not work anymore :/ but it was worth a try :) thanks againThe point I was trying to make is that this is not the best way to do any sort of customization any more. There are much more modern tools that are both easier to use and easier to understand.

[toobpix]

If you decide to try this out, you would need to turn sharing on for that gallery...then use the share button to get the actual image link.

Got it! I knew I was forgetting something, dang share button! Thanks

jfriend thanks for the info I will surely look into the other tools that you are speaking of. Lord knows how many threads I have read from all your customization posts.

Thanks again!

[sorrisoph]

:dunno
I followed the steps however and this may be a really stupid questions but keep in mind i am not technical at all.. but it's saying Andy in my custom logo lol how do i build my OWN logo

:scratch
OK so not everyone needs or wants a big banner on their site. But they'd still like a bit of customization. How about this? Take a look at http://andydemo.smugmug.com

How-to? First, make a small logo that will replace the SmugMug logo, upper left of the page. Size? Oh about 200x25, but it could be more or less in height, and width. It can be a graphic, or just text. If you want some help with a text logo, simply follow the instructions we use for making a watermark, which are here (http://dgrin.smugmug.com/gallery/1690196).

OK, once you have your small "logo," you need some CSS trickery to replace the SmugMug logo with yours. Put THIS CODE Into your CSS BOX.

(DO NOT INCLUDE THE YELLOW ASTERISK - it's only used so that the code shows up properly here)


.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:*DXImageTransform.Microsoft.AlphaImageLoade r(enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/94264798-O.png') !important;
}

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

/* this part hides the your photos/home, login and help links */

#toolbar a.nav {display: none;}


OK. Now, let's make that new logo "clickable," back to your homepage always. Add this in your Javascript:

NOTE: Change the "nickname" to your SmugMug nickname. Change the YOURtitlehere to be the text you want to appear when mouse hovers over your new logo. Put THIS CODE into your Javascript Box.


// change the link on the SmugMug Logo

YE.onAvailable('homelink', function(e) {
this.href = "http://nickname.smugmug.com/";
this.firstChild.alt = "YOURtitlehere";
this.firstChild.title = "YOURtitlehere";
});

// removes the pipes characters in the toolbar header

YE.onAvailable('toolbar', function(e) {
this.innerHTML = this.innerHTML.replace(new RegExp(/\|/g),"");
});



Be sure that you check "display SmugMug header above my custom header" to YES.

You can see this at http://andydemo.smugmug.com

Many thanks to JT for the new Yahoo Javascript goodness, and for doing the javascript on this little hack :)

[rsquared]

:dunno
I followed the steps however and this may be a really stupid questions but keep in mind i am not technical at all.. but it's saying Andy in my custom logo lol how do i build my OWN logo

:scratch

The logo is set in the first box you quoted... Change http://www.smugmug.com/photos/94264798-O.png to the image you want to use.

[Kingdomphoto]

So, the Smugmug logo shows on the upper left side whenever I go into any of my galleries...how do I get rid of it? Can that space be left empty or does something have to go on there to replace the logo? My site is www.kingdomphoto.us