Thanks to Denise and this ever so helpful thread, I'm bloggin'!

http://cynthiamerzerphotography.blogspot.com/

Go check it out. Feedback and suggestions are always appreciated.

Originally Posted by PHOTOK OK I found one problem that I can't figure out how to fix. I'd appreciate anyone's suggestions on this. If you go to my blog: http://kseansports.blogspot.com/ and float over the Galleries menu you'll see that the background of this item turns blue. That is what I want. But when you move your cursor down the list, the Galleries element loses its background. However, on my real site (hosted on SM) the Galleries retains its blue background in this case. The CSS is the same - although I did have to make a few tweaks to get it to work on blogger.com. You can get to my real site by clicking the "Home" link or the banner at the top of the blog.

The dropdown background color on both your smug site and your blog is gray for me. If you want the background color on the drop to be blue - I found that it was blue if I removed one entry from this CSS:

/* 2nd Level Hover */
.menu ul ul a:hover {
color:                 rgb(215,25,32); /* Red */
background:            rgb(35, 35, 35);
font-style:            normal;
text-decoration:       none;
}

With this, the dropdown background in blue:

 
/* 2nd Level Hover */
.menu ul ul a:hover {
color:                 rgb(215,25,32); /* Red */
font-style:            normal;
text-decoration:       none;
}

--- Denise

Originally Posted by CynthiaM Thanks to Denise and this ever so helpful thread, I'm bloggin'! http://cynthiamerzerphotography.blogspot.com/ Go check it out. Feedback and suggestions are always appreciated.

Very nice Cynthia.

I see you've used blogger's picture icon to place photos on your blog. There's nothing wrong with that, but if you want clicking the photos on your blog to go back to your smug site you might consider using the embed code from Share... Get a link. You can see how that behaves on my blog.

--- Denise

Originally Posted by denisegoldberg Very nice Cynthia. I see you've used blogger's picture icon to place photos on your blog. There's nothing wrong with that, but if you want clicking the photos on your blog to go back to your smug site you might consider using the embed code from Share... Get a link. You can see how that behaves on my blog. --- Denise

Thanks, Densie. I take your compliment to heart knowing that you have looked at countless blog pages. It's funny how these things evolve. My daughters encouraged us to get on Facebook so we could see photos that they put up on there so then one of them suggested that i make a Facebook page to promote my photography. Said it would allow me to keep my photography separate from pictures of Dad and the dog. But posts on FB pages are limited; I think there is a character limit so I had to use the Facebook note tool and integrate it to a post; it just was getting cumbersome. So then I thought about a blog because then I can write what I want and the share it on Facebook. That works.

As for your suggestion regarding the images, I'm aware of what you suggested but chose not to do it that way. I like the way if you click an image your way it takes you to the SM lightbox but I don't like when you close the lightbox, you are back on smugmug. And then the page back tool keeps backing you through smugmug, it doesn't take you to your blog. So I realized that if you bring in code for a larger sized image, you can then change the code in the blog html so it displays smaller on the blog, but still uses the larger image when you click on the image and it goes to the blog's lightbox.

Remember the issue I was having with the contact page? Couldn't get rid of the social media icons if the contact page code was dumped in as html on a post? There is another way to skin the cat. I made a contact page on my site and linked to that through the blog.

Once again, thanks for your help. Don't know if you do this as a volunteer but if you do, it's wonderful. My site wouldn't look the way it does without the help of all the folks who tend to these forums.

Best regards,
Cynthia

Originally Posted by CynthiaM ...As for your suggestion regarding the images, I'm aware of what you suggested but chose not to do it that way. I like the way if you click an image your way it takes you to the SM lightbox but I don't like when you close the lightbox, you are back on smugmug. And then the page back tool keeps backing you through smugmug, it doesn't take you to your blog. So I realized that if you bring in code for a larger sized image, you can then change the code in the blog html so it displays smaller on the blog, but still uses the larger image when you click on the image and it goes to the blog's lightbox. ... Once again, thanks for your help. Don't know if you do this as a volunteer but if you do, it's wonderful. My site wouldn't look the way it does without the help of all the folks who tend to these forums.

