Wow, this post is huge!

I searched around through the tips, and through some of the comments but looking at my smugmug code I am unsure what code I am suppose to be pasting to my blogger site for my navbar / header. I use the easybar nav from smugmug. The only thing I saw remotely close was:

#customLogo { background-color: transparent; background-image: url(http://byoshi.smugmug.com/photos/i-5...Pr3MLS-S.png); background-repeat: no-repeat; background-position: top left; cursor: pointer; }#customLogo, #customLogo a, #customLogo a:active, #customLogo a:hover, #customLogo a:visited { text-align: left !important; font-family: arial !important; font-size: 14px !important; color: #ffffff !important; text-decoration: none !important; }#customHeaderContainer { padding-top: 10px; margin: 0 auto; padding-left: 15px; padding-right: 15px; }#customNavContainer { text-align: right; }#customNav { font-family: Trebuchet MS !important; font-size: 14px; color: #FFFFFF !important; list-style-type: none; padding: 0; margin: 0; }#customNav li{ display: inline; }#customNav li a, #customNav li a:active, #customNav li a:visited, #customNav li a:link { font-family: Trebuchet MS !important; font-size: 14px; color: #FFFFFF !important; text-decoration: none !important; }#customNav li a:hover { font-family: Trebuchet MS !important; font-size: 14px; color: #F30707 !important; text-decoration: none !important; }#userName, #userHome { display: none; }#homepage #breadcrumb { background-color: transparent !important; border: none; margin-bottom: 5px; }

Not sure if that is right or wrong. If it is right, is that the CSS or the HTML part? I think I have the look of my blogger how I want it, besides the navbar as on my smugmug site.

Site: http://www.bay-photography.com/
Blog: http://bayphotos.blogspot.com/

Appreciate any guidance.

Thanks!

Originally Posted by byoshi Wow, this post is huge! I searched around through the tips, and through some of the comments but looking at my smugmug code I am unsure what code I am suppose to be pasting to my blogger site for my navbar / header. I use the easybar nav from smugmug. The only thing I saw remotely close was...

The information you need is in the first post of this thread, or is linked to from the first post.

The code that you pasted above is CSS. You only need the banner and navbar components, but you need both the CSS and the HTML.

--- Denise

Originally Posted by denisegoldberg 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

Originally Posted by denisegoldberg Add this to your CSS to remove the blank line at the top of your blog: #navbar-iframe, #navbar { display:none; } --- Denise

Perfect... thank you!

Hi Denise,

The code that you pasted above is CSS. You only need the banner and navbar components, but you need both the CSS and the HTML.

I think I pulled the relevant CSS and HTML.

I pasted the following CSS under my #navbar-iframe:

#customHeaderContainer { padding-top: 10px; margin: 0 auto; padding-left: 15px; padding-right: 15px; }
#customNavContainer { text-align: right; }
#customNav { font-family: Trebuchet MS !important; font-size: 14px; color: #FFFFFF !important; list-style-type: none; padding: 0; margin: 0; }
#customNav li{ display: inline; }
#customNav li a, #customNav li a:active, #customNav li a:visited, #customNav li a:link { font-family: Trebuchet MS !important; font-size: 14px; color: #FFFFFF !important; text-decoration: none !important; }
#customNav li a:hover { font-family: Trebuchet MS !important; font-size: 14px; color: #F30707 !important; text-decoration: none !important; }


and the following HTML above the <div class='main-outer'>:

<div id="customHeaderContainer"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><div id="customLogo" onclick="document.location.href='http://www.bay-photography.com/';"><a href="http://www.bay-photography.com/"><img src="http://byoshi.smugmug.com/photos/i-5Pr3MLS/0/S/i-5Pr3MLS-S.png" style="visibility: hidden;" border="0"></a></div></td><td><div id="customNavContainer"><ul id="customNav"><li><a href="http://bay-photography.com">Home</a></li><li>&nbsp;|&nbsp;</li><li><a href="http://bay-photography.com/galleries">Nature and Landscape Photo Galleries</a></li><li>&nbsp;|&nbsp;</li><li><a href="http://bay-photography.com/Other/My-Smug-Mug/18363379_gRnJ69">About</a></li><li>&nbsp;|&nbsp;</li><li><a href="http://bayphotos.blogspot.com/">Blog</a></li><li>&nbsp;|&nbsp;</li><li><a href="/customcontact">Contact me</a></li></ul></div></td></tr></tbody></table></div><div></div>


I am getting the following error:

Error parsing XML, line 759, column 365: The element type "img" must be terminated by the matching end-tag

I am assuming this is a problem with my HTML? I don't know how to read this, so excuse my ignorance.

Thanks!

Originally Posted by byoshi <img src="http://byoshi.smugmug.com/photos/i-5Pr3MLS/0/S/i-5Pr3MLS-S.png" style="visibility: hidden;" border="0"> I am getting the following error: Error parsing XML, line 759, column 365: The element type "img" must be terminated by the matching end-tag I am assuming this is a problem with my HTML? I don't know how to read this, so excuse my ignorance.

Yes, it's a problem with the <img src= statement in your HTML. It isn't properly ended. Blogger requires that all tags have a proper end; unfortunately smug lets some errors through.

Change the code above so it looks like this:

<img src="http://byoshi.smugmug.com/photos/i-5Pr3MLS/0/S/i-5Pr3MLS-S.png" style="visibility: hidden;" border="0"/>

It needs the slash before the end of the code.

