Help with ideas from the Moon River Photography sample

[RaleighDavid]

So I like a few of the elements in the Moon River Photography "sample" that's used as an example in some of the tutorials - but I can't figure out how to do them myself.

http://www.ungarodesigns.com/smugmug.jpg

1. Owner Information in Upper Left - Is that the header or part of the navbar and how do I move it there?
2. Navbar all the war on the right - how do I do that?
3. How do I put the colored bar underneath my navbar?
4. How do I box in my slideshow with the same colored bar as in #3

THANKS for all help in advance! I love the SmugMug!!

[RaleighDavid]

Any takers on assistance with this one?

[denisegoldberg]

Take a look at http://andydemo.smugmug.com/.

Or if you're just getting started you could use the Easy Customizer - http://www.dgrin.com/showthread.php?t=129182.

You can also find links to tutorials and other helpful infomration in the >>> CUSTOMIZATION: Start here <<< sticky at the head of this forum. Here's a direct link to that entry - http://www.dgrin.com/showthread.php?t=52812.

--- Denise

[Andy]

Take a look at http://andydemo.smugmug.com/.


:nod it's all there :D

[RaleighDavid]

:nod it's all there :D

It is and it's AWESOME

A couple more questions:
1. My logo appears with IE but not with Firefox - is that normal??
2. How do I get a box around my slideshow on the front page?

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

THANKS!!!!!

[Andy]

It is and it's AWESOME

A couple more questions:
1. My logo appears with IE but not with Firefox - is that normal??


Where's a link to your logo?

2. How do I get a box around my slideshow on the front page?

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

THANKS!!!!!
I made mine in Photoshop.

[RaleighDavid]

Where's a link to your logo?

I made mine in Photoshop.

http://www.davidandjulieungaro.com/photos/561804589_nozsq-O.jpg

Made in Corel - same concept though. Just wondering why it works in IE but I get the SmugMug logo on Firefox.

[RaleighDavid]

still no luck with Firefox - any ideas?

[Andy]

still no luck with Firefox - any ideas?
add this to your body statement:

background: url(http://www.davidandjulieungaro.com/photos/561804589_nozsq-O.jpg) !important;

[RaleighDavid]

add this to your body statement:

background: url(http://www.davidandjulieungaro.com/photos/561804589_nozsq-O.jpg) !important;

Andy - I'm terribly sorry but my CSS doesn't have a body section. Should it look like this:

body {
(http://www.davidandjulieungaro.com/photos/561804589_nozsq-O.jpg) !important;[/quote];
}

[RaleighDavid]

add this to your body statement:

background: url(http://www.davidandjulieungaro.com/photos/561804589_nozsq-O.jpg) !important;

OK now that just put the header image all over the background (repeated over and over)...

The logo works in IE, not in Firefox or Safari. I tried moving the picture off smugmug to see if it was a link problem but that didn't fix it either.

This is the new link:
http://godaddy.davidandjulieungaro.com/images/smugmug-logo-1line.jpg

I have this in my css:

/* LOGO */
.smuglogo {
width: 450px !important;
height: 50px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=image src='http://godaddy.davidandjulieungaro.com/images/smugmug-logo-1line.jpg') !important;
}
/* --- */


And this in my top JS:

// change the link on the SmugMug Logo
YE.onAvailable('homelink', function(e) {
this.href = "http://www.davidandjulieungaro.com/";
this.firstChild.alt = "David and Julie's Photos";
this.firstChild.title = "David and Julie's Photos";
});

[RaleighDavid]

For reference this is my whole CSS section

/* LOGO */
.smuglogo {
width: 450px !important;
height: 50px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=image src='http://godaddy.davidandjulieungaro.com/images/smugmug-logo-1line.jpg') !important;
}
/* --- */
/* /galleries */
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {
display: block;
}
/*---*/
/* Andy's Demo 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;min-width: 755px;
width: auto;
}
h3.title,
#breadcrumb .title,
#lightBoxNav .title,
.homepage .boxTop .title,
.cartbuttons .title,
#comment_header .title {font-weight: normal !important; color: #8cca1e !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: #8cca1e;
}
#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;
}
/* --- */

[RaleighDavid]

any experts think of a reason why IE works fine for my logo but not on Firefox or Safari? Quite annoying - am I missing something?

[jfriend]

any experts think of a reason why IE works fine for my logo but not on Firefox or Safari? Quite annoying - am I missing something? Because you don't have the complete code from the tutorial for making this change and you have the wrong image height. You only have the code installed for IE.

Change this part of your CSS:

.smuglogo {
width: 450px !important;
height: 35px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=image src='http://godaddy.davidandjulieungaro.com/images/smugmug-logo-1line.jpg') !important;
}

to this:

.smuglogo {
width: 450px !important;
height: 50px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=image src='http://www.davidandjulieungaro.com/photos/561804589_nozsq-O.jpg') !important;
}

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