Your decision to keep viewers on your blog makes perfect sense. I just wanted to be sure you were aware of the other option.

I'm glad I was able to help. Yes, I am helping as a volunteer. There are a couple of people who help out here who work for smug (smug eric, and bobby hero), but most of us are volunteers.

--- Denise

Hi Denise

I've got my smugmug site where I want it (with Allen's help!) and am now trying to match my Blogger site... ok so far.

I'm having trouble now with the following;

1. Getting my header background to show on my Blog
2. Moving my header logo to the upper right (to match my SM site)
3. Positioning Navbar
4. Activating Navbar clickable links

Thanks in advance for your help!
Mark

Originally Posted by JodiCrandellPhotography ...am now trying to match my Blogger site... ok so far. I'm having trouble now with the following...

Start by moving your banner and navbar CSS so it is before

<div class="body-fauxcolumns">

You've placed it in the middle of the blog's structure. I don't know if that is causing the clickability problem, but it is causing the starting mismatch.

--- Denise

Originally Posted by denisegoldberg Start by moving your banner and navbar CSS so it is before <div class="body-fauxcolumns"> You've placed it in the middle of the blog's structure. I don't know if that is causing the clickability problem, but it is causing the starting mismatch. --- Denise

Thanks! I've moved the header & nav CSS down to the end of the blog structure, but still inside of the </b:template-skin>. When I put it after </b:template-skin>, I get a page full of XML code at the top of my blog.

No header background or clickable nav still.

Thanks for your help... and quick reply!
Mark

Originally Posted by JodiCrandellPhotography Thanks! I've moved the header & nav CSS down to the end of the blog structure, but still inside of the </b:template-skin>. When I put it after </b:template-skin>, I get a page full of XML code at the top of my blog. No header background or clickable nav still.

The nav is clickable for me now. But you will not be able to match the sites with the current placement of your banner and navbar inside of the blogger page.

You will also need to create a div that wraps around the banner and nav and reserves some vertical space for those components.

The CSS for your background image is

#my_header_background

yet you are referring to it in your HTML as

<div class="my_header-background"></div>

That may not be the entire problem, but the names need to match.

--- Denise

Originally Posted by denisegoldberg The nav is clickable for me now. But you will not be able to match the sites with the current placement of your banner and navbar inside of the blogger page. You will also need to create a div that wraps around the banner and nav and reserves some vertical space for those components. The CSS for your background image is #my_header_background yet you are referring to it in your HTML as <div class="my_header-background"></div> That may not be the entire problem, but the names need to match. --- Denise

Strange? Only the header logo is clickable for me... I tried both Safari & Chrome.

Thanks for the heads up on the typo. Fixed it, but looks like it still didn't show.


I really appreciate the help!
Mark

Originally Posted by JodiCrandellPhotography Strange? Only the header logo is clickable for me... I tried both Safari & Chrome.

Mark -
I don't really understand what is happening here, but I just did some more playing in the Firefox Web Developer Extension. I put your banner and navbar code as the first thing in the HTML section - before the tag I pointed out before. I had to change the order of the entries, putting the navbar code before your banner code. The background still doesn't show, but the entries are above the blog content and the navbar entries are clickable.

This is the order of the code that worked:

<div id="menucontainer">
<ul>
<li><a href="http://www.jodicrandellphotography.com/">HOME</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="http://www.jodicrandellphotography.com/ClientPhotos">CLIENTS</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="http://www.jodicrandellphotography.com/Portfolio">PORTFOLIO</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="http://jodicphoto.blogspot.com/">BLOG</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="http://www.jodicrandellphotography.com/gallery/19240960_G83vr2">RAVES</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a class="customContactButton" href="http://www.jodicrandellphotography.com/customcontact" onclick="return false;">CONTACT</a></li>
</ul>
</div>
<div class="my_header_background"></div>
<div class="my_banner_logo">
<a href="http://www.jodicrandellphotography.com">
<img src="http://www.jodicrandellphotography.c...-LTVHFw7-S.png">
</a>
</div>