--- Denise

Thanks that removed the error, however another one poped up:

Error parsing XML, line 759, column 495: The entity "nbsp" was referenced, but not declared. Is this because of the custom contact aref?

Not sure how many errors there are, as it does not list them all.

Again, thanks for your assistance.

Originally Posted by byoshi Thanks that removed the error, however another one poped up: Error parsing XML, line 759, column 495: The entity "nbsp" was referenced, but not declared. Is this because of the custom contact aref?

It's not because of the custom contact reference, but you can't use that contact outside of smug.

It doesn't like the &nbsp references in your navbar. The sections look like this:

<li>&nbsp;|&nbsp;</li>

Try replacing them with spaces instead, not sure if that will create the same spacing but it's worth a try.

--- Denise

Thanks Denise that fixed it. I played around with the spacing to make it match my smug nav. I will either remove the contact link from the blog or link it to a different contact form.

One other question (hopefully). I used the "display: none;" to hide the blogger header and description, but the custom navbar is still showing like it is inside of the blog box rather than a true header above everything. Is this because of where I placed the CSS? It does not match exactly as is right now, but its getting there.

Thanks!

Originally Posted by byoshi Thanks Denise that fixed it. I played around with the spacing to make it match my smug nav. I will either remove the contact link from the blog or link it to a different contact form. One other question (hopefully). I used the "display: none;" to hide the blogger header and description, but the custom navbar is still showing like it is inside of the blog box rather than a true header above everything. Is this because of where I placed the CSS? It does not match exactly as is right now, but its getting there.

It's showing inside of a blog box because that's where you placed it. Your HTML needs to be above all of the blogger HTML. Try putting it above the navbar HTML section (from blog).

--- Denise

It's showing inside of a blog box because that's where you placed it. Your HTML needs to be above all of the blogger HTML. Try putting it above the navbar HTML section (from blog).

Thank you! Appreciate all your help.

Originally Posted by byoshi Thank you! Appreciate all your help.

You're very welcome. And your blog is looking good!

--- Denise

Hi there,

I've read the earier part of this helpful thread, and I've gone into Firefox and looked via "Edit CSS," but for some reason I must be missing something -- can't find my nav bar or footer CSS.

This is to match up:

www.ariphoto.com
and
arischwartzphotography.blogspot.com

Tried more caffeine, but that hasn't quite helped yet. What am I missing?

(Thanks in advance!)

Originally Posted by globaltraveller I've read the earier part of this helpful thread, and I've gone into Firefox and looked via "Edit CSS," but for some reason I must be missing something -- can't find my nav bar or footer CSS. This is to match up: www.ariphoto.com and arischwartzphotography.blogspot.com

The CSS is visible in the Firefox Web Developer Extension in the edit CSS section. You will also need the corresponding HTML from the Miscellaneous... Edit HTML section.

I've attached a copy of the CSS and HTML in a file. You will need to copy it and paste it into the appropriate sections of your blog.

--- Denise

Originally Posted by denisegoldberg The CSS is visible in the Firefox Web Developer Extension in the edit CSS section. You will also need the corresponding HTML from the Miscellaneous... Edit HTML section. I've attached a copy of the CSS and HTML in a file. You will need to copy it and paste it into the appropriate sections of your blog. --- Denise

That worked! Thank you so much!! We're off and running...

Hi Denise, I have been trying to follow your instructions to try and customize my blog to look like my smugmug site. I have had success only until changing the logo... I just could not figure out how to bring my Navbar into my blog website. I am a complete newbie on this (had zero fundamentals).

Can you tell me how I can:
1. Obtain the html or CSS code for my Navbar on my website (http://thehumancamera.smugmug.com/)
2. Where to paste the html or CSS code in my blogger website

Thanks!

Originally Posted by vincentycwong Can you tell me how I can: 1. Obtain the html or CSS code for my Navbar on my website (http://thehumancamera.smugmug.com/) 2. Where to paste the html or CSS code in my blogger website

The answers to your questions are in the first post in this thread. It may be that you used the Easy Customizer. If you did, you will need to use a tool to view the code.

From that post:

Note: if you created your site using SmugMug's Easy Customizer, this code is not in the Advanced Site-Wide Customization screen. You will need to use the Firefox Web Developer Extension or an equivalent tool to find this code. If you've never used the Firefox web dev tool, there is a tutorial at http://dgrin.smugmug.com/gallery/1354921. You will find your code on the CSS tab with the name starting user_<your identifier>-stretch.css, and in the info brought up when you Edit HTML (again in web dev).

--- Denise

Hi, I tried to follow the instructions provided - but maybe it's because I am totally new to all this, even after spending hours and trying repeatedly I failed to make any progress. I confess, this is starting to feel frustrating.

Originally Posted by vincentycwong Hi, I tried to follow the instructions provided - but maybe it's because I am totally new to all this, even after spending hours and trying repeatedly I failed to make any progress. I confess, this is starting to feel frustrating.

I've attached the CSS and HTML from the banner and navbar on your smug site. Follow the notes in the first post of this thread to determine where to place it in your blog.

--- Denise

Hi Denise - thanks for your help. The codes needed a few tweaks... was glad I was able to figure it out. Thanks again.

I can't seem to nail down IE for my blog...the header looks good on my smugmug site, but on my blogger site it's a little off...and when viewed in IE it's not displaying the images. I can't seem to figure out what I'm missing....I think blogger has a css UL default setting somewhere that's killing my header in IE