It would also be easier to help you if you put a link to your web-site in your dgrin signature so it's in all your posts. It was hard to find a post that had your site link in it.

[RaleighDavid]

Because you don't have the complete code from the tutorial for making this change and you have the wrong image height. You only have the code installed for IE.

Change this part of your CSS:

.smuglogo {
width: 450px !important;
height: 35px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=image src='http://godaddy.davidandjulieungaro.com/images/smugmug-logo-1line.jpg') !important;
}

to this:

.smuglogo {
width: 450px !important;
height: 50px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=image src='http://www.davidandjulieungaro.com/photos/561804589_nozsq-O.jpg') !important;
}

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

It would also be easier to help you if you put a link to your web-site in your dgrin signature so it's in all your posts. It was hard to find a post that had your site link in it.

Thank yoU! I didn't scroll down in the FAQ window to grab the bottom of the code.

THANKS!!

[RaleighDavid]

2 more questions about the AndyDemo site - or rather my site as it looks...

1. How do I get the accent colored box around the slideshow? There's not one on mine
2. Can I get rid of the "Buy/Slideshow/etc" buttons on my Guestbook page?

Thanks!

[bd4tru]

I just signed up with SmugMug. Like others, I'm trying to recreate Andy's site. I've followed the instructions to the "tee," I think; however, I can't get the logo to show up in my site: brettanddani.smugmug.com

I have tried different image locations, domains, etc. Please help!

As some background, the CSS code I'm tweaking is: "sizingMethod=image src='http://www.smugmug.com/photos/94264798-O.png') !important"

The image I'm trying to use is located at: http://brettanddani.smugmug.com/Gallery/Admin/12870440_VY27F#929043600_eAGwy-A-LB

I've tried substituting the "teal" portion for "929043600_eAGwy-A-LB" and also tried substituting "929043600_eAGwy-O-1.png" for the teal portion.

None of these is working. Can someone help me get the logo to post?

2 more questions about the AndyDemo site - or rather my site as it looks...

1. How do I get the accent colored box around the slideshow? There's not one on mine
2. Can I get rid of the "Buy/Slideshow/etc" buttons on my Guestbook page?

Thanks!

[jfriend]

I just signed up with SmugMug. Like others, I'm trying to recreate Andy's site. I've followed the instructions to the "tee," I think; however, I can't get the logo to show up in my site: brettanddani.smugmug.com

I have tried different image locations, domains, etc. Please help!

As some background, the CSS code I'm tweaking is: "sizingMethod=image src='http://www.smugmug.com/photos/94264798-O.png') !important"

The image I'm trying to use is located at: http://brettanddani.smugmug.com/Gallery/Admin/12870440_VY27F#929043600_eAGwy-A-LB

I've tried substituting the "teal" portion for "929043600_eAGwy-A-LB" and also tried substituting "929043600_eAGwy-O-1.png" for the teal portion.

None of these is working. Can someone help me get the logo to post?The method you are using is an old method. It can work, but I would not suggest you use it and it will never work when you've turned off the standard smugmug header (which you have).

It's much, much easier to attain the look you want using the newer tool Easy Customizer. Just go to the Easy Customizer in the Tools menu on the homepage and define whatever banner you want for your header. If you also define your navbar there, then you can simply use Easy Customizer to specify if you want them on the same line or one above the other. When obtaining a link to your image, you can use the Share button in the gallery to get the proper URL. For example, the URL should look something like this:

http://brettanddani.smugmug.com/Gallery/Admin/HeaderLogo/929043600_eAGwy-O-1.png

[bd4tru]

Wow, John. Thanks for the quick and helpful reply. I'm going to try that today! <fingers crossed>

The method you are using is an old method. It can work, but I would not suggest you use it and it will never work when you've turned off the standard smugmug header (which you have).

It's much, much easier to attain the look you want using the newer tool Easy Customizer. Just go to the Easy Customizer in the Tools menu on the homepage and define whatever banner you want for your header. If you also define your navbar there, then you can simply use Easy Customizer to specify if you want them on the same line or one above the other. When obtaining a link to your image, you can use the Share button in the gallery to get the proper URL. For example, the URL should look something like this:

http://brettanddani.smugmug.com/Gallery/Admin/HeaderLogo/929043600_eAGwy-O-1.png