You're going to need to experiment with the placement of the html in your blog. I'd recommend placing it as soon as you see the change from CSS to HTML in the template.

Once you get the placement right we should be able to figure out the background problem.

--- Denise

Thanks Denise, that's Awesome! It's clickable and looks great... now to tackle the background and a bit of positioning and it should look almost identical.

btw... I learned something about XML. It seems that Blogger is picky and doesn't accept "&nbsp", instead I've changed to "&#160"... with the same results as on smuggy! :)

Originally Posted by JodiCrandellPhotography Thanks Denise, that's Awesome! It's clickable and looks great... now to tackle the background and a bit of positioning and it should look almost identical. btw... I learned something about XML. It seems that Blogger is picky and doesn't accept "&nbsp", instead I've changed to "&#160"... with the same results as on smuggy! :)

Very cool! Just wanted to let you know, I won't be available to experiment with this until sometime over the weekend. Please post back if you figure it out in the meantime.

Blogger is picky! Thanks for the heads up on the &nbsp.

--- Denise

So I was able to get my nav bar working and a header on my blogger but they wont center right.
If they would just center right it would look great! Any ideas on how to fix it so they center?

www.lenapetersonphotography.com

http://lenapetersonphotography.blogspot.com/

Also if you know of anyway to get the blog and side bar one piece and the same width as the html pages on my smugmug site that would be amazing as well!

thank you so much!

Originally Posted by lenapetersonphotography So I was able to get my nav bar working and a header on my blogger but they wont center right. If they would just center right it would look great! Any ideas on how to fix it so they center? www.lenapetersonphotography.com http://lenapetersonphotography.blogspot.com/ Also if you know of anyway to get the blog and side bar one piece and the same width as the html pages on my smugmug site that would be amazing as well!

Start by using the same divs and sizes for your elements.

• In your smug site, your header is in the div #customLogo with a width of 1178px and a height of 205px.
• In your blog, your header shows as img #Header1_headerimg with a width of 869px and a height of 201px.

If you want to match the sites, start by using the same elements on both sites, same names, same sizes. That should give you the same placement on both sites.

You can adjust the width of your blog by changing the elements noted in the post
Stretchy blog format in this thread. You'll want to set the element #outer-wrapper to the width that you are after.

--- Denise

Originally Posted by JodiCrandellPhotography ...now to tackle the background and a bit of positioning and it should look almost identical.

It looks like there are still some blogger elements above your navbar, and it's those elements that are causing the navbar to drop a bit. Can you look again at the actual template and see if you can try another placement for the navbar?

You have my_header_background and my_banner_logo defined in your CSS as ids (with a #) but referenced in html as a class (with a .). If you change them to a class in the css the background will show, like this:

.my_header_background{
height: 50px;
padding: 0;
background: url(http://www.jodicrandellphotography.com/photos/i-DnGxG5k/2/Th/i-DnGxG5k-Th.png) repeat-x;
}
.my_banner_logo {
width: 400px;
height: 128px;
margin: 0;
background: url(http://www.jodicrandellphotography.com/photos/i-LTVHFw7/2/S/i-LTVHFw7-S.png) no-repeat;
}

You will also need to change the HTML placement from this:

<div class="my_header_background"></div>
<div class="my_banner_logo">
<a href="http://www.jodicrandellphotography.com">
<img src="http://www.jodicrandellphotography.c...-LTVHFw7-S.png">
</a>
</div>

to this:

<div class="my_header_background">
<div class="my_banner_logo">
<a href="http://www.jodicrandellphotography.com">
<img src="http://www.jodicrandellphotography.c...-LTVHFw7-S.png">
</a>
</div></div>

--- Denise

Now my drop down menu doesn't work any suggestions?!

Originally Posted by lenapetersonphotography Now my drop down menu doesn't work any suggestions?!

I suspect the problem is due to where you've placed the code in your blog - it looks like it is inside of some of the blogger divs. Your banner and navbar HTML should be placed before any of bloggers divs.

--- Denise

The only way I could get the nav bar HTML to work was to select a html widget to put the html code in when I try to put it in directly in the edit HTML code option it says my template could not be parsed as it is not well formed-

I am using this html code and tried putting it before
</b:template-skin>
</head>

here is the html code I am using that wont work.

<div class="menu">

<ul>

<!-- First Main Menu Item -->

<li><a class="drop" href="http://www.lenapetersonphotography.com" title="Lena Peterson Photography">Home<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<li><a href="http://www.lenapetersonphotography.com/Other/Contact/" title="Contact Me!">Get In Touch</a></li>
<li><a href="mailto:lenapetersonphotography@yahoo.com" title="Send Lena Email">Email Me</a></li>
<li><a href="http://www.facebook.com/lenapetersonphotography" title="Facebook">Facebook</a></li>
<li><a href="http://lenapetersonphotography.blogspot.com" title="Blog">Blog</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a class="drop" href="http://www.lenapetersonphotography.com/portfolio" title="Portfolio">Portfolio<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="http://www.lenapetersonphotography.com/portfolio/babies" title="Newborns & babies">Babies</a></li>
<li><a href="http://www.lenapetersonphotography.com/Portfolio/Bellies" title="Maternity">Bellies</a></li>
<li><a href="http://www.lenapetersonphotography.com/portfolio/Families" title="Family">The Fam</a></li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="" title="About">About<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="http://www.lenapetersonphotography.com/Other/About" title="The Photographer">Lena Peterson</a></li>
<li><a href="http://www.lenapetersonphotography.com/Other/Prices" title="Prices & Investment">Investment</a></li>
<li><a href="http://www.lenapetersonphotography.com/Other/Payment" title="How To Pay">Payment</a></li>
<li><a href="http://pinterest.com/lenapeterson/what-to-wear/" title="Some Style!">What To Wear</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.lenapetersonphotography.com/Other/Calendar" title="Lets Book It!">Calendar<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.lenapetersonphotography.com/Other/Prints" title="Order Art">Prints For Sale<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a class="drop" href="" title="Order Your prints!">Client Galleries<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="http://www.lenapetersonphotography.com/Other/Clients" title="Order Your Prints!">Client Galleries</a></li>
<li><a href="http://pinterest.com/lenapeterson/what-to-do-with-prints/" title="Get Creative!">What To Do With Prints</a></li>
<li><a class="drop" href="" title="Product Info">Products»<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->


<ul>
<li><a href="http://www.smugmug.com/prints/whcc-standouts">Standouts</a></li>
<li><a href="http://www.smugmug.com/prints/whcc-gallery-wraps">Gallery Wraps</a></li>
<li><a href="http://www.smugmug.com/prints/whcc-mounted-prints">Mounted Prints</a></li>
<li><a href="http://www.smugmug.com/prints/whcc-float-wraps">Float Wraps</a></li>

<li><a href="http://help.smugmug.com/customer/portal/articles/93268">Cropping</a></li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</div>
</div>
<!-- End Navbar Code -->

and it wont work

I put the CSS code for it under the
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}

I just need the navbar to work and I'm all done. Thank you so much for your responses and help and i really appreciate it!

Originally Posted by lenapetersonphotography The only way I could get the nav bar HTML to work was to select a html widget to put the html code in when I try to put it in directly in the edit HTML code option it says my template could not be parsed as it is not well formed

It doesn't matter where the CSS is located within the blog's CSS, but it does matter where you place the HTML.

I don't know if you can put your navbar into an HTML widget and have the same functionality as you do in your smug site. I guess it should work; I haven't seen a drop-down nav bar done that way.

If you can't save the code in your template that means there is an error in your code. You will need to review your HTML and make sure that the syntax is exactly correct. Every starting tag must be matched with an ending tag. (Smug lets you get away with HTML that isn't quite right; Blogger does not.)

--- Denise